login and Signup with validation and axios api setup

Author: amitjimiwal

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+.env
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package-lock.json

@@ -17,17 +17,20 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^2.2.2",
     "@types/jest": "^29.5.12",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "jest-environment-jsdom": "^29.6.2",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "ts-jest": "^29.1.2"
+    "ts-jest": "^29.1.2",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.11.25",

package.json

@@ -0,0 +1,39 @@
+import { LoginData, ResultData, SingupData } from '@/types';
+import axios from 'axios';
+class AxiosClient {
+     client;
+     constructor() {
+          this.client = axios.create({
+               baseURL: String(process.env.VITE_APP_BACKEND_BASE_URL),
+               withCredentials: true,
+               headers: {
+                    'Content-Type': ['application/json', 'application/x-www-form-urlencoded'],
+               },
+          });
+     }
+     async post(url: string, content: SingupData | LoginData | ResultData) {
+         try{
+          const {data}=await this.client.post(url, content);
+          return data;
+         }catch(e){
+              return e;
+         }
+     }
+     async get(url: string) {
+          try{
+               const {data}=await this.client.get(url);
+               return data;
+          }catch(e){
+               return e;
+          }
+     }
+     async patch(url:string){
+          try{
+               const {data}=await this.client.patch(url);
+               return data;
+          }catch(e){
+               return e;
+          }
+     }
+}
+export const axiosClient = new AxiosClient();

src/api/axiosclient.ts

@@ -5,6 +5,8 @@ import SignupScreen from './pages/SignupScreen/SignupScreen';
 import LoginScreen from './pages/LoginScreen/LoginScreen';
 import EmailVerification from './pages/EmailVerification/EmailVerification';
 import Protected from './components/Protected';
+import TypingTest from './pages/Typingtest/TypingTest';
+import DashBoard from './pages/Dashboard/DashBoard';
 const router = createBrowserRouter([
   {
     path: "/",
@@ -27,5 +29,13 @@ const router = createBrowserRouter([
       }
     ],
   },
+  {
+    path:'/test',
+    element:<Protected authentication={true}><TypingTest/></Protected>
+  },
+  {
+    path:'/dashboard/:id',
+    element:<Protected authentication={true}><DashBoard/></Protected>
+  }
 ]);
 export default router;

src/approutes.tsx

@@ -8,17 +8,24 @@ interface Props {
 }
 const Protected = ({ children, authentication }: Props) => {
   const authStatus = useSelector((state: AuthState) => state.auth.status);
+  const isEmailVerified=true; //dummy value for test;
   const navigate = useNavigate();
   const [loading, setloading] = useState<boolean>(true);
   useEffect(() => {
     if (authentication && authStatus != true) {
       navigate("/login");
     }
+    if(authStatus && authentication && !isEmailVerified){
+      navigate("/verify");
+    }
+    if(authStatus && authentication && isEmailVerified){
+      navigate("/test");
+    }
     if (!authentication && authStatus === true) {
-      navigate("/");
+      navigate("/test");
     }
     setloading(false);
-  }, [authStatus, authentication, navigate]);
+  }, [authStatus, authentication, navigate,isEmailVerified]);
   return loading ? null : <>{children}</>;
 };
 

src/components/Protected.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DashBoard = () => {
+  return (
+    <div>
+      Dashboard Page
+    </div>
+  )
+}
+
+export default DashBoard

src/pages/Dashboard/DashBoard.tsx

@@ -1,8 +1,32 @@
-import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
 
-const EmailVerification = () => {
-  const [authStatus] = useAuthStatus();
-  return <div>EmailVerification for {authStatus ? "Verified User" : ""}</div>;
-};
+export default function Component() {
+  return (
+    <div className="mx-auto space-y-6 max-w-sm">
+      <div className="space-y-2 text-center">
+        <h1 className="text-3xl font-bold">Verify your email</h1>
+        <p className="text-gray-500 dark:text-gray-400">
+          Enter the verification code we sent to
+          <strong>m@example.com</strong>
+        </p>
+      </div>
+      <div className="space-y-2">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input disabled id="email" type="email" value="m@example.com" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="code">Verification code</Label>
+          <Input id="code" placeholder="Enter your code" required />
+        </div>
+        <Button className="w-full">Verify</Button>
+        <Button className="w-full" variant="outline">
+          Resend code
+        </Button>
+      </div>
+    </div>
+  )
+}
 
-export default EmailVerification;

src/pages/EmailVerification/EmailVerification.tsx

@@ -1,10 +1,22 @@
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { LoginData } from "@/types";
 
 const LoginScreen: React.FC = () => {
+  const [showPassword, setshowPassword] = useState<boolean>(false);
+  const {
+    register,
+    formState: { errors },
+    handleSubmit
+  } = useForm<LoginData>();
+  const submitHandler= async function (data:LoginData){
+    console.log(data);
+  }
   return (
     <div className="flex flex-col min-h-screen items-stretch">
       <header className="p-4 flex items-center">
@@ -20,32 +32,59 @@ const LoginScreen: React.FC = () => {
               Enter your email below to login to your account
             </p>
           </div>
-          <div className="space-y-4">
+          <form className="space-y-4" onSubmit={handleSubmit(submitHandler)}>
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
               <Input
                 id="email"
                 placeholder="m@example.com"
                 required
                 type="email"
+                {...register("email")}
               />
+              {errors.email && (
+                <span className="text-red">{errors.email.message}</span>
+              )}
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 relative">
               <div className="flex items-center">
                 <Label htmlFor="password">Password</Label>
                 {/* <Link className="ml-auto inline-block text-sm underline" to="#">
                   Forgot your password?
                 </Link> */}
               </div>
-              <Input id="password" required type="password" />
+              <Input
+                id="password"
+                required
+                type={showPassword ? "text" : "password"}
+                {...register("password")}
+              />
+              {errors.password && (
+                <span className="text-red">{errors.password.message}</span>
+              )}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute top-4 right-0 bg-gray-200"
+                onClick={() => {
+                  setshowPassword(!showPassword);
+                }}
+              >
+                {showPassword ? (
+                  <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+                ) : (
+                  <EyeIcon className="h-4 w-4" aria-hidden="true" />
+                )}
+              </Button>
             </div>
             <Button className="w-full" type="submit">
               Login
             </Button>
             {/* <Button className="w-full" variant="outline">
               Login with Google
             </Button> */}
-          </div>
+          </form>
           <div className="mt-4 text-center text-sm">
             Don't have an account?
             <Link className="underline" to="/signup">