From 2513186d6ec0a4b788214ff3661145300b044e67 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 30 Oct 2024 14:12:14 +0100
Subject: [PATCH 1/2] fix: password icon use lock icon

---
 src/components/common/Adornments.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Adornments.tsx b/src/components/common/Adornments.tsx
index b6fd80f5..027829bc 100644
--- a/src/components/common/Adornments.tsx
+++ b/src/components/common/Adornments.tsx
@@ -1,4 +1,4 @@
-import { MailIcon, RectangleEllipsisIcon } from 'lucide-react';
+import { LockIcon, MailIcon } from 'lucide-react';
 
 import { InputAdornment } from '@mui/material';
 
@@ -9,6 +9,6 @@ export const EmailAdornment = (
 );
 export const PasswordAdornment = (
   <InputAdornment position="start" sx={{ color: 'inherit' }}>
-    <RectangleEllipsisIcon color="currentColor" />
+    <LockIcon color="currentColor" />
   </InputAdornment>
 );

From e58791ed31a3bc9c654f5132b66fbe5691dcadb6 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 30 Oct 2024 14:22:19 +0100
Subject: [PATCH 2/2] fix: make small adjustments

---
 src/components/common/Adornments.tsx          |  4 +-
 src/components/common/PasswordInput.tsx       | 39 ++++++++++---------
 .../requestPasswordReset/ResetPassword.tsx    | 23 ++++++++---
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/components/common/Adornments.tsx b/src/components/common/Adornments.tsx
index 027829bc..a93a6828 100644
--- a/src/components/common/Adornments.tsx
+++ b/src/components/common/Adornments.tsx
@@ -3,12 +3,12 @@ import { LockIcon, MailIcon } from 'lucide-react';
 import { InputAdornment } from '@mui/material';
 
 export const EmailAdornment = (
-  <InputAdornment position="start" sx={{ color: 'inherit' }}>
+  <InputAdornment position="start" color="inherit">
     <MailIcon color="currentColor" />
   </InputAdornment>
 );
 export const PasswordAdornment = (
-  <InputAdornment position="start" sx={{ color: 'inherit' }}>
+  <InputAdornment position="start" color="inherit">
     <LockIcon color="currentColor" />
   </InputAdornment>
 );
diff --git a/src/components/common/PasswordInput.tsx b/src/components/common/PasswordInput.tsx
index 4ea274c0..9798d3cb 100644
--- a/src/components/common/PasswordInput.tsx
+++ b/src/components/common/PasswordInput.tsx
@@ -25,25 +25,26 @@ export function PasswordInput({ id, error, form }: Props): JSX.Element {
 
   return (
     <StyledTextField
-      InputProps={{
-        startAdornment: PasswordAdornment,
-        endAdornment: (
-          <InputAdornment position="end" color="inherit">
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              //   onMouseDown={handleMouseDownPassword}
-              edge="end"
-              color="inherit"
-            >
-              {showPassword ? (
-                <EyeOffIcon color="currentColor" />
-              ) : (
-                <EyeIcon color="currentColor" />
-              )}
-            </IconButton>
-          </InputAdornment>
-        ),
+      slotProps={{
+        input: {
+          startAdornment: PasswordAdornment,
+          endAdornment: (
+            <InputAdornment position="end" color="inherit">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                edge="end"
+                color="inherit"
+              >
+                {showPassword ? (
+                  <EyeOffIcon color="currentColor" />
+                ) : (
+                  <EyeIcon color="currentColor" />
+                )}
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
       }}
       variant="outlined"
       error={Boolean(error)}
diff --git a/src/components/requestPasswordReset/ResetPassword.tsx b/src/components/requestPasswordReset/ResetPassword.tsx
index 09f24297..8acd4492 100644
--- a/src/components/requestPasswordReset/ResetPassword.tsx
+++ b/src/components/requestPasswordReset/ResetPassword.tsx
@@ -32,6 +32,7 @@ import {
 import { useValidateJWTToken } from '../../hooks/useValidateJWTToken';
 import { AUTH } from '../../langs/constants';
 import { getValidationMessage } from '../../utils/validation';
+import { PasswordAdornment } from '../common/Adornments';
 import { CenteredContent } from '../layout/CenteredContent';
 import { DialogHeader } from '../layout/DialogHeader';
 import { InvalidTokenScreen } from './InvalidTokenScreen';
@@ -124,14 +125,19 @@ export function ResetPassword() {
       >
         <TextField
           id={RESET_PASSWORD_NEW_PASSWORD_FIELD_ID}
+          slotProps={{
+            input: {
+              startAdornment: PasswordAdornment,
+            },
+            formHelperText: {
+              id: RESET_PASSWORD_NEW_PASSWORD_FIELD_ERROR_TEXT_ID,
+            },
+          }}
           {...register('password', {
             required: true,
             validate: (value) =>
               isPasswordStrong(value) || AUTH.PASSWORD_WEAK_ERROR,
           })}
-          FormHelperTextProps={{
-            id: RESET_PASSWORD_NEW_PASSWORD_FIELD_ERROR_TEXT_ID,
-          }}
           label={t(AUTH.RESET_PASSWORD_NEW_PASSWORD_FIELD_LABEL)}
           variant="outlined"
           error={Boolean(passwordErrorMessage)}
@@ -142,6 +148,14 @@ export function ResetPassword() {
         />
         <TextField
           id={RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID}
+          slotProps={{
+            input: {
+              startAdornment: PasswordAdornment,
+            },
+            formHelperText: {
+              id: RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ERROR_TEXT_ID,
+            },
+          }}
           {...register('confirmPassword', {
             required: true,
             validate: {
@@ -152,9 +166,6 @@ export function ResetPassword() {
                 AUTH.PASSWORD_DO_NOT_MATCH_ERROR,
             },
           })}
-          FormHelperTextProps={{
-            id: RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ERROR_TEXT_ID,
-          }}
           label={t(AUTH.RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_LABEL)}
           variant="outlined"
           error={Boolean(confirmPasswordErrorMessage)}