Returned authorization
This commit is contained in:
DwCay
@@ -25,6 +25,9 @@ import Onboarding1 from "./pages/Onboarding1";
|
||||
import Onboarding2 from "./pages/Onboarding2";
|
||||
import Onboarding3 from "./pages/Onboarding3";
|
||||
import Onboarding4 from "./pages/Onboarding4";
|
||||
import ResetPassword from "./pages/ResetPassword";
|
||||
import Signup from "./pages/Signup";
|
||||
import Signin from "./pages/Signin";
|
||||
|
||||
function App() {
|
||||
|
||||
@@ -54,6 +57,9 @@ function App() {
|
||||
<Route path="/component/button" element={<ButtonPage />} />
|
||||
<Route path="/component/badge" element={<BadgePage />} />
|
||||
<Route path="/component/accordion" element={<AccordionPage />} />
|
||||
<Route path="/reset-password" element={<ResetPassword />} />
|
||||
<Route path="/signin" element={<Signin />} />
|
||||
<Route path="/signup" element={<Signup />} />
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -25,7 +25,7 @@ function Onboarding1() {
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-1">Sign In</Link>
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ function Onboarding2() {
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-2">Sign In</Link>
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ function Onboarding3() {
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-3">Sign In</Link>
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ function Onboarding4() {
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-4">Sign In</Link>
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
73
src/pages/ResetPassword.jsx
Normal file
73
src/pages/ResetPassword.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import AuthImage from '../images/auth-image.jpg';
|
||||
import AuthDecoration from '../images/auth-decoration.png';
|
||||
|
||||
function ResetPassword() {
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative md:flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="md:w-1/2">
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link className="block" to="/">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
|
||||
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
|
||||
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#38BDF8" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="#6366F1" width="32" height="32" rx="16" />
|
||||
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
|
||||
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
|
||||
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-sm mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">Reset your Password ✨</h1>
|
||||
{/* Form */}
|
||||
<form>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
|
||||
<input id="email" className="form-input w-full" type="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end mt-6">
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send Reset Link</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
|
||||
<img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
|
||||
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResetPassword;
|
||||
100
src/pages/Signin.jsx
Normal file
100
src/pages/Signin.jsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import AuthImage from '../images/auth-image.jpg';
|
||||
import AuthDecoration from '../images/auth-decoration.png';
|
||||
|
||||
function Signin() {
|
||||
useEffect(() => {
|
||||
localStorage.setItem('svgKey', '')
|
||||
}, [])
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative md:flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="md:w-1/2">
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link className="block" to="/">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
|
||||
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
|
||||
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#38BDF8" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="#6366F1" width="32" height="32" rx="16" />
|
||||
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
|
||||
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
|
||||
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-sm mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">Welcome back! ✨</h1>
|
||||
{/* Form */}
|
||||
<form>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="email">Email Address</label>
|
||||
<input id="email" className="form-input w-full" type="email" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
|
||||
<input id="password" className="form-input w-full" type="password" autoComplete="on" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="mr-1">
|
||||
<Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
|
||||
</div>
|
||||
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/">Sign In</Link>
|
||||
</div>
|
||||
</form>
|
||||
{/* Footer */}
|
||||
<div className="pt-5 mt-6 border-t border-slate-200">
|
||||
<div className="text-sm">
|
||||
Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signup">Sign Up</Link>
|
||||
</div>
|
||||
{/* Warning */}
|
||||
<div className="mt-5">
|
||||
<div className="bg-amber-100 text-amber-600 px-3 py-2 rounded">
|
||||
<svg className="inline w-3 h-3 shrink-0 fill-current mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
|
||||
</svg>
|
||||
<span className="text-sm">
|
||||
To support you during the pandemic super pro features are free until March 31st.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
|
||||
<img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
|
||||
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Signin;
|
||||
101
src/pages/Signup.jsx
Normal file
101
src/pages/Signup.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import AuthImage from '../images/auth-image.jpg';
|
||||
import AuthDecoration from '../images/auth-decoration.png';
|
||||
|
||||
function Signup() {
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative md:flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="md:w-1/2">
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link className="block" to="/">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
|
||||
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
|
||||
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#38BDF8" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="#6366F1" width="32" height="32" rx="16" />
|
||||
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
|
||||
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
|
||||
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-sm mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
|
||||
{/* Form */}
|
||||
<form>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
|
||||
<input id="email" className="form-input w-full" type="email" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
|
||||
<input id="name" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="role">Your Role <span className="text-rose-500">*</span></label>
|
||||
<select id="role" className="form-select w-full">
|
||||
<option>Designer</option>
|
||||
<option>Developer</option>
|
||||
<option>Accountant</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
|
||||
<input id="password" className="form-input w-full" type="password" autoComplete="on" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="mr-1">
|
||||
<label className="flex items-center">
|
||||
<input type="checkbox" className="form-checkbox" />
|
||||
<span className="text-sm ml-2">Email me about product news.</span>
|
||||
</label>
|
||||
</div>
|
||||
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/">Sign Up</Link>
|
||||
</div>
|
||||
</form>
|
||||
{/* Footer */}
|
||||
<div className="pt-5 mt-6 border-t border-slate-200">
|
||||
<div className="text-sm">
|
||||
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
|
||||
<img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
|
||||
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Signup;
|
||||
Reference in New Issue
Block a user