Merge pull request #174 from aditya-67/login-register

Login and Register page improvements

apps/client/pages/login.tsx

@@ -12,6 +12,7 @@ export default function LoginPage() {
     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()
@@ -26,6 +27,7 @@ export default function LoginPage() {
         e.preventDefault()
         setErrorMessage(null)
         setPassword('')
+        setIsLoading(true)
 
         const response = await signIn('credentials', {
             email,
@@ -35,9 +37,17 @@ export default function LoginPage() {
 
         if (response && response.error) {
             setErrorMessage(response.error)
+            setIsLoading(false)
+            setIsValid(false)
         }
     }
 
+    const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setErrorMessage(null)
+        setPassword(e.target.value)
+        setIsValid(e.target.value.length > 0)
+    }
+
     return (
         <>
             <Script
@@ -68,15 +78,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 ? (
@@ -87,8 +90,9 @@ export default function LoginPage() {
 
                             <Button
                                 type="submit"
-                                disabled={!isValid}
+                                disabled={!isValid || isLoading}
                                 variant={isValid ? 'primary' : 'secondary'}
+                                isLoading={isLoading}
                             >
                                 Log in
                             </Button>

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>

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)