files

2025-04-04 13:15:42 -04:00
parent e3b8c374d3
commit 0f4844cb05
76 changed files with 20352 additions and 0 deletions
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+// import { useMutation } from '@tanstack/react-query'
+
+import Label from '../Label'
+import InputText from '../InputText'
+import PageLoader from '../PageLoader'
+import { updateUserDetails } from "../../store/UserDetails";
+// import { loginUser } from '../../services/siteServices'
+
+import GoogleDownload from '../../assets/download/andriod.jpg'
+import IOSDownload from '../../assets/download/apple.jpg'
+import RouteLinks from '../../RouteLinks'
+
+export default function LoginCom() {
+
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+  
+  const [loading, setLoading] = useState(false)
+
+  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
+  //   }
+  // })
+
+
+  const handleLogin = () => {
+    setLoading(true)
+    const data = {name: 'dummy'}
+    localStorage.setItem('token', 'token')
+    dispatch(updateUserDetails({ ...data }));
+    setTimeout(()=>{
+      navigate(RouteLinks.homePage, {replace:true})
+    },500)
+  }
+
+  return (
+    <>
+      <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 onClick={handleLogin} className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>{loading ? 'Loading...' : 'SIGN IN'}</button>
+          </div>
+
+          <div className="hidden mt-8 gri 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>
+    </>
+  )
+}