before experiments with context

package.json

@@ -40,6 +40,7 @@
   "devDependencies": {
     "@tailwindcss/custom-forms": "^0.2.1",
     "formik": "^2.1.7",
+    "formik-persist": "^1.1.0",
     "framer-motion": "^2.7.7",
     "tailwindcss": "^1.8.10",
     "tailwindcss-filters": "^3.0.0",

src/App.jsx

@@ -10,15 +10,28 @@ import { FormRegistration } from './components/forms/FormRegistration';
 const App = () => {
   const [popupTitle, setPopupTitle] = useState('')
   const [popupContent, setPopupContent] = useState(<></>)
+  const [popupBack, setPopupBack] = useState(null)
   const [popupOpened, setPopupOpened] = useState(false)
 
+  const close = () => {
+    if (popupBack) {
+      setPopupOpened(false)
+      setTimeout(() => {
+          setPopupContent(popupBack)
+          setPopupOpened(true)
+      }, 200)
+    } else {
+      setPopupOpened(false)
+    }
+  }
+
   const doOpenLoginPopup = () => {
-    setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} />)
+    setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
     setPopupOpened(true)
   }
 
   const doOpenRegistrationPopup = () => {
-    setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} />)
+    setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
     setPopupOpened(true)
   }
 
@@ -35,7 +48,7 @@ const App = () => {
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis voluptates necessitatibus impedit laudantium, ea quam voluptatibus unde nulla voluptas neque suscipit temporibus ipsam ducimus eum inventore libero, ullam soluta minima adipisci omnis! Deleniti alias perspiciatis et? Accusamus aliquam eveniet voluptas vitae tenetur quas quae maxime necessitatibus mollitia molestias, commodi sunt quibusdam, cum, vero qui exercitationem iste beatae eaque dicta odit deleniti dolorem! Eius itaque quasi quibusdam tempora fugit laboriosam magni quod vel voluptas, officiis culpa numquam, molestias tempore. Sapiente exercitationem doloremque velit dolores excepturi asperiores, cumque minus earum enim voluptatibus quod veritatis non tempora nemo quo officiis expedita eveniet ratione atque! Illo ab accusamus vero, quas quisquam soluta. Voluptatum repudiandae asperiores laboriosam blanditiis dolorum quo, minus porro consequuntur eius nihil illum quaerat quod, laudantium omnis temporibus inventore voluptate, explicabo libero numquam beatae saepe? Repudiandae perferendis nostrum sit nam ad eaque expedita doloribus? Deserunt perspiciatis quo nulla dolor voluptatum temporibus, beatae iusto veritatis laboriosam reiciendis cupiditate ab quisquam. Distinctio neque, voluptate enim, aliquam dignissimos inventore perspiciatis tempore, quae officia quis minima necessitatibus at repellendus. Animi corrupti at modi quas et ipsam asperiores a ducimus consequuntur necessitatibus! Tempore, quisquam? Magnam harum ducimus cupiditate aspernatur, sit veritatis ipsa ratione maxime similique fuga corporis consequuntur obcaecati quas provident ut! Dignissimos labore qui amet in, accusantium minus suscipit numquam saepe nulla hic vero molestias mollitia autem, magni rem illo fugit doloremque est consectetur? Iure laborum nesciunt possimus quod animi temporibus perspiciatis modi aspernatur alias, maxime, sint dolores. Ab quaerat beatae dolorem itaque ex, similique dolore consectetur voluptatibus tenetur maiores eaque tempore quos ullam facilis illo nisi ipsum veniam maxime pariatur sint iste? Modi voluptas molestias inventore omnis repellendus? Veniam alias rerum voluptatum aut possimus labore, iste neque recusandae eveniet aspernatur dolor mollitia accusantium repudiandae molestias magni odit illum dolorem iure nesciunt cumque commodi voluptatibus sed nobis! Labore sint optio voluptatum, harum minima ad cum dolorem inventore sed qui eligendi asperiores nihil, quisquam veniam unde quaerat eveniet ipsam reprehenderit. Molestias sequi sapiente, aperiam iusto nostrum obcaecati accusamus tenetur eum excepturi cupiditate voluptatem dolor consequuntur, modi nesciunt quibusdam nam quae, illo sed animi debitis praesentium deserunt! Obcaecati, repellendus odit. Commodi, omnis cupiditate qui atque debitis repellendus eius ipsam deserunt cum pariatur, ut illum nisi aspernatur exercitationem odit consectetur aliquam nam dignissimos minus non. Nam possimus totam doloremque ipsam architecto enim corrupti officia iste debitis ab nemo, exercitationem facere laborum optio magni earum, temporibus, impedit ipsa perferendis! Ex!</p>
         </div>
       </div>
-      <Popup opened={popupOpened} title={popupTitle} close={() => setPopupOpened(false)}>{popupContent}</Popup>
+      <Popup opened={popupOpened} title={popupTitle} close={close}>{popupContent}</Popup>
     </>
   )
 }

