@arch-cadre/auth 0.0.1

package/dist/ui/signup/components.cjs

@@ -0,0 +1,193 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SignUpForm = SignUpForm;
+exports.useSignUpForm = useSignUpForm;
+var _intl = require("@arch-cadre/intl");
+var _button = require("@arch-cadre/ui/components/button");
+var _checkbox = require("@arch-cadre/ui/components/checkbox");
+var _field = require("@arch-cadre/ui/components/field");
+var _input = require("@arch-cadre/ui/components/input");
+var _separator = require("@arch-cadre/ui/components/separator");
+var _utils = require("@arch-cadre/ui/lib/utils");
+var _loader = require("@arch-cadre/ui/shared/loader");
+var _zod = require("@hookform/resolvers/zod");
+var _lucideReact = require("lucide-react");
+var _link = _interopRequireDefault(require("next/link"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _reactHookForm = require("react-hook-form");
+var _sonner = require("sonner");
+var _index = require("../../actions/index.cjs");
+var _validation = require("../../validation.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SignUpFormContext = (0, _react.createContext)(null);
+function useSignUpForm() {
+  const context = (0, _react.useContext)(SignUpFormContext);
+  if (!context) {
+    throw new Error("useSignUpForm must be used within a SignUpForm");
+  }
+  return context;
+}
+function SignUpForm({
+  extraButtons,
+  extraFields,
+  hasAllowedExtraButtons
+}) {
+  const [generalError, setGeneralError] = (0, _react.useState)("");
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  const form = (0, _reactHookForm.useForm)({
+    resolver: (0, _zod.zodResolver)(_validation.registerSchema)
+  });
+  async function onSubmit(data) {
+    setGeneralError("");
+    try {
+      const response = await (0, _index.signupAction)(data);
+      if (response.error) {
+        setGeneralError(response.message || t("error_occurred"));
+        return;
+      }
+      (0, _sonner.toast)(response.message);
+    } catch (_error) {}
+  }
+  return /* @__PURE__ */React.createElement(SignUpFormContext.Provider, {
+    value: {
+      form
+    }
+  }, /* @__PURE__ */React.createElement("div", {
+    className: (0, _utils.cn)("flex flex-col space-y-6")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "space-y-2 text-center"
+  }, /* @__PURE__ */React.createElement("h1", {
+    className: "text-3xl font-semibold"
+  }, t("Sign Up")), /* @__PURE__ */React.createElement("p", {
+    className: "text-muted-foreground"
+  }, t("Sign up to access your dashboard, settings and projects."))), /* @__PURE__ */React.createElement("div", {
+    className: "grid gap-5"
+  }, hasAllowedExtraButtons && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, extraButtons), /* @__PURE__ */React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */React.createElement(_separator.Separator, {
+    className: "flex-1"
+  }), /* @__PURE__ */React.createElement("span", {
+    className: "text-sm text-muted-foreground"
+  }, t("or sign up with email")), /* @__PURE__ */React.createElement(_separator.Separator, {
+    className: "flex-1"
+  }))), generalError && /* @__PURE__ */React.createElement("div", {
+    className: "flex gap-2 p-3 bg-red-50 border border-red-200 rounded-lg"
+  }, /* @__PURE__ */React.createElement(_lucideReact.AlertCircle, {
+    className: "w-4 h-4 text-red-600 flex-shrink-0 mt-0.5"
+  }), /* @__PURE__ */React.createElement("p", {
+    className: "text-sm text-red-600"
+  }, generalError)), /* @__PURE__ */React.createElement("form", {
+    onSubmit: form.handleSubmit(onSubmit),
+    className: "grid gap-6"
+  }, /* @__PURE__ */React.createElement(_field.FieldGroup, null, /* @__PURE__ */React.createElement(_reactHookForm.Controller, {
+    name: "email",
+    control: form.control,
+    render: ({
+      field,
+      fieldState
+    }) => /* @__PURE__ */React.createElement(_field.Field, {
+      "data-invalid": fieldState.invalid
+    }, /* @__PURE__ */React.createElement(_field.FieldLabel, {
+      htmlFor: "email"
+    }, t("Email address")), /* @__PURE__ */React.createElement(_input.Input, {
+      ...field,
+      id: "email",
+      type: "email",
+      "aria-invalid": fieldState.invalid,
+      placeholder: t("Email address"),
+      autoComplete: "off"
+    }), fieldState.invalid && /* @__PURE__ */React.createElement(_field.FieldError, {
+      errors: [fieldState.error]
+    }))
+  }), /* @__PURE__ */React.createElement(_reactHookForm.Controller, {
+    name: "username",
+    control: form.control,
+    render: ({
+      field,
+      fieldState
+    }) => /* @__PURE__ */React.createElement(_field.Field, {
+      "data-invalid": fieldState.invalid
+    }, /* @__PURE__ */React.createElement(_field.FieldLabel, {
+      htmlFor: "username"
+    }, t("Username")), /* @__PURE__ */React.createElement(_input.Input, {
+      ...field,
+      id: "username",
+      type: "text",
+      "aria-invalid": fieldState.invalid,
+      placeholder: t("Username"),
+      autoComplete: "off"
+    }), fieldState.invalid && /* @__PURE__ */React.createElement(_field.FieldError, {
+      errors: [fieldState.error]
+    }))
+  }), /* @__PURE__ */React.createElement(_reactHookForm.Controller, {
+    name: "password",
+    control: form.control,
+    render: ({
+      field,
+      fieldState
+    }) => /* @__PURE__ */React.createElement(_field.Field, {
+      "data-invalid": fieldState.invalid
+    }, /* @__PURE__ */React.createElement(_field.FieldLabel, {
+      htmlFor: "password"
+    }, t("Password")), /* @__PURE__ */React.createElement(_input.Input, {
+      ...field,
+      id: "password",
+      type: "password",
+      "aria-invalid": fieldState.invalid,
+      placeholder: t("Password"),
+      autoComplete: "off"
+    }), fieldState.invalid && /* @__PURE__ */React.createElement(_field.FieldError, {
+      errors: [fieldState.error]
+    }))
+  }), extraFields, /* @__PURE__ */React.createElement(_reactHookForm.Controller, {
+    name: "terms",
+    control: form.control,
+    render: ({
+      field,
+      fieldState
+    }) => /* @__PURE__ */React.createElement(_field.Field, {
+      "data-invalid": fieldState.invalid,
+      className: "flex items-center space-x-2"
+    }, /* @__PURE__ */React.createElement("div", {
+      className: "flex items-center space-x-2"
+    }, /* @__PURE__ */React.createElement(_checkbox.Checkbox, {
+      id: "terms",
+      "aria-invalid": fieldState.invalid,
+      checked: field.value,
+      onCheckedChange: checked => field.onChange(checked)
+    }), /* @__PURE__ */React.createElement(_field.FieldLabel, {
+      htmlFor: "terms",
+      className: "text-sm text-muted-foreground"
+    }, t("I agree to the"), " ", /* @__PURE__ */React.createElement(_link.default, {
+      href: "#",
+      className: "text-primary hover:underline"
+    }, t("Terms")), " ", t("and"), " ", /* @__PURE__ */React.createElement(_link.default, {
+      href: "#",
+      className: "text-primary hover:underline"
+    }, t("Privacy Policy")))), fieldState.invalid && /* @__PURE__ */React.createElement(_field.FieldError, {
+      errors: [fieldState.error]
+    }))
+  })), /* @__PURE__ */React.createElement(_button.Button, {
+    disabled: form.formState.isSubmitting,
+    className: "w-full"
+  }, form.formState.isSubmitting ? t("Please wait...") : t("Sign Up"), form.formState.isSubmitting && /* @__PURE__ */React.createElement(_loader.Loader, {
+    variant: "dark"
+  }))), /* @__PURE__ */React.createElement("div", {
+    className: "text-center text-sm"
+  }, t("Already have an account?"), " ", /* @__PURE__ */React.createElement(_link.default, {
+    key: "signin",
+    href: "/signin",
+    className: "underline underline-offset-4"
+  }, t("Sign In"))))));
+}

