@sikka/hawa
Version:
Modern UI Kit made with Tailwind
1,107 lines (1,100 loc) • 127 kB
JavaScript
"use client";
import {
Alert,
Checkbox,
Input,
PhoneInput,
PinInput,
Popover,
Progress,
Radio,
ScrollArea,
Select,
Separator,
StopPropagationWrapper,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
Textarea
} from "../chunk-RE6OFIBP.mjs";
import "../chunk-WL7C2A5D.mjs";
import {
BadEmoji,
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
CheckMark,
Chip,
DropdownMenu,
EyeIcon,
GoodEmoji,
HiddenEyeIcon,
Loading,
Logos,
Skeleton,
Tooltip,
UncheckMark,
VeryBadEmoji,
VeryGoodEmoji,
cn
} from "../chunk-GGWTBYZF.mjs";
import "../chunk-2LUXOXAL.mjs";
// blocks/auth/AuthButtons.tsx
import React from "react";
var AuthButtons = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, props.viaMetamask && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isMetamaskLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleMetamask
},
props.isMetamaskLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.metamask, { className: "hawa-h-6" }),
(_b = (_a = props.texts) == null ? void 0 : _a.continueWithMetamask) != null ? _b : "Connect Metamask"
), props.viaNafath && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isNafathLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleNafath
},
props.isNafathLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.nafath, { className: "hawa-h-4" }),
(_d = (_c = props.texts) == null ? void 0 : _c.continueWithNafath) != null ? _d : "Continue With Nafath"
), props.viaGoogle && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isGoogleLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleGoogle
},
props.isGoogleLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.google, { className: "hawa-icon" }),
(_f = (_e = props.texts) == null ? void 0 : _e.continueWithGoogle) != null ? _f : "Continue With Google"
), props.viaGithub && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isGithubLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleGithub
},
props.isGithubLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.github, { className: "hawa-icon" }),
(_h = (_g = props.texts) == null ? void 0 : _g.continueWithGithub) != null ? _h : "Continue With Github"
), props.viaTwitter && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isTwitterLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleTwitter
},
props.isTwitterLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.twitter, { className: "hawa-icon" }),
(_j = (_i = props.texts) == null ? void 0 : _i.continueWithTwitter) != null ? _j : "Continue With Twitter"
), props.viaApple && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isAppleLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleApple
},
props.isAppleLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.apple, { className: "hawa-icon" }),
(_l = (_k = props.texts) == null ? void 0 : _k.continueWithApple) != null ? _l : "Continue With Apple"
), props.viaMicrosoft && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isMicrosoftLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleMicrosoft
},
props.isMicrosoftLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.microsoft, { className: "hawa-icon" }),
(_n = (_m = props.texts) == null ? void 0 : _m.continueWithMicrosoft) != null ? _n : "Continue With Microsoft"
), props.viaEmail && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isEmailLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handleEmail
},
props.isEmailLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.mail, { className: "hawa-icon" }),
(_p = (_o = props.texts) == null ? void 0 : _o.continueWithEmail) != null ? _p : "Continue With Email"
), props.viaPhone && /* @__PURE__ */ React.createElement(
Button,
{
disabled: props.isPhoneLoading,
className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
variant: "outline",
onClick: props.handlePhone
},
props.isPhoneLoading ? /* @__PURE__ */ React.createElement(Loading, { size: "button" }) : /* @__PURE__ */ React.createElement(Logos.phone, { className: "hawa-icon" }),
(_r = (_q = props.texts) == null ? void 0 : _q.continueWithPhone) != null ? _r : "Continue With Phone"
));
};
// blocks/auth/LoginForm.tsx
import React2 from "react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
isPossiblePhoneNumber,
isValidPhoneNumber,
parsePhoneNumber,
validatePhoneNumberLength
} from "libphonenumber-js";
import * as z from "zod";
var LoginForm = ({
loginType = "email",
minPasswordLength = 8,
texts,
...props
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
const [passwordVisible, setPasswordVisible] = useState(false);
const thirdPartyAuthTexts = {
continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
continueWithApple: texts == null ? void 0 : texts.continueWithApple,
continueWithMicrosoft: texts == null ? void 0 : texts.continueWithMicrosoft,
continueWithGithub: texts == null ? void 0 : texts.continueWithGithub,
continueWithEmail: texts == null ? void 0 : texts.continueWithEmail,
continueWithPhone: texts == null ? void 0 : texts.continueWithPhone
};
let formSchema;
if (loginType === "email") {
formSchema = z.object({
email: z.string({ required_error: ((_a = texts == null ? void 0 : texts.email) == null ? void 0 : _a.required) || "Email Required" }).min(1, { message: ((_b = texts == null ? void 0 : texts.email) == null ? void 0 : _b.required) || "Email Required" }).email({ message: ((_c = texts == null ? void 0 : texts.email) == null ? void 0 : _c.invalid) || "Email Invalid" }),
password: z.string({
required_error: ((_d = texts == null ? void 0 : texts.password) == null ? void 0 : _d.required) || "Password Required"
}).min(1, { message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required) || "Password Required" }).min(minPasswordLength, {
message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.tooShort) || "Password too short"
})
});
} else if (loginType === "username") {
formSchema = z.object({
username: z.string({
required_error: ((_g = texts == null ? void 0 : texts.username) == null ? void 0 : _g.required) || "Username Required"
}).min(2, { message: ((_h = texts == null ? void 0 : texts.username) == null ? void 0 : _h.tooShort) || "Username too short" }).refine(
(value) => {
const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
return isValid;
},
{ message: ((_i = texts == null ? void 0 : texts.username) == null ? void 0 : _i.invalid) || "Username Invalid" }
),
password: z.string({
required_error: ((_j = texts == null ? void 0 : texts.password) == null ? void 0 : _j.required) || "Password Required"
}).min(1, { message: ((_k = texts == null ? void 0 : texts.password) == null ? void 0 : _k.required) || "Password Required" }).min(minPasswordLength, {
message: ((_l = texts == null ? void 0 : texts.password) == null ? void 0 : _l.tooShort) || "Password too short"
})
});
} else if (loginType === "phone") {
formSchema = z.object({
phone: z.string({
required_error: ((_m = texts == null ? void 0 : texts.phone) == null ? void 0 : _m.required) || "Phone Number Required"
}).refine(
(value) => {
let isPhoneValid = isPossiblePhoneNumber(value) && isValidPhoneNumber(value) && validatePhoneNumberLength(value) === void 0;
return isPhoneValid;
},
{ message: ((_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid) || "Phone Number Invalid" }
)
});
} else if (loginType === "link") {
formSchema = z.object({
email: z.string({ required_error: ((_o = texts == null ? void 0 : texts.email) == null ? void 0 : _o.required) || "Email Required" }).min(1, { message: ((_p = texts == null ? void 0 : texts.email) == null ? void 0 : _p.required) || "Email Required" }).email({ message: ((_q = texts == null ? void 0 : texts.email) == null ? void 0 : _q.invalid) || "Email Invalid" })
});
} else {
formSchema = z.object({});
}
const { handleSubmit, control, formState } = useForm({
resolver: zodResolver(formSchema)
});
const renderFields = () => {
switch (loginType) {
case "email":
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "email",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React2.createElement(
Input,
{
inputProps: {
className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
},
dir: "ltr",
width: "full",
autoComplete: "email",
label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "contact@sikka.io",
...field,
onChange: (e) => {
field.onChange(e.target.value.toLowerCase().trim());
}
}
);
}
}
), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React2.createElement(
Input,
{
width: "full",
autoComplete: "current-password",
type: passwordVisible ? "text" : "password",
label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
endIcon: /* @__PURE__ */ React2.createElement(
"div",
{
className: "hawa-cursor-pointer",
onClick: () => setPasswordVisible(!passwordVisible)
},
passwordVisible ? /* @__PURE__ */ React2.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React2.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
),
placeholder: ((_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder) || "Enter your password",
helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
...field
}
);
}
}
), props.withResetPassword && /* @__PURE__ */ React2.createElement(
"div",
{
onClick: props.onForgotPassword,
className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-select-none hawa-text-xs dark:hawa-text-gray-300"
},
(texts == null ? void 0 : texts.forgotPassword) || "Forgot Password?"
)));
case "username":
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "username",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React2.createElement(
Input,
{
width: "full",
autoComplete: "username",
label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
helperText: (_b2 = formState.errors.username) == null ? void 0 : _b2.message,
placeholder: ((_c2 = texts == null ? void 0 : texts.username) == null ? void 0 : _c2.placeholder) || "sikka_sa",
...field
}
);
}
}
), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React2.createElement(
Input,
{
width: "full",
autoComplete: "current-password",
type: passwordVisible ? "text" : "password",
label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
endIcon: /* @__PURE__ */ React2.createElement(
"div",
{
className: "hawa-cursor-pointer",
onClick: () => setPasswordVisible(!passwordVisible)
},
passwordVisible ? /* @__PURE__ */ React2.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React2.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
),
placeholder: ((_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder) || "Enter your password",
helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
...field
}
);
}
}
), props.withResetPassword && /* @__PURE__ */ React2.createElement(
"div",
{
onClick: props.onForgotPassword,
className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-select-none hawa-text-xs dark:hawa-text-gray-300"
},
(texts == null ? void 0 : texts.forgotPassword) || "Forgot Password?"
)));
case "phone":
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "phone",
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ React2.createElement(
PhoneInput,
{
label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
preferredCountry: { label: "+966" },
...props.phoneInputProps,
handleChange: (e) => {
if (isValidPhoneNumber(e) && isPossiblePhoneNumber(e) && validatePhoneNumberLength(e) === void 0) {
let parsed = parsePhoneNumber(e);
field.onChange(parsed.number);
} else {
field.onChange(e);
}
}
}
);
}
}
));
case "link":
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
Controller,
{
control,
name: "email",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React2.createElement(
Input,
{
width: "full",
autoComplete: "email",
label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "contact@sikka.io",
...field,
onChange: (e) => {
field.onChange(e.target.value.toLowerCase().trim());
}
}
);
}
}
));
default:
break;
}
};
return /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React2.createElement(
Card,
{
dir: props.direction,
className: cn(
props.cardless && "!hawa-border-none !hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
)
},
/* @__PURE__ */ React2.createElement(CardContent, { headless: true, noPadding: props.cardless }, props.showError && /* @__PURE__ */ React2.createElement(
Alert,
{
direction: props.direction,
title: props.errorTitle,
text: props.errorText,
severity: "error",
onAlertClosed: () => {
if (props.onErrorDismissed) {
props.onErrorDismissed();
}
}
}
), /* @__PURE__ */ React2.createElement(
"form",
{
noValidate: true,
className: "hawa-flex hawa-flex-col hawa-gap-4",
onSubmit: handleSubmit((e) => {
if (props.onLogin) {
return props.onLogin(e);
} else {
console.log("Form is submitted but onLogin prop is missing");
}
})
},
renderFields(),
/* @__PURE__ */ React2.createElement(
Button,
{
className: "hawa-mt-0 hawa-w-full",
type: "submit",
isLoading: props.isLoading,
disabled: props.isLoading
},
(texts == null ? void 0 : texts.loginText) || "Login"
),
props.additionalButtons && props.additionalButtons,
props.allowRegister && /* @__PURE__ */ React2.createElement("div", { className: "hawa-select-none hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, (texts == null ? void 0 : texts.newUserText) || "New user?", " ", /* @__PURE__ */ React2.createElement(
"span",
{
onClick: props.onRouteToRegister,
className: "clickable-link"
},
(texts == null ? void 0 : texts.createAccount) || "Create Account"
))
)),
props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React2.createElement(
CardFooter,
{
noPadding: props.cardless,
className: cn(
props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
)
},
/* @__PURE__ */ React2.createElement(
AuthButtons,
{
texts: thirdPartyAuthTexts,
viaGoogle: props.viaGoogle,
viaGithub: props.viaGithub,
viaTwitter: props.viaTwitter,
isGoogleLoading: props.isGoogleLoading,
isGithubLoading: props.isGithubLoading,
isTwitterLoading: props.isTwitterLoading,
handleGoogle: props.onGoogleLogin,
handleGithub: props.onGithubLogin,
handleTwitter: props.onTwitterLogin
}
)
) : null
));
};
// blocks/auth/RegisterForm.tsx
import React3, { useState as useState2 } from "react";
import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
import * as z2 from "zod";
var RegisterForm = ({
texts,
registerFields = ["email"],
minPasswordLength = 8,
showTermsOption = false,
showNewsletterOption = false,
...props
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
const [passwordVisible, setPasswordVisible] = useState2(false);
const thirdPartyAuthTexts = {
continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
continueWithApple: texts == null ? void 0 : texts.continueWithApple,
continueWithMicrosoft: texts == null ? void 0 : texts.continueWithMicrosoft,
continueWithGithub: texts == null ? void 0 : texts.continueWithGithub,
continueWithEmail: texts == null ? void 0 : texts.continueWithEmail,
continueWithPhone: texts == null ? void 0 : texts.continueWithPhone
};
const methods = useForm2();
let fieldSchemas = {};
registerFields.forEach((field) => {
var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
switch (field) {
case "fullname":
fieldSchemas["fullName"] = z2.string().optional();
break;
case "email":
fieldSchemas["email"] = z2.string({
required_error: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.required) || "Email is required"
}).email({ message: ((_b2 = texts == null ? void 0 : texts.email) == null ? void 0 : _b2.invalid) || "Invalid email" }).min(1, { message: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.required) || "Email is required" });
break;
case "username":
fieldSchemas["username"] = z2.string({
required_error: ((_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.required) || "Username is required"
}).min(1, {
message: ((_e2 = texts == null ? void 0 : texts.username) == null ? void 0 : _e2.required) || "Username is required"
}).max(14, {
message: ((_f2 = texts == null ? void 0 : texts.username) == null ? void 0 : _f2.tooLong) || "Username is too long"
}).refine(
(value) => {
const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
return isValid;
},
{ message: ((_g2 = texts == null ? void 0 : texts.username) == null ? void 0 : _g2.invalid) || "Invalid username" }
);
break;
}
});
const formSchema = z2.object({
...fieldSchemas,
password: z2.string({
required_error: ((_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required) || "Password is required"
}).min(minPasswordLength, {
message: ((_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.tooShort) || "Password is too short"
}).refine((value) => value !== "", {
message: ((_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.required) || "Password is required"
}),
confirm_password: z2.string({
required_error: ((_d = texts == null ? void 0 : texts.confirm) == null ? void 0 : _d.required) || "Confirm password required"
}).min(minPasswordLength, {
message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.tooShort) || "Password is too short"
}).refine((value) => value !== "", {
message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.required) || "Confirm password is required"
}),
refCode: z2.string().optional(),
reference: z2.string().optional(),
terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
}),
newsletter_accepted: z2.boolean().optional()
}).refine((data) => data.password === data.confirm_password, {
message: ((_g = texts == null ? void 0 : texts.confirm) == null ? void 0 : _g.dontMatch) || "Passwords don't match",
path: ["confirm_password"]
});
const { handleSubmit, control, formState } = useForm2({
resolver: zodResolver2(formSchema)
});
return /* @__PURE__ */ React3.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-gap-4",
(_h = props.classNames) == null ? void 0 : _h.root
)
},
/* @__PURE__ */ React3.createElement(
Card,
{
dir: props.direction,
className: cn(
(_i = props.classNames) == null ? void 0 : _i.card,
props.cardless && "hawa-border-none hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
)
},
/* @__PURE__ */ React3.createElement(CardContent, { headless: true, noPadding: props.cardless }, /* @__PURE__ */ React3.createElement("div", null, props.showError && /* @__PURE__ */ React3.createElement(
Alert,
{
direction: props.direction,
title: props.errorTitle,
text: props.errorText,
severity: "error",
onAlertClosed: () => {
if (props.onErrorDismissed) {
props.onErrorDismissed();
}
}
}
), /* @__PURE__ */ React3.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React3.createElement(
"form",
{
noValidate: true,
onSubmit: handleSubmit((e) => {
if (props.onRegister) {
return props.onRegister(e);
} else {
console.log(
"Form is submitted but onRegister prop is missing"
);
}
}),
className: "hawa-flex hawa-flex-col hawa-gap-4"
},
/* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
if (fld === "fullname") {
return /* @__PURE__ */ React3.createElement(
Controller2,
{
key: i,
control,
name: "fullName",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React3.createElement(
Input,
{
width: "full",
label: ((_a2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _a2.label) || "Full Name",
placeholder: (_b2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _b2.placeholder,
helperText: (_c2 = formState.errors.fullName) == null ? void 0 : _c2.message,
...field
}
);
}
}
);
}
if (fld === "email") {
return /* @__PURE__ */ React3.createElement(
Controller2,
{
key: i,
control,
name: "email",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React3.createElement(
Input,
{
dir: "ltr",
inputProps: {
className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
},
width: "full",
autoComplete: "email",
label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "Enter your email",
...field,
onChange: (e) => {
field.onChange(
e.target.value.toLowerCase().trim()
);
}
}
);
}
}
);
}
if (fld === "username") {
return /* @__PURE__ */ React3.createElement(
Controller2,
{
key: i,
control,
name: "username",
render: ({ field }) => {
var _a2, _b2, _c2, _d2;
return /* @__PURE__ */ React3.createElement(
Input,
{
width: "full",
autoComplete: "username",
label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
labelProps: {
...(_b2 = props.usernameOptions) == null ? void 0 : _b2.label
},
helperText: (_c2 = formState.errors.username) == null ? void 0 : _c2.message,
placeholder: (_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.placeholder,
...field
}
);
}
}
);
}
})),
/* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React3.createElement(
Input,
{
width: "full",
type: passwordVisible ? "text" : "password",
endIcon: /* @__PURE__ */ React3.createElement(
"div",
{
className: "hawa-cursor-pointer",
onClick: () => setPasswordVisible(!passwordVisible)
},
passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
" "
),
autoComplete: "new-password",
label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
...field
}
);
}
}
),
/* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "confirm_password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React3.createElement(
Input,
{
width: "full",
type: "password",
autoComplete: "new-password",
label: ((_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label) || "Confirm Password",
placeholder: ((_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder) || "Confirm your Password",
helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
...field
}
);
}
}
),
props.additionalInputs,
props.showRefCode && /* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "refCode",
render: ({ field }) => {
var _a2;
return /* @__PURE__ */ React3.createElement(
Input,
{
width: "full",
label: texts == null ? void 0 : texts.refCode,
placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
...field
}
);
}
}
),
props.showUserSource && /* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "reference",
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ React3.createElement(
Select,
{
label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
isCreatable: false,
isMulti: false,
isSearchable: false,
isClearable: false,
options: props.userReferenceOptions || [],
onChange: (e) => field.onChange(e)
}
);
}
}
),
showTermsOption || showNewsletterOption ? /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "terms_accepted",
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ React3.createElement(
Checkbox,
{
id: "terms_accepted",
helperText: (_b2 = (_a2 = formState.errors.terms_accepted) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
onCheckedChange: (e) => field.onChange(e),
label: /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-0.5 hawa-whitespace-nowrap hawa-flex-wrap" }, (texts == null ? void 0 : texts.iAcceptText) || "I accept the", " ", /* @__PURE__ */ React3.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React3.createElement(
"span",
{
onClick: (e) => {
e.preventDefault();
if (props.onRouteToTOS) {
props.onRouteToTOS();
}
},
className: "clickable-link"
},
(texts == null ? void 0 : texts.termsText) || "Terms of Service"
)))
}
);
}
}
), showNewsletterOption && /* @__PURE__ */ React3.createElement(
Controller2,
{
control,
name: "newsletter_accepted",
render: ({ field }) => /* @__PURE__ */ React3.createElement(
Checkbox,
{
id: "newsletter_accepted",
label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
onCheckedChange: field.onChange
}
)
}
)) : null,
/* @__PURE__ */ React3.createElement(
Button,
{
className: "hawa-w-full",
type: "submit",
isLoading: props.isLoading,
disabled: props.isLoading
},
(texts == null ? void 0 : texts.registerText) || "Register"
),
props.additionalButtons
)), props.onRouteToLogin && /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React3.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React3.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React3.createElement(
CardFooter,
{
noPadding: props.cardless,
className: cn(
props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
)
},
/* @__PURE__ */ React3.createElement(
AuthButtons,
{
texts: thirdPartyAuthTexts,
viaGoogle: props.viaGoogle,
viaGithub: props.viaGithub,
viaTwitter: props.viaTwitter,
isGoogleLoading: props.isGoogleLoading,
isGithubLoading: props.isGithubLoading,
isTwitterLoading: props.isTwitterLoading,
handleGoogle: props.onGoogleRegister,
handleGithub: props.onGithubRegister,
handleTwitter: props.onTwitterRegister
}
)
) : null
)
);
};
// blocks/auth/AppLanding.tsx
import React4 from "react";
var AppLanding = ({ texts, ...props }) => {
const thirdPartyAuthTexts = {
continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
continueWithApple: texts == null ? void 0 : texts.continueWithApple,
continueWithMicrosoft: texts == null ? void 0 : texts.continueWithMicrosoft,
continueWithGithub: texts == null ? void 0 : texts.continueWithGithub,
continueWithEmail: texts == null ? void 0 : texts.continueWithEmail,
continueWithPhone: texts == null ? void 0 : texts.continueWithPhone
};
return /* @__PURE__ */ React4.createElement("div", { dir: props.direction }, /* @__PURE__ */ React4.createElement(Card, null, /* @__PURE__ */ React4.createElement(CardContent, { headless: true, className: "hawa-flex hawa-flex-col hawa-gap-6" }, /* @__PURE__ */ React4.createElement(
AuthButtons,
{
texts: thirdPartyAuthTexts,
viaApple: props.viaApple,
viaGoogle: props.viaGoogle,
viaEmail: props.viaEmail,
viaGithub: props.viaGithub,
viaMicrosoft: props.viaMicrosoft,
viaPhone: props.viaPhone,
viaTwitter: props.viaTwitter,
handleApple: props.handleApple,
handleGoogle: props.handleGoogle,
handleTwitter: props.handleTwitter,
handleMicrosoft: props.handleMicrosoft,
handleGithub: props.handleGithub,
handleEmail: props.handleEmail,
handlePhone: props.handlePhone
}
), props.allowRegister && /* @__PURE__ */ React4.createElement("div", { className: "hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, texts == null ? void 0 : texts.newUserText, " ", /* @__PURE__ */ React4.createElement(
"span",
{
onClick: props.handleRouteToRegister,
className: "clickable-link"
},
texts == null ? void 0 : texts.createAccount
)))));
};
// blocks/auth/CheckEmail.tsx
import React5 from "react";
var CheckEmail = ({ texts, handleResend }) => {
return /* @__PURE__ */ React5.createElement(Card, null, /* @__PURE__ */ React5.createElement(CardContent, { headless: true }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center hawa-text-center" }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-h-16 hawa-w-16 hawa-flex-col hawa-items-center hawa-justify-center hawa-rounded-3xl hawa-bg-primary hawa-text-6xl hawa-font-bold hawa-text-primary-foreground" }, /* @__PURE__ */ React5.createElement(
"svg",
{
stroke: "currentColor",
fill: "none",
strokeWidth: "2",
viewBox: "0 0 24 24",
strokeLinecap: "round",
strokeLinejoin: "round",
height: "0.5em",
width: "0.5em",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React5.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
/* @__PURE__ */ React5.createElement("polyline", { points: "22,6 12,13 2,6" })
)), /* @__PURE__ */ React5.createElement("div", { className: "hawa-m-2 hawa-text-xl hawa-font-bold" }, (texts == null ? void 0 : texts.checkEmail) || "Check your Email"), /* @__PURE__ */ React5.createElement("div", { className: "hawa-text-sm" }, (texts == null ? void 0 : texts.pleaseVerify) || "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."))), /* @__PURE__ */ React5.createElement(CardFooter, { className: "hawa-flex hawa-flex-col hawa-justify-center" }, /* @__PURE__ */ React5.createElement("span", { className: "clickable-link hawa-text-sm", onClick: handleResend }, (texts == null ? void 0 : texts.resendEmail) || "Resend Email")));
};
// blocks/auth/NewPassword.tsx
import React6 from "react";
import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
import * as z3 from "zod";
var NewPasswordForm = ({
texts,
isLoading,
...props
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const formSchema = z3.object({
password: z3.string({ required_error: (_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required }).min(1, { message: (_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.required }).min(8, { message: (_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.tooShort }),
confirm_password: z3.string({ required_error: (_d = texts == null ? void 0 : texts.confirm) == null ? void 0 : _d.required }).refine((value) => value !== "", {
message: (_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required
})
}).refine((data) => data.password === data.confirm_password, {
message: (_f = texts == null ? void 0 : texts.confirm) == null ? void 0 : _f.dontMatch,
path: ["confirm_password"]
});
const { handleSubmit, control, formState } = useForm3({
resolver: zodResolver3(formSchema)
});
return /* @__PURE__ */ React6.createElement(Card, { dir: props.direction }, props.showSuccess ? /* @__PURE__ */ React6.createElement(CardContent, { headless: true }, /* @__PURE__ */ React6.createElement("div", { className: "hawa-text-center" }, texts == null ? void 0 : texts.passwordChanged)) : /* @__PURE__ */ React6.createElement(
"form",
{
noValidate: true,
onSubmit: handleSubmit((e) => {
if (props.handleNewPassword) {
return props.handleNewPassword(e);
} else {
console.log(
"Form is submitted but handleSubmission prop is missing"
);
}
})
},
/* @__PURE__ */ React6.createElement(CardContent, { headless: true, className: "hawa-flex hawa-flex-col" }, props.showError && /* @__PURE__ */ React6.createElement(
Alert,
{
direction: props.direction,
title: props.errorTitle,
text: props.errorText,
severity: "error"
}
), /* @__PURE__ */ React6.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-mb-4" }, /* @__PURE__ */ React6.createElement(
Controller3,
{
control,
name: "password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React6.createElement(
Input,
{
width: "full",
type: "password",
autoComplete: "new-password",
label: (_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label,
placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
...field
}
);
}
}
), /* @__PURE__ */ React6.createElement(
Controller3,
{
control,
name: "confirm_password",
render: ({ field }) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ React6.createElement(
Input,
{
width: "full",
type: "password",
autoComplete: "new-password",
label: (_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label,
placeholder: (_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder,
helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
...field
}
);
}
}
)), /* @__PURE__ */ React6.createElement(Button, { className: "hawa-w-full", type: "submit", isLoading }, texts == null ? void 0 : texts.updatePassword), props.allowRegister && /* @__PURE__ */ React6.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_g = texts == null ? void 0 : texts.dontHaveAccount) != null ? _g : "Don't have an account? ", /* @__PURE__ */ React6.createElement(
"span",
{
className: "clickable-link",
onClick: props.handleRouteToRegister
},
(_h = texts == null ? void 0 : texts.registerText) != null ? _h : "Register"
)))
));
};
// blocks/auth/ResetPassword.tsx
import React7 from "react";
import { Controller as Controller4, useForm as useForm4 } from "react-hook-form";
import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
import * as z4 from "zod";
var ResetPasswordForm = ({
allowRegister = true,
isLoading,
...props
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
const formSchema = z4.object({
email: z4.string({
required_error: ((_b = (_a = props.texts) == null ? void 0 : _a.email) == null ? void 0 : _b.required) || "Email is required"
}).email({ message: ((_d = (_c = props.texts) == null ? void 0 : _c.email) == null ? void 0 : _d.invalid) || "Invalid email" }).min(1, { message: ((_f = (_e = props.texts) == null ? void 0 : _e.email) == null ? void 0 : _f.required) || "Email is required" })
});
const { handleSubmit, control, formState } = useForm4({
resolver: zodResolver4(formSchema)
});
return /* @__PURE__ */ React7.createElement(Card, { dir: props.direction }, !props.sent ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, !props.headless && /* @__PURE__ */ React7.createElement(CardHeader, null, /* @__PURE__ */ React7.createElement(CardTitle, null, ((_g = props.texts) == null ? void 0 : _g.headTitle) || "Reset Password"), /* @__PURE__ */ React7.createElement(CardDescription, null, ((_h = props.texts) == null ? void 0 : _h.headDescription) || "Enter your email to reset your account password")), /* @__PURE__ */ React7.createElement(
"form",
{
noValidate: true,
onSubmit: handleSubmit((e) => {
if (props.handleResetPassword) {
return props.handleResetPassword(e);
} else {
console.log("handleResetPassword prop is missing");
}
})
},
/* @__PURE__ */ React7.createElement(CardContent, { headless: props.headless, className: "hawa-pb-4" }, props.showError && /* @__PURE__ */ React7.createElement(
Alert,
{
direction: props.direction,
title: props.errorTitle,
text: props.errorText,
severity: "error"
}
), /* @__PURE__ */ React7.createElement(
Controller4,
{
control,
name: "email",
render: ({ field }) => {
var _a2, _b2, _c2, _d2, _e2;
return /* @__PURE__ */ React7.createElement(
Input,
{
width: "full",
label: ((_b2 = (_a2 = props.texts) == null ? void 0 : _a2.email) == null ? void 0 : _b2.label) || "Email",
helperText: (_c2 = formState.errors.email) == null ? void 0 : _c2.message,
placeholder: (_e2 = (_d2 = props.texts) == null ? void 0 : _d2.email) == null ? void 0 : _e2.placeholder,
...field,
onChange: (e) => {
field.onChange(e.target.value.toLowerCase().trim());
}
}
);
}
}
)),
/* @__PURE__ */ React7.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React7.createElement(
Button,
{
type: "sub