Skip to content

Commit

Permalink
feat(web-office): add new design for changepassword
Browse files Browse the repository at this point in the history 
ref:MANAGER-16126

Signed-off-by: stif59100 <[email protected]>
  • Loading branch information
@stif59100
stif59100 committed Jan 23, 2025
1 parent 264da10 commit 9af141d
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 163 deletions.
12 changes: 6 additions & 6 deletions packages/manager/apps/web-office/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@
},
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@ovh-ux/manager-config": "^8.0.1",
"@ovh-ux/manager-config": "^8.0.2",
"@ovh-ux/manager-core-api": "^0.9.0",
"@ovh-ux/manager-core-utils": "^0.3.0",
"@ovh-ux/manager-module-order": "^0.9.2",
"@ovh-ux/manager-react-components": "^2.5.1",
"@ovh-ux/manager-react-core-application": "^0.11.4",
"@ovh-ux/manager-react-shell-client": "^0.8.4",
"@ovh-ux/manager-module-order": "^0.9.3",
"@ovh-ux/manager-react-components": "^2.6.2",
"@ovh-ux/manager-react-core-application": "^0.11.5",
"@ovh-ux/manager-react-shell-client": "^0.8.5",
"@ovh-ux/manager-tailwind-config": "^0.2.1",
"@ovh-ux/request-tagger": "^0.4.0",
"@ovh-ux/shell": "^4.1.1",
"@ovh-ux/shell": "^4.1.2",
"@ovhcloud/ods-components": "^18.4.1",
"@ovhcloud/ods-themes": "^18.4.1",
"@tanstack/react-query": "^5.51.21",
Expand Down
3 changes: 2 additions & 1 deletion packages/manager/apps/web-office/public/translations/common/Messages_fr_FR.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
"cta_confirm": "Valider",
"common_field_error_password": "Mot de passe invalide",
"common_field_error_confirm_password": "Les mots de passe doivent être identiques.",
"common_field_error_email": "Veuillez saisir une adresse email valide."
"common_field_error_email": "Veuillez saisir une adresse email valide.",
"common_field_label_mandatory": "Les champs mentionnés avec un astérisque * sont obligatoires."
}
31 changes: 14 additions & 17 deletions ...r/apps/web-office/public/translations/dashboard/users/change-password/Messages_fr_FR.json
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
{
"dashboard_users_change-password_title": "Modifier le mot de passe",
"dashboard_users_change-password_description": "Vous êtes sur le point de modifier le mot de passe de votre compte",
"dashboard_users_change-password_subdescription": "Voulez-vous continuez ?",
"dashboard_users_change-password_label1": "Mot de passe :",
"dashboard_users_change-password_label2": "Confirmation :",
"dashboard_users_change-password_label3": "Email :",
"dashboard_users_change-password_cta_cancel": "Annuler",
"dashboard_users_change-password_cta_confirm": "Confirmer",
"dashboard_users_change-password_helper1": "Attention, le mot de passe doit respecter les conditions suivantes :",
"dashboard_users_change-password_helper2": "Minimum 8 caractères",
"dashboard_users_change-password_helper3": "Maximum 16 caractères",
"dashboard_users_change-password_helper4": "Au moins 1 lettre minuscule, 1 lettre majuscule, 1 chiffre ou 1 caractère spécial",
"dashboard_users_change-password_email-edit-title": "Si vous ne renseignez pas de mot de passe, celui-ci sera généré aléatoirement et envoyé par email à l'adresse précisée",
"dashboard_users_change-password_email-edit": "Envoyer par email",
"dashboard_users_change-password_email-placeholder": "l'adresse email du contact admin",
"dashboard_users_change-password_message_error": "Une erreur s'est produite lors de la récupération des informations.",
"dashboard_users_change-password_message_success": "Votre changement de mot de passe a bien été pris en compte."
"dashboard_users_change_password_title": "Modifier le mot de passe",
"dashboard_users_change_password_radio_1": "Je génère un mot de passe aléatoire",
"dashboard_users_change_password_radio_2": "Je personnalise mon mot de passe",
"dashboard_users_change_password_label_password": "Nouveau mot de passe",
"dashboard_users_change_password_label_confirm_password": "Confirmation du nouveau mot de passe",
"dashboard_users_change_password_label_email": "Compte e-mail pour réception du mot de passe",
"dashboard_users_change_password_helper1": "Attention, le mot de passe doit respecter les conditions suivantes :",
"dashboard_users_change_password_helper2": "Minimum 8 caractères",
"dashboard_users_change_password_helper3": "Maximum 16 caractères",
"dashboard_users_change_password_helper4": "Au moins 1 lettre minuscule, 1 lettre majuscule, 1 chiffre ou 1 caractère spécial",
"dashboard_users_change_password_email-edit-title": "Si vous ne renseignez pas de mot de passe, celui-ci sera généré aléatoirement et envoyé par email à l'adresse précisée",
"dashboard_users_change_password_email-edit": "Envoyer par email",
"dashboard_users_change_password_message_error": "Une erreur s'est produite lors de la récupération des informations.",
"dashboard_users_change_password_message_success": "Votre changement de mot de passe a bien été pris en compte."
}
226 changes: 122 additions & 104 deletions .../manager/apps/web-office/src/pages/dashboard/users/ModalChangePasswordUsers.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useContext, useEffect, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import {
OdsCheckbox,
OdsFormField,
OdsInput,
OdsPassword,
OdsText,
OdsRadio,
} from '@ovhcloud/ods-components/react';
import {
ODS_BUTTON_VARIANT,
Expand All @@ -26,7 +26,7 @@ import { CHANGE_PASSWORD_USERS_FORM_SCHEMA } from '@/utils/formSchemas.utils';
import { UserChangePasswordType } from '@/api/api.type';

export default function ModalChangePasswordUsers() {
const { t } = useTranslation('dashboard/users/change-password');
const { t } = useTranslation(['dashboard/users/change-password', 'common']);
const navigate = useNavigate();
const goBackUrl = useGenerateUrl('..', 'path');
const onClose = () => navigate(goBackUrl);
Expand All @@ -36,19 +36,20 @@ export default function ModalChangePasswordUsers() {
const [searchParams] = useSearchParams();
const activationEmail = searchParams.get('activationEmail') || '';
const { addError, addSuccess } = useNotifications();
const [shouldSendMail, setShouldSendMail] = useState(true);
const [isAutomatic, setIsAutomatic] = useState(true);

const {
control,
handleSubmit,
trigger,
getValues,
formState: { isValid, errors },
setValue,
} = useForm({
defaultValues: {
password: '',
confirmPassword: '',
email: emailUser || '',
editEmail: false,
email: isAutomatic ? emailUser : '',
editEmail: '',
},
mode: 'onChange',
resolver: zodResolver(CHANGE_PASSWORD_USERS_FORM_SCHEMA),
Expand All @@ -60,7 +61,7 @@ export default function ModalChangePasswordUsers() {
onSuccess: () => {
addSuccess(
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
{t('dashboard_users_change-password_message_success')}
{t('dashboard_users_change_password_message_success')}
</OdsText>,
true,
);
Expand All @@ -69,7 +70,7 @@ export default function ModalChangePasswordUsers() {
onError: (error: ApiError) => {
addError(
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
{t('dashboard_users_change-password_message_error', {
{t('dashboard_users_change_password_message_error', {
error: error?.response?.data?.message,
})}
</OdsText>,
Expand All @@ -89,110 +90,147 @@ export default function ModalChangePasswordUsers() {
editPassword({
password,
notifyEmail: email,
shouldSendMail,
shouldSendMail: !!email,
});
};

const handleCancelClick = () => {
onClose();
};

const password = getValues('password');
const confirmPassword = getValues('confirmPassword');
return (
<Modal
title={t('dashboard_users_change-password_title')}
title={t('dashboard_users_change_password_title')}
isOpen
onClose={handleCancelClick}
isDismissible
secondaryButton={{
label: t('dashboard_users_change-password_cta_cancel'),
label: t('common:cta_cancel'),
action: handleCancelClick,
testid: 'cancel-btn',
variant: ODS_BUTTON_VARIANT.outline,
}}
primaryButton={{
label: t('dashboard_users_change-password_cta_confirm'),
label: t('common:cta_confirm'),
action: handleSubmit(handleSaveClick),
testid: 'confirm-btn',
isLoading: isSending,
isDisabled: !isValid,
}}
>
<form
className="flex flex-col text-left gap-y-5"
onSubmit={handleSubmit(handleSaveClick)}
>
<span>
<OdsText preset={ODS_TEXT_PRESET.heading6}>
{t('dashboard_users_change-password_description')}
</OdsText>
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
{t('dashboard_users_change-password_subdescription')}
</OdsText>
</span>
<form className="flex flex-col" onSubmit={handleSubmit(handleSaveClick)}>
<OdsFormField>
<span>
<OdsRadio
name="passwordAutomatic"
inputId="radio-automatic"
isChecked={isAutomatic}
onOdsChange={() => {
setValue('email', emailUser);
setIsAutomatic(true);
}}
data-testid="radio-automatic"
value="passwordAutomatic"
></OdsRadio>
<label htmlFor="radio-automatic" className="ml-4">
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
{t('dashboard_users_change_password_radio_1')}
</OdsText>
</label>
</span>
<span>
<OdsRadio
name="passwordManual"
inputId="radio-manual"
value="passwordManual"
isChecked={!isAutomatic}
onOdsChange={() => {
setValue('email', null);
setIsAutomatic(false);
}}
isRequired={isAutomatic}
data-testid="radio-manual"
></OdsRadio>
<label htmlFor="radio-manual" className="ml-4">
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
{t('dashboard_users_change_password_radio_2')}
</OdsText>
</label>
</span>
</OdsFormField>
{!isAutomatic && (
<>
<Controller
name="password"
control={control}
render={({ field: { name, value, onBlur, onChange } }) => (
<OdsFormField
className="mt-4"
error={errors?.password?.message}
>
<label slot="label">
{t('dashboard_users_change_password_label_password')}*
</label>
<OdsPassword
name={name}
value={value}
hasError={!!errors.password}
onOdsBlur={onBlur}
onOdsChange={onChange}
data-testid="input-password"
className="w-full"
/>
</OdsFormField>
)}
/>

<Controller
name="password"
control={control}
render={({ field: { name, value, onBlur, onChange } }) => (
<OdsFormField className="mt-4" error={errors?.password?.message}>
<label slot="label">
{t('dashboard_users_change-password_label1')}
</label>
<OdsPassword
name={name}
value={value}
hasError={!!errors.password}
onOdsBlur={onBlur}
onOdsChange={onChange}
data-testid="input-password"
/>
</OdsFormField>
)}
/>
<Controller
control={control}
name="confirmPassword"
render={({ field: { name, value, onBlur, onChange } }) => (
<OdsFormField
className="mt-4"
error={errors?.confirmPassword?.message}
>
<label slot="label">
{t(
'dashboard_users_change_password_label_confirm_password',
)}
*
</label>
<OdsPassword
name={name}
value={value}
hasError={!!errors.confirmPassword}
onOdsBlur={onBlur}
onOdsChange={onChange}
data-testid="input-confirm-password"
className="w-full"
/>
</OdsFormField>
)}
/>
<OdsText preset={ODS_TEXT_PRESET.paragraph}>
<div>{t('dashboard_users_change_password_helper1')}</div>
<ul className="mt-0">
<li>{t('dashboard_users_change_password_helper2')}</li>
<li>{t('dashboard_users_change_password_helper3')}</li>
<li>{t('dashboard_users_change_password_helper4')}</li>
</ul>
</OdsText>
</>
)}

<Controller
control={control}
name="confirmPassword"
name="email"
render={({ field: { name, value, onBlur, onChange } }) => (
<OdsFormField
className="mt-4"
error={errors?.confirmPassword?.message}
className="w-full mt-4 mb-4"
error={errors?.email?.message}
>
<label slot="label">
{t('dashboard_users_change-password_label2')}
</label>
<OdsPassword
name={name}
value={value}
hasError={!!errors.confirmPassword}
onOdsBlur={onBlur}
onOdsChange={onChange}
data-testid="input-confirm-password"
/>
</OdsFormField>
)}
/>
<OdsText preset={ODS_TEXT_PRESET.span}>
<div>{t('dashboard_users_change-password_helper1')}</div>
<ul>
<li>{t('dashboard_users_change-password_helper2')}</li>
<li>{t('dashboard_users_change-password_helper3')}</li>
<li>{t('dashboard_users_change-password_helper4')}</li>
</ul>
</OdsText>

<OdsText preset={ODS_TEXT_PRESET.heading6}>
{t('dashboard_users_change-password_email-edit-title')}
</OdsText>
<Controller
control={control}
name="email"
render={({ field: { name, value, onBlur, onChange } }) => (
<OdsFormField className="w-3/4" error={errors?.email?.message}>
<label slot="label">
{t('dashboard_users_change-password_label3')}
{t('dashboard_users_change_password_label_email')}
{isAutomatic && '*'}
</label>
<OdsInput
name={name}
Expand All @@ -202,34 +240,14 @@ export default function ModalChangePasswordUsers() {
onOdsBlur={onBlur}
onOdsChange={onChange}
type={ODS_INPUT_TYPE.email}
placeholder={t(
'dashboard_users_change-password_email-placeholder',
)}
isClearable
/>
</OdsFormField>
)}
/>
<Controller
control={control}
name="editEmail"
render={() => (
<OdsFormField className="w-3/4 inline-block">
<OdsCheckbox
name="editMail"
value={shouldSendMail ? 'true' : 'false'}
isChecked={shouldSendMail}
className="mr-4"
onOdsChange={(e) => setShouldSendMail(e.detail.checked)}
isDisabled={!password && !confirmPassword}
input-id="edit-email-label"
/>
<label htmlFor="edit-email-label">
{t('dashboard_users_change-password_email-edit')}
</label>
</OdsFormField>
)}
/>
<OdsText preset={ODS_TEXT_PRESET.caption}>
{t('common:common_field_label_mandatory')}
</OdsText>
</form>
</Modal>
);
Expand Down
Loading

0 comments on commit 9af141d

Please sign in to comment.