@dravyn/auth-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,678 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ForgotPasswordScreen: () => ForgotPasswordScreen,
+  LoginScreen: () => LoginScreen,
+  OTPScreen: () => OTPScreen,
+  RegisterScreen: () => RegisterScreen,
+  ResetPasswordScreen: () => ResetPasswordScreen
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/screens/LoginScreen.tsx
+var import_react = __toESM(require("react"));
+var import_ui = require("@dravyn/ui");
+var import_ui2 = require("@dravyn/ui");
+var import_ui3 = require("@dravyn/ui");
+var LoginScreen = ({
+  redirectTo = "/dashboard",
+  showRegisterLink = true,
+  onSuccess,
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001"
+}) => {
+  const [email, setEmail] = import_react.default.useState("");
+  const [password, setPassword] = import_react.default.useState("");
+  const [showPass, setShowPass] = import_react.default.useState(false);
+  const [loading, setLoading] = import_react.default.useState(false);
+  const [error, setError] = import_react.default.useState("");
+  const emailRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    emailRef.current?.focus();
+  }, []);
+  const validate = () => {
+    if (!email.trim()) return "Email address is required.";
+    if (!/\S+@\S+\.\S+/.test(email)) return "Enter a valid email address.";
+    if (!password) return "Password is required.";
+    if (password.length < 6) return "Password must be at least 6 characters.";
+    return null;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const err = validate();
+    if (err) {
+      setError(err);
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email.trim().toLowerCase(), password })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Invalid email or password.");
+        return;
+      }
+      localStorage.setItem("dravyn_token", data.accessToken);
+      localStorage.setItem("dravyn_user", JSON.stringify(data.user));
+      if (onSuccess) {
+        onSuccess(data.accessToken, data.user);
+      } else {
+        window.location.href = redirectTo;
+      }
+    } catch {
+      setError("Unable to connect. Please check your internet connection.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleGoogle = async () => {
+    window.location.href = `${apiBase}/auth/google`;
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react.default.createElement("h1", { className: "dauth-title" }, "Welcome back"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "Sign in to your ", brandName, " account"), error && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_ui3.Alert, { variant: "danger" }, error)), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, noValidate: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-fields" }, /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      ref: emailRef,
+      label: "Email address",
+      type: "email",
+      placeholder: "you@example.com",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      leftIcon: /* @__PURE__ */ import_react.default.createElement(EmailIcon, null),
+      autoComplete: "email",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-password-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Password",
+      type: showPass ? "text" : "password",
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      leftIcon: /* @__PURE__ */ import_react.default.createElement(LockIcon, null),
+      rightIcon: /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dauth-eye",
+          onClick: () => setShowPass((v) => !v),
+          "aria-label": showPass ? "Hide password" : "Show password"
+        },
+        showPass ? /* @__PURE__ */ import_react.default.createElement(EyeOffIcon, null) : /* @__PURE__ */ import_react.default.createElement(EyeIcon, null)
+      ),
+      autoComplete: "current-password",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("a", { href: "/auth/forgot-password", className: "dauth-forgot" }, "Forgot password?"))), /* @__PURE__ */ import_react.default.createElement(
+    import_ui.Button,
+    {
+      type: "submit",
+      variant: "primary",
+      fullWidth: true,
+      loading,
+      style: { marginTop: 8 }
+    },
+    "Sign in"
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-divider" }, /* @__PURE__ */ import_react.default.createElement("span", null, "or continue with")), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "dauth-google-btn",
+      onClick: handleGoogle,
+      disabled: loading
+    },
+    /* @__PURE__ */ import_react.default.createElement(GoogleIcon, null),
+    "Continue with Google"
+  ), showRegisterLink && /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-footer-text" }, "Don't have an account?", " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "/auth/register", className: "dauth-link" }, "Create one"))));
+};
+var EmailIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" }));
+var LockIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }));
+var EyeIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ import_react.default.createElement("circle", { cx: "12", cy: "12", r: "3" }));
+var EyeOffIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), /* @__PURE__ */ import_react.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" }));
+var GoogleIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), /* @__PURE__ */ import_react.default.createElement("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), /* @__PURE__ */ import_react.default.createElement("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), /* @__PURE__ */ import_react.default.createElement("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }));
+
+// src/screens/RegisterScreen.tsx
+var import_react2 = __toESM(require("react"));
+var import_ui4 = require("@dravyn/ui");
+var import_ui5 = require("@dravyn/ui");
+var import_ui6 = require("@dravyn/ui");
+var RegisterScreen = ({
+  redirectTo = "/auth/verify",
+  onSuccess,
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  extraFields,
+  requireOTP = true
+}) => {
+  const [form, setForm] = import_react2.default.useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirm: ""
+  });
+  const [showPass, setShowPass] = import_react2.default.useState(false);
+  const [loading, setLoading] = import_react2.default.useState(false);
+  const [error, setError] = import_react2.default.useState("");
+  const [fieldErrs, setFieldErrs] = import_react2.default.useState({});
+  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
+  const validate = () => {
+    const errs = {};
+    if (!form.firstName.trim()) errs.firstName = "First name is required.";
+    if (!form.lastName.trim()) errs.lastName = "Last name is required.";
+    if (!form.email.trim()) errs.email = "Email is required.";
+    else if (!/\S+@\S+\.\S+/.test(form.email)) errs.email = "Enter a valid email.";
+    if (!form.password) errs.password = "Password is required.";
+    else if (form.password.length < 8) errs.password = "Password must be at least 8 characters.";
+    if (form.confirm !== form.password) errs.confirm = "Passwords do not match.";
+    return errs;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length) {
+      setFieldErrs(errs);
+      return;
+    }
+    setFieldErrs({});
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstName: form.firstName.trim(),
+          lastName: form.lastName.trim(),
+          email: form.email.trim().toLowerCase(),
+          password: form.password
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Registration failed.");
+        return;
+      }
+      if (requireOTP) {
+        sessionStorage.setItem("dravyn_pending_email", form.email.trim().toLowerCase());
+        window.location.href = redirectTo;
+      } else {
+        localStorage.setItem("dravyn_token", data.accessToken);
+        localStorage.setItem("dravyn_user", JSON.stringify(data.user));
+        if (onSuccess) onSuccess(data.accessToken, data.user);
+        else window.location.href = redirectTo;
+      }
+    } catch {
+      setError("Unable to connect. Check your internet connection.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const EyeIcon2 = () => /* @__PURE__ */ import_react2.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "12", r: "3" }));
+  const EyeOffIcon2 = () => /* @__PURE__ */ import_react2.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" }));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react2.default.createElement("h1", { className: "dauth-title" }, "Create your account"), /* @__PURE__ */ import_react2.default.createElement("p", { className: "dauth-sub" }, "Join ", brandName, " \u2014 it's free"), error && /* @__PURE__ */ import_react2.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react2.default.createElement(import_ui6.Alert, { variant: "danger" }, error)), /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleSubmit, noValidate: true }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-fields" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "dauth-row" }, /* @__PURE__ */ import_react2.default.createElement(
+    import_ui5.Input,
+    {
+      label: "First name",
+      placeholder: "Jeremiah",
+      value: form.firstName,
+      onChange: set("firstName"),
+      error: fieldErrs.firstName,
+      required: true
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    import_ui5.Input,
+    {
+      label: "Last name",
+      placeholder: "Adeniyi",
+      value: form.lastName,
+      onChange: set("lastName"),
+      error: fieldErrs.lastName,
+      required: true
+    }
+  )), /* @__PURE__ */ import_react2.default.createElement(
+    import_ui5.Input,
+    {
+      label: "Email address",
+      type: "email",
+      placeholder: "you@example.com",
+      value: form.email,
+      onChange: set("email"),
+      error: fieldErrs.email,
+      autoComplete: "email",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    import_ui5.Input,
+    {
+      label: "Password",
+      type: showPass ? "text" : "password",
+      placeholder: "Min. 8 characters",
+      value: form.password,
+      onChange: set("password"),
+      error: fieldErrs.password,
+      hint: !fieldErrs.password ? "At least 8 characters." : void 0,
+      rightIcon: /* @__PURE__ */ import_react2.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dauth-eye",
+          onClick: () => setShowPass((v) => !v),
+          "aria-label": showPass ? "Hide" : "Show"
+        },
+        showPass ? /* @__PURE__ */ import_react2.default.createElement(EyeOffIcon2, null) : /* @__PURE__ */ import_react2.default.createElement(EyeIcon2, null)
+      ),
+      autoComplete: "new-password",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    import_ui5.Input,
+    {
+      label: "Confirm password",
+      type: showPass ? "text" : "password",
+      placeholder: "Re-enter your password",
+      value: form.confirm,
+      onChange: set("confirm"),
+      error: fieldErrs.confirm,
+      autoComplete: "new-password",
+      required: true
+    }
+  ), extraFields), /* @__PURE__ */ import_react2.default.createElement(import_ui4.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Create account")), /* @__PURE__ */ import_react2.default.createElement("p", { className: "dauth-footer-text", style: { marginTop: 20 } }, "Already have an account?", " ", /* @__PURE__ */ import_react2.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Sign in")), /* @__PURE__ */ import_react2.default.createElement("p", { className: "dauth-terms" }, "By creating an account you agree to our", " ", /* @__PURE__ */ import_react2.default.createElement("a", { href: "/terms", className: "dauth-link" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ import_react2.default.createElement("a", { href: "/privacy", className: "dauth-link" }, "Privacy Policy"), ".")));
+};
+
+// src/screens/OTPScreen.tsx
+var import_react3 = __toESM(require("react"));
+var import_ui7 = require("@dravyn/ui");
+var import_ui8 = require("@dravyn/ui");
+var OTPScreen = ({
+  email: emailProp,
+  redirectTo = "/dashboard",
+  onSuccess,
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  length = 6
+}) => {
+  const email = emailProp ?? (typeof sessionStorage !== "undefined" ? sessionStorage.getItem("dravyn_pending_email") ?? "" : "");
+  const [otp, setOtp] = import_react3.default.useState(Array(length).fill(""));
+  const [loading, setLoading] = import_react3.default.useState(false);
+  const [resending, setResending] = import_react3.default.useState(false);
+  const [error, setError] = import_react3.default.useState("");
+  const [success, setSuccess] = import_react3.default.useState("");
+  const [countdown, setCountdown] = import_react3.default.useState(60);
+  const inputRefs = import_react3.default.useRef([]);
+  import_react3.default.useEffect(() => {
+    if (countdown <= 0) return;
+    const t = setTimeout(() => setCountdown((c) => c - 1), 1e3);
+    return () => clearTimeout(t);
+  }, [countdown]);
+  import_react3.default.useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  const handleInput = (i, val) => {
+    if (val.length > 1) {
+      const digits = val.replace(/\D/g, "").slice(0, length).split("");
+      const next2 = [...otp];
+      digits.forEach((d, idx) => {
+        if (idx < length) next2[idx] = d;
+      });
+      setOtp(next2);
+      const last = Math.min(digits.length, length - 1);
+      inputRefs.current[last]?.focus();
+      return;
+    }
+    const digit = val.replace(/\D/g, "");
+    const next = [...otp];
+    next[i] = digit;
+    setOtp(next);
+    if (digit && i < length - 1) inputRefs.current[i + 1]?.focus();
+  };
+  const handleKeyDown = (i, e) => {
+    if (e.key === "Backspace" && !otp[i] && i > 0) {
+      inputRefs.current[i - 1]?.focus();
+    }
+  };
+  const handleVerify = async () => {
+    const code = otp.join("");
+    if (code.length < length) {
+      setError("Enter the complete verification code.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/verify-otp`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, otp: code })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Invalid or expired code.");
+        return;
+      }
+      sessionStorage.removeItem("dravyn_pending_email");
+      if (data.accessToken) {
+        localStorage.setItem("dravyn_token", data.accessToken);
+        localStorage.setItem("dravyn_user", JSON.stringify(data.user));
+      }
+      if (onSuccess) onSuccess();
+      else window.location.href = redirectTo;
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    setResending(true);
+    setError("");
+    setSuccess("");
+    try {
+      const res = await fetch(`${apiBase}/auth/resend-otp`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email })
+      });
+      if (res.ok) {
+        setSuccess("A new code has been sent to your email.");
+        setCountdown(60);
+        setOtp(Array(length).fill(""));
+        inputRefs.current[0]?.focus();
+      } else {
+        setError("Could not resend. Try again shortly.");
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setResending(false);
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-otp-icon", "aria-hidden": "true" }, "\u2709"), /* @__PURE__ */ import_react3.default.createElement("h1", { className: "dauth-title" }, "Check your email"), /* @__PURE__ */ import_react3.default.createElement("p", { className: "dauth-sub" }, "We sent a ", length, "-digit code to", /* @__PURE__ */ import_react3.default.createElement("br", null), /* @__PURE__ */ import_react3.default.createElement("strong", { style: { color: "var(--dauth-text)" } }, email || "your email address")), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { margin: "12px 0" } }, /* @__PURE__ */ import_react3.default.createElement(import_ui8.Alert, { variant: "danger" }, error)), success && /* @__PURE__ */ import_react3.default.createElement("div", { style: { margin: "12px 0" } }, /* @__PURE__ */ import_react3.default.createElement(import_ui8.Alert, { variant: "success" }, success)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-otp-boxes", role: "group", "aria-label": "Verification code" }, otp.map((digit, i) => /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      key: i,
+      ref: (el) => {
+        inputRefs.current[i] = el;
+      },
+      className: `dauth-otp-box ${digit ? "dauth-otp-box--filled" : ""}`,
+      type: "text",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      maxLength: length,
+      value: digit,
+      onChange: (e) => handleInput(i, e.target.value),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onFocus: (e) => e.target.select(),
+      "aria-label": `Digit ${i + 1}`
+    }
+  ))), /* @__PURE__ */ import_react3.default.createElement(
+    import_ui7.Button,
+    {
+      variant: "primary",
+      fullWidth: true,
+      loading,
+      onClick: handleVerify,
+      style: { marginTop: 8 }
+    },
+    "Verify email"
+  ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dauth-resend" }, countdown > 0 ? /* @__PURE__ */ import_react3.default.createElement("span", null, "Resend code in ", /* @__PURE__ */ import_react3.default.createElement("strong", { style: { color: "var(--dauth-teal)" } }, countdown, "s")) : /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "dauth-link",
+      onClick: handleResend,
+      disabled: resending
+    },
+    resending ? "Sending\u2026" : "Resend code"
+  )), /* @__PURE__ */ import_react3.default.createElement("p", { className: "dauth-footer-text" }, "Wrong email?", " ", /* @__PURE__ */ import_react3.default.createElement("a", { href: "/auth/register", className: "dauth-link" }, "Go back"))));
+};
+
+// src/screens/ForgotResetScreen.tsx
+var import_react4 = __toESM(require("react"));
+var import_ui9 = require("@dravyn/ui");
+var import_ui10 = require("@dravyn/ui");
+var import_ui11 = require("@dravyn/ui");
+var ForgotPasswordScreen = ({
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001"
+}) => {
+  const [email, setEmail] = import_react4.default.useState("");
+  const [loading, setLoading] = import_react4.default.useState(false);
+  const [error, setError] = import_react4.default.useState("");
+  const [sent, setSent] = import_react4.default.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email.trim()) {
+      setError("Email address is required.");
+      return;
+    }
+    if (!/\S+@\S+\.\S+/.test(email)) {
+      setError("Enter a valid email address.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/forgot-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email.trim().toLowerCase() })
+      });
+      if (res.ok || res.status === 404) {
+        sessionStorage.setItem("dravyn_reset_email", email.trim().toLowerCase());
+        setSent(true);
+      } else {
+        const d = await res.json();
+        setError(d.message ?? "Something went wrong. Try again.");
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (sent) {
+    return /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-otp-icon" }, "\u2713"), /* @__PURE__ */ import_react4.default.createElement("h1", { className: "dauth-title" }, "Check your inbox"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-sub" }, "If ", /* @__PURE__ */ import_react4.default.createElement("strong", { style: { color: "var(--dauth-text)" } }, email), " is registered, you'll receive a reset code shortly."), /* @__PURE__ */ import_react4.default.createElement(
+      import_ui9.Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        style: { marginTop: 20 },
+        onClick: () => window.location.href = "/auth/reset-password"
+      },
+      "Enter reset code"
+    ), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-footer-text" }, /* @__PURE__ */ import_react4.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Back to sign in"))));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react4.default.createElement("h1", { className: "dauth-title" }, "Reset your password"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-sub" }, "Enter your email and we'll send you a reset code."), error && /* @__PURE__ */ import_react4.default.createElement("div", { style: { marginBottom: 14 } }, /* @__PURE__ */ import_react4.default.createElement(import_ui11.Alert, { variant: "danger" }, error)), /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleSubmit, noValidate: true }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-fields" }, /* @__PURE__ */ import_react4.default.createElement(
+    import_ui10.Input,
+    {
+      label: "Email address",
+      type: "email",
+      placeholder: "you@example.com",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      autoComplete: "email",
+      required: true
+    }
+  )), /* @__PURE__ */ import_react4.default.createElement(import_ui9.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Send reset code")), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-footer-text" }, "Remember it?", " ", /* @__PURE__ */ import_react4.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Back to sign in"))));
+};
+var ResetPasswordScreen = ({
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  redirectTo = "/auth/login"
+}) => {
+  const email = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("dravyn_reset_email") ?? "" : "";
+  const [otp, setOtp] = import_react4.default.useState(["", "", "", "", "", ""]);
+  const [password, setPassword] = import_react4.default.useState("");
+  const [confirm, setConfirm] = import_react4.default.useState("");
+  const [showPass, setShowPass] = import_react4.default.useState(false);
+  const [loading, setLoading] = import_react4.default.useState(false);
+  const [error, setError] = import_react4.default.useState("");
+  const [done, setDone] = import_react4.default.useState(false);
+  const inputRefs = import_react4.default.useRef([]);
+  const handleOtpInput = (i, val) => {
+    if (val.length > 1) {
+      const digits = val.replace(/\D/g, "").slice(0, 6).split("");
+      const next2 = [...otp];
+      digits.forEach((d, idx) => {
+        if (idx < 6) next2[idx] = d;
+      });
+      setOtp(next2);
+      inputRefs.current[Math.min(digits.length, 5)]?.focus();
+      return;
+    }
+    const digit = val.replace(/\D/g, "");
+    const next = [...otp];
+    next[i] = digit;
+    setOtp(next);
+    if (digit && i < 5) inputRefs.current[i + 1]?.focus();
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const code = otp.join("");
+    if (code.length < 6) {
+      setError("Enter the complete 6-digit code.");
+      return;
+    }
+    if (!password) {
+      setError("Enter a new password.");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirm) {
+      setError("Passwords do not match.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/reset-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, otp: code, newPassword: password })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Reset failed. Check the code and try again.");
+        return;
+      }
+      sessionStorage.removeItem("dravyn_reset_email");
+      setDone(true);
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const EyeIcon2 = () => /* @__PURE__ */ import_react4.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "12", cy: "12", r: "3" }));
+  const EyeOffIcon2 = () => /* @__PURE__ */ import_react4.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), /* @__PURE__ */ import_react4.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" }));
+  if (done) {
+    return /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-otp-icon", style: { color: "var(--dauth-green)" } }, "\u2713"), /* @__PURE__ */ import_react4.default.createElement("h1", { className: "dauth-title" }, "Password reset!"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-sub" }, "Your password has been updated. You can now sign in."), /* @__PURE__ */ import_react4.default.createElement(
+      import_ui9.Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        style: { marginTop: 20 },
+        onClick: () => window.location.href = redirectTo
+      },
+      "Sign in"
+    )));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react4.default.createElement("h1", { className: "dauth-title" }, "Set new password"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "dauth-sub" }, "Enter the code we sent you and choose a new password."), error && /* @__PURE__ */ import_react4.default.createElement("div", { style: { marginBottom: 14 } }, /* @__PURE__ */ import_react4.default.createElement(import_ui11.Alert, { variant: "danger" }, error)), /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleSubmit, noValidate: true }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-fields" }, /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-label" }, "Reset code"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "dauth-otp-boxes", style: { marginTop: 6 } }, otp.map((d, i) => /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      key: i,
+      ref: (el) => {
+        inputRefs.current[i] = el;
+      },
+      className: `dauth-otp-box ${d ? "dauth-otp-box--filled" : ""}`,
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 6,
+      value: d,
+      onChange: (e) => handleOtpInput(i, e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Backspace" && !d && i > 0) inputRefs.current[i - 1]?.focus();
+      },
+      "aria-label": `Digit ${i + 1}`
+    }
+  )))), /* @__PURE__ */ import_react4.default.createElement(
+    import_ui10.Input,
+    {
+      label: "New password",
+      type: showPass ? "text" : "password",
+      placeholder: "Min. 8 characters",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      rightIcon: /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dauth-eye",
+          onClick: () => setShowPass((v) => !v)
+        },
+        showPass ? /* @__PURE__ */ import_react4.default.createElement(EyeOffIcon2, null) : /* @__PURE__ */ import_react4.default.createElement(EyeIcon2, null)
+      )
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    import_ui10.Input,
+    {
+      label: "Confirm new password",
+      type: showPass ? "text" : "password",
+      placeholder: "Re-enter password",
+      value: confirm,
+      onChange: (e) => setConfirm(e.target.value)
+    }
+  )), /* @__PURE__ */ import_react4.default.createElement(import_ui9.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Reset password"))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ForgotPasswordScreen,
+  LoginScreen,
+  OTPScreen,
+  RegisterScreen,
+  ResetPasswordScreen
+});
+//# sourceMappingURL=index.js.map