@onexapis/cli 1.1.36 → 1.1.37

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;

package/templates/default/sections/auth-forgot-password/auth-forgot-password.schema.ts

@@ -0,0 +1,150 @@
+/**
+ * Auth Forgot Password Section Schema
+ * Forgot password form with editable labels
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "heading",
+    type: "text",
+    label: "Heading",
+    default: "Forgot Password",
+    required: true,
+  },
+  {
+    id: "subheading",
+    type: "text",
+    label: "Subheading",
+    default: "Enter your email or username to receive a verification code",
+  },
+  {
+    id: "usernameLabel",
+    type: "text",
+    label: "Email/Username Label",
+    default: "Email",
+  },
+  {
+    id: "usernamePlaceholder",
+    type: "text",
+    label: "Placeholder",
+    default: "Enter your email or username",
+  },
+  {
+    id: "submitButtonText",
+    type: "text",
+    label: "Submit Button Text",
+    default: "Send Verification Code",
+  },
+  {
+    id: "loadingText",
+    type: "text",
+    label: "Loading Text",
+    default: "Sending...",
+  },
+  {
+    id: "backToLoginText",
+    type: "text",
+    label: "Back to Login Text",
+    default: "Back to login",
+  },
+  {
+    id: "loginUrl",
+    type: "url",
+    label: "Login URL",
+    default: "/login",
+  },
+  {
+    id: "registerPromptText",
+    type: "text",
+    label: "Register Prompt Text",
+    default: "Don't have an account?",
+  },
+  {
+    id: "registerLinkText",
+    type: "text",
+    label: "Register Link Text",
+    default: "Sign up",
+  },
+  {
+    id: "registerUrl",
+    type: "url",
+    label: "Register URL",
+    default: "/register",
+  },
+  {
+    id: "backgroundColor",
+    type: "color",
+    label: "Background Color",
+    default: "#F9FAFB",
+  },
+  {
+    id: "cardBackground",
+    type: "color",
+    label: "Card Background",
+    default: "#FFFFFF",
+  },
+  {
+    id: "primaryColor",
+    type: "color",
+    label: "Primary Color (buttons)",
+    default: "#2563EB",
+  },
+  {
+    id: "textColor",
+    type: "color",
+    label: "Heading Text Color",
+    default: "#111827",
+  },
+  {
+    id: "cardBorderRadius",
+    type: "select",
+    label: "Card Border Radius",
+    default: "2xl",
+    options: [
+      { label: "Small", value: "lg" },
+      { label: "Medium", value: "xl" },
+      { label: "Large", value: "2xl" },
+      { label: "Extra Large", value: "3xl" },
+    ],
+  },
+];
+
+export const authForgotPasswordSchema: SectionSchema = {
+  type: "my-simple-auth-forgot-password",
+  name: "Auth Forgot Password",
+  description: "Forgot password form with email/username input",
+  category: "auth",
+  icon: "key",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Forgot Password",
+      description: "Clean forgot password form",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      heading: "Forgot Password",
+      subheading: "Enter your email or username to receive a verification code",
+      usernameLabel: "Email",
+      usernamePlaceholder: "Enter your email or username",
+      submitButtonText: "Send Verification Code",
+      loadingText: "Sending...",
+      backToLoginText: "Back to login",
+      loginUrl: "/login",
+      registerPromptText: "Don't have an account?",
+      registerLinkText: "Sign up",
+      registerUrl: "/register",
+      backgroundColor: "#F9FAFB",
+      cardBackground: "#FFFFFF",
+      primaryColor: "#2563EB",
+      textColor: "#111827",
+      cardBorderRadius: "2xl",
+    },
+  },
+  tags: ["auth", "forgot-password", "reset"],
+};

package/templates/default/sections/auth-forgot-password/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Auth Forgot Password Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { AuthForgotPasswordDefault } from "./auth-forgot-password-default";
+
+export const authForgotPasswordComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: AuthForgotPasswordDefault };
+
+export { authForgotPasswordSchema } from "./auth-forgot-password.schema";