MERMS/MermsFirstOffice
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

reformat code

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-09-13 07:39:29 -04:00
parent 147711c54f
commit 5fdb7efcf4
1 changed files with 112 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auth/LoginCom.jsx
+21 -47
View File
@@ -1,13 +1,13 @@
import React, { useState } from 'react' import React, {useState} from 'react'
import { useDispatch } from 'react-redux' import {useDispatch} from 'react-redux'
import { useNavigate, Link } from 'react-router-dom' import {useNavigate, Link} from 'react-router-dom'
import { useMutation } from '@tanstack/react-query' import {useMutation} from '@tanstack/react-query'
import {Formik, Form} from 'formik' import {Formik, Form} from 'formik'
import * as Yup from "yup"; import * as Yup from "yup";
import InputText from '../InputText' import InputText from '../InputText'
import { updateUserDetails } from "../../store/UserDetails"; import {updateUserDetails} from "../../store/UserDetails";
import { loginUser } from '../../services/siteServices' import {loginUser} from '../../services/siteServices'
import RouteLinks from '../../RouteLinks' import RouteLinks from '../../RouteLinks'
// import Icons from '../Icons' // import Icons from '../Icons'
@@ -33,7 +33,7 @@ export default function LoginCom() {
const login = useMutation({ const login = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
if(!fields.username || !fields.password){ if (!fields.username || !fields.password) {
throw new Error('Please provide all fields marked *') throw new Error('Please provide all fields marked *')
} }
return loginUser(fields) return loginUser(fields)
@@ -43,68 +43,45 @@ export default function LoginCom() {
}, },
onSuccess: (res) => { onSuccess: (res) => {
const {jwt_token, user} = res?.data const {jwt_token, user} = res?.data
if(jwt_token){ if (jwt_token) {
localStorage.setItem('token', jwt_token) localStorage.setItem('token', jwt_token)
// localStorage.setItem('room', room) // localStorage.setItem('room', room)
const data = {jwt_token} const data = {jwt_token}
dispatch(updateUserDetails({ ...data, ...user })); dispatch(updateUserDetails({...data, ...user}));
} }
setLoading(false) setLoading(false)
navigate(RouteLinks.homePage, {state:{proceed:'true'}}) // later add redux to dispatch state navigate(RouteLinks.homePage, {state: {proceed: 'true'}}) // later add redux to dispatch state
} }
}) })
// const handleLogin = () => {
// setLoading(true)
// const data = {name: 'dummy'}
// localStorage.setItem('token', 'token')
// dispatch(updateUserDetails({ ...data }));
// setTimeout(()=>{
// navigate(RouteLinks.homePage, {replace:true})
// },500)
// }
//FUNCTION TO HANDLE LOGIN //FUNCTION TO HANDLE LOGIN
const handleSubmit = (values, helper) => { const handleSubmit = (values, helper) => {
login.mutate(values) login.mutate(values)
// handleLogin() // handleLogin()
}; };
return ( return (
<> <>
<div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}> <div
<div className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'> className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
<div
className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
<div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'> <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
{(props)=>( {(props) => (
<Form> <Form>
<div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'> <div
className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
<div className='w-full flex flex-col gap-1 items-center'> <div className='w-full flex flex-col gap-1 items-center'>
<h1 className='text-2xl md:text-3xl font-bold text-black-body'>Sign In</h1> <h1 className='text-2xl md:text-3xl font-bold text-black-body'>Sign In</h1>
<p className='text-sm font-medium text-slate-500'>Welcome back, please login to your account</p> <p className='text-sm font-medium text-slate-500'>Welcome back, please login
to your account</p>
</div> </div>
{/* social login */}
{/*<div className='grid grid-cols-2 gap-4 text-sm'>*/}
{/* <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>*/}
{/* <Icons name='google' />*/}
{/* <span>Sign in with Google</span>*/}
{/* </div>*/}
{/* <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>*/}
{/* <Icons name='apple' />*/}
{/* <span>Sign in with Apple</span>*/}
{/* </div>*/}
{/*</div>*/}
{/*<div className='relative h-[1px] bg-slate-300/50'>*/}
{/* <p className='absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 bg-white p-4 text-12 text-slate-500'>Or with email</p>*/}
{/*</div>*/}
<div className='flex flex-col gap-6'> <div className='flex flex-col gap-6'>
<div className='relative text-input flex flex-col gap-2'> <div className='relative text-input flex flex-col gap-2'>
<p className='absolute left-0 -top-4 text-red-500 text-10'> <p className='absolute left-0 -top-4 text-red-500 text-10'>
@@ -133,7 +110,8 @@ export default function LoginCom() {
{/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */} {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
</div> </div>
<div className='h-10 mb-10'> <div className='h-10 mb-10'>
<button type='submit' disabled={login.isPending} className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button> <button type='submit' disabled={login.isPending}
className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
</div> </div>
{login.error && {login.error &&
@@ -145,13 +123,9 @@ export default function LoginCom() {
} }
</div> </div>
{/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
<div className='flex justify-end gap-4 mt-6 text-[18px] font-medium'> <div className='flex justify-end gap-4 mt-6 text-[18px] font-medium'>
MERMS Integrated Support System MERMS Integrated Support System
</div> </div>
</div> </div>
</Form> </Form>
)} )}