src/ServicePolicy.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import ButtonSecondary from './components/controls/ButtonSecondary'
+
+export function ServicePolicy(props) {
+    const { setPopupTitle, close } = props
+
+    useEffect(() => {
+        if (setPopupTitle) { setPopupTitle('Service Policy') }
+    })
+
+    return (
+        <>
+            <div className="overflow-y-auto max-h-screen-75 p-3">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
+                <p>Delectus sequi, iste error dignissimos necessitatibus aliquam perspiciatis pariatur reprehenderit dolor maiores sed officiis modi, praesentium atque? Delectus amet optio tempora ipsam, molestiae unde quibusdam minus placeat dolorem exercitationem enim alias?</p>
+                <p>Porro tempore natus minus ex voluptas, hic culpa iure vero quod laudantium quas enim pariatur ullam commodi! Totam deleniti nesciunt earum, nam modi aspernatur rem harum pariatur, voluptatibus, adipisci accusamus sequi perferendis corrupti explicabo excepturi commodi soluta necessitatibus! Officiis similique nemo architecto odit debitis cupiditate reprehenderit ex vel atque beatae blanditiis dolores sequi unde quisquam molestias, eum sit aut. Soluta hic provident autem eius a aliquid neque in, distinctio eveniet ullam sequi pariatur deleniti perferendis magni debitis minus quod!</p>
+                <p>Facere ex error molestiae maxime ullam dolor blanditiis dolores fuga ipsam vero distinctio, ipsum delectus harum optio quo repudiandae unde beatae rerum laborum cumque, quisquam quia quod?</p>
+                <p>Numquam praesentium ex recusandae quia tenetur, quod, illum officiis magni est alias consequatur maiores accusamus ipsam provident sequi dolores excepturi exercitationem vitae aspernatur perferendis porro sit accusantium aut? Tempora nesciunt, autem dignissimos sit ratione dolores odit amet laborum nihil corporis id nobis tempore! Quam rerum repudiandae expedita voluptate error dolorum a. Obcaecati fugiat magnam earum?</p>
+            </div>
+            <div className="p-2 mb-0 bg-primary-200 border-t rounded-b-lg">
+                <ButtonSecondary type="button" text="Go back" action={close} />
+            </div>
+        </>
+    )
+}
+
+ServicePolicy.propTypes = {
+    setPopupTitle: PropTypes.func,
+    close: PropTypes.func,
+}
+
+export default ServicePolicy
+

src/components/forms/FormLogin.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Formik, Form } from 'formik'
+import { Persist } from 'formik-persist'
 import * as Yup from 'yup'
 import FormikControl from '../FormikControls'
 import ButtonPrimary from '../controls/ButtonPrimary'
