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

Merge pull request #33 from franze6/DID-6

Browse Source 
Refactoring in Onboarding steps
This commit is contained in:
DuCay
2022-07-08 21:24:21 +03:00
committed by GitHub
parent 79784cbcee 138047fa10
commit 5ebc965a2a
3 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/Onboarding2.jsx
View File

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/store";
@@ -24,22 +24,13 @@ const Onboarding2 = observer(()=>{
...dataRegistration,
[event.target.id]: newValue
})
if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
setFillingForm(true)
}
}
const saveStoreRegistration = ()=>{
Object.keys(dataRegistration).forEach(item=>{
let element=document.getElementById(item)
if(dataRegistration[item]) {
element.style.borderColor=""
} else {
element.style.borderColor="red"
}
})
if(Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
return
} else {
setFillingForm(true)
}
if(fillingForm) {
registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
return{
key: `${item}`,
@@ -47,12 +38,7 @@ const Onboarding2 = observer(()=>{
}
}))
}
useEffect(()=>{
if(fillingForm===true) {
document.getElementById("signup").click()
}
},[fillingForm])
return (
<main className="bg-white">

15
src/pages/Onboarding3.jsx
View File

@@ -6,19 +6,18 @@ import {registrationStore} from "../store/store";
import { passphrase } from "@liskhq/lisk-client";
function Onboarding3() {
const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
function generatePassPhrase() {
let phrase = passphrase.Mnemonic.generateMnemonic()
registrationStore.savePassPhrase(phrase)
let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
setPassPhrase(newPassPhrase)
setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
}
function savePassPhraseInStore (copiedPhrase) {
let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ')
let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
if(phrasePaste.length===12) {
registrationStore.savePassPhrase(copiedPhrase)
setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index })))
registrationStore.savePassPhrase(copiedPhrase.trim())
setPassPhrase(phrasePaste)
} else {
return false
}
@@ -28,6 +27,10 @@ function Onboarding3() {
navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
}
function convertPhraseToArray(phrase) {
return phrase.split(' ').map((item, index) => ({str:item, id:index }))
}
return (
<main className="bg-white">

30
src/pages/Onboarding4.jsx
View File

@@ -1,4 +1,4 @@
import React, {useEffect, 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";
@@ -7,23 +7,23 @@ import { registrationStore } from "../store/store";
const Onboarding4 = observer(()=>{
const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
function createAccount () {
let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
if(checkBoxes.find(item=>item.checked===false)) {
return
} else {
if(checkBoxesSelected.length===2) {
registrationStore.pushAccountData()
setCheckBoxesSelected(true)
}
}
useEffect(()=>{
if(checkBoxesSelected===true) {
document.getElementById("link-dashboard").click()
function saveCheckBoxesValues(e) {
const { id, checked } = e.target
setCheckBoxesSelected([...checkBoxesSelected, id])
if (!checked) {
setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
}
},[checkBoxesSelected])
}
const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
return (
<main className="bg-white">
@@ -80,20 +80,20 @@ const Onboarding4 = observer(()=>{
<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">{registrationStore.accountData.find(item=>item.key="first_name").key ? `Nice to meet you, ${registrationStore.accountData.find(item=>item.key="first_name").value} 🙌` : 'Please, go back step 2'}</h1>
<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 && "/dashboard"}>Go To Profile -&gt;</Link>
<Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link>
</button>
</div>
<div className="flex items-center justify-between">
<div className="mr-1">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<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 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
</div>