login page started

docker-compose.yml

@@ -1,6 +1,7 @@
 version: '3'
 services:
   digifi-office:
+    image: registry.chiefsoft.net/digifi-firstoffice:latest
     build:
       context: .
       dockerfile: Dockerfile
@@ -28,4 +29,4 @@ networks:
     driver: bridge
     ipam:
       config:
-        - subnet: 172.15.56.0/24
+        - subnet: 172.15.56.0/24

src/components/auth/LoginCom.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
 // import { useMutation } from '@tanstack/react-query'
 
 import Label from '../Label'
@@ -12,6 +12,8 @@ import { updateUserDetails } from "../../store/UserDetails";
 import GoogleDownload from '../../assets/download/andriod.jpg'
 import IOSDownload from '../../assets/download/apple.jpg'
 import RouteLinks from '../../RouteLinks'
+import DummyLogo from '../DummyLogo'
+import Icons from '../Icons'
 
 export default function LoginCom() {
 
@@ -64,47 +66,66 @@ export default function LoginCom() {
 
   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 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-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
+            {/* <DummyLogo />
+            <p className='text-4xl text-black-body font-bold'>Dummy Text Here</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 className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
+            <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'>
+                <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>
               </div>
 
-              <div className="w-full">
-                <a className="icon apple"  href='#'>
-                    <img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
-                </a>
+              {/* 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='text-input flex flex-col gap-2'>
+                  <InputText id='username' placeholder='Username' name='username' value={fields.username} handleChange={handleChange} />
+                </div>
+                <div className='text-input flex flex-col gap-2'>
+                  <InputText id='password' placeholder='Password' name='password' type='password' value={fields.password} handleChange={handleChange} />
+                  <p className='text-sm text-end font-medium text-primary'>Forget password ?</p>
+                </div>
+                <div className='h-10'>
+                  {/* <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='w-full h-full bg-primary text-white font-bold rounded-md'>{loading ? 'Loading...' : 'Sign In'}</button>
+                </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-[13px] font-medium'>
+                <Link className='text-primary' to=''>Terms</Link>
+                <Link className='text-primary' to=''>Plans</Link>
+                <Link className='text-primary' to=''>Contact Us</Link>
+              </div>
+
+
+              {/* {login.error &&
+              <>
+                <div className="w-full text-center p-2">
+                  <p className='text-red-500 text-sm'>{login.error.message}</p>
+              </div>
+              </>
+              } */}
+            </div>
           </div>
         </div>
       </div>