08 – Built in React APIs

package.json

@@ -32,5 +32,8 @@
     "lint-staged": "^12.4.1",
     "prettier": "^2.6.2",
     "typescript": "4.6.4"
+  },
+  "resolutions": {
+    "@typescript-eslint/eslint-plugin": "5.27.1"
   }
 }

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>

src/features/ui/components/Input/index.tsx

@@ -6,13 +6,14 @@ import {
   InputWrapper,
   Label,
   LabelText,
+  ErrorMessage,
   PasswordToggle,
   StyledInput,
 } from './styled'
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string
-  error?: string
+  error?: string | null
 }
 
 export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
@@ -21,18 +22,16 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
 
   return (
     <InputWrapper>
-      {/*
-        By changing the value of key prop, we're making the component
-        remount, which also triggers an attached animation again.
-      */}
-      <Label hasError={Boolean(error)} key={error}>
+      <Label hasError={Boolean(error)}>
         <StyledInput
           placeholder={label}
           name={name}
           type={inputType}
           {...rest}
         />
+
         <LabelText>{label}</LabelText>
+
         {type === 'password' && (
           <PasswordToggle
             isActive={isPasswordShown}
@@ -42,6 +41,8 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
             <EyeIcon />
           </PasswordToggle>
         )}
+
+        {error ? <ErrorMessage>{error}</ErrorMessage> : null}
       </Label>
     </InputWrapper>
   )

src/features/ui/components/Input/styled.ts

@@ -79,6 +79,10 @@ export const Label = styled.label<{ hasError?: boolean }>`
     `}
 `
 
+export const ErrorMessage = styled.span`
+  color: ${colors.accent.destructive};
+`
+
 export const PasswordToggle = styled.button.attrs({ type: 'button' })<{
   isActive: boolean
 }>`