Merge pull request #32 from franze6/DID-7

Создана форма изменения параметров профиля, добавлен функционал для изменения и добавления параметров
2022-07-08 16:32:18 +03:00
parent c8604a56ac 596c44aac3
commit 79784cbcee
6 changed files with 194 additions and 49 deletions
--- 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 (
    <main className="bg-white">
--- a/src/pages/Onboarding4.jsx
+++ b/src/pages/Onboarding4.jsx
@@ -16,7 +16,6 @@ const Onboarding4 = observer(()=>{
    } else {
      registrationStore.pushAccountData()
      setCheckBoxesSelected(true)
-
    }
  }

--- 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 (() => {
                        <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>
--- a/src/partials/digitalId/ProfileTable.jsx
+++ b/src/partials/digitalId/ProfileTable.jsx
@@ -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)}
                />
              )
            })}
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -48,7 +48,7 @@ class Store {
  }

  saveDataRegistration(data) {
-    this._accountData = data;
+    this._accountData = [data];
  };

  fetchNodeInfo() {
--- a/src/store/userDataStore.js
+++ b/src/store/userDataStore.js
@@ -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",