Merge pull request #72 from BinaryStudioAcademy/task/OV-71-add-asteri…

…sk-to-required-auth-fields OV-71: Add asterisk to required auth fields
BinaryStudioAcademy · Aug 27, 2024 · 1f78844 · 1f78844
2 parents df33fa5 + e1c93a2
commit 1f78844
Show file tree

Hide file tree

Showing 4 changed files with 19 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
@@ -12,9 +12,15 @@ type Properties = {
     label: string;
     name: string;
     hasError: boolean;
+    required?: boolean;
 };
 
-const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
+const PasswordInput: React.FC<Properties> = ({
+    label,
+    name,
+    hasError,
+    required = false,
+}) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
     const handlePasswordIconClick = useCallback((): void => {
@@ -31,6 +37,7 @@ const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
                 placeholder="••••••••"
                 name={name}
                 icon="right"
+                required={required}
             />
             <InputRightElement top="unset" bottom={hasError ? '25px' : 0}>
                 <IconButton

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
@@ -70,11 +70,13 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             label="Email"
                             placeholder="[email protected]"
                             name="email"
+                            required
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
+                            required
                         />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}

diff --git a/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx b/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx
@@ -64,22 +64,26 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
                             label="Full Name"
                             placeholder="Name"
                             name="name"
+                            required
                         />
                         <Input
                             type="email"
                             label="Email"
                             placeholder="[email protected]"
                             name="email"
+                            required
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
+                            required
                         />
                         <PasswordInput
                             label="Repeat password"
                             name="confirmPassword"
                             hasError={Boolean(errors.confirmPassword)}
+                            required
                         />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}

diff --git a/frontend/src/bundles/common/components/input/input.tsx b/frontend/src/bundles/common/components/input/input.tsx
@@ -10,17 +10,19 @@ import { Field } from 'formik';
 import { useFormField } from '~/bundles/common/hooks/hooks.js';
 
 type Properties<T extends FormValues> = {
-    type?: 'text' | 'email' | 'number' | 'password';
     label: string;
     name: FieldInputProps<T>['name'];
+    type?: 'text' | 'email' | 'number' | 'password';
+    required?: boolean;
     placeholder?: string;
     icon?: 'right' | 'none';
 };
 
 const Input = <T extends FormValues>({
-    type = 'text',
     label,
     name,
+    type = 'text',
+    required = false,
     placeholder = '',
     icon = 'none',
 }: Properties<T>): JSX.Element => {
@@ -30,7 +32,7 @@ const Input = <T extends FormValues>({
     const hasError = Boolean(error) && touched;
 
     return (
-        <FormControl isInvalid={hasError}>
+        <FormControl isInvalid={hasError} isRequired={required}>
             <FormLabel htmlFor={name}>{label}</FormLabel>
             <Field
                 {...field}