fix naming for post method

Доработка формы создания поля

.gitignore

@@ -1,2 +1,3 @@
 # dependencies
 /node_modules
+.idea

package-lock.json

@@ -12580,6 +12580,25 @@
       "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
       "requires": {}
     },
+    "mobx": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz",
+      "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg=="
+    },
+    "mobx-react": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.0.tgz",
+      "integrity": "sha512-riHu0XZJA6f64L1iXZoAaDjVt6suYoy8I2HIfuz2tX3O4FFaAe4lVA2CoObttmUQTTFPM7j3Df6T4re0cHkghQ==",
+      "requires": {
+        "mobx-react-lite": "^3.4.0"
+      }
+    },
+    "mobx-react-lite": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
+      "requires": {}
+    },
     "moment": {
       "version": "2.29.3",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",

src/App.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import {
   Routes,
   Route,
-  useLocation
+  useLocation,
 } from 'react-router-dom';
 
 import './css/style.scss';

src/api/node.js

@@ -0,0 +1,3 @@
+import {fetchWrapper} from '../shared/fetchWrapper';
+
+export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)

src/components/DropdownProfile.jsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
 

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {Buffer} from "buffer";
-import { BrowserRouter as Router } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
 
 globalThis.Buffer = Buffer

src/pages/Onboarding1.jsx

