@coko/client/dist/ui/authentication/Signup.js

Client side common code for coko apps

import e from "../common/Result.js";
import t from "../common/Button.js";
import n from "../common/Checkbox.js";
import r from "../common/Link.js";
import i from "../common/Form.js";
import a from "../common/Input.js";
import o from "../common/Modal.js";
import s from "../common/Page.js";
import { Paragraph as c } from "../common/Typography.js";
import "../common/index.js";
import l from "./AuthenticationForm.js";
import u from "./AuthenticationHeader.js";
import d from "./AuthenticationWrapper.js";
import { v4 as f } from "uuid";
import p, { useMemo as m } from "react";
import { jsx as h, jsxs as g } from "react/jsx-runtime";
//#region src/ui/authentication/Signup.tsx
var _ = p.createContext(null), v = o.header, y = o.footer, b = (p) => {
	let { className: b, errorMessage: x, hasError: S = !1, hasSuccess: C = !1, loading: w = !1, onSubmit: T, termsAndConditionsContent: E } = p, D = m(() => f(), []), [O, k] = o.useModal();
	return /* @__PURE__ */ h(s, {
		maxWidth: 600,
		children: /* @__PURE__ */ g(d, {
			className: b,
			children: [
				/* @__PURE__ */ h(u, { children: "Sign up" }),
				C && /* @__PURE__ */ h("div", {
					role: "alert",
					children: /* @__PURE__ */ h(e, {
						className: b,
						status: "success",
						subTitle: /* @__PURE__ */ h(c, { children: "We've sent you a verification email. Click on the link in the email to activate your account." }),
						title: "Sign up successful!"
					})
				}),
				!C && /* @__PURE__ */ g(l, {
					alternativeActionLabel: "Do you want to login instead?",
					alternativeActionLink: "/login",
					errorMessage: x,
					hasError: S,
					loading: w,
					onSubmit: T,
					showForgotPassword: !1,
					submitButtonLabel: "Sign up",
					title: "Sign up",
					children: [
						/* @__PURE__ */ h(i.Item, {
							label: "First Name",
							name: "firstName",
							rules: [{
								required: !0,
								message: "First name is required"
							}],
							children: /* @__PURE__ */ h(a, {
								autoComplete: "given-name",
								id: `form-${D}-given-name`,
								placeholder: "Fill in your first name"
							})
						}),
						/* @__PURE__ */ h(i.Item, {
							label: "Last Name",
							name: "lastName",
							rules: [{
								required: !0,
								message: "Last name is required"
							}],
							children: /* @__PURE__ */ h(a, {
								autoComplete: "family-name",
								id: `form-${D}-family-name`,
								placeholder: "Fill in your last name"
							})
						}),
						/* @__PURE__ */ h(i.Item, {
							label: "Email",
							name: "email",
							rules: [{
								required: !0,
								message: "Email is required"
							}, {
								type: "email",
								message: "This is not a valid email address"
							}],
							children: /* @__PURE__ */ h(a, {
								autoComplete: "email",
								id: `form-${D}-email`,
								placeholder: "Fill in your email",
								type: "email"
							})
						}),
						/* @__PURE__ */ h(i.Item, {
							label: "Password",
							name: "password",
							rules: [{
								required: !0,
								message: "Password is required"
							}],
							children: /* @__PURE__ */ h(a, {
								autoComplete: "new-password",
								id: `form-${D}-new-password`,
								placeholder: "Fill in your password",
								type: "password"
							})
						}),
						/* @__PURE__ */ h(i.Item, {
							dependencies: ["password"],
							label: "Confirm Password",
							name: "confirm-password",
							rules: [{
								required: !0,
								message: "Please confirm your password!"
							}, ({ getFieldValue: e }) => ({ validator(t, n) {
								return !n || e("password") === n ? Promise.resolve() : Promise.reject(/* @__PURE__ */ Error("The two passwords that you entered do not match!"));
							} })],
							children: /* @__PURE__ */ h(a, {
								autoComplete: "new-password",
								id: `form-${D}-confirm-password`,
								placeholder: "Fill in your password again",
								type: "password"
							})
						}),
						E && /* @__PURE__ */ g(_.Provider, {
							value: null,
							children: [/* @__PURE__ */ h(i.Item, {
								name: "agreedTc",
								rules: [{ validator: (e, t) => t ? Promise.resolve() : Promise.reject(/* @__PURE__ */ Error("You need to agree to the terms and conditions")) }],
								valuePropName: "checked",
								children: /* @__PURE__ */ g(n, {
									"aria-label": "I agree to the terms and conditions",
									children: [
										"I agree to the",
										" ",
										/* @__PURE__ */ h(r, {
											id: "termsAndConditions",
											onClick: (e) => {
												e.preventDefault();
												let n = O.info({});
												n.update({
													title: /* @__PURE__ */ h(v, { children: "Agreeing to Terms and Conditions" }),
													content: /* @__PURE__ */ h(c, { children: E }),
													footer: [/* @__PURE__ */ h(y, { children: /* @__PURE__ */ h(t, {
														onClick: n.destroy,
														type: "primary",
														children: "OK"
													}) }, "footer")],
													maskClosable: !0,
													width: 570,
													bodyStyle: {
														marginRight: 38,
														textAlign: "justify"
													}
												});
											},
											to: "#termsAndCondition",
											children: "terms and conditions"
										})
									]
								})
							}), k]
						})
					]
				})
			]
		})
	});
};
//#endregion
export { b as default };