Implement show password buttons

ZdruzenieSTROM · Nov 23, 2024 · ac46b75 · ac46b75
1 parent 67d6b4b
commit ac46b75
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 10 deletions.
diff --git a/src/components/FormItems/FormInput/FormInput.tsx b/src/components/FormItems/FormInput/FormInput.tsx
@@ -12,6 +12,7 @@ export const FormInput = <
   label,
   type,
   rules,
+  ...props
 }: TextFieldProps &
   Pick<ControllerProps<TFieldValues, TName>, 'name' | 'control' | 'rules'> & {
     label: string
@@ -31,6 +32,7 @@ export const FormInput = <
         helperText={error?.message}
         focused={false}
         sx={formItemStyle}
+        {...props}
       />
     )}
   />

diff --git a/src/components/PageLayout/LoginForm/LoginForm.tsx b/src/components/PageLayout/LoginForm/LoginForm.tsx
@@ -1,4 +1,5 @@
-import {Box, Stack} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {Box, IconButton, Stack} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
@@ -53,6 +54,8 @@ export const LoginForm: FC<LoginFormProps> = ({closeDialog}) => {
     setDisplayForgottenDialog((prev) => !prev)
   }
 
+  const [showPassword, setShowPassword] = useState(false)
+
   return (
     <>
       <Dialog open={displayForgottenDialog} close={toggleForgottenDialog} title="Zabudnuté heslo">
@@ -79,7 +82,20 @@ export const LoginForm: FC<LoginFormProps> = ({closeDialog}) => {
                 },
               }}
             />
-            <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
+            <FormInput
+              control={control}
+              name="password"
+              label="Heslo"
+              type={showPassword ? 'text' : 'password'}
+              rules={requiredRule}
+              InputProps={{
+                endAdornment: (
+                  <IconButton onClick={() => setShowPassword(!showPassword)}>
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                ),
+              }}
+            />
             <Box alignSelf="end">
               <Button variant="button3" type="button" onClick={toggleForgottenDialog}>
                 Zabudnuté heslo

diff --git a/src/components/Profile/PasswordChangeForm.tsx b/src/components/Profile/PasswordChangeForm.tsx
@@ -1,7 +1,8 @@
-import {Stack} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {IconButton, Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
-import {FC} from 'react'
+import {FC, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
 import {IGeneralPostResponse} from '@/types/api/general'
@@ -69,6 +70,10 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
 
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
 
+  const [showPassword1, setShowPassword1] = useState(false)
+  const [showPassword2, setShowPassword2] = useState(false)
+  const [showPassword3, setShowPassword3] = useState(false)
+
   return (
     <Dialog
       open={open}
@@ -91,33 +96,54 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
             control={control}
             name="old_password"
             label="aktuálne heslo"
-            type="password"
+            type={showPassword1 ? 'text' : 'password'}
             rules={requiredRule}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword1(!showPassword1)}>
+                  {showPassword1 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="new_password1"
             label="nové heslo"
-            type="password"
+            type={showPassword2 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               minLength: {
                 value: 8,
                 message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword2(!showPassword2)}>
+                  {showPassword2 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="new_password2"
             label="nové heslo znovu"
-            type="password"
+            type={showPassword3 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               validate: (val) => {
                 if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword3(!showPassword3)}>
+                  {showPassword3 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
         </Stack>
       </form>

diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
@@ -1,4 +1,5 @@
-import {Stack, Typography} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import {IconButton, Stack, Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {useRouter} from 'next/router'
@@ -119,6 +120,9 @@ export const RegisterForm: FC = () => {
     },
   })
 
+  const [showPassword1, setShowPassword1] = useState(false)
+  const [showPassword2, setShowPassword2] = useState(false)
+
   return (
     <>
       <Dialog
@@ -160,26 +164,40 @@ export const RegisterForm: FC = () => {
             control={control}
             name="password1"
             label="heslo*"
-            type="password"
+            type={showPassword1 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               minLength: {
                 value: 8,
                 message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword1(!showPassword1)}>
+                  {showPassword1 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput
             control={control}
             name="password2"
             label="potvrdenie hesla*"
-            type="password"
+            type={showPassword2 ? 'text' : 'password'}
             rules={{
               ...requiredRule,
               validate: (val) => {
                 if (val !== getValues().password1) return '* Zadané heslá sa nezhodujú.'
               },
             }}
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={() => setShowPassword2(!showPassword2)}>
+                  {showPassword2 ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              ),
+            }}
           />
           <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
           <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />

diff --git a/src/theme.ts b/src/theme.ts
@@ -244,6 +244,13 @@ const _theme = createTheme({
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: 'inherit',
+        },
+      },
+    },
   },
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -244,6 +244,13 @@ const _theme = createTheme({ @@
             },
           },
         },
+        MuiIconButton: {
+          styleOverrides: {
+            root: {
+              color: 'inherit',
+            },
+          },
+        },
       },
     })
@@ Expand Down @@