package/dist/ui/signup/components.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { type RegisterInput } from "../../validation";
+export declare function useSignUpForm(): {
+    form: UseFormReturn<RegisterInput>;
+};
+export declare function SignUpForm({ extraButtons, extraFields, hasAllowedExtraButtons, }: {
+    extraButtons?: React.ReactNode;
+    extraFields?: React.ReactNode;
+    hasAllowedExtraButtons?: boolean;
+}): React.JSX.Element;

package/dist/ui/signup/components.mjs

@@ -0,0 +1,150 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import { Button } from "@arch-cadre/ui/components/button";
+import { Checkbox } from "@arch-cadre/ui/components/checkbox";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel
+} from "@arch-cadre/ui/components/field";
+import { Input } from "@arch-cadre/ui/components/input";
+import { Separator } from "@arch-cadre/ui/components/separator";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Loader } from "@arch-cadre/ui/shared/loader";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertCircle } from "lucide-react";
+import Link from "next/link";
+import * as React from "react";
+import { createContext, useContext, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { signupAction } from "../../actions/index.mjs";
+import { registerSchema } from "../../validation.mjs";
+const SignUpFormContext = createContext(null);
+export function useSignUpForm() {
+  const context = useContext(SignUpFormContext);
+  if (!context) {
+    throw new Error("useSignUpForm must be used within a SignUpForm");
+  }
+  return context;
+}
+export function SignUpForm({
+  extraButtons,
+  extraFields,
+  hasAllowedExtraButtons
+}) {
+  const [generalError, setGeneralError] = useState("");
+  const { t } = useTranslation();
+  const form = useForm({
+    resolver: zodResolver(registerSchema)
+  });
+  async function onSubmit(data) {
+    setGeneralError("");
+    try {
+      const response = await signupAction(data);
+      if (response.error) {
+        setGeneralError(response.message || t("error_occurred"));
+        return;
+      }
+      toast(response.message);
+    } catch (_error) {
+    }
+  }
+  return /* @__PURE__ */ React.createElement(SignUpFormContext.Provider, { value: { form } }, /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col space-y-6") }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2 text-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-semibold" }, t("Sign Up")), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, t("Sign up to access your dashboard, settings and projects."))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-5" }, hasAllowedExtraButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, extraButtons), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Separator, { className: "flex-1" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-muted-foreground" }, t("or sign up with email")), /* @__PURE__ */ React.createElement(Separator, { className: "flex-1" }))), generalError && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 p-3 bg-red-50 border border-red-200 rounded-lg" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-red-600" }, generalError)), /* @__PURE__ */ React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "grid gap-6" }, /* @__PURE__ */ React.createElement(FieldGroup, null, /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: "email",
+      control: form.control,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React.createElement(Field, { "data-invalid": fieldState.invalid }, /* @__PURE__ */ React.createElement(FieldLabel, { htmlFor: "email" }, t("Email address")), /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          ...field,
+          id: "email",
+          type: "email",
+          "aria-invalid": fieldState.invalid,
+          placeholder: t("Email address"),
+          autoComplete: "off"
+        }
+      ), fieldState.invalid && /* @__PURE__ */ React.createElement(FieldError, { errors: [fieldState.error] }))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: "username",
+      control: form.control,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React.createElement(Field, { "data-invalid": fieldState.invalid }, /* @__PURE__ */ React.createElement(FieldLabel, { htmlFor: "username" }, t("Username")), /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          ...field,
+          id: "username",
+          type: "text",
+          "aria-invalid": fieldState.invalid,
+          placeholder: t("Username"),
+          autoComplete: "off"
+        }
+      ), fieldState.invalid && /* @__PURE__ */ React.createElement(FieldError, { errors: [fieldState.error] }))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: "password",
+      control: form.control,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React.createElement(Field, { "data-invalid": fieldState.invalid }, /* @__PURE__ */ React.createElement(FieldLabel, { htmlFor: "password" }, t("Password")), /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          ...field,
+          id: "password",
+          type: "password",
+          "aria-invalid": fieldState.invalid,
+          placeholder: t("Password"),
+          autoComplete: "off"
+        }
+      ), fieldState.invalid && /* @__PURE__ */ React.createElement(FieldError, { errors: [fieldState.error] }))
+    }
+  ), extraFields, /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: "terms",
+      control: form.control,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React.createElement(
+        Field,
+        {
+          "data-invalid": fieldState.invalid,
+          className: "flex items-center space-x-2"
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            id: "terms",
+            "aria-invalid": fieldState.invalid,
+            checked: field.value,
+            onCheckedChange: (checked) => field.onChange(checked)
+          }
+        ), /* @__PURE__ */ React.createElement(
+          FieldLabel,
+          {
+            htmlFor: "terms",
+            className: "text-sm text-muted-foreground"
+          },
+          t("I agree to the"),
+          " ",
+          /* @__PURE__ */ React.createElement(Link, { href: "#", className: "text-primary hover:underline" }, t("Terms")),
+          " ",
+          t("and"),
+          " ",
+          /* @__PURE__ */ React.createElement(Link, { href: "#", className: "text-primary hover:underline" }, t("Privacy Policy"))
+        )),
+        fieldState.invalid && /* @__PURE__ */ React.createElement(FieldError, { errors: [fieldState.error] })
+      )
+    }
+  )), /* @__PURE__ */ React.createElement(Button, { disabled: form.formState.isSubmitting, className: "w-full" }, form.formState.isSubmitting ? t("Please wait...") : t("Sign Up"), form.formState.isSubmitting && /* @__PURE__ */ React.createElement(Loader, { variant: "dark" }))), /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm" }, t("Already have an account?"), " ", /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      key: "signin",
+      href: "/signin",
+      className: "underline underline-offset-4"
+    },
+    t("Sign In")
+  )))));
+}

