change password ui

tabi-memo · Feb 3, 2024 · 1dd11a8 · 1dd11a8
1 parent 2912ae2
commit 1dd11a8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/app/(auth)/change-password/page.tsx b/app/(auth)/change-password/page.tsx
@@ -3,23 +3,25 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Box,
-  Flex,
   FormLabel,
   FormErrorMessage,
   FormControl,
-  Input,
   Heading,
   useToast,
-  useBoolean
+  useBoolean,
+  useColorModeValue,
+  VStack
 } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
 import {
   changePasswordResolver,
   ChangePasswordSchema
 } from '@/(auth)/change-password/schema'
 import { PrimaryButton } from '@/components/button'
+import { InputForm } from '@/components/input'
 
 export default function ChangePassword() {
+  const color = useColorModeValue('black', 'gray.300')
   const toast = useToast()
   const [isLoading, setIsLoading] = useBoolean()
   const [toastId, setToastId] = useState<ReturnType<typeof toast> | undefined>(
@@ -63,27 +65,53 @@ export default function ChangePassword() {
   )
 
   return (
-    <>
-      <Heading>Change Password</Heading>
-      <Box as="form" onSubmit={changePasswordHandler}>
-        <Flex flexDirection={'column'}>
+    <Box
+      as="main"
+      w="100vw"
+      minH={{ base: 'calc(100vh - 145px)', md: 'calc(100vh - 210px)' }}
+      color={color}
+    >
+      <VStack
+        mt={{ base: '20px', md: '40px' }}
+        mx="auto"
+        w={{ base: '380px', md: '480px' }}
+        px={{ base: '16px', md: '80px' }}
+      >
+        <Heading
+          as="h1"
+          fontSize={{ base: '2xl', md: '4xl' }}
+          mb="40px"
+          w="100%"
+          textAlign={{ base: 'left', md: 'center' }}
+        >
+          Change Password
+        </Heading>
+        <VStack
+          spacing={{ base: '30px', md: '40px' }}
+          as="form"
+          onSubmit={changePasswordHandler}
+        >
           <FormControl isInvalid={!!errors.oldPassword}>
             <FormLabel>Old Password</FormLabel>
-            <Input type="password" {...register('oldPassword')} />
+            <InputForm
+              {...register('oldPassword')}
+              w={{ base: '358px', md: '480px' }}
+              showInput={true}
+            />
             {errors.oldPassword && (
               <FormErrorMessage>{errors.oldPassword.message}</FormErrorMessage>
             )}
           </FormControl>
           <FormControl isInvalid={!!errors.newPassword}>
             <FormLabel>New Password</FormLabel>
-            <Input type="password" {...register('newPassword')} />
+            <InputForm {...register('newPassword')} showInput={true} />
             {errors.newPassword && (
               <FormErrorMessage>{errors.newPassword.message}</FormErrorMessage>
             )}
           </FormControl>
           <FormControl isInvalid={!!errors.confirmNewPassword}>
             <FormLabel>Confirm New Password</FormLabel>
-            <Input type="password" {...register('confirmNewPassword')} />
+            <InputForm showInput={true} {...register('confirmNewPassword')} />
             {errors.confirmNewPassword && (
               <FormErrorMessage>
                 {errors.confirmNewPassword.message}
@@ -93,8 +121,8 @@ export default function ChangePassword() {
           <PrimaryButton isLoading={isLoading} type={'submit'}>
             Change Password
           </PrimaryButton>
-        </Flex>
-      </Box>
-    </>
+        </VStack>
+      </VStack>
+    </Box>
   )
 }
diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { IconType } from 'react-icons'
 import {
   Input as ChakraFormInput,
@@ -7,20 +8,24 @@ import {
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
-
+import { FiEye, FiEyeOff } from 'react-icons/fi'
 type InputFormProps = {
   rightIcon?: IconType
+  showInput?: boolean
 }
 export const InputForm = forwardRef<ChakraInputProps & InputFormProps, 'input'>(
-  ({ rightIcon: RightIcon, ...props }, ref) => {
+  ({ rightIcon: RightIcon, showInput, ...props }, ref) => {
     const bgColor = useColorModeValue('white', 'gray.700')
     const borderColor = useColorModeValue('gray.300', 'gray.500')
     const placeholdercolor = useColorModeValue('gray.400', 'gray.600')
+    const [show, setShow] = useState(false)
+    const handleClick = () => setShow(!show)
 
     return (
       <InputGroup minW={'100%'}>
         <ChakraFormInput
           {...props}
+          type={show ? 'text' : 'password'}
           ref={ref}
           focusBorderColor={'primary.600'}
           borderColor={borderColor}
@@ -34,6 +39,16 @@ export const InputForm = forwardRef<ChakraInputProps & InputFormProps, 'input'>(
             <RightIcon />
           </InputRightElement>
         )}
+
+        {showInput && (
+          <InputRightElement
+            color="gray.500"
+            onClick={handleClick}
+            style={{ cursor: 'pointer' }}
+          >
+            {show ? <FiEye /> : <FiEyeOff />}
+          </InputRightElement>
+        )}
       </InputGroup>
     )
   }