From 6961238f9bda9650b6983169fe65f55f376cbfff Mon Sep 17 00:00:00 2001 From: Abhishek Raj Date: Thu, 12 Sep 2024 18:57:47 +0530 Subject: [PATCH] loader adder on signup & signin btn --- client/src/pages/Blogs.tsx | 2 +- client/src/pages/Signin.tsx | 61 ++++++++++++++++++++++--------------- client/src/pages/Signup.tsx | 12 +++++--- server/src/types.ts | 8 ++--- 4 files changed, 50 insertions(+), 33 deletions(-) diff --git a/client/src/pages/Blogs.tsx b/client/src/pages/Blogs.tsx index 76f8311..5defb6d 100644 --- a/client/src/pages/Blogs.tsx +++ b/client/src/pages/Blogs.tsx @@ -29,7 +29,7 @@ const Blogs =() => { setblogs(res.data.bulk); setloader(false); - }, 1500); + }, 100); } catch (error) { console.log(error) diff --git a/client/src/pages/Signin.tsx b/client/src/pages/Signin.tsx index 791d44d..2cccb69 100644 --- a/client/src/pages/Signin.tsx +++ b/client/src/pages/Signin.tsx @@ -16,6 +16,7 @@ const serverurl = backendUrl console.log(serverurl) export default function Signin() { + const [loading,setLoading] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log("Form submitted"); @@ -74,32 +75,44 @@ const [Signininput, useSignininput] = useState({ className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]" type="submit" onClick={async () => { - try { - const res = await axios.post(`${serverurl}/user/signin`, { - email: Signininput.email, - password: Signininput.password, - }); - const token = res.data.token; - if (token) { - localStorage.setItem("token", token); - toast.success(res.data.msg,{position:"top-right",theme:"dark",autoClose:2000}) - setTimeout(() => { - navigate("/"); - - }, 1000); - } else { - toast.error(res.data.msg,{position:"top-right",theme:"dark",autoClose:2000}) - console.log(res.data.msg); - } - - } catch (error: any) { - console.log(error) - toast.error(error.response.data.msg,{position:"top-right",theme:"dark",autoClose:2000}) - - } + setLoading(true); + try { + const res = await axios.post(`${serverurl}/user/signin`, { + email: Signininput.email, + password: Signininput.password, + }); + const token = res.data.token; + if (token) { + localStorage.setItem("token", token); + toast.success(res.data.msg, { + position: "top-right", + theme: "dark", + autoClose: 2000, + }); + setTimeout(() => { + navigate("/"); + }, 300); + } else { + toast.error(res.data.msg, { + position: "top-right", + theme: "dark", + autoClose: 2000, + }); + console.log(res.data.msg); + } + } catch (error: any) { + console.log(error); + toast.error(error.response.data.msg[0], { + position: "top-right", + theme: "dark", + autoClose: 2000, + }); + } finally { + setLoading(false); + } }} > - Sign in → + {loading ? "wait..." : "Sign in"} → diff --git a/client/src/pages/Signup.tsx b/client/src/pages/Signup.tsx index 643a722..70711b7 100644 --- a/client/src/pages/Signup.tsx +++ b/client/src/pages/Signup.tsx @@ -1,5 +1,5 @@ import ShineBorder from "../components/effects/shineborder"; -import React from "react"; +import React, { useState } from "react"; import { Label } from "../components/ui/label"; import { Input } from "../components/ui/input"; import { cn } from "../components/utils/cn"; @@ -41,6 +41,7 @@ export default function Signup() { const navigate = useNavigate(); const [Signupinput, useSignupinput] = useRecoilState(UserAtom); +const [loading,Setloading] = useState(false) console.log(Signupinput) @@ -120,6 +121,7 @@ const handlesubmit = async(e: React.FormEvent) => { className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]" type="submit" onClick={async()=>{ + Setloading(true) try { const res = await axios.post(`${serverurl}/user/signup`,{ email: Signupinput.email, @@ -134,7 +136,7 @@ const handlesubmit = async(e: React.FormEvent) => { setTimeout(() => { navigate("/"); - }, 1000); + }, 300); }else if(res.data.status === 404){ toast.warning(res.data.msg,{position: "top-right",theme:"dark",autoClose:2000}) console.log(res.data.msg) @@ -146,14 +148,16 @@ const handlesubmit = async(e: React.FormEvent) => { toast.error(error.response.data.msg[0],{position: "top-right",theme:"dark",autoClose:2000}) } - toast.error(error.response.data.msg,{position: "top-right",theme:"dark",autoClose:2000}) + toast.error(error.response.data.msg[0],{position: "top-right",theme:"dark",autoClose:2000}) + }finally{ + Setloading(false) } }} > - Sign up → + {loading ? "loading..." : "Sign-up"}→ diff --git a/server/src/types.ts b/server/src/types.ts index f0f1ae0..9ef8ce8 100644 --- a/server/src/types.ts +++ b/server/src/types.ts @@ -4,7 +4,7 @@ import z from "zod"; export const signupinput = z.object({ email: z .string() - .min(5, { message: "username of min 5 character" }) + .min(5, { message: "Provide valid email" }) .email({ message: "Invalid email address" }), password: z.string().min(6, { message: "Password must be 6 or more characters long" }), firstname: z @@ -17,13 +17,13 @@ export const signupinput = z.object({ export const signininput = z.object({ email: z .string() - .min(5, { message: "username of min 5 character" }) + .min(5, { message: "Provaide Valid email" }) .email({ message: "Invalid email address" }), password: z.string().min(6, { message: "password must be 6 or more characters long" }), }); export const blogsinput = z.object({ - title: z.string().min(1, { message: "username of min 1 character" }), + title: z.string().min(1, { message: "title should be of min 1 character" }), description: z.string().optional(), upvotes: z.number().optional(), }); @@ -33,7 +33,7 @@ export const blogsinput = z.object({ export const updateblogsinput = z.object({ title: z .string() - .min(1, { message: "username of min 1 character" }) + .min(1, { message: "title should be of min 1 character" }) .optional(), description: z.string().optional(), userid: z.number().optional(),