diff --git a/package-lock.json b/package-lock.json index 7b0ffcd..df7b3c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@tailwindcss/forms": "^0.4.0", "chart.js": "^3.5.0", "chartjs-adapter-moment": "^1.0.0", + "mobx": "^6.6.0", + "mobx-react-lite": "^3.4.0", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -1400,6 +1402,36 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, + "node_modules/mobx": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz", + "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + } + }, + "node_modules/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==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + }, + "peerDependencies": { + "mobx": "^6.1.0", + "react": "^16.8.0 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", @@ -3059,6 +3091,17 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, + "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-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.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", diff --git a/package.json b/package.json index 921c7f7..de49b62 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "@tailwindcss/forms": "^0.4.0", "chart.js": "^3.5.0", "chartjs-adapter-moment": "^1.0.0", + "mobx": "^6.6.0", + "mobx-react-lite": "^3.4.0", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/pages/Onboarding2.jsx b/src/pages/Onboarding2.jsx index 8e1560f..9460854 100644 --- a/src/pages/Onboarding2.jsx +++ b/src/pages/Onboarding2.jsx @@ -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 (
@@ -60,23 +103,24 @@ function Onboarding2() {
- - + + saveValueChange(event)} className="form-input w-full" type="text" />
- - + + saveValueChange(event)} className="form-input w-full" type="text" />
- - saveValueChange(event)} className="form-select w-full"> +
- - + + saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
@@ -86,8 +130,8 @@ function Onboarding2() { Email me about product news.
-
@@ -114,6 +158,6 @@ function Onboarding2() {
); -} +}); export default Onboarding2; diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx index 3e21c56..a64be60 100644 --- a/src/pages/Onboarding4.jsx +++ b/src/pages/Onboarding4.jsx @@ -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() { -

Nice to meet you, Ivan 🙌

- @@ -106,6 +126,6 @@ function Onboarding4() { ); -} +}); export default Onboarding4; diff --git a/src/store/registrationStore.js b/src/store/registrationStore.js new file mode 100644 index 0000000..7bfb718 --- /dev/null +++ b/src/store/registrationStore.js @@ -0,0 +1,22 @@ +import { reaction, makeAutoObservable } from "mobx"; + +class RegistrationStore { + _accountData = {}; + + constructor() { + makeAutoObservable(this); + reaction(() => this.accountData, () => this.saveDataRegistration()) + }; + + saveDataRegistration(data) { + this._accountData = data; + }; + + accountData() { + return this._accountData + }; + +}; + + +export const registrationStore = new RegistrationStore();