UseForms

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.g1faafl9ja8"
+    "revision": "0.s3ua6eoia6o"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -1668,7 +1668,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/Contexts/GlobalStateProvider.tsx

@@ -5,7 +5,7 @@ import GlobalStateContext from './GlobalStateContext';
 
 
 const GlobalStateProvider = ({ children }:{children:ReactNode}) => {
-  const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isAuthenticate, setIsAuthenticate] = useState<boolean>(false);
 
   return (
     <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>

src/Pages/OnBoarding/LoginWithPass.tsx

@@ -1,5 +1,6 @@
 import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
-import { useContext, useState } from "react";
+import { useContext } from "react";
+import { useForm } from "react-hook-form";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import logo from "../../assets/logo.svg";
 import { Button } from "../../components/ui/button";
@@ -8,9 +9,11 @@ import { NavLink, useNavigate } from "react-router-dom";
 import { Field } from "../../components/ui/field";
 
 const LoginWithPass = () => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [mobileNumber, setMobileNumber] = useState("");
-  const [password, setPassword] = useState("");
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
   const context = useContext(GlobalStateContext);
   const navigate = useNavigate();
 
@@ -20,44 +23,13 @@ const LoginWithPass = () => {
 
   const { setIsAuthenticate } = context;
 
-  // Validation functions
-  const validateMobileNumber = (mobile: string) => {
-    if (!mobile) {
-      return "Mobile Number is required";
-    }
-    if (mobile.length !== 10) {
-      return "Mobile Number must be 10 digits long";
-    }
-    return "";
-  };
+  const onSubmit = (data: { mobileNumber: string; password: string }) => {
+    const { mobileNumber, password } = data;
 
-  const validatePassword = (password: string) => {
-    if (!password) {
-      return "Password is required";
-    }
-    if (password.length < 6) {
-      return "Password must be at least 6 characters long";
-    }
-    return "";
-  };
-
-  const onHandleSubmit = () => {
-    const mobileError = validateMobileNumber(mobileNumber);
-    const passwordError = validatePassword(password);
-
-    if (mobileError || passwordError) {
-      toaster.create({
-        title: mobileError || passwordError,
-        type: "error",
-      });
-      return;
-    }
-
-    setIsLoading(true);
-    if (mobileNumber === "1231239870" && password === "         ") {
+    if (mobileNumber === "1231239870" && password === "admin@123") {
       navigate("/");
+      setIsAuthenticate(true);
     } else {
-      setIsLoading(false);
       toaster.create({
         title: "Invalid Credentials",
         type: "error",
@@ -93,10 +65,7 @@ const LoginWithPass = () => {
           p={{ base: 4, md: 16 }}
           w={{ base: "100%", md: "50%" }}
           h={"100%"}
-          onSubmit={(e) => {
-            e.preventDefault();
-            onHandleSubmit();
-          }}
+          onSubmit={handleSubmit(onSubmit)}
         >
           <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
             <Text
@@ -115,21 +84,45 @@ const LoginWithPass = () => {
                 <Input
                   ps={3}
                   type="text"
-                  value={mobileNumber}
-                  onChange={(e) => setMobileNumber(e.target.value)}
+                  {...register("mobileNumber", {
+                    required: "Mobile Number is required",
+                    minLength: {
+                      value: 10,
+                      message: "Mobile Number must be 10 digits long",
+                    },
+                    maxLength: {
+                      value: 10,
+                      message: "Mobile Number must be 10 digits long",
+                    },
+                  })}
                   placeholder="Enter your mobile number"
                 />
+                {errors.mobileNumber && (
+                  <Text fontSize={"xs"} color={"red.500"}>
+                    {errors.mobileNumber.message}
+                  </Text>
+                )}
               </Field>
 
               <Field color={"#313039"} label={"Enter Password"} w={"100%"}>
                 <Input
                   ps={3}
                   type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  {...register("password", {
+                    required: "Password is required",
+                    minLength: {
+                      value: 6,
+                      message: "Password must be at least 6 characters long",
+                    },
+                  })}
                   placeholder="Enter your password"
                 />
-                <NavLink to="/forgotPassword" >
+                {errors.password && (
+                  <Text fontSize={"xs"} color={"red.500"}>
+                    {errors.password.message}
+                  </Text>
+                )}
+                <NavLink to="/forgotPassword">
                   <Text
                     cursor="pointer"
                     as={"span"}
@@ -144,7 +137,6 @@ const LoginWithPass = () => {
               </Field>
 
               <Button
-                loading={isLoading}
                 mt={4}
                 size={"sm"}
                 bg={"#02A0A0"}
@@ -156,8 +148,6 @@ const LoginWithPass = () => {
               >
                 Confirm Password
               </Button>
-
-              <Text>Forgot password</Text>
             </VStack>
           </VStack>
         </Center>

src/Pages/Profile/Profile.tsx

@@ -4,7 +4,7 @@ import mypfp from "../../assets/profile-Avtars/mypfp.png";
 import { FaCamera } from "react-icons/fa";
 import { Field } from "../../components/ui/field";
 import { Button } from "../../components/ui/button";
-
+import { Editable } from "@chakra-ui/react";
 const Profile = () => {
   return (
     <MainFrame>
@@ -27,16 +27,59 @@ const Profile = () => {
 
         <VStack alignItems="flex-start">
           <HStack>
-            <Field color="black" w="30vw" label="First Name">
+            <VStack alignItems="flex-start">
+              <Text color="black">First Name</Text>
+              <Editable.Root
+                border="0.5px solid #969696"
+                borderRadius="4px"
+                w="30vw"
+                textAlign="start"
+                color="black"
+                defaultValue="Jackson"
+              >
+                <Editable.Preview />
+                <Editable.Input />
+              </Editable.Root>
+            </VStack>
+            <VStack alignItems="flex-start">
+              <Text color="black">Last Name</Text>
+              <Editable.Root
+                border="0.5px solid #969696"
+                borderRadius="4px"
+                w="30vw"
+                textAlign="start"
+                color="black"
+                defaultValue="David"
+              >
+                <Editable.Preview />
+                <Editable.Input />
+              </Editable.Root>
+            </VStack>
+            {/* <Field color="black" w="30vw" label="First Name">
               <Input color="teal" _placeholder={{ color: "inherit" }} />
             </Field>
             <Field color="black" w="30vw" label="Last Name">
               <Input color="teal" _placeholder={{ color: "inherit" }} />
-            </Field>
+            </Field> */}
           </HStack>
-          <Field color="black" w="30vw" label="Phone Number">
+          {/* <Field color="black" w="30vw" label="Phone Number">
             <Input color="teal" _placeholder={{ color: "inherit" }} />
-          </Field>
+          </Field> */}
+          <VStack alignItems="flex-start">
+            <Text color="black">Phone Number</Text>
+            <Editable.Root
+              _hover={{bgColor:"white" , color:"black"}}
+              border="0.5px solid #969696"
+              borderRadius="4px"
+              w="30vw"
+              textAlign="start"
+              color="black"
+              defaultValue="23435465543"
+            >
+              <Editable.Preview />
+              <Editable.Input />
+            </Editable.Root>
+          </VStack>
         </VStack>
         <VStack alignItems="flex-start">
           <Text color="#1C1C1C" fontSize="sm" fontWeight={700}>

src/index.css

@@ -68,7 +68,7 @@ body{
 
 /* Style the scrollbar thumb (the draggable part) */
 ::-webkit-scrollbar-thumb {
-  background-color: #02A0A0; /* Gray color for the thumb */
+  background-color: #f3f3f3; /* Gray color for the thumb */
   border-radius: 10px;
   border: 3px solid #f1f1f1; /* Border around the thumb */
 }