Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

[ working ... ]

Browse Source
This commit is contained in:
YasinShaikh123
2025-02-10 12:30:06 +05:30
parent f0fcdc14ea
commit f7e76c8fc0
2 changed files with 109 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/Pages/Login.tsx
View File

@@ -1,107 +1,147 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import axios from "axios"
import { useContext, useState } from "react"
import { useForm } from "react-hook-form"
import { useDispatch } from "react-redux"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import { setToken } from "../Redux/Service/authSlice"
import logo from '../assets/logo.svg'
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { Toaster } from "../components/ui/toaster"
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import axios from "axios";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import { setToken } from "../Redux/Service/authSlice";
import logo from "../assets/logo.svg";
import { Button } from "../components/ui/button";
import { Field } from "../components/ui/field";
import { Toaster } from "../components/ui/toaster";
interface FormValues {
mobileNumber: number
password: string
mobileNumber: number;
password: string;
}
const Login = () => {
const dispatch = useDispatch()
const [isLoading, setIsLoading] = useState<boolean>(false)
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState<boolean>(false);
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error('App must be used within a GlobalStateProvider');
throw new Error("App must be used within a GlobalStateProvider");
}
const { setIsAuthenticate } = context;
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>()
} = useForm<FormValues>();
const onSubmit = handleSubmit(async (data) => {
setIsLoading(true)
setIsLoading(true);
try {
const response = await axios.post(`${import.meta.env.VITE_API_URL}/v1/login`, {
mobile_number: data.mobileNumber,
password: data.password,
});
console.log('====================================');
const response = await axios.post(
`${import.meta.env.VITE_API_URL}/v1/login`,
{
mobile_number: data.mobileNumber,
password: data.password,
}
);
console.log("====================================");
console.log(response);
console.log('====================================');
console.log("====================================");
dispatch(setToken(String(response.data["access-token"])));
} catch (error) {
console.error("Login failed", error);
}
});
return (
<VStack
w={'100%'} h={'100vh'} bg={'#ffffff'} >
<HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
<VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
<HStack
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
w={"100%"}
ps={8}
h={"7%"}
justifyContent={"flex-start"}
>
<Image w={50} src={logo} />
</HStack>
<HStack
w={'100%'} h={'93%'} p={8} gap={8}>
<Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
<HStack w={"100%"} h={"93%"} p={8} gap={8}>
<Center
display={{ base: "none", md: "flex" }}
bg={"#02A0A033"}
w={"50%"}
h={"100%"}
rounded={"3xl"}
>
<Image w={250} src={logo} />
</Center>
<Center
as={"form"}
onSubmit={onSubmit}
p={{ base: 4, md: 16 }}
w={{ base: "100%", md: "50%" }}
h={"100%"}
>
<VStack gap={2} w={"100%"} alignItems={"flex-start"}>
<Text
w={"100%"}
textAlign={"center"}
fontSize={"24px"}
fontWeight={"normal"}
color={"#313039"}
>
LOGIN
</Text>
<Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
<VStack gap={2} w={'100%'} alignItems={'flex-start'}>
<Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
<VStack mt={6} gap={4} w={'full'}>
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
<Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
<VStack mt={6} gap={4} w={"full"}>
<Field
color={"#313039"}
label={"Enter Mobile Number"}
w={"100%"}
invalid={!!errors.mobileNumber}
errorText={errors.mobileNumber?.message}
>
<Input
ps={3}
{...register("mobileNumber", {
required: "Mobile Number address is required",
})}
placeholder="Mobile Number Address"
/>
{/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
</Field>
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.password} errorText={errors.password?.message} >
<Input ps={3} {...register("password", { required: "Pasword is required" })} type="password" placeholder="Enter password" />
<Field
color={"#313039"}
label={"Enter Mobile Number"}
w={"100%"}
invalid={!!errors.password}
errorText={errors.password?.message}
>
<Input
ps={3}
{...register("password", { required: "Pasword is required" })}
type="password"
placeholder="Enter password"
/>
{/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
</Field>
<Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Login</Button>
<Button
loading={isLoading}
mt={4}
size={"sm"}
bg={"#02A0A0"}
rounded={"md"}
w={"100%"}
color={"#ffffff"}
type="submit"
>
Login
</Button>
<Text>Forgot password</Text>
</VStack>
</VStack>
</Center>
<Toaster />
</HStack>
</VStack>
)
}
);
};
export default Login
export default Login;