portfolio/web/src/pages/LoginPage/LoginPage.tsx

import { useEffect, useRef } from 'react'

import { mdiAccount, mdiKey } from '@mdi/js'
import Icon from '@mdi/react'

import {
  Form,
  Label,
  TextField,
  PasswordField,
  Submit,
  FieldError,
} from '@redwoodjs/forms'
import { navigate, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'

import { useAuth } from 'src/auth'

const LoginPage = () => {
  const { isAuthenticated, logIn } = useAuth()

  useEffect(() => {
    if (isAuthenticated) navigate(routes.home())
  }, [isAuthenticated])

  const usernameRef = useRef<HTMLInputElement>(null)
  useEffect(() => usernameRef.current?.focus(), [])

  const onSubmit = async (data: Record<string, string>) => {
    const response = await logIn({
      username: data.username,
      password: data.password,
    })

    if (response.message) toast(response.message)
    else if (response.error) toast.error(response.error)
    else toast.success('Welcome back!')
  }

  return (
    <>
      <Metadata title="Login" />

      <div className="mx-auto my-32 flex w-fit flex-wrap items-center justify-center rounded-xl bg-base-100 p-2">
        <Form onSubmit={onSubmit} className="space-y-2">
          <Label
            name="username"
            className="input input-bordered flex items-center gap-2"
            errorClassName="input input-bordered flex items-center gap-2 input-error"
          >
            <Label
              name="username"
              className="size-4 opacity-70"
              errorClassName="size-4 text-error"
            >
              <Icon path={mdiAccount} />
            </Label>
            <TextField
              name="username"
              ref={usernameRef}
              className="grow"
              placeholder="Username"
              validation={{
                required: {
                  value: true,
                  message: 'Required',
                },
              }}
            />
          </Label>
          <FieldError name="username" className="text-sm text-error" />

          <Label
            name="password"
            className="input input-bordered flex items-center gap-2"
            errorClassName="input input-bordered flex items-center gap-2 input-error"
          >
            <Label
              name="password"
              className="size-4 opacity-70"
              errorClassName="size-4 text-error"
            >
              <Icon path={mdiKey} />
            </Label>
            <PasswordField
              name="password"
              className="grow"
              placeholder="Password"
              autoComplete="current-password"
              validation={{
                required: {
                  value: true,
                  message: 'Required',
                },
                minLength: {
                  value: 8,
                  message: 'Must be 8 or more characters',
                },
              }}
            />
          </Label>
          <FieldError name="password" className="text-sm text-error" />

          <div className="flex w-full">
            <Submit className="btn btn-primary btn-sm mx-auto uppercase">
              Log In
            </Submit>
          </div>
        </Form>
      </div>
    </>
  )
}

export default LoginPage