admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add registration store

Browse Source
This commit is contained in:
DwCay
2022-06-14 13:13:58 +03:00
parent 541c5988e9
commit da04efbf80
5 changed files with 150 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/Onboarding2.jsx
View File

@@ -1,11 +1,54 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import { Link } from 'react-router-dom';
import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/registrationStore";
import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png";
function Onboarding2() {
const Onboarding2 = observer(()=>{
const [dataRegistration, setDataRegistration] = useState(
{
first_name: '',
last_name: '',
gender: '',
date_birth: '',
}
)
const [fillingForm, setFillingForm] = useState(false)
const saveValueChange = (event)=>{
const newValue=event.target.value;
setDataRegistration({
...dataRegistration,
[event.target.id]: newValue
})
}
const saveStoreRegistration = ()=>{
Object.keys(dataRegistration).forEach(item=>{
let element=document.getElementById(item)
if(dataRegistration[item]) {
element.style.borderColor=""
} else {
element.style.borderColor="red"
}
})
if(Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
return
} else {
setFillingForm(true)
}
registrationStore.saveDataRegistration(dataRegistration)
}
useEffect(()=>{
if(fillingForm===true) {
document.getElementById("signup").click()
}
},[fillingForm])
return (
<main className="bg-white">
@@ -60,23 +103,24 @@ function Onboarding2() {
<form>
<div className="space-y-4 mb-8">
<div>
<label className="block text-sm font-medium mb-1" htmlFor="email">First name <span className="text-rose-500">*</span></label>
<input id="email" className="form-input w-full" type="email" />
<label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
<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="name">Last name <span className="text-rose-500">*</span></label>
<input id="name" className="form-input w-full" type="text" />
<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" />
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="role">Gender <span className="text-rose-500">*</span></label>
<select id="role" className="form-select w-full">
<label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
<select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
<option className="hidden"></option>
<option>male</option>
<option>feemale</option>
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="password">Date of birth <span className="text-rose-500">*</span></label>
<input id="password" className="form-input w-full" type="password" autoComplete="on" />
<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" />
</div>
</div>
<div className="flex items-center justify-between mt-6">
@@ -86,8 +130,8 @@ function Onboarding2() {
<span className="text-sm ml-2">Email me about product news.</span>
</label>
</div>
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
<Link to="/onboarding-3">Sign Up</Link>
<button onClick={()=>saveStoreRegistration()} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
<Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
</button>
</div>
</form>
@@ -114,6 +158,6 @@ function Onboarding2() {
</main>
);
}
});
export default Onboarding2;

32
src/pages/Onboarding4.jsx
View File

@@ -1,9 +1,29 @@
import React, {useEffect} from 'react';
import React, {useEffect, useState} from 'react';
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";
function Onboarding4() {
const Onboarding4 = observer(()=>{
const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
function validateCheckBox () {
let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
if(checkBoxes.find(item=>item.checked===false)) {
return
} else {
setCheckBoxesSelected(true)
}
}
useEffect(()=>{
if(checkBoxesSelected===true) {
document.getElementById("link-dashboard").click()
}
},[checkBoxesSelected])
useEffect(()=>{
return ()=>{
@@ -66,9 +86,9 @@ function Onboarding4() {
<circle className="text-emerald-100" cx="32" cy="32" r="32" />
<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">Nice to meet you, Ivan 🙌</h1>
<button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link to="/dashboard">Go To Profile -&gt;</Link>
<h1 className="text-3xl text-slate-800 font-bold mb-8">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
<button onClick={()=>validateCheckBox()} 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>
@@ -106,6 +126,6 @@ function Onboarding4() {
</main>
);
}
});
export default Onboarding4;