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

Merge branch 'master' into DID-6

Browse Source
This commit is contained in:
DuCay
2022-07-08 21:24:04 +03:00
committed by GitHub
parent a271da7bf9 79784cbcee
commit 138047fa10
5 changed files with 194 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/Onboarding1.jsx
View File

@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React from 'react';
import { Link } from 'react-router-dom';
import OnboardingImage from '../images/onboarding-image.jpg';
@@ -11,9 +11,6 @@ import {registrationStore} from "../store/store";
const Onboarding1 = observer(()=>{
let phrase = passphrase.Mnemonic.generateMnemonic()
registrationStore.savePassPhrase(phrase)
useEffect(()=>{
},[])
return (
<main className="bg-white">

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

@@ -14,48 +14,76 @@ const Profile = observer (() => {
const [changePanelOpen, setChangePanelOpen] = useState(false);
const [toggle, setToggle] = useState(true);
const [addPanelOpen, setAddPanelOpen] = useState(false);
const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState([]);
const defaultValues = {
property: '',
label: '',
value: '',
seed: Math.floor(Math.random() * 90000000000000000000)
};
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date'];
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date'];
const [propertyValues, setPropertyValues] = useState([]);
const [currentValues, setCurrentValues] = useState(defaultValues);
const [updatedValues, setUpdatedValues] = useState([defaultValues]);
const [addedValues, setAddedValues] = useState(defaultValues);
const openHint = () => {
if (!currentValues.property) {
if (!addedValues.label) {
setPropertyValues(initialPropertyValues);
}
}
const changeCurrentValues = (value, field) => {
setCurrentValues((prevState)=> ({
const changeAddedValues = (value, field) => {
setAddedValues((prevState) => (
field !== 'seed' ? {
...prevState,
[field]: value.charAt(0).toUpperCase()+value.slice(1),
[field]: value
} : {
...prevState,
[field]: +value,
}))
}
};
const changeUpdatedValues = (value, field, key) => {
setUpdatedValues((prevState) =>
prevState.map((elem) => (
(elem.key === key && field !== 'seed') ? {
...elem,
[field]: value,
} :
(elem.key === key) ? {
...elem,
[field]: +value,
} : elem
))
)
};
const closeHint = (element) => {
changeCurrentValues(element, 'property');
changeAddedValues(element, 'label');
setPropertyValues([]);
}
const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]);
setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
.map(elem => (
(!elem.seed) ? {
...elem,
seed: Math.floor(Math.random() * 90000000000000000000)
}: elem)));
if (selectedItems.length > 0) {
setButtonPanelOpen(false);
setAddPanelOpen(false);
setChangePanelOpen(true);
}
if (removePanelOpen === true) {
if (removePanelOpen === true || updatePanelOpen === true) {
setChangePanelOpen(false);
}
if (selectedItems.length === 0) {
setRemovePanelOpen(false);
setUpdatePanelOpen(false);
setButtonPanelOpen(true);
setChangePanelOpen(false);
}
@@ -66,38 +94,84 @@ const Profile = observer (() => {
setButtonPanelOpen(false);
}
const sendValues = () => {
if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
const sendAddedData = () => {
if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) {
setAddPanelOpen(false);
setButtonPanelOpen(true);
setCurrentValues(defaultValues);
setAddedValues(defaultValues);
addDataParameters();
}
}
const deletePropertyData = () => {
const sendUpdatedData = () => {
setUpdatePanelOpen(false);
changeDataParameters();
setChangePanelOpen(true);
}
const deleteDataParameters = () => {
const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
registrationStore.pushAccountData(changeData)
registrationStore.pushAccountData(changeData);
}
const changeInitialArray = () => {
let newArr = [];
userDataStore.decryptedData.map(elem => {
updatedValues.forEach(item => {
if (elem.label === item.label) {
newArr.push({
...elem,
'value': item.value,
'seed': item.seed,
})
}
})
if (!newArr.find(element => element.label === elem.label)) {
newArr.push(elem);
}
})
return newArr;
}
const changeDataParameters = () => {
const updatedData = changeInitialArray();
registrationStore.pushAccountData(updatedData);
}
const addDataParameters = () => {
addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
}
const cancelAddPanel = () => {
setCurrentValues(defaultValues);
setAddedValues(defaultValues);
setAddPanelOpen(false);
setButtonPanelOpen(true);
}
const cancelUpdatePanel = () => {
setUpdatePanelOpen(false);
setChangePanelOpen(true);
}
const openRemovePanel = () => {
setRemovePanelOpen(true);
setChangePanelOpen(false);
}
const applyRemovePanel = () => {
const openUpdatePanel = () => {
setUpdatePanelOpen(true);
setChangePanelOpen(false);
}
const applyDataDeletion = () => {
setRemovePanelOpen(false);
setButtonPanelOpen(true);
deletePropertyData()
deleteDataParameters()
}
const handleInput = (text, field) => {
changeCurrentValues(text, field);
changeAddedValues(text, field);
setPropertyValues(initialPropertyValues);
if (text) {
let reg = new RegExp(`^${text}`, 'img');
@@ -164,12 +238,12 @@ const Profile = observer (() => {
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
<input
autoComplete='off'
id="property"
id="label"
className="form-input w-full"
type="text"
required
onInput={(e) => handleInput(e.target.value, 'property')}
value={currentValues.property}
onInput={(e) => handleInput(e.target.value, 'label')}
value={addedValues.label}
onClick={openHint}
/>
<div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
@@ -189,8 +263,8 @@ const Profile = observer (() => {
type="text"
required
onClick={() => setPropertyValues([])}
onChange={(e) => changeCurrentValues(e.target.value, 'value')}
value={currentValues.value}
onChange={(e) => changeAddedValues(e.target.value, 'value')}
value={addedValues.value}
/>
</div>
<div>
@@ -199,11 +273,11 @@ const Profile = observer (() => {
autoComplete='off'
id="seed"
className="form-input w-full"
type="text"
type="number"
required
onClick={() => setPropertyValues([])}
onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
value={currentValues.seed}
onChange={(e) => changeAddedValues(e.target.value, 'seed')}
value={addedValues.seed}
/>
</div>
</div>
@@ -228,7 +302,79 @@ const Profile = observer (() => {
</button>
<button
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
onClick={sendValues}
onClick={sendAddedData}
>
Send
</button>
</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`}>
{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>
<input
id={`${item.key}:label`}
className="form-input w-full"
type="text"
required
onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
value={item.label}
disabled='disabled'
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
<input
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.value}
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
<input
autoComplete='off'
id={`${item.key}:seed`}
className="form-input w-full"
type="number"
required
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>
) : 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>
<div className="flex items-center">
<div className="form-switch">
<input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
<label className="bg-slate-400" htmlFor="switch-1">
<span className="bg-white shadow-sm" aria-hidden="true"></span>
</label>
</div>
</div>
</div>
{/* Buttons */}
<div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
<button
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
onClick={cancelUpdatePanel}
>
Cansel
</button>
<button
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
onClick={sendUpdatedData}
>
Send
</button>
@@ -256,7 +402,7 @@ const Profile = observer (() => {
<div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
<button
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
onClick={applyRemovePanel}
onClick={applyDataDeletion}
>
<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" />
@@ -319,7 +465,10 @@ const Profile = observer (() => {
</svg>
<span className="ml-2">Remove</span>
</button>
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
<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">
<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>

18
src/partials/digitalId/ProfileTable.jsx
View File

@@ -31,13 +31,13 @@ function ProfileTable({
const data = {
general:["First name","Second name", "Gender", "Birthdate", "Place of birth"],
nationality:["Nationality", "National id", "National doctype", "National doc id", "National doc issue date", "National doc expiry date"],
nationality:["Nationality", "National ID", "National doctype", "National doc ID", "National doc issue date", "National doc expiry date"],
social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"]
}
const generalData = userData.filter(elem => data.general.includes(elem.label)),
nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
sosialData = userData.filter(elem => data.social.includes(elem.label)),
otherData = userData.filter((elem) =>
!data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
@@ -79,7 +79,7 @@ function ProfileTable({
return (
<ProfileTableItem
key={data.label}
id={data.label}
id={data.key}
image={defaultData.image}
value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
property={data.label}
@@ -87,7 +87,7 @@ function ProfileTable({
transactions={defaultData.transactions}
avatars={defaultData.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.label)}
isChecked={isCheck.includes(data.key)}
/>
)
})}
@@ -105,7 +105,7 @@ function ProfileTable({
return (
<ProfileTableItem
key={data.label}
id={data.label}
id={data.key}
image={defaultData.image}
value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
property={data.label}
@@ -113,7 +113,7 @@ function ProfileTable({
transactions={defaultData.transactions}
avatars={defaultData.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.label)}
isChecked={isCheck.includes(data.key)}
/>
)
})}
@@ -130,8 +130,8 @@ function ProfileTable({
{otherData.map(data => {
return (
<ProfileTableItem
key={data.label}
id={data.label}
key={data.key}
id={data.key}
image={defaultData.image}
value={data.value}
property={data.label}
@@ -139,7 +139,7 @@ function ProfileTable({
transactions={defaultData.transactions}
avatars={defaultData.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.label)}
isChecked={isCheck.includes(data.key)}
/>
)
})}

2
src/store/store.js
View File

@@ -48,7 +48,7 @@ class Store {
}
saveDataRegistration(data) {
this._accountData = data;
this._accountData = [data];
};
fetchNodeInfo() {

4
src/store/userDataStore.js
View File

@@ -9,9 +9,9 @@ const labelMap = {
birthdate: "Birthdate",
place_of_birth: "Place of birth",
nationality: "Nationality",
national_id: "National id",
national_id: "National ID",
national_doctype: "National doctype",
national_doc_id: "National doc id",
national_doc_id: "National doc ID",
national_doc_issue_date: "National doc issue date",
national_doc_expiry_date: "National doc expiry date",
telephone: "Telephone",