styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
80 lines (79 loc) • 3.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoginForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const form_builder_1 = require("../../form-builder");
const context_1 = require("../../../context");
const grommet_1 = require("grommet");
const http_form_1 = require("../http-form");
const LoginForm = () => {
let fields = [
{
type: form_builder_1.FormFieldType.Text,
name: "username",
label: "User Name",
required: true,
tip: "The unique name you will be using throught the system",
},
{
type: form_builder_1.FormFieldType.Text,
name: "email",
label: "Email",
required: true,
validationRules: {
pattern: {
//from https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
// eslint-disable-next-line no-useless-escape
value: /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
message: "Please Enter a valid email!",
},
},
inputProps: {
autoComplete: "Off",
},
},
{
type: form_builder_1.FormFieldType.Password,
name: "password",
label: "Password",
showPasswordStrength: true,
required: true,
inputProps: {
autoComplete: "Off",
},
},
{
type: form_builder_1.FormFieldType.Boolean,
name: "agree",
label: "Agree With Terms",
required: true,
controlType: "checkbox",
},
];
return (jsx_runtime_1.jsx(context_1.FormBuilderContextProvider, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ align: "center" }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "25em", background: "light-2", pad: "medium", round: "small", border: "all" }, { children: jsx_runtime_1.jsx(http_form_1.HttpForm, { fields: fields, beforeSubmit: (data) => data.agree, submitButton: jsx_runtime_1.jsx(grommet_1.Text, { children: " Register " }, void 0), onSaveError: (err) => {
alert(JSON.stringify(err));
}, onSaveSuccess: (data) => {
alert(JSON.stringify(data));
}, mockResponse: (mock) => {
mock.onPost("/api/user/signup").reply((req) => {
alert(JSON.stringify(req.data));
return new Promise((res) => {
setTimeout(() => {
res([
200,
{
success: true,
},
]);
}, 1000);
});
});
}, saveRequest: {
url: "api/user/signup",
method: "POST"
} }, void 0) }), void 0) }), void 0) }, void 0));
};
exports.LoginForm = LoginForm;
exports.default = {
title: "HTTP Form/Login Form",
};