From 5b7d84d6573d2f32c76a4713f1794efe4ddc119e Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 27 Aug 2024 18:48:47 +0300
Subject: [PATCH 1/2] OV-71: + asterisk to required auth fields

---
 .../components/common/password-input/password-input.tsx  | 9 ++++++++-
 .../auth/components/sign-in-form/sign-in-form.tsx        | 2 ++
 .../auth/components/sign-up-form/sign-up-form.tsx        | 4 ++++
 frontend/src/bundles/common/components/input/input.tsx   | 8 +++++---
 4 files changed, 19 insertions(+), 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
index 57e8cf7ae..6c7881d4a 100644
--- 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
index f3a73d1f5..2475cf96a 100644
--- 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="user@gmail.com"
                             name="email"
+                            required={true}
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
+                            required={true}
                         />
                         <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
index d0a791e17..10e344a3b 100644
--- 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={true}
                         />
                         <Input
                             type="email"
                             label="Email"
                             placeholder="user@gmail.com"
                             name="email"
+                            required={true}
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
+                            required={true}
                         />
                         <PasswordInput
                             label="Repeat password"
                             name="confirmPassword"
                             hasError={Boolean(errors.confirmPassword)}
+                            required={true}
                         />
                         <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
index 286cdfc75..80a4079a4 100644
--- 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}

From e1c93a2e861946618c89951659c96a451c38153e Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 27 Aug 2024 19:37:45 +0300
Subject: [PATCH 2/2] OV-71: * use boolean props shorthand

---
 .../bundles/auth/components/sign-in-form/sign-in-form.tsx | 4 ++--
 .../bundles/auth/components/sign-up-form/sign-up-form.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

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
index 2475cf96a..4296fe803 100644
--- 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,13 +70,13 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             label="Email"
                             placeholder="user@gmail.com"
                             name="email"
-                            required={true}
+                            required
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
-                            required={true}
+                            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
index 10e344a3b..2d58981e3 100644
--- 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,26 +64,26 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
                             label="Full Name"
                             placeholder="Name"
                             name="name"
-                            required={true}
+                            required
                         />
                         <Input
                             type="email"
                             label="Email"
                             placeholder="user@gmail.com"
                             name="email"
-                            required={true}
+                            required
                         />
                         <PasswordInput
                             label="Password"
                             name="password"
                             hasError={Boolean(errors.password)}
-                            required={true}
+                            required
                         />
                         <PasswordInput
                             label="Repeat password"
                             name="confirmPassword"
                             hasError={Boolean(errors.confirmPassword)}
-                            required={true}
+                            required
                         />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}