added some auth pages
This commit was merged in pull request #1.
This commit is contained in:
victorAnumudu
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Label({desc}) {
|
||||
return (
|
||||
<label className="text-left text-black-gray font-medium">{desc}</label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import LoginImg from '../../assets/bg/login.svg'
|
||||
import MainLoader from '../loaders/MainLoader'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import Label from '../Label'
|
||||
import TextInput from '../inputs/TextInput'
|
||||
|
||||
|
||||
export default function Forgetpwd() {
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
setLoading(false)
|
||||
},1000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-white w-full flex justify-center items-center">
|
||||
|
||||
{loading ?
|
||||
<MainLoader />
|
||||
:
|
||||
<div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
|
||||
<div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
|
||||
<div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
|
||||
<div className='w-full text-left'>
|
||||
<h1 className="mb-2 text-black text-4xl font-semibold">Recover Password</h1>
|
||||
<p className='text-black-gray text-base'>Please enter your email.</p>
|
||||
</div>
|
||||
<form className="w-full text-14 text-left text-black-gray">
|
||||
<div className="w-full flex flex-col gap-4 justify-start items-start">
|
||||
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='Email*' />
|
||||
<TextInput type='text' placeholder='Email' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-3">
|
||||
<button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Send</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p>Go <Link to={siteLinks.login} className=' hover:text-primary'>Back</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
|
||||
<div className="w-full">
|
||||
<div className="w-2/3 mx-auto">
|
||||
<img className="w-[80%]" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import LoginImg from '../../assets/bg/login.svg'
|
||||
import MainLoader from '../loaders/MainLoader'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import Label from '../Label'
|
||||
import TextInput from '../inputs/TextInput'
|
||||
|
||||
|
||||
export default function Login() {
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
setLoading(false)
|
||||
},1000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-white w-full flex justify-center items-center">
|
||||
|
||||
{loading ?
|
||||
<MainLoader />
|
||||
:
|
||||
<div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
|
||||
<div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
|
||||
<div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
|
||||
<div className='w-full text-left'>
|
||||
<h1 className="mb-2 text-black text-4xl font-semibold">We Are Mentor</h1>
|
||||
<p className='text-black-gray text-base'>Welcome back, please login to your account.</p>
|
||||
</div>
|
||||
<form className="w-full text-14 text-left text-black-gray">
|
||||
<div className="w-full flex flex-col gap-4 justify-start items-start">
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='User Name*' />
|
||||
<TextInput type='text' placeholder='Username' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='Password*' />
|
||||
<TextInput type='password' placeholder='Password' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full text-left">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-2">
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label className="font-semibold form-check-label" htmlFor="gridCheck">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
<Link to={siteLinks.forgetpwd} className="ml-auto hover:text-primary">Forgot Password ?</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-3">
|
||||
<button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign In</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className='font-medium'>Don't have an account ?<Link to={siteLinks.signup} className=' hover:text-primary'> Sign Up</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
|
||||
<div className="w-full">
|
||||
<div className="w-2/3 mx-auto">
|
||||
<img className="w-[80%]" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import LoginImg from '../../assets/bg/login.svg'
|
||||
|
||||
import MainLoader from '../loaders/MainLoader'
|
||||
|
||||
export default function Login() {
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
setLoading(false)
|
||||
},1000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
|
||||
{loading ?
|
||||
<MainLoader />
|
||||
:
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="bg-white">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="login p-50">
|
||||
<h1 className="mb-2">We Are Mentor</h1>
|
||||
<p>Welcome back, please login to your account.</p>
|
||||
<form action="auth-login.html" className="mt-3 mt-sm-5">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label">User Name*</label>
|
||||
<input type="text" className="form-control" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label">Password*</label>
|
||||
<input type="password" className="form-control" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="d-block d-sm-flex align-items-center">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
<a href="#" className="ml-auto">Forgot Password ?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mt-3">
|
||||
<a href="index.html" className="btn btn-primary text-uppercase">Sign In</a>
|
||||
</div>
|
||||
<div className="col-12 mt-3">
|
||||
<p>Don't have an account ?<a href="auth-register.html"> Sign Up</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2" style={{background: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)'}}>
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import LoginImg from '../../assets/bg/login.svg'
|
||||
import MainLoader from '../loaders/MainLoader'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import Label from '../Label'
|
||||
import TextInput from '../inputs/TextInput'
|
||||
|
||||
|
||||
export default function Signup() {
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
setLoading(false)
|
||||
},1000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-white w-full flex justify-center items-center">
|
||||
|
||||
{loading ?
|
||||
<MainLoader />
|
||||
:
|
||||
<div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
|
||||
<div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
|
||||
<div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
|
||||
<div className='w-full text-left'>
|
||||
<h1 className="mb-2 text-black text-4xl font-semibold">We Are Mentor</h1>
|
||||
<p className='text-black-gray text-base'>Welcome, Please create your account.</p>
|
||||
</div>
|
||||
<form className="w-full text-14 text-left text-black-gray">
|
||||
<div className="w-full flex flex-col gap-4 justify-start items-start">
|
||||
<div className='w-full grid grid-cols-2 gap-8'>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='First Name*' />
|
||||
<TextInput type='text' placeholder='Firstname' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='Last Name*' />
|
||||
<TextInput type='text' placeholder='Lastname' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='Email*' />
|
||||
<TextInput type='text' placeholder='Email' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='User Name*' />
|
||||
<TextInput type='text' placeholder='Username' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Label desc='Password*' />
|
||||
<TextInput type='password' placeholder='Password' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full text-left">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-2">
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label className="font-semibold form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-3">
|
||||
<button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign Up</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className='font-medium'>Already have an account ?<Link to={siteLinks.login} className=' hover:text-primary'> Sign In</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
|
||||
<div className="w-full">
|
||||
<div className="w-2/3 mx-auto">
|
||||
<img className="w-[80%]" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function TextInput({type, placeholder}) {
|
||||
return (
|
||||
<div className='relative w-full h-10'>
|
||||
<input type={type} className="w-full h-full p-2 rounded-sm border border-black-gray focus:outline-none focus:border-primary active:border-primary" placeholder={placeholder} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
import Loader from '../../assets/loader/loader.svg'
|
||||
|
||||
export default function MainLoader() {
|
||||
return (
|
||||
|
||||
<div className="vh-100 d-flex justify-content-center">
|
||||
<div className="align-self-center">
|
||||
<img src={Loader} alt="loader" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user