@onexapis/cli 1.1.37 → 1.1.38

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

@@ -1,224 +0,0 @@
-/**
- * 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/pages/forgot-password.ts

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,192 +0,0 @@
-/**
- * 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;