140 lines
4.5 KiB
TypeScript
140 lines
4.5 KiB
TypeScript
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 { PasswordInput } from "../components/ui/password-input"
|
|
import { useNavigate } from "react-router-dom"
|
|
|
|
interface FormValues {
|
|
mobileNumber: number
|
|
password: string
|
|
}
|
|
|
|
const Login = () => {
|
|
const navigate = useNavigate()
|
|
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');
|
|
}
|
|
const { setIsAuthenticate } = context;
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormValues>()
|
|
|
|
const onSubmit = handleSubmit(async (data) => {
|
|
setIsLoading(true);
|
|
|
|
// Encode Basic Auth Credentials
|
|
const username = import.meta.env.VITE_USER_NAME||''; // Replace with actual username
|
|
const password = import.meta.env.VITE_PASSWORD||''; // Replace with actual password
|
|
const basicAuth = `${username} : ${password}`; // Encode to Base64
|
|
|
|
try {
|
|
const res = await axios.post(
|
|
`${import.meta.env.VITE_API_URL}/login`,
|
|
{
|
|
mobile_number: Number(data.mobileNumber),
|
|
password: data.password,
|
|
},
|
|
{
|
|
headers: {
|
|
Authorization: `Basic ${basicAuth}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
|
|
}
|
|
);
|
|
|
|
if (res.data) {
|
|
setIsAuthenticate(true)
|
|
console.log('====================================');
|
|
console.log(res.data?.data);
|
|
console.log('====================================');
|
|
navigate('/')
|
|
dispatch(setToken(String(res.data?.data["access-token"])));
|
|
} else {
|
|
|
|
console.log("====================================");
|
|
console.log(res);
|
|
console.log("====================================");
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
if (error) {
|
|
|
|
console.error("Login failed", error);
|
|
setIsLoading(false)
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
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'}>
|
|
<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'}>
|
|
<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>
|
|
|
|
<VStack mt={6} gap={4} w={'full'}>
|
|
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
|
|
<Input type="number" 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} >
|
|
<PasswordInput ps={3} {...register("password", { required: "Pasword is required" })} 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>
|
|
|
|
<Text>Forgot password</Text>
|
|
</VStack>
|
|
|
|
|
|
</VStack>
|
|
</Center>
|
|
<Toaster />
|
|
</HStack>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
export default Login |