diff --git a/client/src/Features/Auth/authSlice.js b/client/src/Features/Auth/authSlice.js index b78a8b47e..1d93ce3fa 100644 --- a/client/src/Features/Auth/authSlice.js +++ b/client/src/Features/Auth/authSlice.js @@ -196,6 +196,13 @@ const authSlice = createSlice({ state.success = true; state.msg = "Logged out successfully"; }, + setAuthState: (state, action) => { + state.isLoading = false; + state.success = action.payload.success; + state.msg = action.payload.msg; + state.authToken = action.payload.data.token; + state.user = action.payload.data.user; + }, }, extraReducers: (builder) => { // Register thunk @@ -249,4 +256,4 @@ const authSlice = createSlice({ }); export default authSlice.reducer; -export const { clearAuthState } = authSlice.actions; +export const { clearAuthState, setAuthState } = authSlice.actions; diff --git a/client/src/Pages/Auth/Login/index.tsx b/client/src/Pages/Auth/Login/index.tsx index 9c945f7ed..49c7bafa7 100644 --- a/client/src/Pages/Auth/Login/index.tsx +++ b/client/src/Pages/Auth/Login/index.tsx @@ -1,4 +1,4 @@ -import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements"; +import { BaseAuthPage } from "@/Components/v2/design-elements"; import { Button, TextField } from "@/Components/v2/inputs"; import { useTranslation } from "react-i18next"; @@ -6,19 +6,38 @@ import { useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js"; import { useLoginForm } from "@/Hooks/useLoginForm"; import type { LoginFormData } from "@/Validation/login"; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; +import { setAuthState } from "@/Features/Auth/authSlice"; +import { usePost } from "@/Hooks/UseApi"; const LoginPage = () => { const { t } = useTranslation(); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { post, loading } = usePost(); const { schema, defaults } = useLoginForm(); - const { control, handleSubmit } = useForm({ + const { control, handleSubmit, setError } = useForm({ resolver: zodResolver(schema), defaultValues: defaults, }); - const onSubmit = (data: LoginFormData) => { - console.log("Login submitted:", data); + const onSubmit = async (data: LoginFormData) => { + if (loading) return; + + const result = await post("/auth/login", data); + + if (result?.success) { + console.log(result); + // dispatch(setAuthState(result)); + // navigate("/uptime"); + } else if (result?.msg === "Incorrect password") { + setError("password", { + message: "auth.login.errors.password.incorrect", + }); + } }; return ( @@ -58,21 +77,10 @@ const LoginPage = () => { - - ); }; diff --git a/client/src/Utils/ApiClient.ts b/client/src/Utils/ApiClient.ts index 42a14bf00..c39839558 100644 --- a/client/src/Utils/ApiClient.ts +++ b/client/src/Utils/ApiClient.ts @@ -42,7 +42,9 @@ export const initApiClient = (store: StoreType): void => { const onSuccess = (response: AxiosResponse) => response; const onError = (error: AxiosError) => { if (error.response?.status === 401) { - window.location.href = "/login"; + if (window.location.pathname !== "/login") { + window.location.href = "/login"; + } } return Promise.reject(error); };