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

'Login chnges'

Browse Source
This commit is contained in:
YasinShaikh123
2025-02-11 14:47:33 +05:30
parent 7dcff8798d
commit a80163d589
1 changed files with 107 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/Pages/Login.tsx
View File

@@ -1,45 +1,45 @@
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"
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
mobileNumber: number;
password: string;
}
const Login = () => {
const navigate = useNavigate()
const dispatch = useDispatch()
const [isLoading, setIsLoading] = useState<boolean>(false)
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');
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);
// 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 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`,
@@ -56,84 +56,119 @@ const Login = () => {
);
if (res.data) {
setIsAuthenticate(true)
console.log('====================================');
setIsAuthenticate(true);
console.log("====================================");
console.log(res.data?.data);
console.log('====================================');
navigate('/')
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)
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'}>
<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 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> */}
<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
color={"#313039"}
label={"Enter password."}
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>
<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;