auth
This commit is contained in:
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
|||||||
import {
|
import {
|
||||||
Routes,
|
Routes,
|
||||||
Route,
|
Route,
|
||||||
useLocation
|
useLocation,
|
||||||
} from 'react-router-dom';
|
} from 'react-router-dom';
|
||||||
|
|
||||||
import './css/style.scss';
|
import './css/style.scss';
|
||||||
|
|||||||
3
src/api/node.js
Normal file
3
src/api/node.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import {fetchWrapper} from '../shared/fetchWrapper';
|
||||||
|
|
||||||
|
export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)
|
||||||
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
|
|||||||
import {observer} from "mobx-react-lite";
|
import {observer} from "mobx-react-lite";
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import Transition from '../utils/Transition';
|
import Transition from '../utils/Transition';
|
||||||
import {registrationStore} from "../store/registrationStore";
|
import {registrationStore} from "../store/store";
|
||||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||||
import UserAvatar from '../images/user-avatar-32.png';
|
import UserAvatar from '../images/user-avatar-32.png';
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import OnboardingDecoration from '../images/auth-decoration.png';
|
|||||||
import Logo from "../images/logo.png";
|
import Logo from "../images/logo.png";
|
||||||
import {observer} from "mobx-react-lite";
|
import {observer} from "mobx-react-lite";
|
||||||
import {passphrase} from "@liskhq/lisk-client";
|
import {passphrase} from "@liskhq/lisk-client";
|
||||||
import {registrationStore} from "../store/registrationStore";
|
import {registrationStore} from "../store/store";
|
||||||
|
|
||||||
const Onboarding1 = observer(()=>{
|
const Onboarding1 = observer(()=>{
|
||||||
let phrase = passphrase.Mnemonic.generateMnemonic()
|
let phrase = passphrase.Mnemonic.generateMnemonic()
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, {useEffect, useState} from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { registrationStore } from "../store/registrationStore";
|
import { registrationStore } from "../store/store";
|
||||||
|
|
||||||
import OnboardingImage from '../images/onboarding-image.jpg';
|
import OnboardingImage from '../images/onboarding-image.jpg';
|
||||||
import OnboardingDecoration from '../images/auth-decoration.png';
|
import OnboardingDecoration from '../images/auth-decoration.png';
|
||||||
|
|||||||
@@ -2,15 +2,15 @@ import React, { useState} from 'react';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||||
import Logo from "../images/logo.png";
|
import Logo from "../images/logo.png";
|
||||||
import {registrationStore} from "../store/registrationStore";
|
import {registrationStore} from "../store/store";
|
||||||
import { passphrase } from "@liskhq/lisk-client";
|
import { passphrase } from "@liskhq/lisk-client";
|
||||||
|
|
||||||
function Onboarding3() {
|
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() {
|
function generatePassPhrase() {
|
||||||
let phrase = passphrase.Mnemonic.generateMnemonic()
|
let phrase = passphrase.Mnemonic.generateMnemonic()
|
||||||
registrationStore.savePassPhrase(phrase)
|
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)
|
setPassPhrase(newPassPhrase)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||||
import Logo from "../images/logo.png";
|
import Logo from "../images/logo.png";
|
||||||
import {observer} from "mobx-react-lite";
|
import {observer} from "mobx-react-lite";
|
||||||
import { registrationStore } from "../store/registrationStore";
|
import { registrationStore } from "../store/store";
|
||||||
|
|
||||||
const Onboarding4 = observer(()=>{
|
const Onboarding4 = observer(()=>{
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ function request(method, url, headers = {}, token, body) {
|
|||||||
requestOptions = {
|
requestOptions = {
|
||||||
method: method,
|
method: method,
|
||||||
headers: {
|
headers: {
|
||||||
authorization: `IDNTTY ${token}`,
|
Authorization: `IDNTTY ${token}`,
|
||||||
...headers
|
...headers
|
||||||
},
|
},
|
||||||
signal: controller.signal,
|
signal: controller.signal,
|
||||||
@@ -42,7 +42,7 @@ function request(method, url, headers = {}, token, body) {
|
|||||||
requestOptions = {
|
requestOptions = {
|
||||||
method: method,
|
method: method,
|
||||||
headers: {
|
headers: {
|
||||||
authorization: `IDNTTY ${token}`,
|
Authorization: `IDNTTY ${token}`,
|
||||||
Accept: 'application/json',
|
Accept: 'application/json',
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
...headers
|
...headers
|
||||||
|
|||||||
@@ -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();
|
|
||||||
81
src/store/store.js
Normal file
81
src/store/store.js
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
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
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
console.log(info)
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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.concat(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();
|
||||||
Reference in New Issue
Block a user