smartservice_web/smartservice_frontend/src/components/auth/SignInForm.tsx

/* eslint-disable */  //...

"use client";
import Checkbox from "@/components/form/input/Checkbox";
import Input from "@/components/form/input/InputField2";
import Label from "@/components/form/Label";
import Button from "@/components/ui/button/Button";
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
import Link from "next/link";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import api, { useAuthStore } from '@/lib/_AG';


export default function SignInForm() {
  const router = useRouter();
  const tokenPayload = useAuthStore((s) => s.tokenPayload);  //Bruce, JWT

  const [user_id, setUserId] = useState("");
  const [user_pw, setUserPw] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  const [isSendingSms, setIsSendingSms] = useState(false);  //TempCode: SMS integration test

  // TempCode: SMS integration test, remove when done
  const handleSendSmsTest = () => {
    setIsSendingSms(true);

    api.post('/api/send-sms-test.do')
      .then((resp) => {
        console.log(resp);

        const r = resp.data;
        if (r.code === "0000")
          alert("문자를 전송했습니다.\n수신번호: " + r.phone + "\n잔여건수: " + r.remainCount);
        else
          alert("문자 전송에 실패했습니다.\n코드: " + r.code + "\n메시지: " + r.msg);
      })
      .catch((err) => {
        console.error(err);
        alert("문자 전송 요청에 실패했습니다.");
      })
      .finally(() => setIsSendingSms(false));
  };

  const handleLogin = () => {
    //router.push("/"); //TestCode
    //return;

    if (user_id == "") {
      alert("아이디를 입력하셔야 합니다.");
      return;
    }
    else if (user_pw == "") {
      alert("암호를 입력하셔야 합니다.");
      return;
    }

    const params = {
      id: user_id,
      pw: user_pw
    }

    api.post('/api/sign-in.do', params).then((resp) => {
      console.log(resp);
      
      if (resp.data.errCode == 0) {
          useAuthStore.getState().setAccessToken(resp.data.result.sval1);
          router.push("/");
      }
      else if (resp.data.errCode == -9) {
        alert("유효하지 않은 아이디 또는 암호입니다.");
      }
      else {
        alert("로그인 에러 : " + resp.data.errCode);
      }
    })
    .catch((err) => console.error(err))
  };

  return (
    <div className="flex flex-col flex-1 lg:w-1/2 w-full">
      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
        <div>
          <div className="mb-5 sm:mb-8">
            <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
              스마트서비스 로그인
            </h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Enter your ID and password to log in!
            </p>
          </div>
          <div>

            {/*<form> //... */}

              <div className="space-y-6">
                <div>
                  <Label>
                    ID <span className="text-error-500">*</span>{" "}
                  </Label>
                  <Input placeholder="아이디를 입력하세요" type="text" value={user_id} onChange={(e) => setUserId(e.target.value)} />
                </div>
                <div>
                  <Label>
                    Password <span className="text-error-500">*</span>{" "}
                  </Label>
                  <div className="relative">
                    <Input
                      type={showPassword ? "text" : "password"}
                      placeholder="암호를 입력하세요"
                      value={user_pw} onChange={(e) => setUserPw(e.target.value)}
                    />
                    <span
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
                    >
                      {showPassword ? (
                        <EyeIcon className="fill-gray-500 dark:fill-gray-400" />
                      ) : (
                        <EyeCloseIcon className="fill-gray-500 dark:fill-gray-400" />
                      )}
                    </span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {/*
                    <Checkbox checked={isChecked} onChange={setIsChecked} />
                    <span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">
                      로그인 상태 유지
                    </span>
                    */}
                  </div>
                  {/*
                  <Link
                    href="/reset-password"
                    className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"
                  >
                    패스워드 찾기
                  </Link>
                  */}
                </div>
                <div>
                  <Button className="w-full" size="sm" onClick={handleLogin}>
                    로그인
                  </Button>
                </div>
                {/* TempCode: SMS integration test, remove when done */}
                <div>
                  <Button className="w-full" size="sm" variant="outline" onClick={handleSendSmsTest} disabled={isSendingSms}>
                    {isSendingSms ? "문자 전송 중..." : "문자전송 테스트"}
                  </Button>
                </div>
              </div>
            {/*</form>*/}

          </div>
        </div>
      </div>
    </div>
  );
}