add prettier
This commit is contained in:
kandrusyak
@@ -1,41 +1,41 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import OnboardingImage from '../images/onboarding-image.jpg';
|
||||
import OnboardingDecoration from '../images/auth-decoration.png';
|
||||
import Logo from "../images/logo.png";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { store } from "../store/store";
|
||||
import { Navigate } from "react-router-dom";
|
||||
import Logo from '../images/logo.png';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { store } from '../store/store';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
|
||||
const Onboarding1 = observer(() => {
|
||||
|
||||
useEffect(() => {
|
||||
store.clearDataRegistration()
|
||||
}, [])
|
||||
store.clearDataRegistration();
|
||||
}, []);
|
||||
|
||||
if(store.passPhrase)
|
||||
return <Navigate to="/digitalId/profile-id" replace={true} />
|
||||
if (store.passPhrase)
|
||||
return <Navigate to="/digitalId/profile-id" replace={true} />;
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
<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">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<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="/signIn">Sign In</Link>
|
||||
Have an account?{' '}
|
||||
<Link
|
||||
className="font-medium text-indigo-500 hover:text-indigo-600"
|
||||
to="/signIn"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,19 +43,42 @@ const Onboarding1 = observer(() => {
|
||||
<div className="px-4 pt-12 pb-[142px]">
|
||||
<div className="max-w-md mx-auto w-full">
|
||||
<div className="relative">
|
||||
<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">
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span 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</span>
|
||||
<span
|
||||
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
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
|
||||
to="/onboarding-3"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
|
||||
to="/onboarding-4"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -65,49 +88,120 @@ const Onboarding1 = observer(() => {
|
||||
|
||||
<div className="px-4 py-8">
|
||||
<div className="max-w-md mx-auto">
|
||||
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-12">
|
||||
Tell us about your company ✨
|
||||
</h1>
|
||||
{/* Form */}
|
||||
<div>
|
||||
<div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
|
||||
<label className="flex-1 relative block cursor-pointer">
|
||||
<input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio-buttons"
|
||||
className="peer sr-only"
|
||||
defaultChecked
|
||||
/>
|
||||
<div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
||||
<svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
|
||||
<circle className="text-indigo-100" cx="20" cy="20" r="20" />
|
||||
<path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
|
||||
<svg
|
||||
className="inline-flex w-10 h-10 shrink-0 fill-current mb-2"
|
||||
viewBox="0 0 40 40"
|
||||
>
|
||||
<circle
|
||||
className="text-indigo-100"
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="20"
|
||||
/>
|
||||
<path
|
||||
className="text-indigo-500"
|
||||
d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z"
|
||||
/>
|
||||
</svg>
|
||||
<div className="font-semibold text-slate-800 mb-1">Individual</div>
|
||||
<div className="text-sm">Lorem ipsum is place text commonly used.</div>
|
||||
<div className="font-semibold text-slate-800 mb-1">
|
||||
Individual
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is place text commonly used.
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
|
||||
<div
|
||||
className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
</label>
|
||||
<label className="flex-1 relative block cursor-pointer">
|
||||
<input type="radio" name="radio-buttons" className="peer sr-only" />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio-buttons"
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
||||
<svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
|
||||
<circle className="text-indigo-100" cx="20" cy="20" r="20" />
|
||||
<path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
|
||||
<circle className="text-indigo-100" cx="20" cy="20" r="20" />
|
||||
<path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" />
|
||||
<path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
|
||||
<svg
|
||||
className="inline-flex w-10 h-10 shrink-0 fill-current mb-2"
|
||||
viewBox="0 0 40 40"
|
||||
>
|
||||
<circle
|
||||
className="text-indigo-100"
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="20"
|
||||
/>
|
||||
<path
|
||||
className="text-indigo-500"
|
||||
d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z"
|
||||
/>
|
||||
<circle
|
||||
className="text-indigo-100"
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="20"
|
||||
/>
|
||||
<path
|
||||
className="text-indigo-300"
|
||||
d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z"
|
||||
/>
|
||||
<path
|
||||
className="text-indigo-500"
|
||||
d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z"
|
||||
/>
|
||||
</svg>
|
||||
<div className="font-semibold text-slate-800 mb-1">Organization</div>
|
||||
<div className="text-sm">Lorem ipsum is place text commonly used.</div>
|
||||
<div className="font-semibold text-slate-800 mb-1">
|
||||
Organization
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is place text commonly used.
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
|
||||
<div
|
||||
className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-between space-x-6 mb-8">
|
||||
<div>
|
||||
<div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div>
|
||||
<div className="text-xs font-normal leading-6">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
|
||||
<div className="font-medium text-slate-800 text-sm mb-1">
|
||||
💸 Lorem ipsum is place text commonly?
|
||||
</div>
|
||||
<div className="text-xs font-normal leading-6">
|
||||
Lorem ipsum is placeholder text commonly used in the
|
||||
graphic, print, and publishing industries for previewing
|
||||
layouts.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch" className="sr-only" defaultChecked />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="switch"
|
||||
className="sr-only"
|
||||
defaultChecked
|
||||
/>
|
||||
<label className="bg-slate-400" htmlFor="switch">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<span
|
||||
className="bg-white shadow-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span className="sr-only">Switch label</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -119,24 +213,34 @@ const Onboarding1 = observer(() => {
|
||||
</button>
|
||||
</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={OnboardingImage} width="760" height="1024" alt="Onboarding" />
|
||||
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
|
||||
<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={OnboardingImage}
|
||||
width="760"
|
||||
height="1024"
|
||||
alt="Onboarding"
|
||||
/>
|
||||
<img
|
||||
className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block"
|
||||
src={OnboardingDecoration}
|
||||
width="218"
|
||||
height="224"
|
||||
alt="Authentication decoration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
})
|
||||
});
|
||||
|
||||
export default Onboarding1;
|
||||
|
||||
@@ -1,74 +1,81 @@
|
||||
import React, {useEffect, useMemo, useState} from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { store } from "../store/store";
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { store } from '../store/store';
|
||||
import OnboardingImage from '../images/onboarding-image.jpg';
|
||||
import OnboardingDecoration from '../images/auth-decoration.png';
|
||||
import Logo from "../images/logo.png";
|
||||
import Logo from '../images/logo.png';
|
||||
|
||||
const Onboarding2 = observer(() => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [dataRegistration, setDataRegistration] = useState(
|
||||
{
|
||||
firstname: '',
|
||||
secondname: '',
|
||||
gender: '',
|
||||
birthdate: '',
|
||||
}
|
||||
const [dataRegistration, setDataRegistration] = useState({
|
||||
firstname: '',
|
||||
secondname: '',
|
||||
gender: '',
|
||||
birthdate: '',
|
||||
});
|
||||
|
||||
const fillingForm = useMemo(
|
||||
() =>
|
||||
!Object.keys(dataRegistration).find((item) => !dataRegistration[item]),
|
||||
[dataRegistration]
|
||||
);
|
||||
|
||||
const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
|
||||
|
||||
const saveValueChange = (event) => {
|
||||
const newValue=event.target.value;
|
||||
const newValue = event.target.value;
|
||||
setDataRegistration({
|
||||
...dataRegistration,
|
||||
[event.target.id]: newValue,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const saveStoreRegistration = () => {
|
||||
if (fillingForm) {
|
||||
store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
|
||||
store.saveDataRegistration(
|
||||
Object.keys(dataRegistration).map((item) => ({
|
||||
key: `${item}`,
|
||||
value: dataRegistration[item],
|
||||
})
|
||||
))
|
||||
navigate("/onboarding-3", { replace: true });
|
||||
}))
|
||||
);
|
||||
navigate('/onboarding-3', { replace: true });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(store.accountData.length === 0)
|
||||
return;
|
||||
setDataRegistration(store.accountData.reduce((acc, item) => ({
|
||||
...acc,
|
||||
[item.key]: item.value
|
||||
}), {}))
|
||||
|
||||
}, [])
|
||||
if (store.accountData.length === 0) return;
|
||||
setDataRegistration(
|
||||
store.accountData.reduce(
|
||||
(acc, item) => ({
|
||||
...acc,
|
||||
[item.key]: item.value,
|
||||
}),
|
||||
{}
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
<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">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<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="/signIn">Sign In</Link>
|
||||
Have an account?{' '}
|
||||
<Link
|
||||
className="font-medium text-indigo-500 hover:text-indigo-600"
|
||||
to="/signIn"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -76,19 +83,42 @@ const Onboarding2 = observer(() => {
|
||||
<div className="px-4 pt-12 pb-[59px]">
|
||||
<div className="max-w-md mx-auto w-full">
|
||||
<div className="relative">
|
||||
<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">
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span 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</span>
|
||||
<span
|
||||
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
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
|
||||
to="/onboarding-3"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
|
||||
to="/onboarding-4"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -98,57 +128,120 @@ const Onboarding2 = observer(() => {
|
||||
|
||||
<div className="px-4 py-8">
|
||||
<div className="max-w-[344px] mx-auto">
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">
|
||||
Create your Account ✨
|
||||
</h1>
|
||||
{/* Form */}
|
||||
<div>
|
||||
<div className="space-y-4 mb-8">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
|
||||
<input id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.firstname} />
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="first_name"
|
||||
>
|
||||
First name <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="firstname"
|
||||
onChange={(event) => saveValueChange(event)}
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
value={dataRegistration.firstname}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
|
||||
<input id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.secondname} />
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="second_name"
|
||||
>
|
||||
Last name <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="secondname"
|
||||
onChange={(event) => saveValueChange(event)}
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
value={dataRegistration.secondname}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
|
||||
<select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full" value={dataRegistration.gender}>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="gender"
|
||||
>
|
||||
Gender <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="gender"
|
||||
onChange={(event) => saveValueChange(event)}
|
||||
className="form-select w-full"
|
||||
value={dataRegistration.gender}
|
||||
>
|
||||
<option className="hidden"></option>
|
||||
<option>male</option>
|
||||
<option>female</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
|
||||
<input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" value={dataRegistration.birthdate} />
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="birthdate"
|
||||
>
|
||||
Date of birth <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="birthdate"
|
||||
onChange={(event) => saveValueChange(event)}
|
||||
className="form-input w-full"
|
||||
type="date"
|
||||
autoComplete="on"
|
||||
value={dataRegistration.birthdate}
|
||||
/>
|
||||
</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>
|
||||
<span className="text-sm ml-2">
|
||||
Email me about product news.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">Sign Up
|
||||
<button
|
||||
onClick={saveStoreRegistration}
|
||||
className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</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={OnboardingImage} width="760" height="1024" alt="Onboarding" />
|
||||
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
|
||||
<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={OnboardingImage}
|
||||
width="760"
|
||||
height="1024"
|
||||
alt="Onboarding"
|
||||
/>
|
||||
<img
|
||||
className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block"
|
||||
src={OnboardingDecoration}
|
||||
width="218"
|
||||
height="224"
|
||||
alt="Authentication decoration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,53 +1,55 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import {observer} from "mobx-react-lite";
|
||||
import React, { useEffect } from 'react';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
import {store} from "../store/store";
|
||||
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
|
||||
import Logo from '../images/logo.png';
|
||||
import { store } from '../store/store';
|
||||
|
||||
const Onboarding3 = observer(()=>{
|
||||
|
||||
useEffect(()=>{
|
||||
const Onboarding3 = observer(() => {
|
||||
useEffect(() => {
|
||||
store.generatePassPhrase();
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
const generatePassPhrase = () => {
|
||||
store.generatePassPhrase();
|
||||
};
|
||||
|
||||
const savePassPhraseInStore = copiedPhrase => {
|
||||
const savePassPhraseInStore = (copiedPhrase) => {
|
||||
if (copiedPhrase.split(' ').length === 12) {
|
||||
store.savePastPassPhrase(copiedPhrase.trim());
|
||||
}
|
||||
};
|
||||
|
||||
const pastePassPhrase = () => {
|
||||
navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
|
||||
navigator.clipboard.readText().then((res) => savePassPhraseInStore(res));
|
||||
};
|
||||
|
||||
const convertPassPhraseToArray = () => store.passPhrase.split(' ').
|
||||
map((item, index) => ({str: item, id: index}));
|
||||
const convertPassPhraseToArray = () =>
|
||||
store.passPhrase
|
||||
.split(' ')
|
||||
.map((item, index) => ({ str: item, id: index }));
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
<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">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<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="/signIn">Sign In</Link>
|
||||
Have an account?{' '}
|
||||
<Link
|
||||
className="font-medium text-indigo-500 hover:text-indigo-600"
|
||||
to="/signIn"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,19 +57,42 @@ const Onboarding3 = observer(()=>{
|
||||
<div className="px-4 pt-12 pb-8">
|
||||
<div className="max-w-md mx-auto w-full">
|
||||
<div className="relative">
|
||||
<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">
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span 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</span>
|
||||
<span
|
||||
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
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/onboarding-3"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
|
||||
to="/onboarding-4"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -77,58 +102,94 @@ const Onboarding3 = observer(()=>{
|
||||
|
||||
<div className="px-4 mt-20 py-8">
|
||||
<div className="max-w-fit mx-auto flex flex-col gap-y-36">
|
||||
|
||||
<div className="gap-0.5">
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
|
||||
<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 w-24 min-h-26px 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">
|
||||
{convertPassPhraseToArray().map((tag) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
className="min-w-93px w-24 min-h-26px 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 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>
|
||||
<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>
|
||||
<button onClick={generatePassPhrase} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
|
||||
<svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
|
||||
<button
|
||||
onClick={generatePassPhrase}
|
||||
className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500"
|
||||
>
|
||||
<svg
|
||||
className="mb-0.5"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z"
|
||||
fill="#F43F5E"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z"
|
||||
fill="#F43F5E"
|
||||
/>
|
||||
</svg>
|
||||
<span className="ml-2">Generate</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Link className="text-sm underline hover:no-underline" to="/onboarding-2"><- Back</Link>
|
||||
<Link
|
||||
className="text-sm underline hover:no-underline"
|
||||
to="/onboarding-2"
|
||||
>
|
||||
<- Back
|
||||
</Link>
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
|
||||
<Link to="/onboarding-4">Next Step -></Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<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 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">
|
||||
<img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
|
||||
<img
|
||||
className="object-cover object-center"
|
||||
src={generateSvgAvatar(store.pubKey)}
|
||||
width="493px"
|
||||
height="493px"
|
||||
alt="Onboarding"
|
||||
/>
|
||||
<span className="text-sm">Your generated Digital ID</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,52 +1,54 @@
|
||||
import React, {useState} from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import { store } from "../store/store";
|
||||
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
|
||||
import Logo from '../images/logo.png';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { store } from '../store/store';
|
||||
|
||||
const Onboarding4 = observer(() => {
|
||||
|
||||
const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
|
||||
|
||||
function createAccount() {
|
||||
if(checkBoxesSelected.length === 2) {
|
||||
if (checkBoxesSelected.length === 2) {
|
||||
store.pushAccountData();
|
||||
sessionStorage.setItem('passPhrase', store.passPhrase);
|
||||
store.clearDataRegistration();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function saveCheckBoxesValues(e) {
|
||||
const { id, checked } = e.target;
|
||||
setCheckBoxesSelected([...checkBoxesSelected, id]);
|
||||
if (!checked) {
|
||||
setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
|
||||
setCheckBoxesSelected(checkBoxesSelected.filter((item) => item !== id));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
|
||||
const firstNameAccount =
|
||||
store.accountData.length &&
|
||||
store.accountData.find((item) => item.key === 'firstname').value;
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
<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">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<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="/signIn">Sign In</Link>
|
||||
Have an account?{' '}
|
||||
<Link
|
||||
className="font-medium text-indigo-500 hover:text-indigo-600"
|
||||
to="/signIn"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -54,19 +56,42 @@ const Onboarding4 = observer(() => {
|
||||
<div className="px-4 pt-12 pb-[85px]">
|
||||
<div className="max-w-md mx-auto w-full">
|
||||
<div className="relative">
|
||||
<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">
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span 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</span>
|
||||
<span
|
||||
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
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/onboarding-3"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</span>
|
||||
<span
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
|
||||
to="/onboarding-4"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -76,50 +101,98 @@ const Onboarding4 = observer(() => {
|
||||
|
||||
<div className="px-4 mt-40 py-8">
|
||||
<div className=" flex flex-col items-center gap-20 max-w-md mx-auto">
|
||||
|
||||
<div className="text-center">
|
||||
<svg className="inline-flex w-16 h-16 fill-current mb-6" viewBox="0 0 64 64">
|
||||
<circle className="text-emerald-100" cx="32" cy="32" r="32" />
|
||||
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
|
||||
<svg
|
||||
className="inline-flex w-16 h-16 fill-current mb-6"
|
||||
viewBox="0 0 64 64"
|
||||
>
|
||||
<circle
|
||||
className="text-emerald-100"
|
||||
cx="32"
|
||||
cy="32"
|
||||
r="32"
|
||||
/>
|
||||
<path
|
||||
className="text-emerald-500"
|
||||
d="m28.5 41-8-8 3-3 5 5 12-12 3 3z"
|
||||
/>
|
||||
</svg>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
|
||||
<button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/digitalId/profile-id"}>Go To Profile -></Link>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-8">
|
||||
{firstNameAccount
|
||||
? `Nice to meet you, ${firstNameAccount} 🙌`
|
||||
: 'Please, go back step 2'}
|
||||
</h1>
|
||||
<button
|
||||
onClick={createAccount}
|
||||
className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||
>
|
||||
<Link
|
||||
id="link-dashboard"
|
||||
to={
|
||||
checkBoxesSelected.length === 2 &&
|
||||
'/digitalId/profile-id'
|
||||
}
|
||||
>
|
||||
Go To Profile ->
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="mr-1">
|
||||
<label className="flex items-center">
|
||||
<input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
|
||||
<span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
|
||||
<input
|
||||
id="checkbox-1"
|
||||
onChange={(e) => saveCheckBoxesValues(e)}
|
||||
type="checkbox"
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span className="text-sm ml-2">
|
||||
I understand that Idntty cannot recover pass phrase
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
|
||||
<input
|
||||
id="checkbox-2"
|
||||
onChange={(e) => saveCheckBoxesValues(e)}
|
||||
type="checkbox"
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<div className="text-sm ml-2">
|
||||
I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
|
||||
I{' '}
|
||||
<Link
|
||||
className="text-indigo-500 hover:text-indigo-600 underline"
|
||||
to="/"
|
||||
>
|
||||
store my pharse
|
||||
</Link>{' '}
|
||||
very carefuly
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<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 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">
|
||||
<img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
|
||||
<img
|
||||
className="object-cover object-center"
|
||||
src={generateSvgAvatar(store.pubKey)}
|
||||
width="493px"
|
||||
height="493px"
|
||||
alt="Onboarding"
|
||||
/>
|
||||
<span className="text-sm">Your generated Digital ID</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -2,55 +2,77 @@ import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AuthImage from '../images/auth-image.jpg';
|
||||
import AuthDecoration from '../images/auth-decoration.png';
|
||||
import Logo from "../images/logo.png";
|
||||
import Logo from '../images/logo.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="/dashboard">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<img alt="logo" src={Logo} width="89" height="32" />
|
||||
</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>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-6">
|
||||
Reset your Password ✨
|
||||
</h1>
|
||||
{/* Form */}
|
||||
<div>
|
||||
<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" />
|
||||
<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>
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">
|
||||
Send Reset 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="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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Link, Navigate, useParams } from "react-router-dom";
|
||||
import { generateSvgAvatar } from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import User06 from "../images/user-28-06.jpg";
|
||||
import User08 from "../images/user-28-08.jpg";
|
||||
import User09 from "../images/user-28-09.jpg";
|
||||
import SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
|
||||
import { store } from "../store/store";
|
||||
import { fetchWrapper } from "../shared/fetchWrapper";
|
||||
import { cryptography } from "@liskhq/lisk-client";
|
||||
import {generateTransaction} from '../utils/Utils';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, Navigate, useParams } from 'react-router-dom';
|
||||
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
|
||||
import User06 from '../images/user-28-06.jpg';
|
||||
import User08 from '../images/user-28-08.jpg';
|
||||
import User09 from '../images/user-28-09.jpg';
|
||||
import SharedDataRoadMap from '../partials/sharedData/SharedDataRoadmap';
|
||||
import { store } from '../store/store';
|
||||
import { fetchWrapper } from '../shared/fetchWrapper';
|
||||
import { cryptography } from '@liskhq/lisk-client';
|
||||
import { generateTransaction } from '../utils/Utils';
|
||||
|
||||
function SharedData() {
|
||||
const [encryptedData, setEncryptedData] = useState([]);
|
||||
@@ -16,15 +16,15 @@ function SharedData() {
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const [address, pubKey] = id.split(":");
|
||||
const [address, pubKey] = id.split(':');
|
||||
|
||||
const passPhrase = sessionStorage.getItem("passPhrase");
|
||||
const passPhrase = sessionStorage.getItem('passPhrase');
|
||||
|
||||
useEffect(() => {
|
||||
fetchWrapper
|
||||
.get(`data/shared/${id}`)
|
||||
.then((res) => setEncryptedData(res.data ?? []))
|
||||
.catch((err) => console.log(err));
|
||||
.get(`data/shared/${id}`)
|
||||
.then((res) => setEncryptedData(res.data ?? []))
|
||||
.catch((err) => console.log(err));
|
||||
}, [id]);
|
||||
|
||||
const decryptedData = useMemo(() => {
|
||||
@@ -32,21 +32,21 @@ function SharedData() {
|
||||
let seed, value, hash;
|
||||
try {
|
||||
[seed, value] = cryptography
|
||||
.decryptMessageWithPassphrase(
|
||||
item.value,
|
||||
item.value_nonce,
|
||||
passPhrase,
|
||||
Buffer.from(pubKey, 'hex')
|
||||
)
|
||||
.split(":");
|
||||
.decryptMessageWithPassphrase(
|
||||
item.value,
|
||||
item.value_nonce,
|
||||
passPhrase,
|
||||
Buffer.from(pubKey, 'hex')
|
||||
)
|
||||
.split(':');
|
||||
hash = cryptography
|
||||
.hash(
|
||||
Buffer.concat([
|
||||
Buffer.from(seed, "utf8"),
|
||||
cryptography.hash(value, "utf8"),
|
||||
])
|
||||
)
|
||||
.toString("hex");
|
||||
.hash(
|
||||
Buffer.concat([
|
||||
Buffer.from(seed, 'utf8'),
|
||||
cryptography.hash(value, 'utf8'),
|
||||
])
|
||||
)
|
||||
.toString('hex');
|
||||
} catch (err) {
|
||||
setHasError(true);
|
||||
console.log(err);
|
||||
@@ -62,19 +62,27 @@ function SharedData() {
|
||||
}, [encryptedData]);
|
||||
|
||||
const validateAccountData = () => {
|
||||
const builder = generateTransaction(BigInt(store.accountInfo?.sequence?.nonce || 0),
|
||||
store.pubKey, store.nodeInfo.networkIdentifier, store.passPhrase)
|
||||
const builder = generateTransaction(
|
||||
BigInt(store.accountInfo?.sequence?.nonce || 0),
|
||||
store.pubKey,
|
||||
store.nodeInfo.networkIdentifier,
|
||||
store.passPhrase
|
||||
);
|
||||
|
||||
const signedTx = builder.validate(decryptedData.map(e => ({
|
||||
label: e.label,
|
||||
value: Buffer.from(e.hash, 'hex')
|
||||
})), address)
|
||||
const signedTx = builder.validate(
|
||||
decryptedData.map((e) => ({
|
||||
label: e.label,
|
||||
value: Buffer.from(e.hash, 'hex'),
|
||||
})),
|
||||
address
|
||||
);
|
||||
|
||||
if (signedTx) {
|
||||
fetchWrapper.post('transactions', {}, signedTx)
|
||||
.catch((err) => console.log(err));
|
||||
fetchWrapper
|
||||
.post('transactions', {}, signedTx)
|
||||
.catch((err) => console.log(err));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (!passPhrase) return <Navigate to="/" replace={true} />;
|
||||
|
||||
@@ -103,7 +111,14 @@ function SharedData() {
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{!hasError && <button className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" onClick={validateAccountData}>Validate data</button>}
|
||||
{!hasError && (
|
||||
<button
|
||||
className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||
onClick={validateAccountData}
|
||||
>
|
||||
Validate data
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
import React, {useState} from 'react';
|
||||
import {observer} from "mobx-react-lite";
|
||||
import React, { useState } from 'react';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
import {store} from "../store/store";
|
||||
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
|
||||
import Logo from '../images/logo.png';
|
||||
import { store } from '../store/store';
|
||||
|
||||
const SignIn = observer(()=>{
|
||||
const SignIn = observer(() => {
|
||||
const [passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
|
||||
const [addedPassPhrase, setAddedPassPhrase] = useState(false);
|
||||
|
||||
const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
|
||||
const[addedPassPhrase, setAddedPassPhrase] = useState(false);
|
||||
|
||||
function savePassPhrase (copiedPhrase) {
|
||||
function savePassPhrase(copiedPhrase) {
|
||||
if (copiedPhrase.split(' ').length === 12) {
|
||||
store.savePastPassPhrase(copiedPhrase.trim());
|
||||
setPassPhrase(store.passPhrase);
|
||||
@@ -19,55 +18,67 @@ const SignIn = observer(()=>{
|
||||
}
|
||||
|
||||
function convertPassPhraseToArray() {
|
||||
return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
|
||||
return passPhrase
|
||||
.split(' ')
|
||||
.map((item, index) => ({ str: item, id: index }));
|
||||
}
|
||||
|
||||
function pastePassPhrase() {
|
||||
navigator.clipboard.readText().then(res => savePassPhrase(res));
|
||||
navigator.clipboard.readText().then((res) => savePassPhrase(res));
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
<div className="min-h-screen h-full flex flex-col after:flex-1">
|
||||
|
||||
<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="/">
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
<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>
|
||||
Have not an account?{' '}
|
||||
<Link
|
||||
className="font-medium text-indigo-500 hover:text-indigo-600"
|
||||
to="/"
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
{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 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>
|
||||
<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>
|
||||
@@ -75,29 +86,37 @@ const SignIn = observer(()=>{
|
||||
</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 && "/digitalId/profile-id"}>Go To Profile -></Link>
|
||||
<Link to={addedPassPhrase && '/digitalId/profile-id'}>
|
||||
Go To Profile ->
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<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 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(store.pubKey)}/>
|
||||
<div
|
||||
className={`${
|
||||
addedPassPhrase || 'opacity-0'
|
||||
} w-[493px] h-[493px]`}
|
||||
>
|
||||
<img
|
||||
className="object-cover object-center"
|
||||
alt=""
|
||||
src={generateSvgAvatar(store.pubKey)}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm">Your Digital ID</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { store } from "../../store/store";
|
||||
import { store } from '../../store/store';
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import Header from '../../partials/Header';
|
||||
import ProfileTable from '../../partials/profile/ProfileTable';
|
||||
import Image from '../../images/transactions-image-04.svg';
|
||||
import {labelMap} from '../../shared/labelMap';
|
||||
import {statusMap} from "../../shared/statusMap";
|
||||
import { labelMap } from '../../shared/labelMap';
|
||||
import { statusMap } from '../../shared/statusMap';
|
||||
|
||||
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
|
||||
const initialPropertyValues = [
|
||||
'First name',
|
||||
'Second name',
|
||||
'Birthdate',
|
||||
'Gender',
|
||||
'National doctype',
|
||||
'National doc ID',
|
||||
'National doc issue date',
|
||||
'National doc expiry date',
|
||||
];
|
||||
|
||||
const Profile = observer (() => {
|
||||
const Profile = observer(() => {
|
||||
const defaultValues = {
|
||||
label: '',
|
||||
value: '',
|
||||
@@ -30,20 +39,20 @@ const Profile = observer (() => {
|
||||
const [updatedValues, setUpdatedValues] = useState([defaultValues]);
|
||||
const [addedValues, setAddedValues] = useState(defaultValues);
|
||||
const [isCheck, setIsCheck] = useState([]);
|
||||
const [alreadyExists, setAlreadyExists] = useState(false)
|
||||
const [alreadyExists, setAlreadyExists] = useState(false);
|
||||
const [blockChainValue, setBlockChainValue] = useState('');
|
||||
const [publicKey, setPublicKey] = useState('')
|
||||
const [publicKey, setPublicKey] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
handleSelectedItems(isCheck);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isCheck]);
|
||||
|
||||
const handleClick = e => {
|
||||
const handleClick = (e) => {
|
||||
const { id, checked } = e.target;
|
||||
setIsCheck([...isCheck, id]);
|
||||
if (!checked || !id) {
|
||||
setIsCheck(isCheck.filter(item => item !== id));
|
||||
setIsCheck(isCheck.filter((item) => item !== id));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -57,27 +66,29 @@ const Profile = observer (() => {
|
||||
setAddedValues((prevState) => ({
|
||||
...prevState,
|
||||
[field]: value,
|
||||
}))
|
||||
}));
|
||||
};
|
||||
|
||||
const changeUpdatedValues = (value, field, key) => {
|
||||
if(field==='value') {
|
||||
setBlockChainValue(value)
|
||||
if (field === 'value') {
|
||||
setBlockChainValue(value);
|
||||
}
|
||||
setUpdatedValues((prevState) =>
|
||||
prevState.map((elem) => (
|
||||
(elem.key === key) ? {
|
||||
...elem,
|
||||
[field]: value,
|
||||
} : elem
|
||||
))
|
||||
)
|
||||
prevState.map((elem) =>
|
||||
elem.key === key
|
||||
? {
|
||||
...elem,
|
||||
[field]: value,
|
||||
}
|
||||
: elem
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const selectHint = (element) => {
|
||||
changeAddedValues(element, 'label');
|
||||
setPropertyValues([]);
|
||||
}
|
||||
};
|
||||
|
||||
const closeHint = (eventTarget) => {
|
||||
if (!eventTarget || eventTarget.tabIndex !== -1) {
|
||||
@@ -87,12 +98,21 @@ const Profile = observer (() => {
|
||||
|
||||
const handleSelectedItems = (selectedItems) => {
|
||||
setSelectedItems([...selectedItems]);
|
||||
setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
|
||||
.map(elem => (
|
||||
(!elem.seed) ? {
|
||||
...elem,
|
||||
seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
|
||||
}: elem)));
|
||||
setUpdatedValues(
|
||||
store.decryptedAccountData
|
||||
.filter(({ key }) => selectedItems.includes(key))
|
||||
.map((elem) =>
|
||||
!elem.seed
|
||||
? {
|
||||
...elem,
|
||||
seed: String(
|
||||
Math.floor(Math.random() * 90000000000000000000),
|
||||
10
|
||||
),
|
||||
}
|
||||
: elem
|
||||
)
|
||||
);
|
||||
if (selectedItems.length > 0) {
|
||||
setButtonPanelOpen(false);
|
||||
setAddPanelOpen(false);
|
||||
@@ -115,8 +135,9 @@ const Profile = observer (() => {
|
||||
};
|
||||
|
||||
const sendAddedData = () => {
|
||||
const checkingAddedData = !store.decryptedAccountData
|
||||
.some((element) => element.label === addedValues.label)
|
||||
const checkingAddedData = !store.decryptedAccountData.some(
|
||||
(element) => element.label === addedValues.label
|
||||
);
|
||||
setAlreadyExists(!checkingAddedData);
|
||||
if (checkingAddedData) {
|
||||
setAddPanelOpen(false);
|
||||
@@ -134,54 +155,65 @@ const Profile = observer (() => {
|
||||
};
|
||||
|
||||
const deleteDataParameters = () => {
|
||||
const changeData = store.decryptedAccountData.filter(item=>!selectedItems.includes(item.key));
|
||||
const changeData = store.decryptedAccountData.filter(
|
||||
(item) => !selectedItems.includes(item.key)
|
||||
);
|
||||
store.pushAccountData(changeData);
|
||||
if(storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(changeData.filter(elem=>elem.status!=='Stored'))
|
||||
if (storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(
|
||||
changeData.filter((elem) => elem.status !== 'Stored')
|
||||
);
|
||||
};
|
||||
|
||||
const changeInitialArray = () => {
|
||||
let newArr = [];
|
||||
store.decryptedAccountData.map(elem => {
|
||||
updatedValues.forEach(item => {
|
||||
store.decryptedAccountData.map((elem) => {
|
||||
updatedValues.forEach((item) => {
|
||||
if (elem.label === item.label) {
|
||||
newArr.push({
|
||||
...elem,
|
||||
status: 'new',
|
||||
'value': item.value,
|
||||
'seed': item.seed,
|
||||
})
|
||||
value: item.value,
|
||||
seed: item.seed,
|
||||
});
|
||||
}
|
||||
})
|
||||
if (!newArr.find(element => element.label === elem.label)) {
|
||||
});
|
||||
if (!newArr.find((element) => element.label === elem.label)) {
|
||||
newArr.push(elem);
|
||||
}
|
||||
})
|
||||
});
|
||||
return newArr;
|
||||
};
|
||||
|
||||
const changeDataParameters = () => {
|
||||
const updatedData = changeInitialArray();
|
||||
store.pushAccountData(updatedData);
|
||||
if(storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(updatedData.filter(elem=>elem.status!=='Stored'))
|
||||
if (storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(
|
||||
updatedData.filter((elem) => elem.status !== 'Stored')
|
||||
);
|
||||
};
|
||||
|
||||
const shareAccountData = () => {
|
||||
const sharedData = store.decryptedAccountData.filter(item => selectedItems.includes(item.key))
|
||||
store.pushSharedData(sharedData, publicKey)
|
||||
const sharedData = store.decryptedAccountData.filter((item) =>
|
||||
selectedItems.includes(item.key)
|
||||
);
|
||||
store.pushSharedData(sharedData, publicKey);
|
||||
cancelSharePanel();
|
||||
}
|
||||
};
|
||||
|
||||
const addDataParameters = () => {
|
||||
const label = addedValues.label.toLowerCase().split(' ').join('');
|
||||
if(labelMap[label])
|
||||
if (labelMap[label])
|
||||
addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
|
||||
else
|
||||
addedValues.key = addedValues.label
|
||||
else addedValues.key = addedValues.label;
|
||||
store.pushAccountData(store.decryptedAccountData.concat(addedValues));
|
||||
if(storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(store.decryptedAccountData.concat(addedValues).filter(elem=>elem.status!=='Stored'))
|
||||
if (storeOnBlockchain)
|
||||
store.pushAccountDataToBlockchain(
|
||||
store.decryptedAccountData
|
||||
.concat(addedValues)
|
||||
.filter((elem) => elem.status !== 'Stored')
|
||||
);
|
||||
};
|
||||
|
||||
const cancelAddPanel = () => {
|
||||
@@ -191,12 +223,21 @@ const Profile = observer (() => {
|
||||
};
|
||||
|
||||
const cancelUpdatePanel = () => {
|
||||
setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
|
||||
.map(elem => (
|
||||
(!elem.seed) ? {
|
||||
...elem,
|
||||
seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
|
||||
}: elem)));
|
||||
setUpdatedValues(
|
||||
store.decryptedAccountData
|
||||
.filter(({ key }) => selectedItems.includes(key))
|
||||
.map((elem) =>
|
||||
!elem.seed
|
||||
? {
|
||||
...elem,
|
||||
seed: String(
|
||||
Math.floor(Math.random() * 90000000000000000000),
|
||||
10
|
||||
),
|
||||
}
|
||||
: elem
|
||||
)
|
||||
);
|
||||
setUpdatePanelOpen(false);
|
||||
setChangePanelOpen(true);
|
||||
setIsCheck([]);
|
||||
@@ -210,12 +251,12 @@ const Profile = observer (() => {
|
||||
const openSharePanel = () => {
|
||||
setSharePanelOpen(true);
|
||||
setChangePanelOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelSharePanel = () => {
|
||||
setSharePanelOpen(false);
|
||||
setChangePanelOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const openUpdatePanel = () => {
|
||||
setUpdatePanelOpen(true);
|
||||
@@ -234,7 +275,9 @@ const Profile = observer (() => {
|
||||
setPropertyValues(initialPropertyValues);
|
||||
if (text) {
|
||||
let reg = new RegExp(`^${text}`, 'img');
|
||||
setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
|
||||
setPropertyValues((prevState) =>
|
||||
prevState.filter((element) => element.match(reg))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -272,19 +315,26 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
{/* Table */}
|
||||
<div>
|
||||
<ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
|
||||
<ProfileTable
|
||||
isCheck={isCheck}
|
||||
handleClick={handleClick}
|
||||
userData={store.decryptedAccountData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Left sidebar */}
|
||||
<div>
|
||||
{/* Button panel*/}
|
||||
<div className={`${!buttonPanelOpen && "hidden"} ml-2.5`}>
|
||||
<div className={`${!buttonPanelOpen && 'hidden'} ml-2.5`}>
|
||||
<div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
|
||||
<button
|
||||
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||
onClick={openAddPanel}
|
||||
>
|
||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<svg
|
||||
className="w-4 h-4 fill-current shrink-0"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
||||
</svg>
|
||||
<span className="ml-1">Add new field</span>
|
||||
@@ -293,13 +343,24 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
<div className="ml-2.5">
|
||||
{/* Add panel */}
|
||||
<div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
|
||||
<div className='relative z-20'>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
|
||||
<div
|
||||
className={`${
|
||||
!addPanelOpen && 'hidden'
|
||||
} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}
|
||||
>
|
||||
<div className="relative z-20">
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Property <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id="label"
|
||||
className={`form-input w-full ${alreadyExists && 'border-rose-300'}`}
|
||||
className={`form-input w-full ${
|
||||
alreadyExists && 'border-rose-300'
|
||||
}`}
|
||||
type="text"
|
||||
required
|
||||
onInput={(e) => handleInput(e.target.value, 'label')}
|
||||
@@ -307,48 +368,90 @@ const Profile = observer (() => {
|
||||
onClick={openHint}
|
||||
onBlur={(e) => closeHint(e.relatedTarget)}
|
||||
/>
|
||||
<div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
|
||||
<div
|
||||
tabIndex="-1"
|
||||
className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${
|
||||
propertyValues.length > 0 || 'hidden'
|
||||
}`}
|
||||
>
|
||||
<ul>
|
||||
{propertyValues.map((element, index) => (
|
||||
<li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
|
||||
<li
|
||||
className="hover:text-indigo-600 cursor-pointer"
|
||||
key={index}
|
||||
onClick={() => selectHint(element)}
|
||||
>
|
||||
{element}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{ alreadyExists && <div className="text-xs mt-1 text-rose-500">This property already added!</div> }
|
||||
</div>
|
||||
{alreadyExists && (
|
||||
<div className="text-xs mt-1 text-rose-500">
|
||||
This property already added!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='my-3 z-10'>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
||||
<div className="my-3 z-10">
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Value <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id="value"
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
required
|
||||
onClick={() => setPropertyValues([])}
|
||||
onChange={(e) => changeAddedValues(e.target.value, 'value')}
|
||||
onChange={(e) =>
|
||||
changeAddedValues(e.target.value, 'value')
|
||||
}
|
||||
value={addedValues.value}
|
||||
/>
|
||||
</div>
|
||||
<div className='z-10'>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
|
||||
<div className="z-10">
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Seed <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id="seed"
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
required
|
||||
onClick={() => setPropertyValues([])}
|
||||
onChange={(e) => changeAddedValues(e.target.value, 'seed')}
|
||||
onChange={(e) =>
|
||||
changeAddedValues(e.target.value, 'seed')
|
||||
}
|
||||
value={addedValues.seed}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
|
||||
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||
<span className="block text-sm font-medium">
|
||||
Store data on blockchain
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="blockcheined"
|
||||
className="sr-only"
|
||||
checked={storeOnBlockchain}
|
||||
onChange={() =>
|
||||
setStoreOnBlockchain(!storeOnBlockchain)
|
||||
}
|
||||
/>
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span
|
||||
className="bg-white shadow-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -370,57 +473,111 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
</div>
|
||||
{/* Update panel */}
|
||||
<div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
|
||||
<div
|
||||
className={`${
|
||||
!updatePanelOpen && 'hidden'
|
||||
} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}
|
||||
>
|
||||
{updatedValues.map((item, index) => (
|
||||
<div key={index} className="flex flex-col gap-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Property <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id={`${item.key}:label`}
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
required
|
||||
onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
|
||||
onChange={(e) =>
|
||||
changeUpdatedValues(
|
||||
e.target.value,
|
||||
'label',
|
||||
item.key
|
||||
)
|
||||
}
|
||||
value={item.label}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Value <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id={`${item.key}:value`}
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
required
|
||||
onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
|
||||
value={item.status===statusMap.blockchained?blockChainValue : item.value}
|
||||
onChange={(e) =>
|
||||
changeUpdatedValues(
|
||||
e.target.value,
|
||||
'value',
|
||||
item.key
|
||||
)
|
||||
}
|
||||
value={
|
||||
item.status === statusMap.blockchained
|
||||
? blockChainValue
|
||||
: item.value
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Seed <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id={`${item.key}:seed`}
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
required
|
||||
onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
|
||||
onChange={(e) =>
|
||||
changeUpdatedValues(
|
||||
e.target.value,
|
||||
'seed',
|
||||
item.key
|
||||
)
|
||||
}
|
||||
value={item.seed}
|
||||
/>
|
||||
</div>
|
||||
{(updatedValues[index+1]) ? (
|
||||
<div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
|
||||
{updatedValues[index + 1] ? (
|
||||
<div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
|
||||
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||
<span className="block text-sm font-medium">
|
||||
Store data on blockchain
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="blockcheined"
|
||||
className="sr-only"
|
||||
checked={storeOnBlockchain}
|
||||
onChange={() =>
|
||||
setStoreOnBlockchain(!storeOnBlockchain)
|
||||
}
|
||||
/>
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span
|
||||
className="bg-white shadow-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -442,20 +599,46 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
</div>
|
||||
{/* Remove panel */}
|
||||
<div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
|
||||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
|
||||
<div
|
||||
className={`${
|
||||
!removePanelOpen && 'hidden'
|
||||
} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}
|
||||
>
|
||||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">
|
||||
Summary
|
||||
</h2>
|
||||
<div className="flex flex-col">
|
||||
{store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
|
||||
<span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
|
||||
))}
|
||||
{store.decryptedAccountData
|
||||
.filter(({ key }) => selectedItems.includes(key))
|
||||
.map((item) => (
|
||||
<span
|
||||
key={item.label}
|
||||
className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
|
||||
<span className="block text-sm font-medium">On blockchain too</span>
|
||||
<span className="block text-sm font-medium">
|
||||
On blockchain too
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch-1" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="switch-1"
|
||||
className="sr-only"
|
||||
checked={storeOnBlockchain}
|
||||
onChange={() =>
|
||||
setStoreOnBlockchain(!storeOnBlockchain)
|
||||
}
|
||||
/>
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span
|
||||
className="bg-white shadow-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -464,24 +647,39 @@ const Profile = observer (() => {
|
||||
<button
|
||||
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
|
||||
onClick={applyDataDeletion}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-current shrink-0"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
||||
</svg>
|
||||
<span className="ml-2">Apply</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
|
||||
<span className="text-descriptionSize text-slate-500 font-normal italic text-center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do Terms.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Share panel */}
|
||||
<div className={`${!sharePanelOpen && 'hidden'} bg-white px-5 pt-4 shadow-lg rounded-sm border border-slate-200 mb-12 lg:w-72 xl:w-80`}>
|
||||
<div className='relative z-20'>
|
||||
<div className='z-10'>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Public Key <span className="text-rose-500">*</span></label>
|
||||
<div
|
||||
className={`${
|
||||
!sharePanelOpen && 'hidden'
|
||||
} bg-white px-5 pt-4 shadow-lg rounded-sm border border-slate-200 mb-12 lg:w-72 xl:w-80`}
|
||||
>
|
||||
<div className="relative z-20">
|
||||
<div className="z-10">
|
||||
<label
|
||||
className="block text-sm font-medium mb-1"
|
||||
htmlFor="mandatory"
|
||||
>
|
||||
Public Key <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
id="seed"
|
||||
className="form-input w-full"
|
||||
type="text"
|
||||
@@ -508,24 +706,49 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
</div>
|
||||
{/* Details */}
|
||||
<div className={`${(!(removePanelOpen || addPanelOpen) || !storeOnBlockchain) && 'hidden'} drop-shadow-lg`}>
|
||||
<div
|
||||
className={`${
|
||||
(!(removePanelOpen || addPanelOpen) ||
|
||||
!storeOnBlockchain) &&
|
||||
'hidden'
|
||||
} drop-shadow-lg`}
|
||||
>
|
||||
{/* Top */}
|
||||
<div className="bg-white rounded-t-xl px-5 pb-4 text-center">
|
||||
<div className="mb-3 text-center">
|
||||
<img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
|
||||
<img
|
||||
className="inline-flex w-12 h-12 rounded-full -mt-6"
|
||||
src={Image}
|
||||
width="48"
|
||||
height="48"
|
||||
alt="Transaction 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">
|
||||
0.012 IDN
|
||||
</div>
|
||||
<div className="text-sm font-medium text-slate-800 mb-3">
|
||||
Total amount fee
|
||||
</div>
|
||||
<div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
|
||||
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="flex justify-between items-center" aria-hidden="true">
|
||||
<svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
|
||||
<div
|
||||
className="flex justify-between items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 fill-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
|
||||
</svg>
|
||||
<div className="grow w-full h-5 bg-white flex flex-col justify-center">
|
||||
<div className="h-px w-full border-t border-dashed border-slate-200" />
|
||||
</div>
|
||||
<svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
className="w-5 h-5 fill-white rotate-180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -533,15 +756,21 @@ const Profile = observer (() => {
|
||||
<div className="bg-white rounded-b-xl p-5 pt-[22px] pb-10 text-sm space-y-3">
|
||||
<div className="flex justify-between space-x-1">
|
||||
<span className="italic">Validator:</span>
|
||||
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
|
||||
<span className="font-medium text-slate-700 text-right">
|
||||
IT17 2207 1010 0504 0006 88
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between space-x-1">
|
||||
<span className="italic">Recipient:</span>
|
||||
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
|
||||
<span className="font-medium text-slate-700 text-right">
|
||||
IT17 2207 1010 0504 0006 88
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between space-x-1">
|
||||
<span className="italic">Transaction:</span>
|
||||
<span className="font-medium text-slate-700 text-right">145 bytes</span>
|
||||
<span className="font-medium text-slate-700 text-right">
|
||||
145 bytes
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -552,8 +781,11 @@ const Profile = observer (() => {
|
||||
<button
|
||||
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
|
||||
onClick={openRemovePanel}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-current shrink-0"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
||||
</svg>
|
||||
<span className="ml-2">Remove</span>
|
||||
@@ -561,8 +793,11 @@ const Profile = observer (() => {
|
||||
<button
|
||||
className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
|
||||
onClick={openUpdatePanel}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-rose-500 shrink-0"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
|
||||
</svg>
|
||||
<span className="ml-2">Update</span>
|
||||
@@ -570,8 +805,11 @@ const Profile = observer (() => {
|
||||
<button
|
||||
className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
|
||||
onClick={openSharePanel}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-rose-500 shrink-0"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
|
||||
</svg>
|
||||
<span className="ml-2">Share</span>
|
||||
@@ -584,7 +822,7 @@ const Profile = observer (() => {
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
export default Profile
|
||||
export default Profile;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import {observer} from "mobx-react-lite";
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import ValidateTable from "../../partials/validate/ValidateTable";
|
||||
import ValidatePanel from "../../partials/validate/ValidatePanel";
|
||||
import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
|
||||
import {Link} from "react-router-dom";
|
||||
import {store} from "../../store/store";
|
||||
import ValidateTable from '../../partials/validate/ValidateTable';
|
||||
import ValidatePanel from '../../partials/validate/ValidatePanel';
|
||||
import ValidateRoadMap from '../../partials/validationLog/ValidateRoadMap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { store } from '../../store/store';
|
||||
|
||||
const Validate = observer(() => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
@@ -23,12 +23,19 @@ const Validate = observer(() => {
|
||||
<main className="relative">
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
<div className="w-fit">
|
||||
{/* Page header */}
|
||||
{/* Page header */}
|
||||
<div className="pb-2.5">
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
|
||||
0x28394710234192304719234
|
||||
</h1>
|
||||
</div>
|
||||
<Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -></Link>
|
||||
<Link
|
||||
className="font-normal text-sm text-indigo-500 hover:text-indigo-600"
|
||||
to="/digitalId/validate"
|
||||
>
|
||||
Explore ->
|
||||
</Link>
|
||||
<div className="mb-5 mt-5">
|
||||
<ul className="flex flex-wrap -m-1">
|
||||
<li className="m-1">
|
||||
@@ -53,20 +60,25 @@ const Validate = observer(() => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
|
||||
<ValidateTable setValidatePanelOpen={setValidatePanelOpen} />
|
||||
<div className="pb-8 border-b border-zinc-200 mt-[50px]">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
|
||||
Digital ID validation log ✨
|
||||
</h1>
|
||||
</div>
|
||||
{store.transactionsInfo.map(item => {
|
||||
return <ValidateRoadMap season={item} key={item.id}/>
|
||||
{store.transactionsInfo.map((item) => {
|
||||
return <ValidateRoadMap season={item} key={item.id} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
|
||||
<ValidatePanel
|
||||
validatePanelOpen={validatePanelOpen}
|
||||
setValidatePanelOpen={setValidatePanelOpen}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
export default Validate;
|
||||
|
||||
@@ -1,42 +1,44 @@
|
||||
import React, {useState} from 'react';
|
||||
import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import React, { useState } from 'react';
|
||||
import ValidateRoadMap from '../../partials/validationLog/ValidateRoadMap';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import {store} from "../../store/store";
|
||||
import { store } from '../../store/store';
|
||||
|
||||
const ValidationLog = observer(() => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
{/* Page header */}
|
||||
<div className="pb-8 border-b border-zinc-200">
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID transaction log ✨</h1>
|
||||
</div>
|
||||
{/*Psosts*/}
|
||||
<div className="max-w-3xl m-auto mt-6">
|
||||
<div className="xl:-translate-x-16 max-w-fit">
|
||||
{/* PostsID */}
|
||||
{store.transactionsInfo.map(item => {
|
||||
return <ValidateRoadMap season={item} key={item.id}/>
|
||||
})}
|
||||
</div>
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
{/* Page header */}
|
||||
<div className="pb-8 border-b border-zinc-200">
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
|
||||
Digital ID transaction log ✨
|
||||
</h1>
|
||||
</div>
|
||||
{/*Psosts*/}
|
||||
<div className="max-w-3xl m-auto mt-6">
|
||||
<div className="xl:-translate-x-16 max-w-fit">
|
||||
{/* PostsID */}
|
||||
{store.transactionsInfo.map((item) => {
|
||||
return <ValidateRoadMap season={item} key={item.id} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default ValidationLog;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import {store} from "../../store/store";
|
||||
import { store } from '../../store/store';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
const Verify = observer(() => {
|
||||
@@ -9,8 +9,8 @@ const Verify = observer(() => {
|
||||
const [descriptionOpen, setDescriptionOpen] = useState(false);
|
||||
|
||||
const openShareLink = (id) => {
|
||||
window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank')
|
||||
}
|
||||
window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
@@ -24,48 +24,62 @@ const Verify = observer(() => {
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-11 w-full max-w-9xl mx-auto">
|
||||
{/* Page header */}
|
||||
<div className="mb-11">
|
||||
<div>
|
||||
<ul className="flex flex-wrap -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
|
||||
View All
|
||||
</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
||||
Validated
|
||||
</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
||||
Blockchained
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="flex flex-wrap -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
|
||||
View All
|
||||
</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
||||
Validated
|
||||
</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
||||
Blockchained
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* Block */}
|
||||
<div className="flex flex-col gap-y-4">
|
||||
{store.sharedData.map((item, index) => (
|
||||
<div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
|
||||
<div
|
||||
key={index}
|
||||
className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex justify-end items-center h-[42px]">
|
||||
{/* Buttons */}
|
||||
<div className="flex gap-x-[6px]">
|
||||
<div className="flex items-center">
|
||||
<button className="text-slate-400 hover:text-slate-500 rounded-full" onClick={() => openShareLink(item.id)}>
|
||||
<button
|
||||
className="text-slate-400 hover:text-slate-500 rounded-full"
|
||||
onClick={() => openShareLink(item.id)}
|
||||
>
|
||||
<span className="sr-only">Link</span>
|
||||
<svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
|
||||
<svg
|
||||
className="w-4 h-4 fill-current shrink-0 text-slate-400"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
|
||||
className={`text-slate-400 hover:text-slate-500 transform ${
|
||||
descriptionOpen && 'rotate-180'
|
||||
}`}
|
||||
aria-expanded={descriptionOpen}
|
||||
>
|
||||
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
|
||||
<svg
|
||||
className="w-8 h-8 fill-current"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -73,13 +87,17 @@ const Verify = observer(() => {
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='flex flex-col gap-y-[9px]'>
|
||||
<div className="flex flex-col gap-y-[9px]">
|
||||
{item.data.map((elem, index) => (
|
||||
<div key={index} className='flex gap-y-2'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex flex-row items-center'>
|
||||
<span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
|
||||
<span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
|
||||
<div key={index} className="flex gap-y-2">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row items-center">
|
||||
<span className="font-inter font-semibold text-slate-800 text-base w-[204px]">
|
||||
{elem.label}
|
||||
</span>
|
||||
<span className="font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]">
|
||||
{elem.value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,7 +110,7 @@ const Verify = observer(() => {
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
export default Verify;
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import Sidebar from "../../partials/Sidebar";
|
||||
import Header from "../../partials/Header";
|
||||
import DropdownTransaction from "../../components/DropdownTransaction";
|
||||
import TransactionsTable from "../../partials/finance/TransactionsTable";
|
||||
import PaginationClassic from "../../components/PaginationClassic";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import TransactionPanel from "../../partials/finance/TransactionPanel";
|
||||
import { Filters } from "../../components/Filters";
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import DropdownTransaction from '../../components/DropdownTransaction';
|
||||
import TransactionsTable from '../../partials/finance/TransactionsTable';
|
||||
import PaginationClassic from '../../components/PaginationClassic';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import TransactionPanel from '../../partials/finance/TransactionPanel';
|
||||
import { Filters } from '../../components/Filters';
|
||||
|
||||
const filters = {
|
||||
"View All": "",
|
||||
Voted: "Unvote",
|
||||
Pending: "Pending",
|
||||
'View All': '',
|
||||
Voted: 'Unvote',
|
||||
Pending: 'Pending',
|
||||
};
|
||||
|
||||
const Delegates = observer(() => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [currentDelegate, setCurrentDelegate] = useState(null);
|
||||
const [currentFilter, setCurrentFilter] = useState("View All");
|
||||
const [currentFilter, setCurrentFilter] = useState('View All');
|
||||
|
||||
const [lockedFor, setLockedFor] = useState("Voiting");
|
||||
const [lockedFor, setLockedFor] = useState('Voiting');
|
||||
|
||||
const lockedLabel = Object.values(
|
||||
lockedFor === "Voiting" ? store.processedVotes : store.accountLockedVotes
|
||||
lockedFor === 'Voiting' ? store.processedVotes : store.accountLockedVotes
|
||||
)
|
||||
.reduce((sum, e) => sum + e, 0n)
|
||||
.toString();
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Sidebar from "../../partials/Sidebar";
|
||||
import Header from "../../partials/Header";
|
||||
import VPNServiceImg from "../../images/vpn_service.png";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import VPNServiceImg from '../../images/vpn_service.png';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const VPNPrepare = observer(() => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
@@ -18,12 +18,12 @@ const VPNPrepare = observer(() => {
|
||||
const canVote = store.accountBalance > 20;
|
||||
|
||||
const clickButton = () => {
|
||||
if (canVote) navigate("/services/delegates");
|
||||
else window.open("https://testnet.idntty.org/faucet", "_blank");
|
||||
if (canVote) navigate('/services/delegates');
|
||||
else window.open('https://testnet.idntty.org/faucet', '_blank');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (store.canVPN) navigate("/services/vpn/servers");
|
||||
if (store.canVPN) navigate('/services/vpn/servers');
|
||||
}, [store.canVPN]);
|
||||
|
||||
return (
|
||||
@@ -62,17 +62,17 @@ const VPNPrepare = observer(() => {
|
||||
/>
|
||||
<h2 className="text-xl md:text-2xl text-slate-800 font-bold text-center">
|
||||
{canVote
|
||||
? "Vote for VPN delegate to get service"
|
||||
: "You cannot get the VPN service, sorry 😢"}
|
||||
? 'Vote for VPN delegate to get service'
|
||||
: 'You cannot get the VPN service, sorry 😢'}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-center">
|
||||
{canVote ? (
|
||||
"The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes."
|
||||
'The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes.'
|
||||
) : (
|
||||
<>
|
||||
Only users who can vote for a VPN delegate using{" "}
|
||||
Only users who can vote for a VPN delegate using{' '}
|
||||
<b>at least 19.9 tokens</b> can use this service.
|
||||
Unfortunately, your account currently has{" "}
|
||||
Unfortunately, your account currently has{' '}
|
||||
<b>only {store.accountBalance} tokens</b>, which is not
|
||||
enough to vote.
|
||||
</>
|
||||
@@ -89,7 +89,7 @@ const VPNPrepare = observer(() => {
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
||||
</svg>
|
||||
<span className="hidden xs:block mx-6">
|
||||
{canVote ? "Vote" : "Get It"}
|
||||
{canVote ? 'Vote' : 'Get It'}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import Sidebar from "../../partials/Sidebar";
|
||||
import Header from "../../partials/Header";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
|
||||
import VPNServeIcon from "../../images/vpn_server_icon.png";
|
||||
import { Filters } from "../../components/Filters";
|
||||
import VPNServeIcon from '../../images/vpn_server_icon.png';
|
||||
import { Filters } from '../../components/Filters';
|
||||
|
||||
const filters = {
|
||||
"View All": "",
|
||||
Active: "Active",
|
||||
Offline: "Offline",
|
||||
'View All': '',
|
||||
Active: 'Active',
|
||||
Offline: 'Offline',
|
||||
};
|
||||
|
||||
function VPNServers() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [selectedServer, setSelectedServer] = useState(0);
|
||||
const [currentFilter, setCurrentFilter] = useState("View All");
|
||||
const [currentFilter, setCurrentFilter] = useState('View All');
|
||||
|
||||
const qrContent = useMemo(
|
||||
() => `
|
||||
@@ -34,10 +34,10 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
|
||||
);
|
||||
|
||||
const downloadTxtFile = () => {
|
||||
const element = document.createElement("a");
|
||||
const file = new Blob([qrContent], { type: "text/plain" });
|
||||
const element = document.createElement('a');
|
||||
const file = new Blob([qrContent], { type: 'text/plain' });
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = "vpnConfig.conf";
|
||||
element.download = 'vpnConfig.conf';
|
||||
document.body.appendChild(element); // Required for this to work in FireFox
|
||||
element.click();
|
||||
};
|
||||
@@ -183,7 +183,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<div>Spent This Month</div>
|
||||
<div className="italic">
|
||||
4673,00 Mb{" "}
|
||||
4673,00 Mb{' '}
|
||||
<span className="text-slate-400">/</span> 46730,00
|
||||
Mb
|
||||
</div>
|
||||
@@ -192,7 +192,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
|
||||
<div
|
||||
className="absolute inset-0 bg-indigo-500"
|
||||
aria-hidden="true"
|
||||
style={{ width: "10%" }}
|
||||
style={{ width: '10%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user