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

fix some bugs

Browse Source
This commit is contained in:
kandrusyak
2022-08-09 00:14:21 +03:00
parent c659e17344
commit 59dd4c9554
15 changed files with 124 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Onboarding1.jsx
View File

@@ -4,14 +4,18 @@ 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 { registrationStore } from "../store/store";
import { store } from "../store/store";
import { Navigate } from "react-router-dom";
const Onboarding1 = observer(() => {
useEffect(()=>{
registrationStore.generatePassPhrase()
useEffect(() => {
store.clearDataRegistration()
}, [])
if(store.passPhrase)
return <Navigate to="/digitalId/profile-id" replace={true} />
return (
<main className="bg-white">

58
src/pages/Onboarding2.jsx
View File

@@ -1,12 +1,14 @@
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
import React, {useEffect, useMemo, useState} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/store";
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";
const Onboarding2 = observer(() => {
const navigate = useNavigate();
const [dataRegistration, setDataRegistration] = useState(
{
firstname: '',
@@ -15,7 +17,8 @@ const Onboarding2 = observer(() => {
birthdate: '',
}
);
const [fillingForm, setFillingForm] = useState(false);
const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
const saveValueChange = (event) => {
const newValue=event.target.value;
@@ -25,22 +28,26 @@ const Onboarding2 = observer(() => {
})
};
const checkFillingForm = () => {
if (!Object.keys(dataRegistration).find(item => !dataRegistration[item])) {
setFillingForm(true);
const saveStoreRegistration = () => {
if (fillingForm) {
store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
key: `${item}`,
value: dataRegistration[item],
})
))
navigate("/onboarding-3", { replace: true });
}
};
const saveStoreRegistration = () => {
if (fillingForm) {
registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item => {
return{
key: `${item}`,
value: dataRegistration[item],
}
}))
}
};
useEffect(() => {
if(store.accountData.length === 0)
return;
setDataRegistration(store.accountData.reduce((acc, item) => ({
...acc,
[item.key]: item.value
}), {}))
}, [])
return (
<main className="bg-white">
@@ -97,15 +104,15 @@ const Onboarding2 = observer(() => {
<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 onBlur={checkFillingForm} id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
<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 onBlur={checkFillingForm} id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
<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 onBlur={checkFillingForm} id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
<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>
@@ -113,7 +120,7 @@ const Onboarding2 = observer(() => {
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
<input onBlur={checkFillingForm} id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
<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">
@@ -123,17 +130,10 @@ const Onboarding2 = observer(() => {
<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">
<Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
<button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">Sign Up
</button>
</div>
</div>
{/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
</div>
</div>
</div>
</div>

26
src/pages/Onboarding3.jsx
View File

@@ -1,28 +1,32 @@
import React from 'react';
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 {registrationStore} from "../store/store";
import {store} from "../store/store";
const Onboarding3 = observer(()=>{
function generatePassPhrase() {
registrationStore.generatePassPhrase();
useEffect(()=>{
store.generatePassPhrase();
}, [])
const generatePassPhrase = () => {
store.generatePassPhrase();
};
function savePassPhraseInStore (copiedPhrase) {
const savePassPhraseInStore = copiedPhrase => {
if (copiedPhrase.split(' ').length === 12) {
registrationStore.savePastPassPhrase(copiedPhrase.trim());
store.savePastPassPhrase(copiedPhrase.trim());
}
};
function pastePassPhrase() {
const pastePassPhrase = () => {
navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
};
function convertPassPhraseToArray() {
return registrationStore.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">
@@ -118,7 +122,7 @@ const Onboarding3 = observer(()=>{
{/* 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 mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.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>

13
src/pages/Onboarding4.jsx
View File

@@ -3,7 +3,7 @@ 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 { registrationStore } from "../store/store";
import { store } from "../store/store";
const Onboarding4 = observer(() => {
@@ -11,8 +11,9 @@ const Onboarding4 = observer(() => {
function createAccount() {
if(checkBoxesSelected.length === 2) {
registrationStore.pushAccountData();
sessionStorage.setItem('passPhrase', registrationStore.passPhrase);
store.pushAccountData();
sessionStorage.setItem('passPhrase', store.passPhrase);
store.clearDataRegistration();
}
};
@@ -24,7 +25,7 @@ const Onboarding4 = observer(() => {
}
};
const firstNameAccount = registrationStore.accountData.length && registrationStore.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">
@@ -83,7 +84,7 @@ const Onboarding4 = observer(() => {
</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 && "/dashboard"}>Go To Profile -&gt;</Link>
<Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
</button>
</div>
@@ -112,7 +113,7 @@ const Onboarding4 = observer(() => {
{/* 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 mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.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>

16
src/pages/SignIn.jsx
View File

@@ -3,7 +3,7 @@ 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 {registrationStore} from "../store/store";
import {store} from "../store/store";
const SignIn = observer(()=>{
@@ -12,11 +12,11 @@ const SignIn = observer(()=>{
function savePassPhrase (copiedPhrase) {
if (copiedPhrase.split(' ').length === 12) {
registrationStore.savePastPassPhrase(copiedPhrase.trim());
setPassPhrase(registrationStore.passPhrase);
store.savePastPassPhrase(copiedPhrase.trim());
setPassPhrase(store.passPhrase);
setAddedPassPhrase(true);
}
};
}
function convertPassPhraseToArray() {
return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
@@ -24,7 +24,7 @@ const SignIn = observer(()=>{
function pastePassPhrase() {
navigator.clipboard.readText().then(res => savePassPhrase(res));
};
}
return (
<main className="bg-white">
@@ -41,7 +41,7 @@ const SignIn = observer(()=>{
{/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */}
<Link className="block" to="/dashboard">
<Link className="block" to="/">
<img alt='logo' src={Logo} width="89" height="32"/>
</Link>
<div className="text-sm">
@@ -75,7 +75,7 @@ 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 && "/dashboard"}>Go To Profile -&gt;</Link>
<Link to={addedPassPhrase && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
</button>
</div>
@@ -90,7 +90,7 @@ const SignIn = observer(()=>{
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5">
<div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
<img className="object-cover object-center" alt="" src={generateSvgAvatar(registrationStore.pubKey)}/>
<img className="object-cover object-center" alt="" src={generateSvgAvatar(store.pubKey)}/>
</div>
<span className="text-sm">Your Digital ID</span>
</div>

22
src/pages/digitalId/ProfileId.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { registrationStore } from "../../store/store";
import { store } from "../../store/store";
import Sidebar from '../../partials/Sidebar';
import { observer } from 'mobx-react-lite';
import Header from '../../partials/Header';
@@ -78,7 +78,7 @@ const Profile = observer (() => {
const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]);
setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
.map(elem => (
(!elem.seed) ? {
...elem,
@@ -106,7 +106,7 @@ const Profile = observer (() => {
};
const sendAddedData = () => {
const checkingAddedData = !registrationStore.decryptedAccountData
const checkingAddedData = !store.decryptedAccountData
.some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
if (checkingAddedData) {
setAddPanelOpen(false);
@@ -124,13 +124,13 @@ const Profile = observer (() => {
};
const deleteDataParameters = () => {
const changeData = registrationStore.decryptedAccountData.filter(item=>!selectedItems.includes(item.key))
registrationStore.pushAccountData(changeData);
const changeData = store.decryptedAccountData.filter(item=>!selectedItems.includes(item.key))
store.pushAccountData(changeData);
};
const changeInitialArray = () => {
let newArr = [];
registrationStore.decryptedAccountData.map(elem => {
store.decryptedAccountData.map(elem => {
updatedValues.forEach(item => {
if (elem.label === item.label) {
newArr.push({
@@ -149,12 +149,12 @@ const Profile = observer (() => {
const changeDataParameters = () => {
const updatedData = changeInitialArray();
registrationStore.pushAccountData(updatedData);
store.pushAccountData(updatedData);
};
const addDataParameters = () => {
addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
registrationStore.pushAccountData(registrationStore.decryptedAccountData.concat(addedValues));
store.pushAccountData(store.decryptedAccountData.concat(addedValues));
};
const cancelAddPanel = () => {
@@ -164,7 +164,7 @@ const Profile = observer (() => {
};
const cancelUpdatePanel = () => {
setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
.map(elem => (
(!elem.seed) ? {
...elem,
@@ -235,7 +235,7 @@ const Profile = observer (() => {
</div>
{/* Table */}
<div className='w-[828px]'>
<ProfileTable isCheck={isCheck} handleClick={handleClick} userData={registrationStore.decryptedAccountData}/>
<ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
</div>
</div>
{/* Left sidebar */}
@@ -407,7 +407,7 @@ const Profile = observer (() => {
<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">
{registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
{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>

4
src/pages/digitalId/Validate.jsx
View File

@@ -6,7 +6,7 @@ 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 {registrationStore} from "../../store/store";
import {store} from "../../store/store";
const Validate = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -57,7 +57,7 @@ const Validate = observer(() => {
<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>
</div>
{registrationStore.transactionsInfo.map(item => {
{store.transactionsInfo.map(item => {
return <ValidateRoadMap season={item} key={item.id}/>
})}
</div>

4
src/pages/digitalId/ValidationLog.jsx
View File

@@ -3,7 +3,7 @@ import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
import {observer} from "mobx-react-lite";
import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header';
import {registrationStore} from "../../store/store";
import {store} from "../../store/store";
const ValidationLog = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -27,7 +27,7 @@ const ValidationLog = observer(() => {
<div className="max-w-3xl m-auto mt-6">
<div className="xl:-translate-x-16 max-w-fit">
{/* PostsID */}
{registrationStore.transactionsInfo.map(item => {
{store.transactionsInfo.map(item => {
return <ValidateRoadMap season={item} key={item.id}/>
})}
</div>

4
src/pages/digitalId/Verify.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header';
import {registrationStore} from "../../store/store";
import {store} from "../../store/store";
import { observer } from 'mobx-react-lite';
const Verify = observer(() => {
@@ -42,7 +42,7 @@ const Verify = observer(() => {
</div>
{/* Block */}
<div className="flex flex-col gap-y-4">
{registrationStore.sharedData.map((item, index) => (
{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)]">
{/* Header */}
<div className="flex justify-end items-center h-[42px]">