datastake-daf 0.6.557 → 0.6.558

package/src/@daf/core/components/AuthForm/index.jsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Form, Input, Select } from "antd";
+import BorderedButton from "../Button/BorderedButton/index.jsx";
+
+function AuthForm ({
+  steps,
+  fields,
+  onSubmit,
+  initialValues = {},
+  submitText = "Submit",
+  form,
+  errors,
+  t = (key) => key,
+  executeRecaptcha = () => {},
+}){
+  const [formInstance] = Form.useForm(form);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [allFormValues, setAllFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(null);
+
+  const isMultiStep = !!steps;
+  const currentFields = isMultiStep ? steps?.[currentStep]?.fields : fields || [];
+
+  useEffect(() => {
+    if (isMultiStep && Object.keys(allFormValues).length > 0) {
+      formInstance.setFieldsValue(allFormValues);
+    }
+  }, [currentStep, allFormValues, formInstance, isMultiStep]);
+
+  const handleReCaptchaVerify = useCallback(async () => {
+    if (!executeRecaptcha) {
+      console.log('Execute recaptcha not yet available');
+      return;
+    }
+
+    const token = await executeRecaptcha('submit');
+    return token;
+  }, [executeRecaptcha]);
+
+  const next = async () => {
+    try {
+      await formInstance.validateFields(
+        currentFields.map((f) => f.name)
+      );
+      // Save current step values before moving to next step
+      const currentValues = formInstance.getFieldsValue();
+      setAllFormValues((prev) => ({ ...prev, ...currentValues }));
+      setCurrentStep((prev) => prev + 1);
+    } catch (err) {
+      console.error("Please fix the validation errors before continuing.");
+    }
+  };
+
+  const prev = () => setCurrentStep((prev) => prev - 1);
+
+  const handleSubmit = async (values) => {
+    const token = await handleReCaptchaVerify();
+    if (!token) {
+      console.error('reCAPTCHA verification failed');
+      return;
+    }
+    setFormErrors(null);
+    if (!isMultiStep) return onSubmit?.(values);
+
+    if (currentStep < steps?.length - 1) return next();
+    
+    const finalValues = { ...allFormValues, ...values };
+    onSubmit?.(finalValues);
+  };
+
+  const checkRequiredFieldsFilled = (changedValues, allValues) => {
+    const requiredFields = currentFields.filter(f => f.required).map(f => f.name);
+    return requiredFields.every(fieldName => {
+      const value = allValues[fieldName];
+      return value !== undefined && value !== null && value !== '';
+    });
+  };
+
+  useEffect(() => {
+    setFormErrors(errors);
+  }, [errors]);
+
+  const renderErrors = (err, t) => {
+    document.querySelectorAll('.ant-form-item')
+      .forEach(input => input.classList.add('ant-form-item-has-error'))
+    return Object.keys(err).map(key => {
+      return err[key].map(error =>
+        <div
+          key={error}
+          className="ant-form-item-explain errors-cont"
+          style={{ color: '#ff4d4f' }}>
+          {t(error)}
+        </div>
+      )
+    });
+  }
+
+  const renderField = (field) => {
+    const rules = [
+      ...(field.required
+        ? [{ required: true, message: `${field.label} is required` }]
+        : []),
+      ...(field.rules || []),
+    ];
+
+    let inputNode = null;
+    switch (field.type) {
+      case "input":
+      case "email":
+      case "number":
+        inputNode = <Input type={field.type} placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "password":
+        inputNode = <Input.Password placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "textarea":
+        inputNode = <Input.TextArea placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "select":
+        inputNode = (
+          <Select placeholder={field.placeholder} {...field.props}>
+            {field.options?.map((opt) => (
+              <Select.Option key={opt.value} value={opt.value}>
+                {opt.label}
+              </Select.Option>
+            ))}
+          </Select>
+        );
+        break;
+      case "custom":
+        inputNode = field.component;
+        break;
+      default:
+        inputNode = <Input placeholder={field.placeholder} {...field.props} />;
+    }
+
+    return (
+      <Form.Item key={field.name} name={field.name} label={field.label} rules={rules}>
+        {inputNode}
+      </Form.Item>
+    );
+  };
+
+  return (
+      <>
+        <Form
+            form={formInstance}
+            layout="vertical"
+            initialValues={initialValues}
+            onFinish={handleSubmit}
+        >
+            {currentFields.map(renderField)}
+
+
+        {formErrors ? (
+            renderErrors(formErrors, t)
+        ) : null}
+
+        {isMultiStep && currentStep > 0 ? (
+            <div className="flex flex-column gap-2 mt-4" style={{ width: '100%' }}>
+                <Form.Item noStyle shouldUpdate>
+                {(form) => {
+                    const isLastStep = currentStep === steps?.length - 1;
+                    const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
+                    
+                    return (
+                        <div className="buttons">                        
+                            <BorderedButton 
+                                type="primary" 
+                                htmlType="submit"
+                                disabled={isLastStep && !allFieldsFilled}
+                                block className="normal-br"
+                            >
+                                {isLastStep ? submitText : t("Next")}
+                            </BorderedButton>
+                        </div>
+                    );
+                }}
+                </Form.Item>
+                <div className="buttons">
+                    <BorderedButton onClick={prev} block className="normal-br">
+                        {t("Back")}
+                    </BorderedButton>
+                </div>
+            </div>
+        ) : (
+            <div className="buttons">
+                <BorderedButton type="primary" htmlType="submit" block className="normal-br">
+                    {isMultiStep ? t("Next") : submitText}
+                </BorderedButton>
+            </div>
+        )}
+                </Form>
+      </>
+  );
+}
+export default AuthForm;

package/src/index.js

@@ -87,6 +87,7 @@ export { Sections as EditFormSections } from "./@daf/core/components/EditForm/se
 export { default as ViewFormNavigation } from "./@daf/core/components/ViewForm/navigation.jsx";
 export { default as PhoneInput } from "./@daf/core/components/Inputs/PhoneInput/index.js";
 export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/components/ajaxSelect.js";
+export { default as AuthForm } from "./@daf/core/components/AuthForm/index.jsx";
 
 // Progress Bar
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";

package/src/layouts.js

@@ -1,2 +1 @@
-export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';
-export { default as AuthLayout } from './@daf/layouts/AuthLayout/index.jsx';
+export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';

package/src/@daf/layouts/AuthLayout/components/NavbarComponent.jsx

@@ -1,53 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { formatClassname } from '../../../../helpers/ClassesHelper.js';
-import './NavbarComponent.scss';
-
-/**
- * NavbarComponent for AuthLayout
- * 
- * A simple, reusable navbar component that can be used with AuthLayout
- * 
- * @param {Object} props
- * @param {React.ReactNode} props.leftContent - Content to display on the left side
- * @param {React.ReactNode} props.rightContent - Content to display on the right side
- * @param {string} props.className - Additional CSS classes
- * @param {string} props.logo - Logo image URL
- * @param {string} props.logoAlt - Alt text for logo
- * @param {Function} props.onLogoClick - Callback when logo is clicked
- * @param {boolean} props.bordered - Whether to show bottom border
- */
-const NavbarComponent = ({
-  leftContent,
-  rightContent,
-  className = '',
-  logo,
-  logoAlt = 'Logo',
-  onLogoClick,
-  bordered = false,
-}) => {
-  return (
-    <div className={formatClassname(['auth-navbar', bordered && 'bordered', className])}>
-      <div className="auth-navbar-container">
-        <div className="auth-navbar-left">
-          {logo && (
-            <img
-              src={logo}
-              alt={logoAlt}
-              className="auth-navbar-logo"
-              onClick={onLogoClick}
-              style={{ cursor: onLogoClick ? 'pointer' : 'default' }}
-            />
-          )}
-          {leftContent}
-        </div>
-        <div className="auth-navbar-right">
-          {rightContent}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NavbarComponent;
-

package/src/@daf/layouts/AuthLayout/components/NavbarComponent.scss

@@ -1,51 +0,0 @@
-.auth-navbar {
-  width: 100%;
-  padding: 1rem 2rem;
-  background-color: transparent;
-  transition: all 0.3s ease;
-
-  &.bordered {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-
-  .auth-navbar-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 1400px;
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  .auth-navbar-left {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-
-    .auth-navbar-logo {
-      height: 40px;
-      width: auto;
-      object-fit: contain;
-    }
-  }
-
-  .auth-navbar-right {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-}
-
-// Responsive styles
-@media (max-width: 768px) {
-  .auth-navbar {
-    padding: 0.75rem 1rem;
-
-    .auth-navbar-left {
-      .auth-navbar-logo {
-        height: 32px;
-      }
-    }
-  }
-}
-

package/src/@daf/layouts/AuthLayout/components/index.js

@@ -1,2 +0,0 @@
-export { default as NavbarComponent } from './NavbarComponent.jsx';
-

package/src/@daf/layouts/AuthLayout/index.jsx

@@ -1,137 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import { Select } from "antd";
-import { formatClassname } from "../../../helpers/ClassesHelper.js";
-import "./index.scss";
-
-const AuthLayout = ({
-  children,
-  NavbarComponent,
-  StyleComponent,
-  t = (key) => key,
-  title = "Welcome Back",
-  subTitle = "Please introduce yourself",
-  header,
-  logo,
-  appName = "default",
-  containerClassName = "",
-  leftClassName = "",
-  rightClassName = "",
-  rightImgClassName = "",
-  rightImageUrl,
-  showNavbar = false,
-  navbarProps = {},
-  additionalContent,
-  languageConfig = [
-    { value: "en", label: "EN", flagUrl: "/assets/images/countries/gb.png" },
-    { value: "fr", label: "FR", flagUrl: "/assets/images/countries/fr.png" },
-    { value: "sp", label: "ES", flagUrl: "/assets/images/countries/sp.png" },
-  ],
-  updateLanguage,
-  showLanguageSelector = false,
-
-  showTopHeader = false, // shows the header bar (logo image + language + back)
-  topHeaderLogo, // full logo image (contains both icon and text)
-  onBack, // callback when “Back” clicked
-  showBack = false, // show/hide back button
-  backLabel = "Back",
-}) => {
-
-  /** Header block (single logo image + back + language) */
-  const renderTopHeader = () => {
-    if (!showTopHeader) return null;
-
-    return (
-      <div className="auth-top-header">
-        <div className="left">
-          {topHeaderLogo && (
-            <img
-              className="top-header-logo-combined"
-              src={topHeaderLogo}
-              alt={`${appName} logo`}
-            />
-          )}
-        </div>
-
-        <div className="right">
-          {showLanguageSelector && updateLanguage && (
-            <Select
-              className="language-select"
-              defaultValue={localStorage.getItem("datastakeLng") || "en"}
-              bordered={false}
-              onChange={(lng) => updateLanguage(lng)}
-              popupClassName={formatClassname(["language-select-popup", appName])}
-            >
-              {languageConfig.map((lang) => (
-                <Select.Option key={lang.value} value={lang.value}>
-                  <div className="row-cont flex items-center gap-2">
-                    <img
-                      src={lang.flagUrl}
-                      alt={lang.label}
-                      style={{ width: 20, height: 12 }}
-                    />
-                    <span>{lang.label}</span>
-                  </div>
-                </Select.Option>
-              ))}
-            </Select>
-          )}
-
-          {showBack && (
-            <button className="back-btn" onClick={onBack}>
-              {backLabel}
-            </button>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderHeader = () =>
-    header ? (
-      header
-    ) : (
-      <div className="left-header">
-        {logo && <img className="app-logo" src={logo} alt={`${appName} logo`} />}
-        {title && <h2>{t(title)}</h2>}
-        {subTitle && <p>{typeof subTitle === "string" ? t(subTitle) : subTitle}</p>}
-      </div>
-    );
-
-  const layoutContent = (
-    <div className="main-cont">
-      <div className={formatClassname(["d-cont left", leftClassName])}>
-        <div className="main">
-          {renderHeader()}
-          {children}
-          {additionalContent}
-        </div>
-      </div>
-      <div
-        className={formatClassname(["d-cont right", rightClassName])}
-        style={
-          rightImageUrl
-            ? { backgroundImage: `url(${rightImageUrl})`, backgroundSize: "cover" }
-            : {}
-        }
-      >
-        <div className={formatClassname(["right-img", rightImgClassName])} />
-      </div>
-    </div>
-  );
-
-  const Wrapper = StyleComponent || "div";
-  const wrapperClassName = formatClassname(["auth-layout", appName, containerClassName]);
-
-  return (
-    <>
-      {showNavbar && NavbarComponent && <NavbarComponent {...navbarProps} />}
-      <Wrapper className={wrapperClassName}>
-        {renderTopHeader()}
-        {layoutContent}
-      </Wrapper>
-    </>
-  );
-};
-
-export default AuthLayout;