feat: add a button to hide and show password fields

Author: mohsenkhosroanjam

frontend/src/components/commonUI/PasswordInput.tsx

@@ -0,0 +1,41 @@
+import { PasswordInput as ChakraPasswordInput } from '@/components/ui/password-input'
+import { forwardRef } from 'react'
+import { FiEye, FiEyeOff } from 'react-icons/fi'
+
+interface PasswordInputProps {
+  placeholder: string
+  value?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  name?: string
+  ref?: React.Ref<HTMLInputElement>
+}
+
+const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {
+  return (
+    <ChakraPasswordInput
+      ref={ref}
+      placeholder={props.placeholder}
+      value={props.value}
+      onChange={props.onChange}
+      name={props.name}
+      borderRadius="sm"
+      color="fg.DEFAULT"
+      bg="bg.input"
+      width="100%"
+      visibilityIcon={{ on: <FiEye />, off: <FiEyeOff /> }}
+      css={{
+        '&:focus': {
+          outline: 'none',
+          borderColor: 'bg.50',
+          bg: 'bg.100',
+        },
+        '&::selection': {
+          backgroundColor: 'bg.50',
+          color: 'accent.blue',
+        },
+      }}
+    />
+  )
+})
+
+export default PasswordInput

frontend/src/components/ui/password-input.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import type {
+  ButtonProps,
+  GroupProps,
+  InputProps,
+  StackProps,
+} from "@chakra-ui/react"
+import {
+  Box,
+  HStack,
+  IconButton,
+  Input,
+  InputGroup,
+  Stack,
+  mergeRefs,
+  useControllableState,
+} from "@chakra-ui/react"
+import * as React from "react"
+import { LuEye, LuEyeOff } from "react-icons/lu"
+
+export interface PasswordVisibilityProps {
+  defaultVisible?: boolean
+  visible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+export interface PasswordInputProps
+  extends InputProps,
+    PasswordVisibilityProps {
+  rootProps?: GroupProps
+}
+
+export const PasswordInput = React.forwardRef<
+  HTMLInputElement,
+  PasswordInputProps
+>(function PasswordInput(props, ref) {
+  const {
+    rootProps,
+    defaultVisible,
+    visible: visibleProp,
+    onVisibleChange,
+    visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+    ...rest
+  } = props
+
+  const [visible, setVisible] = useControllableState({
+    value: visibleProp,
+    defaultValue: defaultVisible || false,
+    onChange: onVisibleChange,
+  })
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  return (
+    <InputGroup
+      endElement={
+        <VisibilityTrigger
+          disabled={rest.disabled}
+          onPointerDown={(e) => {
+            if (rest.disabled) return
+            if (e.button !== 0) return
+            e.preventDefault()
+            setVisible(!visible)
+          }}
+        >
+          {visible ? visibilityIcon.off : visibilityIcon.on}
+        </VisibilityTrigger>
+      }
+      {...rootProps}
+    >
+      <Input
+        {...rest}
+        ref={mergeRefs(ref, inputRef)}
+        type={visible ? "text" : "password"}
+      />
+    </InputGroup>
+  )
+})
+
+const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function VisibilityTrigger(props, ref) {
+    return (
+      <IconButton
+        tabIndex={-1}
+        ref={ref}
+        me="-2"
+        aspectRatio="square"
+        size="sm"
+        variant="ghost"
+        height="calc(100% - {spacing.2})"
+        aria-label="Toggle password visibility"
+        {...props}
+      />
+    )
+  },
+)
+
+interface PasswordStrengthMeterProps extends StackProps {
+  max?: number
+  value: number
+}
+
+export const PasswordStrengthMeter = React.forwardRef<
+  HTMLDivElement,
+  PasswordStrengthMeterProps
+>(function PasswordStrengthMeter(props, ref) {
+  const { max = 4, value, ...rest } = props
+
+  const percent = (value / max) * 100
+  const { label, colorPalette } = getColorPalette(percent)
+
+  return (
+    <Stack align="flex-end" gap="1" ref={ref} {...rest}>
+      <HStack width="full" ref={ref} {...rest}>
+        {Array.from({ length: max }).map((_, index) => (
+          <Box
+            key={index}
+            height="1"
+            flex="1"
+            rounded="sm"
+            data-selected={index < value ? "" : undefined}
+            layerStyle="fill.subtle"
+            colorPalette="gray"
+            _selected={{
+              colorPalette,
+              layerStyle: "fill.solid",
+            }}
+          />
+        ))}
+      </HStack>
+      {label && <HStack textStyle="xs">{label}</HStack>}
+    </Stack>
+  )
+})
+
+function getColorPalette(percent: number) {
+  switch (true) {
+    case percent < 33:
+      return { label: "Low", colorPalette: "red" }
+    case percent < 66:
+      return { label: "Medium", colorPalette: "orange" }
+    default:
+      return { label: "High", colorPalette: "green" }
+  }
+}

frontend/src/routes/_publicLayout/signup.tsx

@@ -6,6 +6,7 @@ import { type SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import type { UserRegister } from '../../client'
 import { DefaultInput } from '../../components/commonUI/Input'
+import PasswordInput from '../../components/commonUI/PasswordInput'
 import { confirmPasswordRules, emailPattern, passwordRules } from '../../utils'
 
 export const Route = createFileRoute('/_publicLayout/signup')({
@@ -88,9 +89,8 @@ function SignUp() {
 
             <Field.Root>
               <Field.Label>{t('general.words.password')}</Field.Label>
-              <DefaultInput
+              <PasswordInput
                 placeholder={t('general.words.password')}
-                type="password"
                 {...register('password', passwordRules())}
               />
               {errors.password && (
@@ -102,9 +102,8 @@ function SignUp() {
 
             <Field.Root>
               <Field.Label>{t('general.actions.confirmPassword')}</Field.Label>
-              <DefaultInput
+              <PasswordInput
                 placeholder={t('general.actions.repeatPassword')}
-                type="password"
                 {...register('confirm_password', confirmPasswordRules(getValues))}
               />
               {errors.confirm_password && (