[BarClerk-550] - [FE] Integrate User Sign-In API (#7)

client/components/molecules/CustomForm/index.tsx

@@ -9,13 +9,15 @@ type Props = {
   className?: string
   placeholder: string
   isPassHidden?: boolean
+  defaultValue?:string
   setIsPassHidden?: (value: boolean) => void
 }
 
 const CustomForm = ({
   label,
   className,
   isPassHidden,
+  defaultValue,
   setIsPassHidden = () => { },
   ...props
 }: Props) => {
@@ -31,8 +33,8 @@ const CustomForm = ({
         <div className="relative">
           <input
             {...field}
-            {...props}
-            value={field?.value || ""}
+            {...props} 
+            value={field?.value || defaultValue || ""}
             className={`
               px-2 pb-1
               placeholder-text-failed   

client/pages/sign-in.tsx

@@ -1,28 +1,42 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { Formik, Form } from "formik";
-import { setCookie } from 'cookies-next';
+import { setCookie, deleteCookie, getCookie } from 'cookies-next';
 import React, { useState } from "react";
 
+import { Cookie } from "shared/types";
 import Button from "components/atoms/Button";
 import NextHead from "components/atoms/NextHead";
+import { useAuthMethods } from "hooks/authMethods";
 import { SignInFormSchema } from "shared/validation";
 import CustomForm from "components/molecules/CustomForm";
 
 const SignIn = () => {
+  const { handleSignInSubmit } = useAuthMethods();
   const [isPassHidden, setIsPassHidden] = useState<boolean>(true);
+  const [rememberMe, setRememberMe] = useState<string>("");
+  const isRemembered: Cookie = getCookie('isRemembered') || false;
+  const rememberedEmail: Cookie = getCookie('email') || "";
 
   const formikInitialValues = {
     email: "",
     password: ""
   };
 
-  const onClickRemember = (e: any) => {
-    setCookie('isRemembered', e.target.checked);
+  const onChangeRemember = (e: { target: any }) => {
+    const { value, name } = e.target;
+    if (name === "password") return;
 
-    if (e.target.checked) {
-      setCookie('email', formikInitialValues.email);
-    }
+    setRememberMe(value);
+    if (isRemembered) return setCookie('email', value);
+  }
+
+  const onClickRemember = (e: { target: any }) => {
+    const { checked } = e.target;
+
+    setCookie('isRemembered', checked);
+    if (!checked) return deleteCookie('email');
+    setCookie('email', rememberMe)
   }
 
   return (
@@ -39,16 +53,17 @@ const SignIn = () => {
             <Formik
               initialValues={formikInitialValues}
               validationSchema={SignInFormSchema}
-              onSubmit={()=>{}}
+              onSubmit={handleSignInSubmit}
             >
               {({ isSubmitting }): any => {
                 return (
                   <Form>
-                    <div className="flex flex-col gap-4 ">
+                    <div className="flex flex-col gap-4" onChange={onChangeRemember}>
                       <CustomForm
                         label="Email address"
                         name="email"
                         type="email"
+                        defaultValue={rememberedEmail}
                         placeholder="[email protected]"
                       />
                       <CustomForm
@@ -66,7 +81,7 @@ const SignIn = () => {
                         <input
                           id="remember"
                           type="checkbox"
-                          value=""
+                          defaultChecked={isRemembered}
                           onClick={onClickRemember}
                           className="h-3 w-3 rounded-sm border border-gray-300 bg-transparent"
                         />

client/shared/types/index.ts

@@ -42,3 +42,6 @@ export type InitialState = {
 export type Store = {
   auth: InitialState;
 };
+
+// Consumes a lot of time for me, for now I added type any. Need help on this.
+export type Cookie = string | boolean | any; 

client/shared/validation/index.ts

@@ -17,10 +17,10 @@ export const SignUpFormSchema = Yup.object().shape({
   email: Yup.string().email().required().label('Email'),
   password: Yup.string()
     .required('Password is required')
-    .min(4, 'Password length should be at least 4 characters')
-    .max(12, 'Password cannot exceed more than 12 characters'),
+    .min(8, 'Password length should be at least 8 characters')
+    .max(15, 'Password cannot exceed more than 15 characters'),
   password_confirmation: Yup.string()
     .required('Confirm Password is required')
-    .max(12, 'Password cannot exceed more than 12 characters')
+    .max(15, 'Password cannot exceed more than 15 characters')
     .oneOf([Yup.ref('password')], 'Passwords do not match'),
 });