@rocket.chat/onboarding-ui/dist/cjs/forms/RegisterServerForm/RegisterServerForm.js

Set of components and functions for the onboarding experience on Rocket.Chat

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
const fuselage_hooks_1 = require("@rocket.chat/fuselage-hooks");
const layout_1 = require("@rocket.chat/layout");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const AgreeTermsField_1 = __importDefault(require("../../common/AgreeTermsField"));
const RegisterServerForm = ({ currentStep, stepCount, initialValues, validateEmail, offline, onSubmit, termsHref = 'https://rocket.chat/terms', policyHref = 'https://rocket.chat/privacy', onClickRegisterOffline, }) => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const formId = (0, react_1.useId)();
    const emailField = (0, react_1.useId)();
    const agreementField = (0, react_1.useId)();
    const registerServerFormRef = (0, react_1.useRef)(null);
    const breakpoints = (0, fuselage_hooks_1.useBreakpoints)();
    const isMobile = !breakpoints.includes('md');
    const form = (0, react_hook_form_1.useForm)({
        mode: 'onBlur',
        defaultValues: {
            email: '',
            agreement: false,
            updates: true,
            ...initialValues,
        },
    });
    const { control, register, formState: { isSubmitting, isValidating, errors }, handleSubmit, } = form;
    (0, react_1.useEffect)(() => {
        if (registerServerFormRef.current) {
            registerServerFormRef.current.focus();
        }
    }, []);
    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...form, children: (0, jsx_runtime_1.jsxs)(layout_1.Form, { ref: registerServerFormRef, tabIndex: -1, "aria-labelledby": `${formId}-title`, "aria-describedby": `${formId}-informed-disclaimer ${formId}-engagement-disclaimer`, onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)(layout_1.Form.Header, { children: [(0, jsx_runtime_1.jsx)(layout_1.Form.Steps, { currentStep: currentStep, stepCount: stepCount }), (0, jsx_runtime_1.jsx)(layout_1.Form.Title, { id: `${formId}-title`, children: t('form.registeredServerForm.title') })] }), (0, jsx_runtime_1.jsx)(layout_1.Form.Container, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.FieldGroup, { children: [(0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, display: 'flex', alignItems: 'center', htmlFor: emailField, children: t('form.registeredServerForm.fields.accountEmail.inputLabel') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'email', control: control, rules: {
                                                required: t('component.form.requiredField'),
                                                validate: validateEmail,
                                            }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.EmailInput, { ...field, "aria-invalid": Boolean(errors.email), "aria-required": 'true', "aria-describedby": `${emailField}-error`, placeholder: t('form.registeredServerForm.fields.accountEmail.inputPlaceholder'), id: emailField })) }) }), errors.email && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${emailField}-error`, children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsx)(AgreeTermsField_1.default, { agreementField: agreementField, termsHref: termsHref, policyHref: policyHref, control: control, errors: errors }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', ...register('updates') })] }) }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', children: [(0, jsx_runtime_1.jsxs)(fuselage_1.ButtonGroup, { vertical: isMobile, children: [(0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'submit', primary: true, loading: isSubmitting || isValidating, disabled: offline, children: t('component.form.action.registerWorkspace') }), offline && ((0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'button', disabled: !offline, onClick: onClickRegisterOffline, children: t('component.form.action.registerOffline') }))] }), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { id: `${formId}-engagement-disclaimer`, mbs: 24, fontScale: 'c1', children: t('form.registeredServerForm.registrationEngagement') }), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { id: `${formId}-informed-disclaimer`, mbs: 24, fontScale: 'c1', children: (0, jsx_runtime_1.jsxs)(react_i18next_1.Trans, { i18nKey: 'form.registeredServerForm.registrationKeepInformed', children: ["By submitting this form you consent to receive more information about Rocket.Chat products, events and updates, according to our", (0, jsx_runtime_1.jsx)("a", { href: policyHref, target: '_blank', rel: 'noopener noreferrer', children: "Privacy Policy" }), ". You may unsubscribe at any time."] }) })] }) })] }) }));
};
exports.default = RegisterServerForm;
//# sourceMappingURL=RegisterServerForm.js.map