From ce74834783b35b15aa7f6be6fbc6f3da4e8785cd Mon Sep 17 00:00:00 2001 From: razzanYoni <13521087@mahasiswa.itb.ac.id> Date: Sat, 18 Nov 2023 02:07:06 +0700 Subject: [PATCH] resolve auth --- src/TonalityApp.tsx | 2 +- src/pages/LoginPage.tsx | 36 ++------------------------- src/pages/SignUpPage.tsx | 37 ++-------------------------- src/validations/login-validation.ts | 34 +++++++++++++++++++++++++ src/validations/signup-validation.ts | 36 +++++++++++++++++++++++++++ 5 files changed, 75 insertions(+), 70 deletions(-) create mode 100644 src/validations/login-validation.ts create mode 100644 src/validations/signup-validation.ts diff --git a/src/TonalityApp.tsx b/src/TonalityApp.tsx index 8f7ecba..18c5fcb 100644 --- a/src/TonalityApp.tsx +++ b/src/TonalityApp.tsx @@ -3,7 +3,7 @@ import React from "react"; import { RenderRoutes } from "@/routes/RenderRoutes.tsx"; import { routes } from "@/routes/routes.ts"; -export type UserContext = {token: string | null, onLogin: (accessToken: string) => void, onLogout: () => void} +export type UserContext = {token: string | null, username: string | null, onLogin: (accessToken: string, username: string) => void, onLogout: () => void} export const AuthContext = React.createContext< UserContext>(null as unknown as UserContext); diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index eaeca8e..caaf617 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -16,38 +16,8 @@ import { Link } from "react-router-dom"; import { StatusCodes } from "http-status-codes"; import {useAuth} from "@/TonalityApp.tsx"; import api from "@/api/api.ts"; +import {loginFormSchema} from "@/validations/login-validation.ts"; -const isUsernameInvalid = async (username: string): Promise<boolean> => { - const res = await api.post("username-availability", { - username: username, - }); - - const responseBody: { usernameAvailable: string } = res.data; - - return responseBody.usernameAvailable === "false"; -}; - -const loginFormSchema = z.object({ - username: z - .string() - .min(2, { - message: "Username has a minimum length of 2.", - }) - .max(50, { - message: "Username has a maximum length of 50.", - }) - .refine(isUsernameInvalid, { - message: "User does not exist.", - }), - password: z - .string() - .min(8, { - message: "Password has a minimum length of 8.", - }) - .max(255, { - message: "Password has a maximum length of 255.", - }), -}); const LoginPage = () => { // Define form @@ -77,9 +47,7 @@ const LoginPage = () => { }, ); - console.log("res", res.data.accessToken) - - onLogin(res.data.accessToken); + onLogin(res.data.accessToken, values.username); } catch (err) { if ( axios.isAxiosError(err) && diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx index 94512e8..796bc1c 100644 --- a/src/pages/SignUpPage.tsx +++ b/src/pages/SignUpPage.tsx @@ -15,43 +15,10 @@ import { Input } from "@/components/ui/input.tsx"; import { Button } from "@/components/ui/button.tsx"; import { Link, useNavigate } from "react-router-dom"; import { StatusCodes } from "http-status-codes"; -import axios from "axios"; import { useToast } from "@/components/ui/use-toast.ts"; import api from "@/api/api.ts"; +import {signUpFormSchema} from "@/validations/signup-validation.ts"; -const restApiUrl: string = import.meta.env.VITE_REST_API_URL; - -const isUsernameAvailable = async (username: string): Promise<boolean> => { - const res = await axios.post(restApiUrl + "username-availability", { - username: username, - }); - - const responseBody: { usernameAvailable: string } = res.data; - - return responseBody.usernameAvailable === "true"; -}; - -const signUpFormSchema = z.object({ - username: z - .string() - .min(2, { - message: "Username must have a minimum length of 2.", - }) - .max(50, { - message: "Username must have a maximum length of 50.", - }) - .refine(isUsernameAvailable, { - message: "Username already exists.", - }), - password: z - .string() - .min(8, { - message: "Password must have a minimum length of 8.", - }) - .max(255, { - message: "Password must have a maximum length of 255.", - }), -}); const SignUpPage = () => { const { toast } = useToast(); @@ -109,7 +76,7 @@ const SignUpPage = () => { <FormItem> <FormLabel>Password</FormLabel> <FormControl> - <Input placeholder="" {...field} /> + <Input type="password" placeholder="" {...field} /> </FormControl> <FormMessage /> </FormItem> diff --git a/src/validations/login-validation.ts b/src/validations/login-validation.ts new file mode 100644 index 0000000..3f92a97 --- /dev/null +++ b/src/validations/login-validation.ts @@ -0,0 +1,34 @@ +import api from "@/api/api.ts"; +import * as z from "zod"; + +const isUsernameInvalid = async (username: string): Promise<boolean> => { + const res = await api.post("username-availability", { + username: username, + }); + + const responseBody: { usernameAvailable: string } = res.data; + + return responseBody.usernameAvailable === "false"; +}; + +export const loginFormSchema = z.object({ + username: z + .string() + .min(2, { + message: "Username has a minimum length of 2.", + }) + .max(50, { + message: "Username has a maximum length of 50.", + }) + .refine(isUsernameInvalid, { + message: "User does not exist.", + }), + password: z + .string() + .min(8, { + message: "Password has a minimum length of 8.", + }) + .max(255, { + message: "Password has a maximum length of 255.", + }), +}); diff --git a/src/validations/signup-validation.ts b/src/validations/signup-validation.ts new file mode 100644 index 0000000..7ddd8d3 --- /dev/null +++ b/src/validations/signup-validation.ts @@ -0,0 +1,36 @@ +import * as z from "zod"; +import api from "@/api/api.ts"; + +const isUsernameAvailable = async (username: string): Promise<boolean> => { + const res = await api.post( + "username-availability", + { + username: username, + }); + + const responseBody: { usernameAvailable: string } = res.data; + + return responseBody.usernameAvailable === "true"; +}; + +export const signUpFormSchema = z.object({ + username: z + .string() + .min(2, { + message: "Username must have a minimum length of 2.", + }) + .max(50, { + message: "Username must have a maximum length of 50.", + }) + .refine(isUsernameAvailable, { + message: "Username already exists.", + }), + password: z + .string() + .min(8, { + message: "Password must have a minimum length of 8.", + }) + .max(255, { + message: "Password must have a maximum length of 255.", + }), +}); -- GitLab