@onexapis/cli 1.1.34 → 1.1.37

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";

package/templates/default/sections/auth-login/auth-login-default.tsx

@@ -0,0 +1,238 @@
+/**
+ * Auth Login - Default Template
+ * Clean login form with customizable settings
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreUtils from "@onexapis/core/utils";
+import { useLoginForm } from "../../hooks/use-login-form";
+
+const { getSectionValues } = coreUtils;
+
+export function AuthLoginDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    subheading,
+    usernameLabel,
+    usernamePlaceholder,
+    passwordLabel,
+    passwordPlaceholder,
+    submitButtonText,
+    loadingText,
+    forgotPasswordText,
+    forgotPasswordUrl,
+    registerPromptText,
+    registerLinkText,
+    registerUrl,
+    backgroundColor,
+    cardBackground,
+    primaryColor,
+    textColor,
+    cardBorderRadius,
+  } = settings;
+
+  const {
+    formData,
+    errors,
+    showPassword,
+    isPending,
+    handleInputChange,
+    handleSubmit,
+    toggleShowPassword,
+  } = useLoginForm();
+
+  const bgColor = String(backgroundColor || "#F9FAFB");
+  const cardBg = String(cardBackground || "#FFFFFF");
+  const btnColor = String(primaryColor || "#2563EB");
+  const headingColor = String(textColor || "#111827");
+  const radius = String(cardBorderRadius || "2xl");
+  const radiusClass = `rounded-${radius}`;
+
+  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 */}
+        {errors.form && (
+          <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-600">
+            {errors.form}
+          </div>
+        )}
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Username */}
+          <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={formData.username}
+              onChange={handleInputChange}
+              placeholder={String(usernamePlaceholder)}
+              disabled={isPending || isEditing}
+              className={`h-11 w-full rounded-lg border 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 ${
+                errors.username ? "border-red-400" : "border-gray-300"
+              }`}
+            />
+            {errors.username && (
+              <p className="text-xs text-red-500">{errors.username}</p>
+            )}
+          </div>
+
+          {/* Password */}
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center justify-between">
+              <label
+                htmlFor="password"
+                className="text-sm font-medium text-gray-700"
+              >
+                {String(passwordLabel)} <span className="text-red-500">*</span>
+              </label>
+              {!isEditing && (
+                <a
+                  href={String(forgotPasswordUrl)}
+                  className="text-xs font-medium hover:opacity-80 transition-colors"
+                  style={{ color: btnColor }}
+                  tabIndex={-1}
+                >
+                  {String(forgotPasswordText)}
+                </a>
+              )}
+            </div>
+            <div className="relative">
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                value={formData.password}
+                onChange={handleInputChange}
+                placeholder={String(passwordPlaceholder)}
+                disabled={isPending || isEditing}
+                className={`h-11 w-full rounded-lg border px-4 pr-10 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 ${
+                  errors.password ? "border-red-400" : "border-gray-300"
+                }`}
+              />
+              <button
+                type="button"
+                onClick={toggleShowPassword}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                tabIndex={-1}
+              >
+                {showPassword ? (
+                  <svg
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                  </svg>
+                ) : (
+                  <svg
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                )}
+              </button>
+            </div>
+            {errors.password && (
+              <p className="text-xs text-red-500">{errors.password}</p>
+            )}
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isPending || isEditing}
+            className="h-11 w-full rounded-lg text-sm font-medium text-white transition-opacity 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>
+
+        {/* Register Link */}
+        <div className="mt-6 text-center">
+          <p className="text-sm text-gray-500">
+            {String(registerPromptText)}{" "}
+            {isEditing ? (
+              <span className="font-medium" 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 AuthLoginDefault;

package/templates/default/sections/auth-login/auth-login.schema.ts

@@ -0,0 +1,171 @@
+/**
+ * Auth Login Section Schema
+ * Login form with editable labels and settings
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "heading",
+    type: "text",
+    label: "Heading",
+    default: "Sign In",
+    required: true,
+  },
+  {
+    id: "subheading",
+    type: "text",
+    label: "Subheading",
+    default: "Sign in to manage your orders and enjoy exclusive offers",
+  },
+  {
+    id: "usernameLabel",
+    type: "text",
+    label: "Username Label",
+    default: "Username",
+  },
+  {
+    id: "usernamePlaceholder",
+    type: "text",
+    label: "Username Placeholder",
+    default: "Enter your username or email",
+  },
+  {
+    id: "passwordLabel",
+    type: "text",
+    label: "Password Label",
+    default: "Password",
+  },
+  {
+    id: "passwordPlaceholder",
+    type: "text",
+    label: "Password Placeholder",
+    default: "Enter your password",
+  },
+  {
+    id: "submitButtonText",
+    type: "text",
+    label: "Submit Button Text",
+    default: "Sign In",
+  },
+  {
+    id: "loadingText",
+    type: "text",
+    label: "Loading Text",
+    default: "Signing in...",
+  },
+  {
+    id: "forgotPasswordText",
+    type: "text",
+    label: "Forgot Password Text",
+    default: "Forgot password?",
+  },
+  {
+    id: "forgotPasswordUrl",
+    type: "url",
+    label: "Forgot Password URL",
+    default: "/forgot-password",
+  },
+  {
+    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: "successRedirectUrl",
+    type: "url",
+    label: "Redirect URL after login",
+    default: "/",
+  },
+  {
+    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 authLoginSchema: SectionSchema = {
+  type: "my-simple-auth-login",
+  name: "Auth Login",
+  description: "Login form with username and password",
+  category: "auth",
+  icon: "log-in",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Login",
+      description: "Clean login form with customizable labels",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      heading: "Sign In",
+      subheading: "Sign in to manage your orders and enjoy exclusive offers",
+      usernameLabel: "Username",
+      usernamePlaceholder: "Enter your username or email",
+      passwordLabel: "Password",
+      passwordPlaceholder: "Enter your password",
+      submitButtonText: "Sign In",
+      loadingText: "Signing in...",
+      forgotPasswordText: "Forgot password?",
+      forgotPasswordUrl: "/forgot-password",
+      registerPromptText: "Don't have an account?",
+      registerLinkText: "Sign up",
+      registerUrl: "/register",
+      successRedirectUrl: "/",
+      backgroundColor: "#F9FAFB",
+      cardBackground: "#FFFFFF",
+      primaryColor: "#2563EB",
+      textColor: "#111827",
+      cardBorderRadius: "2xl",
+    },
+  },
+  tags: ["auth", "login", "sign-in"],
+};

package/templates/default/sections/auth-login/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Auth Login Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { AuthLoginDefault } from "./auth-login-default";
+
+export const authLoginComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: AuthLoginDefault };
+
+export { authLoginSchema } from "./auth-login.schema";