@smitch/fluid
Version:
A Next/React ui-component libray.
19 lines (18 loc) • 4.71 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Form, Fieldset, TextInput, PasswordInput, Checkbox } from '..';
var RegisterForm = function (_a) {
var action = _a.action, _b = _a.actionsLayout, actionsLayout = _b === void 0 ? 'row' : _b, _c = _a.actionsSpacing, actionsSpacing = _c === void 0 ? '0' : _c, onCancel = _a.onCancel, onsubmit = _a.onsubmit, _d = _a.showCancel, showCancel = _d === void 0 ? true : _d, _e = _a.submitLabel, submitLabel = _e === void 0 ? 'Register' : _e, _f = _a.cancelLabel, cancelLabel = _f === void 0 ? 'Cancel' : _f, _g = _a.submitBackground, submitBackground = _g === void 0 ? 'primary' : _g, _h = _a.submitColor, submitColor = _h === void 0 ? 'light' : _h, _j = _a.submitOutlineColor, submitOutlineColor = _j === void 0 ? 'current' : _j, _k = _a.cancelBackground, cancelBackground = _k === void 0 ? 'transparent' : _k, _l = _a.cancelColor, cancelColor = _l === void 0 ? 'current' : _l, _m = _a.cancelOutlineColor, cancelOutlineColor = _m === void 0 ? 'current' : _m, _o = _a.separator, separator = _o === void 0 ? true : _o, _p = _a.name, name = _p === void 0 ? 'register' : _p, _q = _a.className, className = _q === void 0 ? '' : _q, style = _a.style, _r = _a.buttonOutline, buttonOutline = _r === void 0 ? false : _r, _s = _a.buttonTextcase, buttonTextcase = _s === void 0 ? 'normal-case' : _s, _t = _a.buttonShape, buttonShape = _t === void 0 ? 'default' : _t, _u = _a.buttonIsBold, buttonIsBold = _u === void 0 ? true : _u, _v = _a.legendText, legendText = _v === void 0 ? 'Register' : _v, _w = _a.legendisBold, legendisBold = _w === void 0 ? true : _w, _x = _a.legendAlign, legendAlign = _x === void 0 ? 'center' : _x, _y = _a.legendSize, legendSize = _y === void 0 ? 'md' : _y, _z = _a.spacing, spacing = _z === void 0 ? '4' : _z, _0 = _a.hasBorder, hasBorder = _0 === void 0 ? false : _0, userLabel = _a.userLabel, _1 = _a.userAutocomplete, userAutocomplete = _1 === void 0 ? 'email' : _1, userPlaceholder = _a.userPlaceholder, passwordLabel = _a.passwordLabel, passwordPlaceholder = _a.passwordPlaceholder, passwordPattern = _a.passwordPattern, passwordTitle = _a.passwordTitle, confirmLabel = _a.confirmLabel, confirmPlaceholder = _a.confirmPlaceholder, confirmTitle = _a.confirmTitle, _2 = _a.inputsLayout, inputsLayout = _2 === void 0 ? 'col' : _2, _3 = _a.inputsSize, inputsSize = _3 === void 0 ? 'md' : _3, _4 = _a.inputsRounded, inputsRounded = _4 === void 0 ? 'none' : _4, checkLabel = _a.checkLabel, checkLabelIsBold = _a.checkLabelIsBold, checkRounded = _a.checkRounded, checkHint = _a.checkHint;
var _5 = useState(''), newpassword = _5[0], setNewpassword = _5[1];
var handleCreatePassword = function (value) {
setNewpassword(value);
};
var handleCancel = function () {
if (onCancel) {
onCancel();
}
};
return (_jsx(Form, { action: action, actionsLayout: actionsLayout, actionsSpacing: actionsSpacing, onCancel: handleCancel, onsubmit: onsubmit, showCancel: showCancel, submitLabel: submitLabel, submitBackground: submitBackground, submitColor: submitColor, submitOutline: buttonOutline, submitOutlineColor: submitOutlineColor, cancelLabel: cancelLabel, cancelBackground: cancelBackground, cancelColor: cancelColor, cancelOutline: buttonOutline, cancelOutlineColor: cancelOutlineColor, separator: separator, name: name, method: 'POST', className: className, style: style, buttonTextcase: buttonTextcase, buttonShape: buttonShape, buttonIsBold: buttonIsBold, children: _jsxs(Fieldset, { legendText: legendText, legendSize: legendSize, isBold: legendisBold, spacing: spacing, legendAlign: legendAlign, hasBorder: hasBorder, children: [_jsx(TextInput, { label: userLabel, autocomplete: userAutocomplete, placeholder: userPlaceholder, name: 'user-name', id: 'user-name', required: true, layout: inputsLayout, size: inputsSize, rounded: inputsRounded }), _jsx(PasswordInput, { name: 'newpassword', label: passwordLabel, placeholder: passwordPlaceholder, title: passwordTitle, autocomplete: 'new-password', pattern: passwordPattern, onInputChange: handleCreatePassword, layout: inputsLayout, size: inputsSize, rounded: inputsRounded, required: true, hint: true }), _jsx(PasswordInput, { label: confirmLabel, autocomplete: 'new-password', placeholder: confirmPlaceholder, title: confirmTitle, name: 'confirmpassword', pattern: newpassword, layout: inputsLayout, size: inputsSize, rounded: inputsRounded, required: true, hint: true }), _jsx(Checkbox, { label: checkLabel, labelIsBold: checkLabelIsBold, size: inputsSize, rounded: checkRounded, name: 'terms', required: true, hint: checkHint })] }) }));
};
export default RegisterForm;