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

added some auth pages #1

Merged
ameye merged 1 commits from auth_page into master 2024-12-05 00:25:55 +00:00
Conversation 0 Commits 1 Files Changed 25
+482 -11
25 changed files with 482 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+5
View File
@@ -8,6 +8,8 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-router-dom": "^7.0.2",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
@@ -34,5 +36,8 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"tailwindcss": "^3.4.16"
} }
} }
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

public/index.html
+1 -1
View File
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Merm</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

src/App.js
+17 -5
View File
@@ -1,11 +1,23 @@
import logo from './logo.svg'; import { Routes, Route } from 'react-router-dom';
import './App.css'; // import './App.css';
import Home from './views/Home/Home';
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() { function App() {
return ( return (
<div className="App"> <div className="">
<Home /> <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> </div>
); );
} }
src/assets/bg/login.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

src/assets/coming-soon-bg.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

src/assets/loader/loader.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/component/Label.jsx
+7
View File
@@ -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>
)
}
src/component/auth/Forgetpwd.jsx
+67
View File
@@ -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>
)
}
src/component/auth/Login.jsx
+83
View File
@@ -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>
)
}
src/component/auth/Login2.jsx
+88
View File
@@ -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>
)
}
src/component/auth/Signup.jsx
+102
View File
@@ -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>
)
}
src/component/inputs/TextInput.jsx
+9
View File
@@ -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>
)
}
src/component/loaders/MainLoader.jsx
+13
View File
@@ -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>
)
}
src/index.css
+4
View File
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
src/index.js
+4 -1
View File
@@ -2,12 +2,15 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import { BrowserRouter } from 'react-router-dom';
//import reportWebVitals from './reportWebVitals'; //import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode> </React.StrictMode>
); );
src/links/siteLinks.js
+9
View File
@@ -0,0 +1,9 @@
const siteLinks = {
error: '*',
home: '/',
login: '/auth/login',
signup: '/auth/signup',
forgetpwd: '/auth/forgetpwd'
}
export default siteLinks
src/views/ForgetpwdPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import Forgetpwd from '../component/auth/Forgetpwd'
export default function ForgetpwdPage() {
return (
<Forgetpwd />
)
}
src/views/Home/Home.js
-4
View File
@@ -1,4 +0,0 @@
import '../../css/App.css';
export default function Home(){
return <div className="samatze">Merms Panel Home</div>;
}
src/views/HomePage.js
+9
View File
@@ -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>;
}
src/views/LoginPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import Login from '../component/auth/Login'
export default function LoginPage() {
return (
<Login />
)
}
src/views/SignupPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import Signup from '../component/auth/Signup'
export default function SignupPage() {
return (
<Signup />
)
}
tailwind.config.js
+37
View File
@@ -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: [],
}