package/dist/ui/signup/page.cjs

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Page;
+var _server = require("@arch-cadre/core/server");
+var _modules = require("@arch-cadre/modules");
+var _navigation = require("next/navigation");
+var React = _interopRequireWildcard(require("react"));
+var _components = require("./components.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+async function Page() {
+  const {
+    session,
+    user
+  } = await (0, _server.getCurrentSession)();
+  if (session !== null && user !== null) {
+    return (0, _navigation.redirect)("/");
+  }
+  const hasAllowed = await (0, _modules.hasExtension)("auth", "signup:extra-buttons");
+  return /* @__PURE__ */React.createElement(_components.SignUpForm, {
+    hasAllowedExtraButtons: hasAllowed,
+    extraButtons: /* @__PURE__ */React.createElement(_modules.ExtensionPoint, {
+      module: "auth",
+      point: "signup:extra-buttons",
+      className: "flex flex-col gap-2 mt-4"
+    }),
+    extraFields: /* @__PURE__ */React.createElement(_modules.ExtensionPoint, {
+      module: "auth",
+      point: "signup:extra-fields",
+      className: "flex flex-col gap-4"
+    })
+  });
+}

package/dist/ui/signup/page.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export default function Page(): Promise<React.JSX.Element>;

package/dist/ui/signup/page.mjs

