login page refactor

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;

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<LoginFormData>({
+	const { control, handleSubmit, setError } = useForm<LoginFormData>({
 		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 = () => {
 			<Button
 				variant="contained"
 				type="submit"
+				loading={loading}
 			>
 				{t("pages.auth.login.submit")}
 			</Button>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.login.links.forgotPassword.text")}
-				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
-				href="/forgot-password"
-			/>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.login.links.register.text")}
-				linkText={t("pages.auth.login.links.register.linkText")}
-				href="/register"
-			/>
 		</BaseAuthPage>
 	);
 };

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);
 	};