loader adder on signup & signin btn

Author: abbi4code

client/src/pages/Blogs.tsx

@@ -29,7 +29,7 @@ const Blogs =() => {
           setblogs(res.data.bulk);
           setloader(false);
 
-        }, 1500);
+        }, 100);
 
       } catch (error) {
         console.log(error)

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<HTMLFormElement>) => {
     e.preventDefault();
     console.log("Form submitted");
@@ -74,32 +75,44 @@ const [Signininput, useSignininput] = useState<Signininput>({
             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 &rarr;
+            {loading ? "wait..." : "Sign in"} &rarr;
             <BottomGradient />
           </button>
 

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<Signupinput>(UserAtom);
+const [loading,Setloading] = useState(false)
 
 console.log(Signupinput)
 
@@ -120,6 +121,7 @@ const handlesubmit = async(e: React.FormEvent<HTMLFormElement>) => {
             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<HTMLFormElement>) => {
                 setTimeout(() => {
                   navigate("/");
 
-                }, 1000);
+                }, 300);
               }else if(res.data.status === 404){
                 toast.warning<toastMsgprops>(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<HTMLFormElement>) => {
                 toast.error<toastMsgprops>(error.response.data.msg[0],{position: "top-right",theme:"dark",autoClose:2000})
               }
 
-              toast.error<toastMsgprops>(error.response.data.msg,{position: "top-right",theme:"dark",autoClose:2000})
+              toast.error<toastMsgprops>(error.response.data.msg[0],{position: "top-right",theme:"dark",autoClose:2000})
 
+             }finally{
+              Setloading(false)
              }
             }}
 
 
           >
-            Sign up &rarr;
+             {loading ? "loading..." : "Sign-up"}&rarr;
             <BottomGradient />
           </button>
 

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(),