diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx index 2ec84de..bc6e19d 100644 --- a/src/pages/Onboarding1.jsx +++ b/src/pages/Onboarding1.jsx @@ -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 (
diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx index f84f292..bea7ea5 100644 --- a/src/pages/Onboarding4.jsx +++ b/src/pages/Onboarding4.jsx @@ -16,7 +16,6 @@ const Onboarding4 = observer(()=>{ } else { registrationStore.pushAccountData() setCheckBoxesSelected(true) - } } diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index a1fb4e0..85b59d1 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -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) + 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 (() => { handleInput(e.target.value, 'property')} - value={currentValues.property} + onInput={(e) => handleInput(e.target.value, 'label')} + value={addedValues.label} onClick={openHint} />
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} />
@@ -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} />
@@ -228,7 +302,79 @@ const Profile = observer (() => { + + + {/* Update panel */} +
+ {updatedValues.map((item, index) => ( +
+
+ + changeUpdatedValues(e.target.value, 'label', item.key)} + value={item.label} + disabled='disabled' + /> +
+
+ + changeUpdatedValues(e.target.value, 'value', item.key)} + value={item.value} + /> +
+
+ + changeUpdatedValues(e.target.value, 'seed', item.key)} + value={item.seed} + /> +
+ {(updatedValues[index+1]) ? ( +
+ ) : null} +
+ ))} +
+ Store data on blockchain +
+
+ setToggle(!toggle)} /> + +
+
+
+ {/* Buttons */} +
+ + @@ -256,7 +402,7 @@ const Profile = observer (() => {
-