admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #18 from franze6/Onboarding_steps

Browse Source 
Start window Onboarding1
This commit is contained in:
DuCay
2022-06-02 14:40:24 +03:00
committed by GitHub
parent 9484b0bda9 24a66478d6
commit 99512491fa
11 changed files with 30 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.jsx
View File

@@ -27,12 +27,14 @@ import Onboarding3 from "./pages/Onboarding3";
import Onboarding4 from "./pages/Onboarding4"; import Onboarding4 from "./pages/Onboarding4";
import SharedData from "./pages/SharedData"; import SharedData from "./pages/SharedData";
import ResetPassword from "./pages/ResetPassword"; import ResetPassword from "./pages/ResetPassword";
import Signup from "./pages/Signup";
import Signin from "./pages/Signin"; import Signin from "./pages/Signin";
function App() { function App() {
const location = useLocation(); const location = useLocation();
useEffect(()=> {
localStorage.setItem('svgAvatar', '')
},[])
useEffect(() => { useEffect(() => {
document.querySelector('html').style.scrollBehavior = 'auto' document.querySelector('html').style.scrollBehavior = 'auto'
@@ -43,7 +45,8 @@ function App() {
return ( return (
<> <>
<Routes> <Routes>
<Route exact path="/" element={<Dashboard />} /> <Route exact path="/" element={<Onboarding1 />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/dashboard/analytics" element={<Analytics />} /> <Route path="/dashboard/analytics" element={<Analytics />} />
<Route path="/dashboard/fintech" element={<Fintech />} /> <Route path="/dashboard/fintech" element={<Fintech />} />
<Route path="/digitalId/profile-id" element={<ProfileId />} /> <Route path="/digitalId/profile-id" element={<ProfileId />} />
@@ -51,7 +54,6 @@ function App() {
<Route path="/digitalId/validation-log" element={<ValidationLog />} /> <Route path="/digitalId/validation-log" element={<ValidationLog />} />
<Route path="/digitalId/verify" element={<Verify />} /> <Route path="/digitalId/verify" element={<Verify />} />
<Route path="/messages" element={<Messages />} /> <Route path="/messages" element={<Messages />} />
<Route path="/onboarding-1" element={<Onboarding1 />} />
<Route path="/onboarding-2" element={<Onboarding2 />} /> <Route path="/onboarding-2" element={<Onboarding2 />} />
<Route path="/onboarding-3" element={<Onboarding3 />} /> <Route path="/onboarding-3" element={<Onboarding3 />} />
<Route path="/onboarding-4" element={<Onboarding4 />} /> <Route path="/onboarding-4" element={<Onboarding4 />} />
@@ -61,7 +63,6 @@ function App() {
<Route path="/component/accordion" element={<AccordionPage />} /> <Route path="/component/accordion" element={<AccordionPage />} />
<Route path="/reset-password" element={<ResetPassword />} /> <Route path="/reset-password" element={<ResetPassword />} />
<Route path="/signin" element={<Signin />} /> <Route path="/signin" element={<Signin />} />
<Route path="/signup" element={<Signup />} />
</Routes> </Routes>
</> </>
); );

4
src/components/DropdownProfile.jsx
View File

@@ -75,7 +75,7 @@ function DropdownProfile({
<li> <li>
<Link <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/" to="/dashboard"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
> >
Settings Settings
@@ -84,7 +84,7 @@ function DropdownProfile({
<li> <li>
<Link <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/" to="/dashboard"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
> >
Sign Out Sign Out

4
src/pages/Onboarding1.jsx
View File

@@ -21,7 +21,7 @@ function Onboarding1() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -36,7 +36,7 @@ function Onboarding1() {
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link>

6
src/pages/Onboarding2.jsx
View File

@@ -21,7 +21,7 @@ function Onboarding2() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -36,7 +36,7 @@ function Onboarding2() {
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -87,7 +87,7 @@ function Onboarding2() {
</label> </label>
</div> </div>
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap"> <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
<Link to="/signup">Sign Up</Link> <Link to="/onboarding-3">Sign Up</Link>
</button> </button>
</div> </div>
</form> </form>

4
src/pages/Onboarding3.jsx
View File

@@ -20,7 +20,7 @@ function Onboarding3() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -35,7 +35,7 @@ function Onboarding3() {
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>

13
src/pages/Onboarding4.jsx
View File

@@ -4,6 +4,11 @@ import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
function Onboarding4() { function Onboarding4() {
function saveDigitalId() {
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -19,7 +24,7 @@ function Onboarding4() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -34,7 +39,7 @@ function Onboarding4() {
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -60,8 +65,8 @@ function Onboarding4() {
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" /> <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
</svg> </svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1> <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
<button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white"> <button onClick={()=>saveDigitalId()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link to="/">Go To Profile -&gt;</Link> <Link to="/dashboard">Go To Profile -&gt;</Link>
</button> </button>
</div> </div>

2
src/pages/ResetPassword.jsx
View File

@@ -18,7 +18,7 @@ function ResetPassword() {
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<svg width="32" height="32" viewBox="0 0 32 32"> <svg width="32" height="32" viewBox="0 0 32 32">
<defs> <defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a"> <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">

5
src/pages/SharedData.jsx
View File

@@ -55,9 +55,6 @@ function SharedData() {
] ]
}; };
function saveDigitalId() {
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -92,7 +89,7 @@ function SharedData() {
<div className="flex mt-40 flex-col items-center gap-2.5"> <div className="flex mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" /> <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">{sharedDataItems.data}</span> <span className="text-sm">{sharedDataItems.data}</span>
<Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link> <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
</div> </div>
</div> </div>

6
src/pages/Signin.jsx
View File

@@ -21,7 +21,7 @@ function Signin() {
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<svg width="32" height="32" viewBox="0 0 32 32"> <svg width="32" height="32" viewBox="0 0 32 32">
<defs> <defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a"> <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
@@ -60,13 +60,13 @@ function Signin() {
<div className="mr-1"> <div className="mr-1">
<Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link> <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
</div> </div>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/">Sign In</Link> <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/dashboard">Sign In</Link>
</div> </div>
</form> </form>
{/* Footer */} {/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200"> <div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm"> <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> Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
</div> </div>
{/* Warning */} {/* Warning */}
<div className="mt-5"> <div className="mt-5">

101
src/pages/Signup.jsx
View File

@@ -1,101 +0,0 @@
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;

4
src/partials/Sidebar.jsx
View File

@@ -85,7 +85,7 @@ function Sidebar({
</svg> </svg>
</button> </button>
{/* Logo */} {/* Logo */}
<NavLink end to="/" className="block"> <NavLink end to="/dashboard" className="block">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</NavLink> </NavLink>
</div> </div>
@@ -154,7 +154,7 @@ function Sidebar({
<li className="mb-1 last:mb-0"> <li className="mb-1 last:mb-0">
<NavLink <NavLink
end end
to="/" to="/dashboard"
className={({ isActive }) => className={({ isActive }) =>
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '') 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
} }