diff --git a/src/api/auth.ts b/src/api/auth.ts index 2ec6c98..460f28c 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -31,7 +31,30 @@ export const me = async () => { return res; }; -export const login = async (param: { email: string; password: string }) => { +export type LoginCheckRequest = { + email: string; + password: string; +}; +export type LoginCheckResponse = { + data: { + customer_code: number; + name: string; + }[]; +} & APICommonResponse; +export const loginCheck = async (param: LoginCheckRequest) => { + const res = await request({ + url: getUrl(ApiId.LOGIN_CHECK), + method: HttpMethod.POST, + data: param, + }); + return res; +}; + +export const login = async (param: { + email: string; + password: string; + customer_code: number; +}) => { const res = await request({ url: getUrl(ApiId.LOGIN), method: HttpMethod.POST, diff --git a/src/api/index.ts b/src/api/index.ts index a5c2b18..26ab5f1 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -13,6 +13,7 @@ export const ApiId = { // 認証関連 ---------------------------------- ME: id++, LOGIN: id++, + LOGIN_CHECK: id++, LOGOUT: id++, PASSWORD_SETTING_START: id++, PASSWORD_SETTING_VERIFY: id++, diff --git a/src/api/url.ts b/src/api/url.ts index 29cd681..391aa3f 100644 --- a/src/api/url.ts +++ b/src/api/url.ts @@ -5,6 +5,7 @@ const urls = { [A.CSRF_TOKEN]: "sanctum/csrf-cookie", [A.ME]: "me", [A.LOGIN]: "login", + [A.LOGIN_CHECK]: "login/check", [A.LOGOUT]: "logout", [A.PASSWORD_SETTING_START]: "password/setting/start", [A.PASSWORD_SETTING_VERIFY]: "password/setting/verify", diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 9ae0d06..eafa4cb 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -12,7 +12,11 @@ type Auth = { email: string; user: Me | null; - login: (email: string, password: string) => Promise; + login: ( + email: string, + password: string, + customerCode: number + ) => Promise; logout: VoidFunction; me: VoidFunction; }; @@ -25,7 +29,7 @@ export const AuthContext = createContext({ email: "", user: null, - login: async (email: string, password: string) => false, + login: async (email: string, password: string, customerCode: number) => false, logout: () => {}, me: () => {}, }); @@ -80,8 +84,16 @@ function AuthContextProvider({ children }: Props) { setUser(null); }; - const login = async (email: string, password: string) => { - const res = await callLogin({ email, password }); + const login = async ( + email: string, + password: string, + customerCode: number + ) => { + const res = await callLogin({ + email, + password, + customer_code: customerCode, + }); return res?.result === ResultCode.SUCCESS; }; const logout = () => { diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index ce627a0..bd3ae19 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -1,13 +1,14 @@ import { yupResolver } from "@hookform/resolvers/yup"; -import { LoadingButton } from "@mui/lab"; -import { Box, Button, Stack, Typography } from "@mui/material"; +import { Box, Button, Card, Stack, Typography } from "@mui/material"; +import { LoginCheckResponse, loginCheck } from "api/auth"; import InputAlert from "components/form/InputAlert"; import { FormProvider, RHFTextField } from "components/hook-form"; +import useAPICall from "hooks/useAPICall"; import useAuth from "hooks/useAuth"; import useNavigateCustom from "hooks/useNavigateCustom"; import useSnackbarCustom from "hooks/useSnackbarCustom"; import { PageID } from "pages"; -import { useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { useForm } from "react-hook-form"; import { useLocation } from "react-router-dom"; import { getPath } from "routes/path"; @@ -28,7 +29,9 @@ export default function Login() { const { pathname } = useLocation(); const [message, setMessage] = useState(""); - const [sending, setSending] = useState(false); + const [checkResponse, setCheckResponse] = useState( + null + ); const { login } = useAuth(); @@ -42,49 +45,101 @@ export default function Login() { resolver: yupResolver(LoginSchema), }); - const handleSubmit = async (data: FormProps) => { - setMessage(""); - setSending(true); - const ret = await login(data.email, data.password); + const { callAPI: callLoginCheck } = useAPICall({ + apiMethod: loginCheck, + backDrop: true, + form, + onSuccess: (res) => { + setCheckResponse(res); + }, + onFailed: () => { + error("ログイン失敗"); + setMessage("入力情報を確認してください"); + setCheckResponse(null); + }, + }); - setSending(false); + const handleSubmit = async (data: FormProps) => { + callLoginCheck(data); + }; - if (ret) { - success("ログイン成功"); - if (pathname === getPath(PageID.LOGIN)) { - navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW)); + const handleSelect = (customerCode: number) => { + login( + form.getValues("email"), + form.getValues("password"), + customerCode + ).then((ret) => { + if (ret) { + success("ログイン成功"); + if (pathname === getPath(PageID.LOGIN)) { + navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW)); + } + } else { + error("ログイン失敗"); + setMessage("入力情報を確認してください"); + setCheckResponse(null); } - } else { - error("ログイン失敗"); - setMessage("入力情報を確認してください"); - } + }); }; + const needSelectUser: boolean = useMemo(() => { + return checkResponse !== null && 1 < checkResponse.data.length; + }, [checkResponse]); + + useEffect(() => { + if (checkResponse && checkResponse.data.length === 1) { + const customerCode = checkResponse.data[0].customer_code; + handleSelect(customerCode); + } + }, [checkResponse]); + return ( ログイン - - - + {needSelectUser && ( + <> + ユーザー選択 + {checkResponse?.data.map((ele) => { + return ( + + ); + })} + + )} + {!needSelectUser && ( + <> + + + - - ログイン - - + + + + )}