- added registartion page;

- implemented validation helper-functions;
- fixed form fields datepicker and datepicker range;
- updated routes logic;
- fixed FAQ items editing/submission;

src/pages/Registration/index.js

@@ -0,0 +1,177 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { useForm } from 'react-hook-form';
+import { classNames } from 'primereact/utils';
+import { isEmpty } from 'ramda';
+
+// api
+import AuthenticationService from '../../service/authentication-service';
+
+// tools
+import { isCodiceFiscale, isEmail } from '../../helpers/validators';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// components
+import FormField from '../../components/FormField';
+import LogoIcon from '../../icons/LogoIcon';
+import { Button } from 'primereact/button';
+import { Messages } from 'primereact/messages';
+
+const Registration = () => {
+    const token = useStore().main.token();
+    const [loading, setLoading] = useState(false);
+    const errorMsgs = useRef(null);
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+    } = useForm({ mode: 'onChange' });
+
+    const onSubmit = (formData) => {
+        errorMsgs.current.clear();
+        //setLoading(true);
+        console.log('formData', formData, errors);
+
+        //AuthenticationService.login(request, regCallback, regError);
+    };
+
+    const regCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.setAuthData({
+                token: data.data.token,
+                userData: data.data.user
+            });
+        } else {
+            errorMsgs.current.show([
+                {
+                    sticky: true, severity: 'error', summary: '',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        setLoading(false);
+    }
+
+    const regError = (err) => {
+        errorMsgs.current.show([
+            {
+                sticky: true, severity: 'error', summary: '',
+                detail: sprintf(__('%s', 'gepafin'), err),
+                closable: true
+            }
+        ]);
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        if (!isEmpty(token)) {
+            setLoading(true);
+            window.location.replace('/')
+        }
+    }, [token]);
+
+    return (
+        <div className={classNames(['appPage', 'appPageLogin'])}>
+            <div className="appPageLogin__wrapper">
+                <LogoIcon/>
+
+                <h1>{__('Completamento anagrafica personale', 'gepafin')}</h1>
+                <span>{__('Per favore, inserisci i tuoi dati.', 'gepafin')}</span>
+
+                <div className="appPage__spacer"></div>
+
+                <Messages ref={errorMsgs}/>
+
+                <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                    <div className="appForm__cols">
+                        <FormField
+                            type="textinput"
+                            fieldName="first_name"
+                            label={__('Nome', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{ required: __('È obbligatorio', 'gepafin') }}
+                            placeholder="Francesco"
+                        />
+
+                        <FormField
+                            type="textinput"
+                            fieldName="second_name"
+                            label={__('Cognome', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{ required: __('È obbligatorio', 'gepafin') }}
+                            placeholder="Molini"
+                        />
+                    </div>
+
+                    <div className="appForm__cols">
+                        <FormField
+                            type="textinput"
+                            fieldName="fiscal_code"
+                            label={__('Codice fiscale', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{
+                                required: __('È obbligatorio', 'gepafin'),
+                                validate: {
+                                    isCodiceFiscale
+                                }
+                            }}
+                            placeholder="ABC1234"
+                        />
+
+                        <FormField
+                            type="datepicker"
+                            fieldName="birth_date"
+                            label={__('Data di nascita', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{ required: __('È obbligatorio', 'gepafin') }}
+                            placeholder=""
+                        />
+                    </div>
+
+                    <div className="appForm__cols">
+                        <FormField
+                            type="textinput"
+                            fieldName="email"
+                            label={__('Email', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{
+                                required: __('È obbligatorio', 'gepafin'),
+                                validate: {
+                                    isEmail
+                                }
+                            }}
+                            placeholder="sample@example.com"
+                        />
+
+                        <FormField
+                            type="textinput"
+                            fieldName="phone"
+                            label={__('Telefono', 'gepafin')}
+                            control={control}
+                            errors={errors}
+                            config={{
+                                required: __('È obbligatorio', 'gepafin'),
+                                positive: v => parseInt(v) > 0
+                            }}
+                            placeholder=""
+                        />
+                    </div>
+
+                    <Button
+                        label={__('Accedi', 'gepafin')}
+                        disabled={loading}/>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default Registration;