@@ -0,0 +1,34 @@
+import { getCurrentSession } from "@arch-cadre/core/server";
+import { ExtensionPoint, hasExtension } from "@arch-cadre/modules";
+import { redirect } from "next/navigation";
+import * as React from "react";
+import { SignUpForm } from "./components.mjs";
+export default async function Page() {
+  const { session, user } = await getCurrentSession();
+  if (session !== null && user !== null) {
+    return redirect("/");
+  }
+  const hasAllowed = await hasExtension("auth", "signup:extra-buttons");
+  return /* @__PURE__ */ React.createElement(
+    SignUpForm,
+    {
+      hasAllowedExtraButtons: hasAllowed,
+      extraButtons: /* @__PURE__ */ React.createElement(
+        ExtensionPoint,
+        {
+          module: "auth",
+          point: "signup:extra-buttons",
+          className: "flex flex-col gap-2 mt-4"
+        }
+      ),
+      extraFields: /* @__PURE__ */ React.createElement(
+        ExtensionPoint,
+        {
+          module: "auth",
+          point: "signup:extra-fields",
+          className: "flex flex-col gap-4"
+        }
+      )
+    }
+  );
+}

package/dist/ui/verify-email/components.cjs

@@ -0,0 +1,129 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmailVerificationForm = EmailVerificationForm;
+exports.ResendEmailVerificationCodeForm = ResendEmailVerificationCodeForm;
+var _intl = require("@arch-cadre/intl");
+var _button = require("@arch-cadre/ui/components/button");
+var _field = require("@arch-cadre/ui/components/field");
+var _inputOtp = require("@arch-cadre/ui/components/input-otp");
+var _utils = require("@arch-cadre/ui/lib/utils");
+var _loader = require("@arch-cadre/ui/shared/loader");
+var _zod = require("@hookform/resolvers/zod");
+var _lucideReact = require("lucide-react");
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _sonner = require("sonner");
+var _index = require("../../actions/index.cjs");
+var _validation = require("../../validation.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function EmailVerificationForm({
+  email = ""
+}) {
+  const [generalError, setGeneralError] = (0, _react.useState)("");
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  const form = (0, _reactHookForm.useForm)({
+    resolver: (0, _zod.zodResolver)(_validation.verifyEmailSchema)
+  });
+  async function onSubmit(data) {
+    setGeneralError("");
+    try {
+      const response = await (0, _index.verifyEmailAction)(data);
+      if (response.error) {
+        setGeneralError(response.message || t("error_occurred"));
+        return;
+      }
+      (0, _sonner.toast)(response.message);
+    } catch (_error) {}
+  }
+  return /* @__PURE__ */_react.default.createElement("div", {
+    className: (0, _utils.cn)("flex flex-col space-y-6")
+  }, /* @__PURE__ */_react.default.createElement("div", {
+    className: "space-y-2 text-center"
+  }, /* @__PURE__ */_react.default.createElement("h1", {
+    className: "text-3xl font-semibold"
+  }, t("Verify email")), /* @__PURE__ */_react.default.createElement("p", {
+    className: "text-muted-foreground"
+  }, t("We've sent a verification code to your email address: {email}", {
+    email
+  }))), /* @__PURE__ */_react.default.createElement("div", {
+    className: "grid gap-6"
+  }, generalError && /* @__PURE__ */_react.default.createElement("div", {
+    className: "flex gap-2 p-3 bg-red-50 border border-red-200 rounded-lg"
+  }, /* @__PURE__ */_react.default.createElement(_lucideReact.AlertCircle, {
+    className: "w-4 h-4 text-red-600 flex-shrink-0 mt-0.5"
+  }), /* @__PURE__ */_react.default.createElement("p", {
+    className: "text-sm text-red-600"
+  }, generalError)), /* @__PURE__ */_react.default.createElement("form", {
+    onSubmit: form.handleSubmit(onSubmit),
+    className: "grid gap-5"
+  }, /* @__PURE__ */_react.default.createElement(_field.FieldGroup, {
+    className: "w-full mx-auto"
+  }, /* @__PURE__ */_react.default.createElement(_reactHookForm.Controller, {
+    name: "code",
+    control: form.control,
+    render: ({
+      field,
+      fieldState
+    }) => /* @__PURE__ */_react.default.createElement(_field.Field, {
+      className: "w-full",
+      "data-invalid": fieldState.invalid
+    }, /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTP, {
+      ...field,
+      className: "mx-auto w-full",
+      maxLength: 6,
+      autoFocus: true,
+      inputMode: "text"
+    }, /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPGroup, {
+      className: "mx-auto"
+    }, /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 0
+    }), /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 1
+    }), /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 2
+    }), /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 3
+    }), /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 4
+    }), /* @__PURE__ */_react.default.createElement(_inputOtp.InputOTPSlot, {
+      index: 5
+    }))), fieldState.invalid && /* @__PURE__ */_react.default.createElement(_field.FieldError, {
+      errors: [fieldState.error]
+    }))
+  })), /* @__PURE__ */_react.default.createElement(_button.Button, {
+    disabled: form.formState.isSubmitting,
+    className: "w-full"
+  }, form.formState.isSubmitting ? t("Please wait...") : t("Verify Email"), form.formState.isSubmitting && /* @__PURE__ */_react.default.createElement(_loader.Loader, {
+    variant: "dark"
+  })))));
+}
+const resendEmailInitialState = {
+  message: ""
+};
+function ResendEmailVerificationCodeForm() {
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  const [state, action, isPending] = (0, _react.useActionState)(_index.resendEmailVerificationCodeAction, resendEmailInitialState);
+  (0, _react.useEffect)(() => {
+    if (state.message) {
+      _sonner.toast.success(state.message);
+    }
+  }, [state]);
+  return /* @__PURE__ */_react.default.createElement("form", {
+    action
+  }, /* @__PURE__ */_react.default.createElement(_button.Button, {
+    disabled: isPending,
+    variant: "ghost",
+    className: "w-full"
+  }, isPending ? t("Please wait...") : t("Resend verification email"), isPending && /* @__PURE__ */_react.default.createElement(_loader.Loader, {
+    variant: "default"
+  })));
+}

