[DEV-1361] Fix edit password card in user profile (#609)

* Fix edit password card in user profile * Add changeset --------- Co-authored-by: Marco Ponchia <[email protected]>
pagopa · Feb 14, 2024 · c571989 · c571989
1 parent 875b2cb
commit c571989
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 57 deletions.
diff --git a/.changeset/thick-pumas-eat.md b/.changeset/thick-pumas-eat.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix edit password card UX and UI in user profile section
diff --git a/apps/nextjs-website/src/components/organisms/Auth/EditPasswordForm.tsx b/apps/nextjs-website/src/components/organisms/Auth/EditPasswordForm.tsx
@@ -13,9 +13,9 @@ type EditPasswordFormProps = {
 };
 
 type Passwords = {
-  current_password: string;
-  new_password: string;
-  password_confirm: string;
+  currentPassword: string;
+  newPassword: string;
+  passwordConfirm: string;
 };
 
 export const EditPasswordForm = ({
@@ -25,24 +25,24 @@ export const EditPasswordForm = ({
   const t = useTranslations('profile');
   const [errors, setErrors] = useState<Partial<Passwords>>({});
   const [passwords, setPasswords] = useState<Passwords>({
-    current_password: '',
-    new_password: '',
-    password_confirm: '',
+    currentPassword: '',
+    newPassword: '',
+    passwordConfirm: '',
   });
 
   const validateForm = useCallback(() => {
-    const { current_password, new_password, password_confirm } = passwords;
+    const { currentPassword, newPassword, passwordConfirm } = passwords;
     // eslint-disable-next-line functional/no-let
     let err = {};
 
-    if (!current_password) {
-      err = { current_password: t('changePassword.requiredCurrentPassword') };
+    if (!currentPassword) {
+      err = { currentPassword: t('changePassword.requiredCurrentPassword') };
     }
 
-    if (!passwordMatcher.test(new_password)) {
-      err = { ...err, new_password: t('changePassword.passwordPolicy') };
-    } else if (new_password !== password_confirm) {
-      err = { ...err, new_password: t('changePassword.passwordsNotMatch') };
+    if (!passwordMatcher.test(newPassword)) {
+      err = { ...err, newPassword: t('changePassword.passwordPolicy') };
+    } else if (newPassword !== passwordConfirm) {
+      err = { ...err, newPassword: t('changePassword.passwordsNotMatch') };
     }
 
     setErrors(err);
@@ -60,15 +60,13 @@ export const EditPasswordForm = ({
 
   const handleSave = () => {
     if (!validateForm()) return;
-    onSave(passwords.current_password, passwords.new_password).catch(
-      (error) => {
-        if (error.code === 'NotAuthorizedException') {
-          setErrors({ current_password: t('changePassword.wrongPassword') });
-        } else {
-          console.error(error);
-        }
+    onSave(passwords.currentPassword, passwords.newPassword).catch((error) => {
+      if (error.code === 'NotAuthorizedException') {
+        setErrors({ currentPassword: t('changePassword.wrongPassword') });
+      } else {
+        console.error(error);
       }
-    );
+    });
   };
 
   const actions = (
@@ -107,25 +105,25 @@ export const EditPasswordForm = ({
         </Stack>
       </Stack>
       <PasswordTextField
-        id='current_password'
+        id='currentPassword'
         label={t('changePassword.currentPassword')}
-        hasError={Reflect.has(errors, 'current_password')}
-        helperText={errors.current_password}
-        value={passwords.current_password}
+        hasError={Reflect.has(errors, 'currentPassword')}
+        helperText={errors.currentPassword}
+        value={passwords.currentPassword}
         onChange={handlePasswordChange}
       />
       <PasswordTextField
-        id='new_password'
+        id='newPassword'
         label={t('changePassword.newPassword')}
-        value={passwords.new_password}
-        hasError={Reflect.has(errors, 'new_password')}
-        helperText={errors.new_password}
+        value={passwords.newPassword}
+        hasError={Reflect.has(errors, 'newPassword')}
+        helperText={errors.newPassword}
         onChange={handlePasswordChange}
       />
       <PasswordTextField
-        id='password_confirm'
+        id='passwordConfirm'
         label={t('changePassword.confirmPassword')}
-        value={passwords.password_confirm}
+        value={passwords.passwordConfirm}
         onChange={handlePasswordChange}
       />
       <Stack flexDirection='row' gap={4} display={{ xs: 'flex', md: 'none' }}>

diff --git a/apps/nextjs-website/src/components/organisms/Auth/PasswordTextField.tsx b/apps/nextjs-website/src/components/organisms/Auth/PasswordTextField.tsx
@@ -3,13 +3,12 @@ import {
   FormHelperText,
   IconButton,
   InputAdornment,
-  InputLabel,
   InputProps,
-  OutlinedInput,
   Stack,
+  TextField,
 } from '@mui/material';
-import { VisibilityOff, Visibility } from '@mui/icons-material';
-import { useState, MouseEvent } from 'react';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { MouseEvent, useState } from 'react';
 
 type PasswordTextFieldProps = {
   id: string;
@@ -35,36 +34,31 @@ export const PasswordTextField = ({
 
   return (
     <Stack spacing={2}>
-      <FormControl variant='outlined'>
-        <InputLabel error={hasError} htmlFor={id} sx={{ top: '-8px' }}>
-          {label}
-        </InputLabel>
-        <OutlinedInput
+      <FormControl variant='outlined' size={'small'}>
+        <TextField
           id={id}
           name={id}
           required
           type={showPassword ? 'text' : 'password'}
           onChange={onChange}
           error={hasError}
-          endAdornment={
-            <InputAdornment position='end'>
-              <IconButton
-                aria-label='toggle password visibility'
-                onClick={handleClickShowPassword}
-                onMouseDown={handleMouseDownPassword}
-                edge='end'
-              >
-                {showPassword ? <VisibilityOff /> : <Visibility />}
-              </IconButton>
-            </InputAdornment>
-          }
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position='end'>
+                <IconButton
+                  aria-label='toggle password visibility'
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge='end'
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
           value={password}
           label={label}
-          inputProps={{
-            sx: {
-              padding: '8.5px 14px',
-            },
-          }}
+          size={'small'}
         />
         <FormHelperText error={hasError}>{helperText}</FormHelperText>
       </FormControl>