@onexapis/cli 1.1.34 → 1.1.37

package/templates/default/hooks/use-verify-code-form.ts

@@ -0,0 +1,224 @@
+/**
+ * Verify Code Form Hook
+ * Manages OTP input state, countdown timer, and submission via useAuth
+ */
+
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useAuth } from "@onexapis/core/hooks";
+
+export interface UseVerifyCodeFormReturn {
+  code: string[];
+  error: string | null;
+  countdown: number;
+  email: string;
+  username: string;
+  isVerifying: boolean;
+  isResending: boolean;
+  isLoading: boolean;
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
+  handleCodeChange: (index: number, value: string) => void;
+  handleKeyDown: (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+  handlePaste: (e: React.ClipboardEvent) => void;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleResend: () => void;
+  setError: (error: string | null) => void;
+}
+
+export function useVerifyCodeForm(): UseVerifyCodeFormReturn {
+  const [code, setCode] = useState<string[]>(["", "", "", "", "", ""]);
+  const [error, setError] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(0);
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isResending, setIsResending] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const { verifyCode, verifyCodeReset, resendCode } = useAuth();
+
+  // Extract username from URL search params
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      const u = params.get("username") || "";
+      setUsername(u);
+
+      if (u) {
+        const storedEmail = localStorage.getItem(`register_email_${u}`);
+        if (storedEmail) setEmail(storedEmail);
+
+        const storedValue = localStorage.getItem(`resend_countdown_${u}`);
+        if (storedValue) {
+          const expiryTimestamp = parseInt(storedValue, 10);
+          const remaining = Math.max(
+            0,
+            Math.floor((expiryTimestamp - Date.now()) / 1000)
+          );
+          if (remaining > 0) setCountdown(remaining);
+        }
+      }
+    }
+  }, []);
+
+  // Countdown timer
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1000);
+      return () => clearInterval(timer);
+    }
+  }, [countdown]);
+
+  const handleSubmitCode = useCallback(
+    async (fullCode: string) => {
+      if (!username) {
+        setError("Account information not found");
+        return;
+      }
+
+      setIsVerifying(true);
+      setError(null);
+      try {
+        const params = new URLSearchParams(window.location.search);
+        const mode = params.get("mode");
+
+        if (mode === "reset") {
+          const result = await verifyCodeReset({ username, code: fullCode });
+          // Clean up and redirect to reset-password
+          localStorage.removeItem(`register_email_${username}`);
+          localStorage.removeItem(`resend_countdown_${username}`);
+          const session = result?.session;
+          window.location.href = session
+            ? `/reset-password?session=${encodeURIComponent(session)}`
+            : "/reset-password";
+        } else {
+          await verifyCode({ username, code: fullCode });
+          // Clean up and redirect to login
+          localStorage.removeItem(`register_email_${username}`);
+          localStorage.removeItem(`resend_countdown_${username}`);
+          window.location.href = "/login";
+        }
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Verification failed";
+        setError(message);
+      } finally {
+        setIsVerifying(false);
+      }
+    },
+    [username, verifyCode, verifyCodeReset]
+  );
+
+  const handleCodeChange = useCallback(
+    (index: number, value: string) => {
+      const digit = value.replace(/\D/g, "").slice(-1);
+      const newCode = [...code];
+      newCode[index] = digit;
+      setCode(newCode);
+      setError(null);
+
+      if (digit && index < 5) {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      if (digit && index === 5) {
+        const fullCode = newCode.join("");
+        if (fullCode.length === 6) {
+          handleSubmitCode(fullCode);
+        }
+      }
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Backspace" && !code[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [code]
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const pastedData = e.clipboardData.getData("text");
+      const digits = pastedData.replace(/\D/g, "").slice(0, 6);
+
+      if (digits.length > 0) {
+        const newCode = [...code];
+        for (let i = 0; i < 6; i++) {
+          newCode[i] = digits[i] || "";
+        }
+        setCode(newCode);
+
+        const lastIndex = Math.min(digits.length - 1, 5);
+        inputRefs.current[lastIndex]?.focus();
+
+        if (digits.length === 6) {
+          handleSubmitCode(digits);
+        }
+      }
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const fullCode = code.join("");
+      if (fullCode.length !== 6) {
+        setError("Please enter the full 6-digit code");
+        return;
+      }
+      handleSubmitCode(fullCode);
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleResend = useCallback(async () => {
+    if (countdown > 0 || !username) return;
+
+    setIsResending(true);
+    try {
+      await resendCode({ username });
+      const expiryTimestamp = Date.now() + 60 * 1000;
+      localStorage.setItem(
+        `resend_countdown_${username}`,
+        expiryTimestamp.toString()
+      );
+      setCountdown(60);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to resend code";
+      setError(message);
+    } finally {
+      setIsResending(false);
+    }
+  }, [countdown, username, resendCode]);
+
+  return {
+    code,
+    error,
+    countdown,
+    email,
+    username,
+    isVerifying,
+    isResending,
+    isLoading: isVerifying || isResending,
+    inputRefs,
+    handleCodeChange,
+    handleKeyDown,
+    handlePaste,
+    handleSubmit,
+    handleResend,
+    setError,
+  };
+}

package/templates/default/index.ts

@@ -14,13 +14,33 @@ export { default as layoutConfig, simpleLayoutConfig } from "./theme.layout";
 export { default as homePageConfig } from "./pages/home";
 export { default as aboutPageConfig } from "./pages/about";
 export { default as showcasePageConfig } from "./pages/showcase";
+export { default as loginPageConfig } from "./pages/login";
+export { default as registerPageConfig } from "./pages/register";
+export { default as forgotPasswordPageConfig } from "./pages/forgot-password";
+export { default as verifyCodePageConfig } from "./pages/verify-code";
+export { default as profilePageConfig } from "./pages/profile";
 
 // Page map for dynamic access
 export const pages = {
   home: () => import("./pages/home").then((m) => m.default),
   about: () => import("./pages/about").then((m) => m.default),
   showcase: () => import("./pages/showcase").then((m) => m.default),
+  login: () => import("./pages/login").then((m) => m.default),
+  register: () => import("./pages/register").then((m) => m.default),
+  "forgot-password": () =>
+    import("./pages/forgot-password").then((m) => m.default),
+  "verify-code": () => import("./pages/verify-code").then((m) => m.default),
+  profile: () => import("./pages/profile").then((m) => m.default),
 };
 
 // Page slugs (for discovery)
-export const pageList = ["home", "about", "showcase"] as const;
+export const pageList = [
+  "home",
+  "about",
+  "showcase",
+  "login",
+  "register",
+  "forgot-password",
+  "verify-code",
+  "profile",
+] as const;

package/templates/default/pages/forgot-password.ts

@@ -0,0 +1,41 @@
+/**
+ * My Simple Theme - Forgot Password Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const forgotPasswordPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Forgot Password",
+  handle: "forgot-password",
+  path: "/forgot-password",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+  hideHeader: true,
+  hideFooter: true,
+
+  seo: {
+    title: "Forgot Password",
+    description: "Reset your password",
+  },
+
+  sections: [
+    {
+      id: "auth-forgot-password-1",
+      type: "my-simple-auth-forgot-password",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default forgotPasswordPageConfig;

package/templates/default/pages/login.ts

@@ -0,0 +1,41 @@
+/**
+ * My Simple Theme - Login Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const loginPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Login",
+  handle: "login",
+  path: "/login",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+  hideHeader: true,
+  hideFooter: true,
+
+  seo: {
+    title: "Sign In",
+    description: "Sign in to your account",
+  },
+
+  sections: [
+    {
+      id: "auth-login-1",
+      type: "my-simple-auth-login",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default loginPageConfig;

package/templates/default/pages/profile.ts

@@ -0,0 +1,39 @@
+/**
+ * My Simple Theme - Profile Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const profilePageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Profile",
+  handle: "profile",
+  path: "/profile",
+  type: "account",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "My Profile",
+    description: "Manage your account profile",
+  },
+
+  sections: [
+    {
+      id: "profile-1",
+      type: "my-simple-profile",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default profilePageConfig;

package/templates/default/pages/register.ts

@@ -0,0 +1,41 @@
+/**
+ * My Simple Theme - Register Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const registerPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Register",
+  handle: "register",
+  path: "/register",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+  hideHeader: true,
+  hideFooter: true,
+
+  seo: {
+    title: "Create Account",
+    description: "Create a new account",
+  },
+
+  sections: [
+    {
+      id: "auth-register-1",
+      type: "my-simple-auth-register",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default registerPageConfig;

package/templates/default/pages/verify-code.ts

@@ -0,0 +1,41 @@
+/**
+ * My Simple Theme - Verify Code Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const verifyCodePageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Verify Code",
+  handle: "verify-code",
+  path: "/verify-code",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+  hideHeader: true,
+  hideFooter: true,
+
+  seo: {
+    title: "Verify Your Account",
+    description: "Enter the verification code sent to your email",
+  },
+
+  sections: [
+    {
+      id: "auth-verify-code-1",
+      type: "my-simple-auth-verify-code",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default verifyCodePageConfig;

package/templates/default/sections/auth-forgot-password/auth-forgot-password-default.tsx

@@ -0,0 +1,192 @@
+/**
+ * Auth Forgot Password - Default Template
+ * Clean forgot password form with customizable settings
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreUtils from "@onexapis/core/utils";
+import { useForgotPasswordForm } from "../../hooks/use-forgot-password-form";
+
+const { getSectionValues } = coreUtils;
+
+export function AuthForgotPasswordDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    subheading,
+    usernameLabel,
+    usernamePlaceholder,
+    submitButtonText,
+    loadingText,
+    backToLoginText,
+    loginUrl,
+    registerPromptText,
+    registerLinkText,
+    registerUrl,
+    backgroundColor,
+    cardBackground,
+    primaryColor,
+    textColor,
+    cardBorderRadius,
+  } = settings;
+
+  const { username, error, isPending, handleUsernameChange, handleSubmit } =
+    useForgotPasswordForm();
+
+  const bgColor = String(backgroundColor || "#F9FAFB");
+  const cardBg = String(cardBackground || "#FFFFFF");
+  const btnColor = String(primaryColor || "#2563EB");
+  const headingColor = String(textColor || "#111827");
+  const radiusClass = `rounded-${String(cardBorderRadius || "2xl")}`;
+
+  return (
+    <section
+      className="min-h-screen w-full flex items-center justify-center p-4"
+      style={{ backgroundColor: bgColor }}
+      data-section-id={section.id}
+      data-section-type={section.type}
+      data-section-template="default"
+    >
+      <div
+        className={`w-full max-w-md shadow-lg p-8 ${radiusClass}`}
+        style={{ backgroundColor: cardBg }}
+      >
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold" style={{ color: headingColor }}>
+            {String(heading)}
+          </h1>
+          {subheading && (
+            <p className="mt-2 text-sm text-gray-500">{String(subheading)}</p>
+          )}
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-600">
+            {error}
+          </div>
+        )}
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Username / Email */}
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="username"
+              className="text-sm font-medium text-gray-700"
+            >
+              {String(usernameLabel)} <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="username"
+              name="username"
+              type="text"
+              value={username}
+              onChange={handleUsernameChange}
+              placeholder={String(usernamePlaceholder)}
+              disabled={isPending || isEditing}
+              className="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
+            />
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isPending || isEditing}
+            className="h-11 w-full rounded-lg text-sm font-medium text-white transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            style={{ backgroundColor: btnColor }}
+          >
+            {isPending && (
+              <svg
+                className="h-4 w-4 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+            {isPending ? String(loadingText) : String(submitButtonText)}
+          </button>
+        </form>
+
+        {/* Back to Login */}
+        <div className="mt-6 text-center">
+          {isEditing ? (
+            <span className="inline-flex items-center gap-2 text-sm text-gray-500">
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+              {String(backToLoginText)}
+            </span>
+          ) : (
+            <a
+              href={String(loginUrl)}
+              className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 transition-colors"
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+              {String(backToLoginText)}
+            </a>
+          )}
+        </div>
+
+        {/* Register Link */}
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-500">
+            {String(registerPromptText)}{" "}
+            {isEditing ? (
+              <span
+                className="font-medium hover:opacity-80"
+                style={{ color: btnColor }}
+              >
+                {String(registerLinkText)}
+              </span>
+            ) : (
+              <a
+                href={String(registerUrl)}
+                className="font-medium hover:opacity-80 transition-colors"
+                style={{ color: btnColor }}
+              >
+                {String(registerLinkText)}
+              </a>
+            )}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default AuthForgotPasswordDefault;