scheduler-front/src/ui/page/account/login/LoginPage.tsx

import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
import { LoginSchema } from '@/data/form';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { zodResolver } from '@hookform/resolvers/zod';
import React, { useCallback, useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { PageRouting } from '@/const/PageRouting';
import * as z from 'zod';
import { Separator } from '@/components/ui/separator';
import { Validator } from '@/util/Validator';
import { LoginRequest } from '@/data/request/account/LoginRequest';
import { AccountNetwork } from '@/network/AccountNetwork';
import { toast } from 'sonner';
import { useAuthStore } from '@/store/authStore';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [autoLogin, setAutoLogin] = useState<boolean>(false);
  const { login } = useAuthStore();
  const navigate = useNavigate();
  const accountNetwork = new AccountNetwork();
  const loginForm = useForm<z.infer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      id: "",
      password: ""
    }
  });
  const { id, password } = { id: loginForm.watch('id'), password: loginForm.watch('password') };

  useEffect(() => {
    localStorage.setItem('autoLogin', `${autoLogin}`)
  }, [autoLogin]);

  const moveToSignUpPage = useCallback(() => {
    navigate(PageRouting["SIGN_UP"].path);
  }, []);

  const moveToResetPasswordPage = useCallback(() => {
    navigate(PageRouting["RESET_PASSWORD"].path);
  }, []);

  const moveToHomePage = useCallback(() => {
    navigate(PageRouting["HOME"].path);
  }, []);

  // TODO 33 로그인 기능 구현
  const reqLogin = async () => {
    if (isLoading) return;
    const type = Validator.isEmail(id) ? 'email' : 'accountId';

    const data: LoginRequest = new LoginRequest(type, id, password);

    setIsLoading(true);

    const loginPromise = accountNetwork.login(data);

    toast.promise(
      loginPromise,
      {
        loading: "로그인 중입니다.",
        success: (res) => {
          setIsLoading(false);
          if (res.data.success) {
              const data = {
                accessToken: res.data.accessToken!,
                refreshToken: res.data.refreshToken!
              };
              login({...data});
              moveToHomePage();
              return "";
            } else {
              throw new Error(res.data.message);
            }
        },
        error: (err: Error) => err.message || "에러 발생"
      }
    );
  }

  const TextSeparator = ({ text }: { text: string }) => {
    return (
      <div className="w-full flex flex-row items-center justify-center">
        <Separator className="flex-1" />
        <span className="text-gray-500 px-3 text-sm text-muted-foregroud">{text}</span>
        <Separator className="flex-1" />
      </div>
    )
  }

  const handleEnterKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!(e.key === 'Enter')) return;
    const result = await loginForm.trigger();
    if (!result) return;
    await reqLogin();
  }

  return (
    <div className="w-full h-full flex flex-col justify-center items-center">
      <Card className="w-md pl-2 pr-2">
        <CardHeader>
          로그인
        </CardHeader>
        <CardContent>
          <form id="form-login" className="w-full flex flex-col gap-2.5">
            <Controller
              name="id"
              control={loginForm.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="form-login-id">아이디 또는 이메일</FieldLabel>
                  <Input
                    {...field}
                    type="text"
                    id="form-login-id"
                    aria-invalid={fieldState.invalid}
                    tabIndex={1}
                    onKeyDown={handleEnterKeyDown}
                  />
                  <FieldError errors={[fieldState.error]} />
                </Field>
              )}
            >
            </Controller>
            <Controller
              name="password"
              control={loginForm.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <div className="w-full flex flex-row justify-between items-end">
                    <FieldLabel className="w-fit" htmlFor="form-login-password">비밀번호</FieldLabel>
                    <Button
                      className="p-0 bg-transparent hover:bg-transparent h-fit w-fit text-xs text-gray-400 hover:text-gray-500 cursor-pointer"
                      onClick={moveToResetPasswordPage}
                      type="button"
                      tabIndex={3}
                    >
                      비밀번호를 잊으셨습니까?
                    </Button>
                  </div>
                  <Input
                    {...field}
                    type="password"
                    id="form-login-password"
                    aria-invalid={fieldState.invalid}
                    tabIndex={2}
                    onKeyDown={handleEnterKeyDown}
                  />
                  <FieldError errors={[fieldState.error]} />
                </Field>
              )}
            >
            </Controller>
            <div className="flex flex-row gap-2 mt-2">
              <Checkbox
                className={[
                  "data-[state=checked]:bg-indigo-500 data-[state=checked]:text-white"
                  , "data-[state=checked]:outline-none data-[state=checked]:border-0"
                ].join(' ')}
                id="auto-login"
                checked={autoLogin}
                onCheckedChange={(value) => setAutoLogin(value === true)}
              />
              <Label htmlFor="auto-login">자동 로그인</Label>
            </div>
          </form>
          
        </CardContent>
        <CardFooter
          className="w-full flex flex-col items-center gap-5"
        >
          <Button 
            className="w-full bg-indigo-500 hover:bg-indigo-400"
            type="button"
            disabled={id.trim().length < 1 || password.trim().length < 1}
            onClick={reqLogin}
          >
            로그인
          </Button>
          <TextSeparator text="또는" />
          <Button
            className="w-full text-violet-500 bg-white border border-violet-500 hover:bg-violet-500 hover:text-white"
            type="button"
            onClick={moveToSignUpPage}
          >
            회원가입
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}