@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
20 lines • 3.24 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_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const CreateFirstMemberForm = ({ defaultValues, currentStep, stepCount, organizationName, onSubmit, onBackButtonClick, validateUsername, validatePassword, }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const { register, handleSubmit, formState: { isValid, isValidating, isSubmitting, errors }, } = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
return ((0, jsx_runtime_1.jsxs)(layout_1.Form, { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsx)(layout_1.Form.Steps, { currentStep: currentStep, stepCount: stepCount }), (0, jsx_runtime_1.jsx)(layout_1.Form.Title, { children: t('form.createFirstMemberForm.title') }), (0, jsx_runtime_1.jsx)(layout_1.Form.Subtitle, { children: t('form.createFirstMemberForm.subtitle', { organizationName }) }), (0, jsx_runtime_1.jsxs)(fuselage_1.FieldGroup, { mbs: 16, children: [(0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'inline', mie: 8, children: t('form.createFirstMemberForm.fields.username.label') }) }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...register('username', {
validate: validateUsername,
required: true,
}), defaultValue: defaultValues?.username, error: errors?.username?.type || undefined }) }), errors?.username && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: errors.username.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.createFirstMemberForm.fields.password.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.PasswordInput, { ...register('password', {
validate: validatePassword,
required: true,
}), defaultValue: defaultValues?.password }) }), errors.password && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: errors.password.message }))] })] }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.Button, { disabled: isSubmitting, onClick: onBackButtonClick, children: t('component.form.action.back') }), (0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'submit', primary: true, disabled: !isValid, loading: isSubmitting || isValidating, minHeight: 'x40', children: isSubmitting ? ((0, jsx_runtime_1.jsx)(fuselage_1.Throbber, { inheritColor: true })) : (t('form.createFirstMemberForm.button.submit')) })] }) })] }));
};
exports.default = CreateFirstMemberForm;
//# sourceMappingURL=CreateFirstMemberForm.js.map