fix naming for post method

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

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/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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="second_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" />
+                      <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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="birthdate">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" />
+                      <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/shared/fetchWrapper.js

@@ -32,7 +32,7 @@ function request(method, url, headers = {}, token, body) {
     requestOptions = {
       method: method,
       headers: {
-        authorization: `IDNTTY ${token}`,
+        Authorization: `IDNTTY ${token}`,
         ...headers
       },
       signal: controller.signal,
@@ -42,7 +42,7 @@ function request(method, url, headers = {}, token, body) {
     requestOptions = {
       method: method,
       headers: {
-        authorization: `IDNTTY ${token}`,
+        Authorization: `IDNTTY ${token}`,
         Accept: 'application/json',
         'Content-Type': 'application/json',
         ...headers

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();