feat: added initial login form state

src/features/login/pages/LoginPage/index.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import type { FormEvent } from 'react'
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 
-import { Button } from '~/features/ui/components/Button'
 import { Container } from '~/features/ui/components/Container'
 import { Input } from '~/features/ui/components/Input'
 import { LayoutExternal } from '~/features/ui/components/LayoutExternal'
@@ -15,50 +14,110 @@ import {
   ErrorMessage,
 } from './styled'
 
+const validators = {
+  email: (value: string) => {
+    if (typeof value !== 'string') return 'Invalid e-mail value type'
+    if (!value) return 'E-mail is required'
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(value)) return 'Invalid e-mail'
+  },
+
+  password: (value: string) => {
+    if (typeof value !== 'string') return 'Invalid password value type'
+    if (!value) return 'Password is required'
+  },
+}
+
 export const LoginPage: NextPage = () => {
-  const [error, setError] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const [emailError, setEmailError] = useState<string | null>(null)
+  const [passwordError, setPasswordError] = useState<string | null>(null)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  /**
+   * Login handler.
+   */
+  const login = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+
+      const errors = {
+        email: validators.email(email),
+        password: validators.password(password),
+      }
+
+      if (errors.email) {
+        setEmailError(errors.email)
+      }
+
+      if (errors.password) {
+        setPasswordError(errors.password)
+      }
+
+      // Only submit in case of no errors.
+      if (!errors.email && !errors.password) {
+        setIsSubmitting(true)
 
-  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault()
+        setTimeout(() => {
+          // Mocking to represent login submit outcome.
+          const shouldFail = Math.random() < 0.5
 
-    alert('TODO')
-  }
+          if (shouldFail) {
+            setSubmitError('Something went terribly wrong!')
+          } else {
+            alert('Success!')
+          }
+
+          setIsSubmitting(false)
+        }, 1000)
+      }
+    },
+    [email, password]
+  )
 
   return (
     <LayoutExternal>
       <Container>
         <FormWrapper>
           <Title>Sign in to Eventio.</Title>
-          {error ? (
-            <ErrorMessage>{error}</ErrorMessage>
+
+          {submitError ? (
+            <ErrorMessage>{submitError}</ErrorMessage>
           ) : (
             <Description>Enter your details below.</Description>
           )}
-          <form onSubmit={onSubmit}>
-            <Input label="Email" type="email" name="email" error={error} />
+
+          <form onSubmit={login}>
+            <Input
+              label="Email"
+              type="email"
+              name="email"
+              value={email}
+              error={emailError}
+              onChange={(e) => {
+                setEmailError(null)
+                setEmail(e.target.value)
+              }}
+            />
+
             <Input
               label="Password"
               type="password"
               name="password"
-              error={error}
+              value={password}
+              error={passwordError}
+              onChange={(e) => {
+                setPasswordError(null)
+                setPassword(e.target.value)
+              }}
             />
             <p>
-              <SubmitButton>Sign In</SubmitButton>
-            </p>
-
-            {/*
-            Created just to showcase CSS animations.
-            To be removed. Please do not use style attribute.
-          */}
-            <p style={{ marginTop: '1rem' }}>
-              <Button
-                type="button"
-                size="small"
-                accent="destructive"
-                onClick={() => setError(Date.now().toString())}
-              >
-                Trigger Error
-              </Button>
+              <SubmitButton disabled={isSubmitting}>
+                {isSubmitting ? 'Submitting' : 'Sign In'}
+              </SubmitButton>
             </p>
           </form>
         </FormWrapper>