victorAnumudu
114 lines
4.0 KiB
React
114 lines
4.0 KiB
React
import React, { useEffect, useState } from 'react'
|
|
// import { useLocation, useNavigate } from 'react-router-dom'
|
|
// import { useMutation } from '@tanstack/react-query'
|
|
|
|
// import myLinks from '../../myLinks'
|
|
import Label from '../Label'
|
|
import InputText from '../InputText'
|
|
import PageLoader from '../PageLoader'
|
|
// import { loginUser } from '../../services/siteServices'
|
|
|
|
import GoogleDownload from '../../assets/download/andriod.jpg'
|
|
import IOSDownload from '../../assets/download/apple.jpg'
|
|
|
|
export default function LoginCom() {
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
// const {state} = useLocation()
|
|
// const navigate = useNavigate()
|
|
|
|
const [fields, setFields] = useState({
|
|
username: '',
|
|
password: '',
|
|
})
|
|
|
|
const handleChange = ({target:{name, value}}) => {
|
|
setFields(prev => ({...prev, [name]:value}))
|
|
}
|
|
|
|
// const login = useMutation({
|
|
// mutationFn: (fields) => {
|
|
// if(!fields.username || !fields.password){
|
|
// throw new Error('Please provide all fields marked *')
|
|
// }
|
|
// return loginUser(fields)
|
|
// },
|
|
// onError: (error) => {
|
|
// console.log(error)
|
|
// },
|
|
// onSuccess: (res) => {
|
|
// // const {token, room} = res?.data?.data
|
|
// // if(token){
|
|
// // localStorage.setItem('token', token)
|
|
// // localStorage.setItem('room', room)
|
|
// // // const data = {token}
|
|
// // // dispatch(updateUserDetails({ ...data }));
|
|
// // }
|
|
// navigate(myLinks.home, {state:{proceed:'true'}}) // later add redux to dispatch state
|
|
// }
|
|
// })
|
|
|
|
|
|
useEffect(()=>{
|
|
// if(state?.proceed != 'true'){
|
|
// return navigate(myLinks.getStarted, {replace:true})
|
|
// }
|
|
setTimeout(()=>{
|
|
setLoading(false)
|
|
},200)
|
|
},[])
|
|
|
|
return (
|
|
<>
|
|
{loading ?
|
|
<PageLoader />
|
|
:
|
|
<div className={`h-screen bg-sky-300 flex flex-col items-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
|
|
<div className='flex flex-col gap-3 w-[80%] sm:w-[500px] bg-white rounded-xl mt-8 p-8 shadow'>
|
|
<div className='w-full mb-8 flex flex-col gap-1'>
|
|
<h1 className='text-2xl md:text-3xl font-bold'>Digifi BackOffice</h1>
|
|
<p className='text-sm font-medium text-slate-400'>Welcome back, please login to your account</p>
|
|
</div>
|
|
<div className='text-input flex flex-col gap-2'>
|
|
<Label name='Username' htmlfor='username' />
|
|
<InputText id='username' name='username' value={fields.username} handleChange={handleChange} />
|
|
</div>
|
|
<div className='text-input flex flex-col gap-2'>
|
|
<Label name='Password' htmlfor='password' />
|
|
<InputText id='password' name='password' type='password' value={fields.password} handleChange={handleChange} />
|
|
</div>
|
|
|
|
{/* {login.error &&
|
|
<>
|
|
<div className="w-full text-center p-2">
|
|
<p className='text-red-500 text-sm'>{login.error.message}</p>
|
|
</div>
|
|
</>
|
|
} */}
|
|
|
|
<div className='mt-5 flex justify-end items-center'>
|
|
{/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
|
|
<button className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>SIGN IN</button>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-2 gap-8">
|
|
<div className="w-full">
|
|
<a className="icon google"
|
|
href='#' >
|
|
<img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
<a className="icon apple" href='#'>
|
|
<img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
}
|