@@ -6,7 +6,7 @@ import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
 import {passphrase} from "@liskhq/lisk-client";
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 
 const Onboarding1 = observer(()=>{
   let phrase = passphrase.Mnemonic.generateMnemonic()

src/pages/Onboarding2.jsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
-import { registrationStore } from "../store/registrationStore";
+import { registrationStore } from "../store/store";
 
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
@@ -11,9 +11,9 @@ const Onboarding2 = observer(()=>{
   const [dataRegistration, setDataRegistration] = useState(
       {
         first_name: '',
-        last_name: '',
+        second_name: '',
         gender: '',
-        date_birth: '',
+        birthdate: '',
       }
   )
   const [fillingForm, setFillingForm] = useState(false)
@@ -107,8 +107,8 @@ const Onboarding2 = observer(()=>{
                       <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="last_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="last_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
+                      <input id="second_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
@@ -119,8 +119,8 @@ const Onboarding2 = observer(()=>{
                       </select>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="date_birth">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="date_birth" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
+                      <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
+                      <input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
                     </div>
                   </div>
                   <div className="flex items-center justify-between mt-6">

src/pages/Onboarding3.jsx

@@ -2,15 +2,15 @@ import React, { useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
-  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhraseStore.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
+  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
   function generatePassPhrase() {
     let phrase = passphrase.Mnemonic.generateMnemonic()
     registrationStore.savePassPhrase(phrase)
-    let newPassPhrase = registrationStore.passPhraseStore.split(' ').map((item, index) => ({str:item, id:index }))
+    let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
     setPassPhrase(newPassPhrase)
   }
 

src/pages/Onboarding4.jsx

@@ -3,17 +3,18 @@ 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/registrationStore";
+import { registrationStore } from "../store/store";
 
 const Onboarding4 = observer(()=>{
 
   const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
 
-  function validateCheckBox () {
+  function createAccount () {
     let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
     if(checkBoxes.find(item=>item.checked===false)) {
       return
     } else {
+      registrationStore.fetchCreateNewAccount()
       setCheckBoxesSelected(true)
 
     }
@@ -81,7 +82,7 @@ const Onboarding4 = observer(()=>{
                     <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.first_name ? `Nice to meet you, ${registrationStore.accountData.first_name} 🙌` : 'Please, go back step 2'}</h1>
-                  <button onClick={()=>validateCheckBox()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                  <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>
                   </button>
                 </div>

src/pages/digitalId/ProfileId.jsx

@@ -17,6 +17,34 @@ function Profile () {
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   
+  const defaultValues = {
+    property: '',
+    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 [propertyValues, setPropertyValues] = useState([]);
+  const [currentValues, setCurrentValues] = useState(defaultValues);
+
+  const openHint = () => {
+    if (!currentValues.property) {
+      setPropertyValues(initialPropertyValues);
+    }
+  }
+
+  const changeCurrentValues = (value, field) => {
+    setCurrentValues((prevState)=> ({
+      ...prevState,
+      [field]: value.charAt(0).toUpperCase()+value.slice(1),
+    }))
+  }
+
+  const closeHint = (element) => {
+    changeCurrentValues(element, 'property');
+    setPropertyValues([]);
+  }
+
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
     if (selectedItems.length > 0) {
@@ -39,7 +67,16 @@ function Profile () {
     setButtonPanelOpen(false);
   }
 
+  const sendValues = () => {
+    if (!userData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+      setAddPanelOpen(false);
+      setButtonPanelOpen(true);
+      setCurrentValues(defaultValues);
+    }
+  }
+
   const cancelAddPanel = () => {
+    setCurrentValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
   }
@@ -54,6 +91,15 @@ function Profile () {
     setButtonPanelOpen(true);
   }
 
+  const handleInput = (text, field) => {
+    changeCurrentValues(text, field);
+    setPropertyValues(initialPropertyValues);
+    if (text) {
+      let reg = new RegExp(`^${text}`, 'img');
+      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+    }
+  };
+
   const userData = [
     {
       id: '0',
@@ -246,22 +292,56 @@ function Profile () {
                     <div 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="property" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="property"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onInput={(e) => handleInput(e.target.value, 'property')}
+                          value={currentValues.property}
+                          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'}`}>
+                          <ul>
+                            {propertyValues.map((element, index) => (
+                              <li key={index} onClick={() => closeHint(element)}>{element}</li>
+                            ))}
+                          </ul>
+                        </div>
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input id="value" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="value"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'value')}
+                          value={currentValues.value}
+                        />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input id="seed" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="seed"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
+                          value={currentValues.seed}
+                        />
                       </div>
                     </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="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <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>
@@ -278,7 +358,7 @@ function Profile () {
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={cancelAddPanel}
+                        onClick={sendValues}
                       >
                         Send
                       </button>

src/pages/digitalId/Verify.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 
-function Verify () {
+const Verify = (() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
@@ -165,6 +165,6 @@ function Verify () {
       </div>
     </div>
   )
-}
+})
 
 export default Verify;

src/shared/fetchWrapper.js

@@ -0,0 +1,103 @@
+import {registrationStore} from '../store/store';
+
+function prepareUrl(url) {
+  if (url.startsWith('http')) return url;
+  return `http://3.125.47.101/api/${url}`;
+}
+
+function handleRequest(method, url, headers, attempts, token, body) {
+  return new Promise((resolve, reject) => {
+    (function internalRequest() {
+      return request(method, url, headers, token, body)
+        .then(resolve)
+        .catch(err => --attempts > 0 ? internalRequest() : reject(err))
+    })()
+  })
+    .then((res) => res.json())
+    .catch(() => [])
+};
+
+/**
+ * Request
+ * @param {string} method - method name
+ * @param {string} url - endpoint url.
+ * @param {string} token - auth token
+ * @param {object} body - request body.
+ * @param {object} headers - request headers
+ */
+function request(method, url, headers = {}, token, body) {
+  let controller = new AbortController;
+  let requestOptions = {};
+  if (method === 'GET' || method === 'DELETE'){
+    requestOptions = {
+      method: method,
+      headers: {
+        Authorization: `IDNTTY ${token}`,
+        ...headers
+      },
+      signal: controller.signal,
+    }
+  };
+  if (method === 'POST' || method === 'PUT'){
+    requestOptions = {
+      method: method,
+      headers: {
+        Authorization: `IDNTTY ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        ...headers
+      },
+      body: JSON.stringify(body),
+      signal: controller.signal,
+    }
+  };
+  if (!token) {
+    requestOptions.headers.Authorization = null;
+  }
+  setTimeout(() => controller.abort(), 3000);
+  return fetch(prepareUrl(url), requestOptions);
+};
+
+function get(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, null);
+}
+
+function getAuth(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey);
+}
+
+function del(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, null);
+}
+
+function delAuth(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey);
+}
+
+function post(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, null, body);
+}
+
+function postAuth(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body);
+}
+
+function put(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, null, body);
+}
+
+function putAuth(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body);
+}
+
+export const fetchWrapper = {
+  get,
+  del,
+  post,
+  put,
+  getAuth,
+  delAuth,
+  postAuth,
+  putAuth,
+  baseUrl: ''
+};

src/store/registrationStore.js

@@ -1,41 +0,0 @@
-import { reaction, makeAutoObservable } from "mobx";
-import {cryptography} from "@liskhq/lisk-client";
-
-class RegistrationStore {
-  _accountData = {}
-
-  _passPhraseStore=''
-
-  _pubKey = ''
-
-  constructor() {
-    makeAutoObservable(this);
-    reaction(()=>this.passPhraseStore, ()=>this.savePubKey())
-  };
-
-  savePassPhrase(phrase) {
-    this._passPhraseStore = phrase
-  }
-
-  saveDataRegistration(data) {
-    this._accountData = data;
-  };
-  savePubKey() {
-    this._pubKey = cryptography.bufferToHex(cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhraseStore).publicKey)
-  }
-
-  get passPhraseStore() {
-    return this._passPhraseStore
-  }
-
-  get accountData() {
-    return this._accountData
-  };
-
-  get pubKey() {
-    return this._pubKey
-  }
-
-};
-
-export const registrationStore = new RegistrationStore();

src/store/store.js

@@ -0,0 +1,99 @@
+import { reaction, makeAutoObservable } from "mobx";
+import {cryptography} from "@liskhq/lisk-client";
+import {getNodeInfo} from '../api/node';
+import {fetchWrapper} from '../shared/fetchWrapper';
+
+class Store {
+  _accountData = {}
+
+  _passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+
+  _nodeInfo = {}
+
+  constructor() {
+    makeAutoObservable(this);
+
+    this.fetchNodeInfo()
+
+    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }))
+  };
+
+  fetchCreateNewAccount() {
+    fetchWrapper.postAuth('http://3.125.47.101/api/data/account', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }, [...this.encryptAccountData])
+        .catch(()=>{})
+  }
+
+  savePassPhrase(phrase) {
+    this._passPhrase = phrase
+  }
+
+  saveDataRegistration(data) {
+    this._accountData = data;
+  };
+
+  fetchNodeInfo() {
+    getNodeInfo()
+      .then((info) => this.fetchNodeInfoSuccess(info))
+      .catch((err) => this.fetchNodeInfoFailed(err))
+  }
+
+  fetchNodeInfoSuccess(info) {
+    this._nodeInfo = info.data;
+  }
+
+  fetchNodeInfoFailed(err) {
+    console.log(err)
+  }
+
+  get passPhrase() {
+    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+  }
+
+  get accountData() {
+    return this._accountData
+  };
+
+  get encryptAccountData() {
+    return Object.keys(this.accountData).map((label) => {
+      let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + this.accountData[label], this.passPhrase, this.pubKey);
+      return {
+        "label": label,
+        "value": value.encryptedMessage,
+        "value_nonce": value.nonce,
+      }
+    })
+  }
+
+  get nodeInfo() {
+    return this._nodeInfo;
+  }
+
+  get addressAndPubKey() {
+    return cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhrase);
+  }
+
+  get pubKey() {
+    return this.addressAndPubKey.publicKey.toString('hex');
+  }
+
+  get address() {
+    return cryptography.bufferToHex(this.addressAndPubKey.address)
+  }
+
+  get tokenKey() {
+    const stringToSign = this.nodeInfo.networkIdentifier + this.nodeInfo.lastBlockID;
+    if(!stringToSign)
+      return '';
+    const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
+    return this.pubKey + ':' +sign
+  }
+
+};
+
+export const registrationStore = new Store();