Add registration store

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",

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",

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 (
     <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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
-                      <input id="email" className="form-input w-full" type="email" />
+                      <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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="last_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="name" className="form-input w-full" type="text" />
+                      <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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
-                      <select id="role" className="form-select w-full">
+                      <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>
+                      <label className="block text-sm font-medium mb-1" htmlFor="date_birth">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="password" className="form-input w-full" type="password" autoComplete="on" />
+                      <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">
+                    <button onClick={()=>saveStoreRegistration()} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
-                      <Link to="/onboarding-3">Sign Up</Link>
+                      <Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
                     </button>
                   </div>
                 </form>
@@ -114,6 +158,6 @@ function Onboarding2() {
 
     </main>
   );
-}
+});
 
 export default Onboarding2;

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() {
                     <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>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
-                  <button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                  <button onClick={()=>validateCheckBox()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
-                    <Link to="/dashboard">Go To Profile -&gt;</Link>
+                    <Link id="link-dashboard" to={checkBoxesSelected && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>
 
@@ -106,6 +126,6 @@ function Onboarding4() {
 
     </main>
   );
-}
+});
 
 export default Onboarding4;

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