Change page signin
This commit is contained in:
DwCay
@@ -1,99 +1,105 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, {useState} from 'react';
|
||||
import {observer} from "mobx-react-lite";
|
||||
import { Link } from 'react-router-dom';
|
||||
import AuthImage from '../images/auth-image.jpg';
|
||||
import AuthDecoration from '../images/auth-decoration.png';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
import {registrationStore} from "../store/store";
|
||||
|
||||
const SignIn = observer(()=>{
|
||||
|
||||
const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
|
||||
const[addedPassPhrase, setAddedPassPhrase] = useState(false);
|
||||
|
||||
function savePassPhrase (copiedPhrase) {
|
||||
if (copiedPhrase.split(' ').length === 12) {
|
||||
registrationStore.savePastPassPhrase(copiedPhrase.trim());
|
||||
setPassPhrase(registrationStore.passPhrase);
|
||||
setAddedPassPhrase(true);
|
||||
}
|
||||
};
|
||||
|
||||
function convertPassPhraseToArray() {
|
||||
return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
|
||||
}
|
||||
|
||||
function pastePassPhrase() {
|
||||
navigator.clipboard.readText().then(res => savePassPhrase(res));
|
||||
};
|
||||
|
||||
function SignIn() {
|
||||
useEffect(() => {
|
||||
localStorage.setItem('svgKey', '')
|
||||
}, []);
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative md:flex">
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="md:w-1/2">
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex-1">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link className="block" to="/dashboard">
|
||||
<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>
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Have not an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
|
||||
</div>
|
||||
</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 className="px-4 mt-20 py-8">
|
||||
<div className="max-w-fit mx-auto flex flex-col gap-y-36">
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
|
||||
{/* htmlForm */}
|
||||
<div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
|
||||
{convertPassPhraseToArray().map(tag => (
|
||||
<button key={tag.id} className="min-w-[93px] min-h-[26px] bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
|
||||
<span className="text-sm font-medium">{tag.str}</span>
|
||||
</button>
|
||||
))}
|
||||
</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 className="flex pl-7 gap-x-5">
|
||||
<button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
|
||||
</svg>
|
||||
<span className="ml-2">Paste</span>
|
||||
</button>
|
||||
</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="/dashboard">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="/">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 className="flex items-center justify-between">
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
|
||||
<Link to={addedPassPhrase && "/dashboard"}>Go To Profile -></Link>
|
||||
</button>
|
||||
</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 className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
|
||||
<div className="flex mt-40 flex-col items-center gap-2.5">
|
||||
<div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
|
||||
<img className="object-cover object-center" alt="" src={generateSvgAvatar(registrationStore.pubKey)}/>
|
||||
</div>
|
||||
<span className="text-sm">Your Digital ID</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default SignIn;
|
||||
|
||||
Reference in New Issue
Block a user