From f1e0b84e60c61d89007d9a5f0bda35f8b226817a Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Sat, 20 Jan 2024 03:10:50 +0530
Subject: [PATCH 1/3] Add loader to Button component and clean login page

---
 apps/client/pages/login.tsx                  | 25 +++++++------
 apps/client/pages/register.tsx               |  4 ++
 libs/design-system/src/lib/Button/Button.tsx | 39 ++++++++++++++++++++
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
index aabcc715..57cbfa70 100644
--- a/apps/client/pages/login.tsx
+++ b/apps/client/pages/login.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactElement } from 'react'
 import { FullPageLayout } from '@maybe-finance/client/features'
-import { Input, InputPassword, Button } from '@maybe-finance/design-system'
+import { Input, InputPassword, Button, LoadingSpinner } from '@maybe-finance/design-system'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -10,8 +10,9 @@ import Link from 'next/link'
 export default function LoginPage() {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
-    const [isValid, setIsValid] = useState(false)
+    const [isValid, setIsValid] = useState(true)
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
 
     const { data: session } = useSession()
     const router = useRouter()
@@ -26,6 +27,7 @@ export default function LoginPage() {
         e.preventDefault()
         setErrorMessage(null)
         setPassword('')
+        setIsLoading(true)
 
         const response = await signIn('credentials', {
             email,
@@ -35,9 +37,16 @@ export default function LoginPage() {
 
         if (response && response.error) {
             setErrorMessage(response.error)
+            setIsLoading(false)
         }
     }
 
+    const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setErrorMessage(null)
+        setPassword(e.target.value)
+        setIsValid(e.target.value.length > 0)
+    }
+
     return (
         <>
             <Script
@@ -68,15 +77,8 @@ export default function LoginPage() {
                                 name="password"
                                 label="Password"
                                 value={password}
-                                showPasswordRequirements={!isValid}
-                                onValidityChange={(checks) => {
-                                    const passwordValid =
-                                        checks.filter((c) => !c.isValid).length === 0
-                                    setIsValid(passwordValid)
-                                }}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    setPassword(e.target.value)
-                                }
+                                onChange={onPasswordChange}
+                                showComplexityBar={false}
                             />
 
                             {errorMessage && password.length === 0 ? (
@@ -89,6 +91,7 @@ export default function LoginPage() {
                                 type="submit"
                                 disabled={!isValid}
                                 variant={isValid ? 'primary' : 'secondary'}
+                                isLoading={isLoading}
                             >
                                 Log in
                             </Button>
diff --git a/apps/client/pages/register.tsx b/apps/client/pages/register.tsx
index b06e0199..2552a3dd 100644
--- a/apps/client/pages/register.tsx
+++ b/apps/client/pages/register.tsx
@@ -14,6 +14,7 @@ export default function RegisterPage() {
     const [password, setPassword] = useState('')
     const [isValid, setIsValid] = useState(false)
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
 
     const { data: session } = useSession()
     const router = useRouter()
@@ -30,6 +31,7 @@ export default function RegisterPage() {
         setLastName('')
         setEmail('')
         setPassword('')
+        setIsLoading(true)
 
         const response = await signIn('credentials', {
             email,
@@ -41,6 +43,7 @@ export default function RegisterPage() {
 
         if (response && response.error) {
             setErrorMessage(response.error)
+            setIsLoading(false)
         }
     }
 
@@ -109,6 +112,7 @@ export default function RegisterPage() {
                                 type="submit"
                                 disabled={!isValid}
                                 variant={isValid ? 'primary' : 'secondary'}
+                                isLoading={isLoading}
                             >
                                 Register
                             </Button>
diff --git a/libs/design-system/src/lib/Button/Button.tsx b/libs/design-system/src/lib/Button/Button.tsx
index 06cde900..c5bbfd30 100644
--- a/libs/design-system/src/lib/Button/Button.tsx
+++ b/libs/design-system/src/lib/Button/Button.tsx
@@ -42,6 +42,9 @@ export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'a
         className?: string
 
         leftIcon?: ReactNode
+
+        /** Display spinner based on the value passed */
+        isLoading?: boolean
     }>
 
 function Button(
@@ -53,6 +56,7 @@ function Button(
         children,
         className,
         leftIcon,
+        isLoading = false,
         ...rest
     }: ButtonProps,
     ref: React.Ref<HTMLElement>
@@ -81,8 +85,43 @@ function Button(
         >
             {leftIcon && <span className="mr-1.5">{leftIcon}</span>}
             {children}
+            {isLoading && Tag === 'button' && (
+                <span className="ml-1.5">
+                    <Spinner fill={variant === 'primary' ? '#16161A' : '#FFFFFF'} />
+                </span>
+            )}
         </Tag>
     )
 }
 
+// Add a spinner to Button component and toggle it via flag
+
+interface SpinnerProps {
+    fill: string
+}
+
+function Spinner({ fill }: SpinnerProps): JSX.Element {
+    return (
+        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+                opacity=".25"
+                fill={fill}
+            />
+            <path
+                d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
+                fill={fill}
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    dur="0.75s"
+                    values="0 12 12;360 12 12"
+                    repeatCount="indefinite"
+                />
+            </path>
+        </svg>
+    )
+}
+
 export default React.forwardRef(Button)

From f902c5ccd548f6f058595066565deddd1c97fed8 Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Sat, 20 Jan 2024 03:27:58 +0530
Subject: [PATCH 2/3] Disable button on submit

---
 apps/client/pages/login.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
index 57cbfa70..f0f771c4 100644
--- a/apps/client/pages/login.tsx
+++ b/apps/client/pages/login.tsx
@@ -28,6 +28,7 @@ export default function LoginPage() {
         setErrorMessage(null)
         setPassword('')
         setIsLoading(true)
+        setIsValid(false)
 
         const response = await signIn('credentials', {
             email,
@@ -38,6 +39,7 @@ export default function LoginPage() {
         if (response && response.error) {
             setErrorMessage(response.error)
             setIsLoading(false)
+            setIsValid(true)
         }
     }
 

From 8d411cbfbc0a350876ac5de7414459316edce9a5 Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Sat, 20 Jan 2024 03:44:34 +0530
Subject: [PATCH 3/3] Fix logic to disable button

---
 apps/client/pages/login.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
index f0f771c4..a2c2dc2b 100644
--- a/apps/client/pages/login.tsx
+++ b/apps/client/pages/login.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactElement } from 'react'
 import { FullPageLayout } from '@maybe-finance/client/features'
-import { Input, InputPassword, Button, LoadingSpinner } from '@maybe-finance/design-system'
+import { Input, InputPassword, Button } from '@maybe-finance/design-system'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -10,7 +10,7 @@ import Link from 'next/link'
 export default function LoginPage() {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
-    const [isValid, setIsValid] = useState(true)
+    const [isValid, setIsValid] = useState(false)
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
     const [isLoading, setIsLoading] = useState(false)
 
@@ -28,7 +28,6 @@ export default function LoginPage() {
         setErrorMessage(null)
         setPassword('')
         setIsLoading(true)
-        setIsValid(false)
 
         const response = await signIn('credentials', {
             email,
@@ -39,7 +38,7 @@ export default function LoginPage() {
         if (response && response.error) {
             setErrorMessage(response.error)
             setIsLoading(false)
-            setIsValid(true)
+            setIsValid(false)
         }
     }
 
@@ -91,7 +90,7 @@ export default function LoginPage() {
 
                             <Button
                                 type="submit"
-                                disabled={!isValid}
+                                disabled={!isValid || isLoading}
                                 variant={isValid ? 'primary' : 'secondary'}
                                 isLoading={isLoading}
                             >