MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

auth layout fix

Browse Source
This commit is contained in:
victorAnumudu
2024-12-06 09:08:54 +01:00
parent 53726ad8eb
commit 4b63384092
17 changed files with 225 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+9 -5
View File
@@ -7,6 +7,7 @@ import HomePage from './views/HomePage';
import SignupPage from './views/SignupPage';
import ForgetpwdPage from './views/ForgetpwdPage';
import UserExist from './component/authorization/UserExist';
import AuthLayout from './component/auth/AuthLayout';
@@ -14,11 +15,14 @@ function App() {
return (
<div className="">
<Routes>
<Route path={siteLinks.home} element={<LoginPage />} />
<Route path={siteLinks.login} element={<LoginPage />} />
<Route path={siteLinks.signup} element={<SignupPage />} />
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
{/* auth routes wrapper */}
<Route element={<AuthLayout />}>
<Route path={siteLinks.home} element={<LoginPage />} />
<Route path={siteLinks.login} element={<LoginPage />} />
<Route path={siteLinks.signup} element={<SignupPage />} />
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
</Route>
{/* protected routes */}
<Route element={<UserExist />}>
src/component/auth/AuthLayout.jsx
+25
View File
@@ -0,0 +1,25 @@
import React, { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import MainLoaderBS from '../loaders/MainLoaderBS'
export default function AuthLayout() {
const [loading, setLoading] = useState(true)
useEffect(()=>{
const timer = setTimeout(()=>{
setLoading(false)
},500)
return () => clearTimeout(timer)
},[])
return (
<div className="bg-white">
{loading ?
<MainLoaderBS />
:
<Outlet />
}
</div>
)
}
src/component/auth/Forgetpwd.jsx
-5
View File
@@ -23,10 +23,6 @@ export default function Forgetpwd() {
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">
@@ -61,7 +57,6 @@ export default function Forgetpwd() {
</div>
</div>
</div>
}
</div>
)
}
src/component/auth/Forgetpwd2.jsx
+32 -39
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'
import BSMainLoader from '../loaders/BSMainLoader'
import MainLoaderBS from '../loaders/MainLoaderBS'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
@@ -20,56 +20,49 @@ export default function Forgetpwd2() {
},[])
return (
<div className="bg-white">
{loading ?
<BSMainLoader />
:
<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">Recover Password</h1>
<p>Please enter your email.</p>
<form className="mt-3 mt-sm-5">
<div className="row">
<div className="col-12">
<div className="form-group">
<label className="control-label">Email*</label>
<input type="text" className="form-control" placeholder="Email" />
</div>
</div>
<div className="col-12 mt-3">
<button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button>
</div>
<div className="col-12 mt-3">
<p>Go <Link to={siteLinks.home}> Back</Link></p>
<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">Recover Password</h1>
<p>Please enter your email.</p>
<form className="mt-3 mt-sm-5">
<div className="row">
<div className="col-12">
<div className="form-group">
<label className="control-label">Email*</label>
<input type="text" className="form-control" placeholder="Email" />
</div>
</div>
</form>
</div>
<div className="col-12 mt-3">
<button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button>
</div>
<div className="col-12 mt-3">
<p>Go <Link to={siteLinks.home}> Back</Link></p>
</div>
</div>
</form>
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<div className="row align-items-center h-100">
<div className="col-7 mx-auto ">
<img className="img-fluid" src={LoginImg} alt="" />
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<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>
)
}
src/component/auth/Login.jsx
-5
View File
@@ -23,10 +23,6 @@ export default function Login() {
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">
@@ -77,7 +73,6 @@ export default function Login() {
</div>
</div>
</div>
}
</div>
)
}
src/component/auth/Login2.jsx
+49 -56
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'
import BSMainLoader from '../loaders/BSMainLoader'
import MainLoaderBS from '../loaders/MainLoaderBS'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
@@ -20,73 +20,66 @@ export default function Login() {
},[])
return (
<div className="bg-white">
{loading ?
<BSMainLoader />
:
<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">MERMS Panel</h1>
<p>Welcome back, please login to your account.</p>
<form 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>
<Link to={siteLinks.forgetpwd} className="ml-auto">Forgot Password ?</Link>
</div>
</div>
<div className="col-12 mt-3">
<button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
</div>
<div className="col-12 mt-3">
<p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
<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">MERMS Panel</h1>
<p>Welcome back, please login to your account.</p>
<form 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>
</form>
</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>
<Link to={siteLinks.forgetpwd} className="ml-auto">Forgot Password ?</Link>
</div>
</div>
<div className="col-12 mt-3">
<button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
</div>
<div className="col-12 mt-3">
<p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
</div>
</div>
</form>
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<div className="row align-items-center h-100">
<div className="col-7 mx-auto ">
<img className="img-fluid" src={LoginImg} alt="" />
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<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>
)
}
src/component/auth/Signup.jsx
-5
View File
@@ -23,10 +23,6 @@ export default function Signup() {
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">
@@ -96,7 +92,6 @@ export default function Signup() {
</div>
</div>
</div>
}
</div>
)
}
src/component/auth/Signup2.jsx
+64 -71
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg'
import BSMainLoader from '../loaders/BSMainLoader'
import MainLoaderBS from '../loaders/MainLoaderBS'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
@@ -20,88 +20,81 @@ export default function Signup2() {
},[])
return (
<div className="bg-white">
{loading ?
<BSMainLoader />
:
<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 class="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
<div class="d-flex align-items-center h-100-vh">
<div class="register p-5">
<h1 class="mb-2">MERMS Panel</h1>
<p>Welcome, Please create your account.</p>
<form class="mt-2 mt-sm-5">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label">First Name*</label>
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label">Last Name*</label>
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Email*</label>
<input type="email" class="form-control" placeholder="Email" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Username*</label>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Password*</label>
<input type="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" />
<label class="form-check-label" for="gridCheck">
I accept terms & policy
</label>
</div>
</div>
<div class="col-12 mt-3">
<button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
</div>
<div class="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
<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 class="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
<div class="d-flex align-items-center h-100-vh">
<div class="register p-5">
<h1 class="mb-2">MERMS Panel</h1>
<p>Welcome, Please create your account.</p>
<form class="mt-2 mt-sm-5">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label">First Name*</label>
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
</form>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label">Last Name*</label>
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Email*</label>
<input type="email" class="form-control" placeholder="Email" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Username*</label>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label">Password*</label>
<input type="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" />
<label class="form-check-label" for="gridCheck">
I accept terms & policy
</label>
</div>
</div>
<div class="col-12 mt-3">
<button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
</div>
<div class="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
</div>
</div>
</form>
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<div className="row align-items-center h-100">
<div className="col-7 mx-auto ">
<img className="img-fluid" src={LoginImg} alt="" />
</div>
</div>
<div className="col-sm-6 col-xxl-9 col-lg-7 bg-gradient o-hidden order-1 order-sm-2">
<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>
)
}
src/component/authorization/UserExist.jsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import BSMainLoader from '../loaders/BSMainLoader'
import MainLoaderBS from '../loaders/MainLoaderBS'
import Layout from '../layout/Layout'
@@ -19,7 +19,7 @@ export default function UserExist() {
return (
<>
{loading ?
<BSMainLoader />
<MainLoaderBS />
:
<Layout>
<Outlet />
src/component/breadcrumb/BreadcrumbComBS.jsx
+34
View File
@@ -0,0 +1,34 @@
import React from 'react'
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
import { TiHomeOutline } from 'react-icons/ti'
import siteLinks from '../../links/siteLinks'
import { Link } from 'react-router-dom'
export default function BreadcrumbComBS({title='Home', paths=[]}) {
return (
<>
<div className="row">
<div className="col-md-12 m-b-30">
<div className="d-block d-sm-flex flex-nowrap align-items-center">
<div className="page-title mb-2 mb-sm-0">
<h1>{title}</h1>
</div>
<div className="ml-auto d-flex align-items-center">
<nav>
<ol className="breadcrumb gap-1 align-items-center p-0 m-b-0">
<Link to={siteLinks.dash}><TiHomeOutline /></Link>
{paths.map((item, index) => (
<li className={`d-flex align-items-center gap-1 ${index + 1 == paths.length ? 'active text-primary' : ''}`}>
<MdKeyboardDoubleArrowRight />
{item}
</li>
))}
</ol>
</nav>
</div>
</div>
</div>
</div>
</>
)
}
src/component/home/Home.jsx
+1 -5
View File
@@ -1,9 +1,5 @@
import React from 'react'
import UserMenu from "../../parts/UserMenu";
import UserHeader from "../../parts/UserHeader";
import HomeSections from "../../parts/HomeSections";
import UserFooter from "../../parts/UserFooter";
import LoaderImage from "../../parts/LoaderImage";
import HomeSections from "./HomeSections";
export default function Home() {
return (
src/parts/HomeSections.jsx → src/component/home/HomeSections.jsx
+4 -2
View File
@@ -1,10 +1,11 @@
import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
export default function HomeSections(){
return <>
<div className="row">
{/* <div className="row">
<div className="col-md-12 m-b-30">
<div className="d-block d-sm-flex flex-nowrap align-items-center">
<div className="page-title mb-2 mb-sm-0">
@@ -25,7 +26,8 @@ export default function HomeSections(){
</div>
</div>
</div>
</div>
</div> */}
<BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} />
<div className="row">
<div className="col-sm-6 col-xxl-3">
<div className="card card-statistics ecommerce-contant overflow-h">
src/component/layout/Layout.jsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'
import UserMenu from "../../parts/UserMenu";
import UserHeader from "../../parts/UserHeader";
import UserFooter from "../../parts/UserFooter";
import UserMenu from "./layoutcom/UserMenu";
import UserHeader from "./layoutcom/UserHeader";
import UserFooter from "./layoutcom/UserFooter";
import { Outlet } from 'react-router-dom';
src/parts/UserFooter.jsx → src/component/layout/layoutcom/UserFooter.jsx
View File
src/parts/UserHeader.jsx → src/component/layout/layoutcom/UserHeader.jsx
View File
src/parts/UserMenu.jsx → src/component/layout/layoutcom/UserMenu.jsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import siteLinks from '../links/siteLinks'
import siteLinks from '../../../links/siteLinks'
export default function UserMenu() {
const {pathname} = useLocation()
src/component/loaders/BSMainLoader.jsx → src/component/loaders/MainLoaderBS.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react'
import Loader from '../../assets/loader/loader.svg'
export default function BSMainLoader() {
export default function MainLoaderBS() {
return (
<div className="loader">
<div className="vh-100 d-flex justify-content-center">