@onexapis/cli 1.1.34 → 1.1.37

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

@@ -0,0 +1,327 @@
+/**
+ * Auth Register - Default Template
+ * Clean registration form with customizable settings
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreUtils from "@onexapis/core/utils";
+import { useRegisterForm } from "../../hooks/use-register-form";
+
+const { getSectionValues } = coreUtils;
+
+export function AuthRegisterDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    subheading,
+    emailLabel,
+    emailPlaceholder,
+    usernameLabel,
+    usernamePlaceholder,
+    passwordLabel,
+    passwordPlaceholder,
+    confirmPasswordLabel,
+    confirmPasswordPlaceholder,
+    submitButtonText,
+    loadingText,
+    loginPromptText,
+    loginLinkText,
+    loginUrl,
+    passwordRequirementText,
+    backgroundColor,
+    cardBackground,
+    primaryColor,
+    textColor,
+    cardBorderRadius,
+  } = settings;
+
+  const {
+    formData,
+    errors,
+    showPassword,
+    showConfirmPassword,
+    isPending,
+    handleInputChange,
+    handleSubmit,
+    toggleShowPassword,
+    toggleShowConfirmPassword,
+  } = useRegisterForm();
+
+  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 */}
+        {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-4">
+          {/* Email */}
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="email"
+              className="text-sm font-medium text-gray-700"
+            >
+              {String(emailLabel)} <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="text"
+              value={formData.email}
+              onChange={handleInputChange}
+              placeholder={String(emailPlaceholder)}
+              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.email ? "border-red-400" : "border-gray-300"
+              }`}
+            />
+            {errors.email && (
+              <p className="text-xs text-red-500">{errors.email}</p>
+            )}
+          </div>
+
+          {/* 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">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium text-gray-700"
+            >
+              {String(passwordLabel)} <span className="text-red-500">*</span>
+            </label>
+            <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>
+            ) : (
+              <p className="text-xs text-gray-400 flex items-start gap-1">
+                <svg
+                  className="h-3 w-3 mt-0.5 shrink-0"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {String(passwordRequirementText)}
+              </p>
+            )}
+          </div>
+
+          {/* Confirm Password */}
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="confirmPassword"
+              className="text-sm font-medium text-gray-700"
+            >
+              {String(confirmPasswordLabel)}{" "}
+              <span className="text-red-500">*</span>
+            </label>
+            <div className="relative">
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type={showConfirmPassword ? "text" : "password"}
+                value={formData.confirmPassword}
+                onChange={handleInputChange}
+                placeholder={String(confirmPasswordPlaceholder)}
+                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.confirmPassword ? "border-red-400" : "border-gray-300"
+                }`}
+              />
+              <button
+                type="button"
+                onClick={toggleShowConfirmPassword}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                tabIndex={-1}
+              >
+                {showConfirmPassword ? (
+                  <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.confirmPassword && (
+              <p className="text-xs text-red-500">{errors.confirmPassword}</p>
+            )}
+          </div>
+
+          {/* Submit Button */}
+          <div className="pt-1">
+            <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>
+          </div>
+        </form>
+
+        {/* Login Link */}
+        <div className="mt-6 text-center">
+          <p className="text-sm text-gray-500">
+            {String(loginPromptText)}{" "}
+            {isEditing ? (
+              <span className="font-medium" style={{ color: btnColor }}>
+                {String(loginLinkText)}
+              </span>
+            ) : (
+              <a
+                href={String(loginUrl)}
+                className="font-medium hover:opacity-80 transition-colors"
+                style={{ color: btnColor }}
+              >
+                {String(loginLinkText)}
+              </a>
+            )}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default AuthRegisterDefault;

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

@@ -0,0 +1,188 @@
+/**
+ * Auth Register Section Schema
+ * Registration form with editable labels and settings
+ */
+
+import type { SectionSchema, FieldDefinition } from "@onexapis/core/types";
+
+const commonSettings: FieldDefinition[] = [
+  {
+    id: "heading",
+    type: "text",
+    label: "Heading",
+    default: "Create Account",
+    required: true,
+  },
+  {
+    id: "subheading",
+    type: "text",
+    label: "Subheading",
+    default: "Create an account to get exclusive offers and track your orders",
+  },
+  {
+    id: "emailLabel",
+    type: "text",
+    label: "Email Label",
+    default: "Email",
+  },
+  {
+    id: "emailPlaceholder",
+    type: "text",
+    label: "Email Placeholder",
+    default: "example@email.com",
+  },
+  {
+    id: "usernameLabel",
+    type: "text",
+    label: "Username Label",
+    default: "Username",
+  },
+  {
+    id: "usernamePlaceholder",
+    type: "text",
+    label: "Username Placeholder",
+    default: "Enter a username",
+  },
+  {
+    id: "passwordLabel",
+    type: "text",
+    label: "Password Label",
+    default: "Password",
+  },
+  {
+    id: "passwordPlaceholder",
+    type: "text",
+    label: "Password Placeholder",
+    default: "At least 8 characters",
+  },
+  {
+    id: "confirmPasswordLabel",
+    type: "text",
+    label: "Confirm Password Label",
+    default: "Confirm Password",
+  },
+  {
+    id: "confirmPasswordPlaceholder",
+    type: "text",
+    label: "Confirm Password Placeholder",
+    default: "Re-enter your password",
+  },
+  {
+    id: "submitButtonText",
+    type: "text",
+    label: "Submit Button Text",
+    default: "Sign Up",
+  },
+  {
+    id: "loadingText",
+    type: "text",
+    label: "Loading Text",
+    default: "Creating account...",
+  },
+  {
+    id: "loginPromptText",
+    type: "text",
+    label: "Login Prompt Text",
+    default: "Already have an account?",
+  },
+  {
+    id: "loginLinkText",
+    type: "text",
+    label: "Login Link Text",
+    default: "Sign in",
+  },
+  {
+    id: "loginUrl",
+    type: "url",
+    label: "Login URL",
+    default: "/login",
+  },
+  {
+    id: "passwordRequirementText",
+    type: "text",
+    label: "Password Requirement",
+    default:
+      "Password must be at least 8 characters with uppercase, lowercase, and a number",
+  },
+  {
+    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 authRegisterSchema: SectionSchema = {
+  type: "my-simple-auth-register",
+  name: "Auth Register",
+  description: "Registration form with email, username, and password",
+  category: "auth",
+  icon: "user-plus",
+  settings: commonSettings,
+  templates: [
+    {
+      id: "default",
+      name: "Default Register",
+      description: "Clean registration form with validation",
+      isDefault: true,
+    },
+  ],
+  defaults: {
+    settings: {
+      heading: "Create Account",
+      subheading:
+        "Create an account to get exclusive offers and track your orders",
+      emailLabel: "Email",
+      emailPlaceholder: "example@email.com",
+      usernameLabel: "Username",
+      usernamePlaceholder: "Enter a username",
+      passwordLabel: "Password",
+      passwordPlaceholder: "At least 8 characters",
+      confirmPasswordLabel: "Confirm Password",
+      confirmPasswordPlaceholder: "Re-enter your password",
+      submitButtonText: "Sign Up",
+      loadingText: "Creating account...",
+      loginPromptText: "Already have an account?",
+      loginLinkText: "Sign in",
+      loginUrl: "/login",
+      passwordRequirementText:
+        "Password must be at least 8 characters with uppercase, lowercase, and a number",
+      backgroundColor: "#F9FAFB",
+      cardBackground: "#FFFFFF",
+      primaryColor: "#2563EB",
+      textColor: "#111827",
+      cardBorderRadius: "2xl",
+    },
+  },
+  tags: ["auth", "register", "sign-up"],
+};

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

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