added some auth pages
This commit was merged in pull request #1.
This commit is contained in:
victorAnumudu
@@ -8,6 +8,8 @@
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-router-dom": "^7.0.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
@@ -34,5 +36,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.16"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 1.1 KiB |
+1
-1
@@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Merm</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
+17
-5
@@ -1,11 +1,23 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Home from './views/Home/Home';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
// import './App.css';
|
||||
|
||||
import LoginPage from './views/LoginPage';
|
||||
import siteLinks from './links/siteLinks';
|
||||
import HomePage from './views/HomePage';
|
||||
import SignupPage from './views/SignupPage';
|
||||
import ForgetpwdPage from './views/ForgetpwdPage';
|
||||
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Home />
|
||||
<div className="">
|
||||
<Routes>
|
||||
<Route path={siteLinks.home} element={<HomePage />} />
|
||||
<Route path={siteLinks.login} element={<LoginPage />} />
|
||||
<Route path={siteLinks.signup} element={<SignupPage />} />
|
||||
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1 @@
|
||||
<svg class="lds-typing" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><circle cx="27.5" cy="62.5" r="5" fill="#3be8b0"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.5s"/></circle><circle cx="42.5" cy="62.5" r="5" fill="#1aafd0"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.375s"/></circle><circle cx="57.5" cy="51.068" r="5" fill="#6a67ce"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.25s"/></circle><circle cx="72.5" cy="39.642" r="5" fill="#ffb900"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.125s"/></circle></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
||||
+4
-1
@@ -2,12 +2,15 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
//import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
const siteLinks = {
|
||||
error: '*',
|
||||
home: '/',
|
||||
login: '/auth/login',
|
||||
signup: '/auth/signup',
|
||||
forgetpwd: '/auth/forgetpwd'
|
||||
}
|
||||
|
||||
export default siteLinks
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import Forgetpwd from '../component/auth/Forgetpwd'
|
||||
|
||||
export default function ForgetpwdPage() {
|
||||
return (
|
||||
<Forgetpwd />
|
||||
)
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import '../../css/App.css';
|
||||
export default function Home(){
|
||||
return <div className="samatze">Merms Panel Home</div>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import siteLinks from '../links/siteLinks';
|
||||
|
||||
import '../css/App.css';
|
||||
|
||||
|
||||
export default function HomePage(){
|
||||
return <div className="samatze">Merms Panel Home <Link to={siteLinks.login}>Logout</Link> </div>;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import Login from '../component/auth/Login'
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<Login />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import Signup from '../component/auth/Signup'
|
||||
|
||||
export default function SignupPage() {
|
||||
return (
|
||||
<Signup />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors:{
|
||||
black:{
|
||||
DEFAULT: '#2c2e3e',
|
||||
gray: '#a6a9b7'
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: '#8e54e9',
|
||||
},
|
||||
white: {
|
||||
DEFAULT: '#fff',
|
||||
light: '#999'
|
||||
}
|
||||
},
|
||||
screens: {
|
||||
max_width: '1700px'
|
||||
},
|
||||
fontSize:{
|
||||
10: '10px',
|
||||
12: '12px',
|
||||
14: '14px'
|
||||
},
|
||||
backgroundImage: {
|
||||
login_gradient: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)'
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user