@@ -9,7 +10,7 @@ import Link from '../controls/Link'
 import { FormRegistration } from './FormRegistration'
 
 export const FormLogin = (props) => {
-    const { setPopupTitle, setPopupContent, setPopupOpened } = props
+    const { setPopupTitle, setPopupContent, setPopupOpened, setPopupBack, close } = props
 
     useEffect(() => {
         if (setPopupTitle) { setPopupTitle('Enter into restricted area') }
@@ -35,7 +36,7 @@ export const FormLogin = (props) => {
     const goRegistration = () => {
         setPopupOpened(false)
         setTimeout(() => {
-            setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} />)
+            setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
             setPopupOpened(true)
         }, 200);
     }
@@ -43,7 +44,7 @@ export const FormLogin = (props) => {
     const goRestorePassword = () => {
         setPopupOpened(false)
         setTimeout(() => {
-            setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} />)
+            setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
             setPopupOpened(true)
         }, 200);
     }
@@ -62,8 +63,8 @@ export const FormLogin = (props) => {
                                 <FormikControl
                                     control='string'
                                     name='email'
-                                    label='E-mail'
-                                    placeholder='Enter e-mail'
+                                    label='Email'
+                                    placeholder='Enter email'
                                 />
                                 <FormikControl
                                     control='password'
@@ -88,6 +89,7 @@ export const FormLogin = (props) => {
                                     <ButtonSecondary type="button" text="Have no account? - Create" action={goRegistration} />
                                 </div>
                             </div>
+                            <Persist name="login-form" isSessionStorage />
                         </Form>
                     </div>
                 )
@@ -100,4 +102,6 @@ FormLogin.propTypes = {
     setPopupTitle: PropTypes.func,
     setPopupContent: PropTypes.func,
     setPopupOpened: PropTypes.func,
+    setPopupBack: PropTypes.func,
+    close: PropTypes.func,
 }

src/components/forms/FormRegistration.jsx

@@ -1,14 +1,16 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Formik, Form } from 'formik'
+import { Persist } from 'formik-persist'
 import * as Yup from 'yup'
 import FormikControl from '../FormikControls'
 import ButtonPrimary from '../controls/ButtonPrimary'
 import ButtonSecondary from '../controls/ButtonSecondary'
 import { FormLogin } from './FormLogin'
+import ServicePolicy from '../../ServicePolicy'
 
 export const FormRegistration = (props) => {
-    const { setPopupTitle, setPopupContent, setPopupOpened } = props
+    const { setPopupTitle, setPopupContent, setPopupOpened, setPopupBack, close } = props
 
     useEffect(() => {
         if (setPopupTitle) { setPopupTitle('New user registration') }
@@ -42,7 +44,16 @@ export const FormRegistration = (props) => {
     const goLogin = () => {
         setPopupOpened(false)
         setTimeout(() => {
-            setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} />)
+            setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
+            setPopupOpened(true)
+        }, 200);
+    }
+
+    const goServicePolicy = () => {
+        setPopupBack(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
+        setPopupOpened(false)
+        setTimeout(() => {
+            setPopupContent(<ServicePolicy setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} setPopupBack={setPopupBack} close={close} />)
             setPopupOpened(true)
         }, 200);
     }
@@ -61,8 +72,8 @@ export const FormRegistration = (props) => {
                                 <FormikControl
                                     control='string'
                                     name='email'
-                                    label='E-mail'
-                                    placeholder='Enter e-mail'
+                                    label='Email'
+                                    placeholder='Enter valid email'
                                     required
                                     aria-required="true"
                                     aria-invalid={!!formik.errors.email}
@@ -71,7 +82,7 @@ export const FormRegistration = (props) => {
                                     control='password'
                                     name='password'
                                     label='Password'
-                                    placeholder='Enter password'
+                                    placeholder='Choose a strong password'
                                     required
                                     aria-required="true"
                                     aria-invalid={!!formik.errors.password}
@@ -89,7 +100,7 @@ export const FormRegistration = (props) => {
                                     control='userconsent'
                                     name='userconsent'
                                     label_template='Accept #Service Policy#'
-                                    label_action={() => { alert('Policy text here') }}
+                                    label_action={goServicePolicy}
                                     required
                                     aria-required="true"
                                     aria-invalid={!!formik.errors.userconsent}
@@ -101,6 +112,7 @@ export const FormRegistration = (props) => {
                                     <ButtonSecondary type="button" text="Have account? - Sign In" action={goLogin} />
                                 </div>
                             </div>
+                            <Persist name="registration-form" isSessionStorage />
                         </Form>
                     </div>
                 )
@@ -113,4 +125,6 @@ FormRegistration.propTypes = {
     setPopupTitle: PropTypes.func,
     setPopupContent: PropTypes.func,
     setPopupOpened: PropTypes.func,
+    setPopupBack: PropTypes.func,
+    close: PropTypes.func,
 }

yarn.lock

@@ -4874,6 +4874,14 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik-persist@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/formik-persist/-/formik-persist-1.1.0.tgz#fbd2f11db4cb882a0c6f83646028f603bb43511d"
+  integrity sha512-tZyyghHinnoqptYVD8vfkN8rg8sFKIuc1INFpuspTXffq1H8eeI1aYFiyoq2gNE1qIVJfPy+bzUItx/9qyO8Hw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    react-fast-compare "^2.0.1"
+
 formik@^2.1.7:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/formik/-/formik-2.1.7.tgz#40bd04e59b242176d0a17c701830f1536cd7506b"
@@ -6801,6 +6809,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.difference@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"