package/dist/ui/verify-email/components.d.ts

@@ -0,0 +1,4 @@
+export declare function EmailVerificationForm({ email }: {
+    email?: string | undefined;
+}): any;
+export declare function ResendEmailVerificationCodeForm(): any;

package/dist/ui/verify-email/components.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import { Button } from "@arch-cadre/ui/components/button";
+import { Field, FieldError, FieldGroup } from "@arch-cadre/ui/components/field";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+} from "@arch-cadre/ui/components/input-otp";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Loader } from "@arch-cadre/ui/shared/loader";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertCircle } from "lucide-react";
+import React, { useActionState, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import {
+  resendEmailVerificationCodeAction,
+  verifyEmailAction
+} from "../../actions/index.mjs";
+import { verifyEmailSchema } from "../../validation.mjs";
+export function EmailVerificationForm({ email = "" }) {
+  const [generalError, setGeneralError] = useState("");
+  const { t } = useTranslation();
+  const form = useForm({
+    resolver: zodResolver(verifyEmailSchema)
+  });
+  async function onSubmit(data) {
+    setGeneralError("");
+    try {
+      const response = await verifyEmailAction(data);
+      if (response.error) {
+        setGeneralError(response.message || t("error_occurred"));
+        return;
+      }
+      toast(response.message);
+    } catch (_error) {
+    }
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col space-y-6") }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2 text-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-semibold" }, t("Verify email")), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, t("We've sent a verification code to your email address: {email}", {
+    email
+  }))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-6" }, generalError && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 p-3 bg-red-50 border border-red-200 rounded-lg" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-red-600" }, generalError)), /* @__PURE__ */ React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "grid gap-5" }, /* @__PURE__ */ React.createElement(FieldGroup, { className: "w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: "code",
+      control: form.control,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React.createElement(Field, { className: "w-full", "data-invalid": fieldState.invalid }, /* @__PURE__ */ React.createElement(
+        InputOTP,
+        {
+          ...field,
+          className: "mx-auto w-full",
+          maxLength: 6,
+          autoFocus: true,
+          inputMode: "text"
+        },
+        /* @__PURE__ */ React.createElement(InputOTPGroup, { className: "mx-auto" }, /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 0 }), /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 1 }), /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 2 }), /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 3 }), /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 4 }), /* @__PURE__ */ React.createElement(InputOTPSlot, { index: 5 }))
+      ), fieldState.invalid && /* @__PURE__ */ React.createElement(FieldError, { errors: [fieldState.error] }))
+    }
+  )), /* @__PURE__ */ React.createElement(Button, { disabled: form.formState.isSubmitting, className: "w-full" }, form.formState.isSubmitting ? t("Please wait...") : t("Verify Email"), form.formState.isSubmitting && /* @__PURE__ */ React.createElement(Loader, { variant: "dark" })))));
+}
+const resendEmailInitialState = {
+  message: ""
+};
+export function ResendEmailVerificationCodeForm() {
+  const { t } = useTranslation();
+  const [state, action, isPending] = useActionState(
+    resendEmailVerificationCodeAction,
+    resendEmailInitialState
+  );
+  useEffect(() => {
+    if (state.message) {
+      toast.success(state.message);
+    }
+  }, [state]);
+  return /* @__PURE__ */ React.createElement("form", { action }, /* @__PURE__ */ React.createElement(Button, { disabled: isPending, variant: "ghost", className: "w-full" }, isPending ? t("Please wait...") : t("Resend verification email"), isPending && /* @__PURE__ */ React.createElement(Loader, { variant: "default" })));
+}