OV-1: + label to password input

BinaryStudioAcademy · Aug 19, 2024 · 120d4ab · 120d4ab
1 parent 441f895
commit 120d4ab
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -9,10 +9,12 @@ import {
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 
 type Properties = {
+    label: string;
+    name: string;
     hasError: boolean;
 };
 
-const PasswordInput: React.FC<Properties> = ({ hasError }) => {
+const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
     const handlePasswordIconClick = useCallback((): void => {
@@ -25,9 +27,9 @@ const PasswordInput: React.FC<Properties> = ({ hasError }) => {
         <InputGroup size="md">
             <Input
                 type={isPasswordVisible ? 'text' : 'password'}
-                label="Password"
+                label={label}
                 placeholder="••••••••"
-                name="password"
+                name={name}
                 icon="right"
             />
             <InputRightElement top="unset" bottom={hasError ? '24px' : 0}>

diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -71,7 +71,11 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             placeholder="[email protected]"
                             name="email"
                         />
-                        <PasswordInput hasError={Boolean(errors.password)} />
+                        <PasswordInput
+                            label="Password"
+                            name="password"
+                            hasError={Boolean(errors.password)}
+                        />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}
                             message={UserValidationMessage.INVALID_DATA}