@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
41 lines • 6.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
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 AdminInfoForm = ({ currentStep, stepCount, passwordRulesHint, initialValues, validateUsername, validateEmail, validatePassword, keepPosted = false, onSubmit, }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const formId = (0, react_1.useId)();
const fullnameField = (0, react_1.useId)();
const usernameField = (0, react_1.useId)();
const emailField = (0, react_1.useId)();
const passwordField = (0, react_1.useId)();
const adminInfoFormRef = (0, react_1.useRef)(null);
const { register, handleSubmit, formState: { isValidating, isSubmitting, errors }, control, } = (0, react_hook_form_1.useForm)({
defaultValues: {
...initialValues,
password: '',
},
mode: 'onBlur',
});
(0, react_1.useEffect)(() => {
if (adminInfoFormRef.current) {
adminInfoFormRef.current.focus();
}
}, []);
return ((0, jsx_runtime_1.jsxs)(layout_1.Form, { ref: adminInfoFormRef, tabIndex: -1, "aria-labelledby": `${formId}-title`, "aria-describedby": `${formId}-description`, 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.adminInfoForm.title') }), (0, jsx_runtime_1.jsx)(layout_1.Form.Subtitle, { id: `${formId}-description`, children: t('form.adminInfoForm.subtitle') })] }), (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, htmlFor: fullnameField, children: t('form.adminInfoForm.fields.fullName.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'fullname', control: control, rules: { required: t('component.form.requiredField') }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...field, "aria-describedby": `${fullnameField}-error}`, "aria-required": 'true', "aria-invalid": Boolean(errors.fullname), placeholder: t('form.adminInfoForm.fields.fullName.placeholder'), id: fullnameField })) }) }), errors.fullname && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${fullnameField}-error}`, children: errors.fullname.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: usernameField, children: t('form.adminInfoForm.fields.username.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'username', control: control, rules: {
required: t('component.form.requiredField'),
validate: validateUsername,
}, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...field, "aria-describedby": `${usernameField}-error}`, "aria-required": 'true', "aria-invalid": Boolean(errors.username), placeholder: t('form.adminInfoForm.fields.username.placeholder'), id: usernameField })) }) }), errors.username && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${usernameField}-error}`, children: errors.username.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: emailField, children: t('form.adminInfoForm.fields.email.label') }), (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-required": 'true', "aria-invalid": Boolean(errors.email), "aria-describedby": `${emailField}-error}`, placeholder: t('form.adminInfoForm.fields.email.placeholder'), id: emailField })) }) }), errors.email && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${emailField}-error}`, children: errors.email.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: passwordField, children: t('form.adminInfoForm.fields.password.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'password', control: control, rules: {
required: t('component.form.requiredField'),
validate: validatePassword,
}, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.PasswordInput, { ...field, "aria-required": 'true', "aria-invalid": Boolean(errors.password), "aria-describedby": `${passwordField}-hint ${passwordField}-error}`, placeholder: t('form.adminInfoForm.fields.password.placeholder'), id: passwordField })) }) }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldHint, { id: `${passwordField}-hint`, children: passwordRulesHint }), errors.password && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${passwordField}-error}`, children: errors.password.message }))] }), keepPosted && ((0, jsx_runtime_1.jsxs)(fuselage_1.Box, { mbe: 8, display: 'block', color: 'info', fontScale: 'c1', children: [(0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { id: 'keepPosted', mie: 8, ...register('keepPosted') }), (0, jsx_runtime_1.jsx)("label", { htmlFor: 'keepPosted', children: t('form.adminInfoForm.fields.keepPosted.label') })] }))] }) }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsx)(fuselage_1.ButtonGroup, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'submit', primary: true, loading: isValidating || isSubmitting, children: t('component.form.action.next') }) }) })] }));
};
exports.default = AdminInfoForm;
//# sourceMappingURL=AdminInfoForm.js.map