From 17c40ac6e25542e2bcbb179aeba89cd6fd01debd Mon Sep 17 00:00:00 2001 From: Tibebe Demissie Date: Sat, 19 Apr 2025 01:36:06 +0100 Subject: [PATCH] feat: add registration functionality and improve login error handling --- .../client/src/components/styling/auth.css | 4 - src/main/client/src/main.tsx | 5 + src/main/client/src/routes/Login/Login.tsx | 19 +-- .../client/src/routes/Register/Register.tsx | 142 ++++++++++++++++++ .../tibs/Ergon/controller/AuthController.java | 2 +- 5 files changed, 156 insertions(+), 16 deletions(-) create mode 100644 src/main/client/src/routes/Register/Register.tsx diff --git a/src/main/client/src/components/styling/auth.css b/src/main/client/src/components/styling/auth.css index 7d04f97..db2d369 100644 --- a/src/main/client/src/components/styling/auth.css +++ b/src/main/client/src/components/styling/auth.css @@ -46,10 +46,6 @@ body { .login { width: 320px; gap: 1.5rem; - - a { - padding: 0; - } } .register { diff --git a/src/main/client/src/main.tsx b/src/main/client/src/main.tsx index 54024e9..c324f90 100644 --- a/src/main/client/src/main.tsx +++ b/src/main/client/src/main.tsx @@ -12,12 +12,17 @@ import { PrivateRoutes } from "./components/PrivateRoutes"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { Login } from "./routes/Login/Login.tsx"; import { Approvals } from "@/routes/Approvals"; +import { Register } from "./routes/Register/Register.tsx"; const router = createBrowserRouter([ { path: "/login", element: }, + { + path: "/register", + element: + }, { path: "/", element: , diff --git a/src/main/client/src/routes/Login/Login.tsx b/src/main/client/src/routes/Login/Login.tsx index a5bde86..3ba1428 100644 --- a/src/main/client/src/routes/Login/Login.tsx +++ b/src/main/client/src/routes/Login/Login.tsx @@ -6,6 +6,7 @@ import { useMutation } from "@tanstack/react-query"; import Loading from "../../components/Loader"; import { useAuth } from "../../hooks/UseAuth.tsx"; +import axios from "axios"; export const Login = () => { const username = useRef(null); @@ -32,7 +33,7 @@ export const Login = () => { }; - const { mutate, isError, isPending } = useMutation({ + const { mutate, isError, isPending, error } = useMutation({ mutationFn: loginUser, onSuccess: (data) => { localStorage.setItem("token", data.data.token); @@ -47,9 +48,8 @@ export const Login = () => { return ( <>
- {isPending ? : + {isPending ?
:
-

Login

Username

@@ -59,7 +59,6 @@ export const Login = () => { id="id_username" />
-

Password

@@ -68,12 +67,11 @@ export const Login = () => { autoComplete="current-password" required id="id_password" /> - {isError && -
-

Password or Username is wrong

-
- } - + { isError && axios.isAxiosError(error) && +
+

{error?.response?.data.message || "Password or Username is wrong"}

+
+ }
@@ -82,6 +80,5 @@ export const Login = () => { Register
} - ); }; \ No newline at end of file diff --git a/src/main/client/src/routes/Register/Register.tsx b/src/main/client/src/routes/Register/Register.tsx new file mode 100644 index 0000000..03dda27 --- /dev/null +++ b/src/main/client/src/routes/Register/Register.tsx @@ -0,0 +1,142 @@ +import { Link, useNavigate } from "react-router-dom"; +import "../../components/styling/auth.css"; +import { useRef } from "react"; +import { useErgonClient } from "../../hooks/useErgonClient/useErgonClient.tsx"; +import { useMutation } from "@tanstack/react-query"; +import Loading from "../../components/Loader"; +import axios from "axios"; + +export const Register = () => { + const username = useRef(null); + const password = useRef(null); + const confirmPassword = useRef(null); + const email = useRef(null); + const firstName = useRef(null); + const lastName = useRef(null); + const dob = useRef(null); + const client = useErgonClient(); + const navigate = useNavigate(); + + const registerUser = async () => { + const user = username.current?.value; + const pass = password.current?.value; + const confirmPass = confirmPassword.current?.value; + const userEmail = email.current?.value; + const fName = firstName.current?.value; + const lName = lastName.current?.value; + const dateOfBirth = dob.current?.value; + + if (pass !== confirmPass) { + throw new Error("Passwords do not match"); + } + + return await client.post("/auth/registration", { + username: user, + password: pass, + matchingPassword: confirmPass, + email: userEmail, + firstName: fName, + lastName: lName, + dob: dateOfBirth + }); + }; + + const { mutate, isError, isPending, error } = useMutation({ + mutationFn: registerUser, + onSuccess: () => { + navigate("/login"); + } + }); + + const handleRegister = () => { + mutate(); + }; + + return ( + <> +
+ {isPending ?
: +
+

Register

+
+
+
+

First Name

+
+ +
+ +
+
+

Last Name

+
+ +
+
+
+
+
+

Username

+
+ +
+ +
+
+

Date of Birth

+
+ +
+
+ + +
+
+

Email

+
+ +
+
+
+
+

Password

+
+ +
+ +
+
+

Confirm Password

+
+ +
+
+ { isError && axios.isAxiosError(error) && +
+

{error?.response?.data.message || "Registration failed, and its not my code, its you with your weird input"}

+
+ } +
+ +
+ Login +
} + + ); +}; \ No newline at end of file diff --git a/src/main/java/com/tibs/Ergon/controller/AuthController.java b/src/main/java/com/tibs/Ergon/controller/AuthController.java index dffc392..619faac 100644 --- a/src/main/java/com/tibs/Ergon/controller/AuthController.java +++ b/src/main/java/com/tibs/Ergon/controller/AuthController.java @@ -39,7 +39,7 @@ public AuthController(AuthenticationManager authenticationManager, JwtUtil jwtUt @PostMapping("/login") public ResponseEntity createAuthenticationToken(@RequestBody AuthRequest authRequest) { try { - log.info("Attempting to authenticate user: %s" + authRequest.getUsername()); + log.info("Attempting to authenticate user: " + authRequest.getUsername()); authenticationManager.authenticate( new UsernamePasswordAuthenticationToken(authRequest.getUsername(), authRequest.getPassword()) );