@onexapis/cli 1.1.38 → 1.1.39

package/templates/default/sections/profile/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Profile Section
+ * Exports schema and component templates
+ */
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import { ProfileDefault } from "./profile-default";
+
+export const profileComponents: Record<
+  string,
+  React.ComponentType<SectionComponentProps>
+> = { default: ProfileDefault };
+
+export { profileSchema } from "./profile.schema";

package/templates/default/sections/profile/profile-default.tsx

@@ -0,0 +1,522 @@
+/**
+ * Profile - Default Template
+ * User profile page with form fields and change password
+ */
+
+"use client";
+
+import type { SectionComponentProps } from "@onexapis/core/types";
+import coreUtils from "@onexapis/core/utils";
+import { useProfileForm } from "../../hooks/use-profile-form";
+
+const { getSectionValues } = coreUtils;
+
+export function ProfileDefault({
+  section,
+  schema,
+  isEditing,
+}: SectionComponentProps) {
+  const { settings } = getSectionValues(section, schema);
+  const {
+    heading,
+    nameLabel,
+    namePlaceholder,
+    emailLabel,
+    phoneLabel,
+    phonePlaceholder,
+    addressLabel,
+    addressPlaceholder,
+    changePasswordText,
+    updateButtonText,
+    updatingText,
+    currentPasswordLabel,
+    currentPasswordPlaceholder,
+    newPasswordLabel,
+    newPasswordPlaceholder,
+    confirmPasswordLabel,
+    confirmPasswordPlaceholder,
+    changePasswordButtonText,
+    changingPasswordText,
+    cancelText,
+    passwordRequirementText,
+    logoutText,
+    backgroundColor,
+    cardBackground,
+    primaryColor,
+    textColor,
+    cardBorderRadius,
+  } = settings;
+
+  const profile = useProfileForm();
+
+  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")}`;
+
+  const { passwordErrors } = profile;
+
+  // Loading skeleton
+  if (profile.isLoading && !isEditing) {
+    return (
+      <section
+        className="py-12"
+        style={{ backgroundColor: bgColor }}
+        data-section-id={section.id}
+        data-section-type={section.type}
+        data-section-template="default"
+      >
+        <div className="container mx-auto px-4 max-w-2xl">
+          <div
+            className={`shadow-lg p-8 animate-pulse ${radiusClass}`}
+            style={{ backgroundColor: cardBg }}
+          >
+            <div className="h-8 bg-gray-200 rounded w-48 mb-8" />
+            <div className="space-y-6">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i}>
+                  <div className="h-4 bg-gray-200 rounded w-24 mb-2" />
+                  <div className="h-11 bg-gray-200 rounded-lg" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Not authenticated
+  if (!profile.isAuthenticated && !isEditing) {
+    return (
+      <section
+        className="py-12"
+        style={{ backgroundColor: bgColor }}
+        data-section-id={section.id}
+        data-section-type={section.type}
+        data-section-template="default"
+      >
+        <div className="container mx-auto px-4 max-w-2xl">
+          <div
+            className={`shadow-lg p-8 text-center ${radiusClass}`}
+            style={{ backgroundColor: cardBg }}
+          >
+            <h2
+              className="text-xl font-semibold mb-4"
+              style={{ color: headingColor }}
+            >
+              Please sign in to view your profile
+            </h2>
+            <a
+              href="/login"
+              className="inline-block px-6 py-2.5 text-white text-sm font-medium rounded-lg hover:opacity-90 transition-colors"
+              style={{ backgroundColor: btnColor }}
+            >
+              Sign In
+            </a>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      className="py-12"
+      style={{ backgroundColor: bgColor }}
+      data-section-id={section.id}
+      data-section-type={section.type}
+      data-section-template="default"
+    >
+      <div className="container mx-auto px-4 max-w-2xl">
+        <div
+          className={`shadow-lg overflow-hidden ${radiusClass}`}
+          style={{ backgroundColor: cardBg }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-8 pt-8 pb-2">
+            <h1 className="text-2xl font-bold" style={{ color: headingColor }}>
+              {String(heading)}
+            </h1>
+            {!isEditing && (
+              <button
+                type="button"
+                onClick={profile.handleLogout}
+                className="text-sm text-gray-500 hover:text-red-600 transition-colors"
+              >
+                {String(logoutText)}
+              </button>
+            )}
+          </div>
+
+          {/* Profile Form */}
+          <form onSubmit={profile.handleSubmit} className="px-8 py-6 space-y-5">
+            {/* Error */}
+            {profile.submitError && (
+              <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-600">
+                {profile.submitError}
+              </div>
+            )}
+
+            {/* Name */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="profile-name"
+                className="text-sm font-medium text-gray-700"
+              >
+                {String(nameLabel)}
+              </label>
+              <input
+                id="profile-name"
+                type="text"
+                value={profile.formData.name}
+                onChange={(e) =>
+                  profile.handleFieldChange("name", e.target.value)
+                }
+                placeholder={String(namePlaceholder)}
+                disabled={profile.isSubmitting || 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>
+
+            {/* Email (read-only) */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="profile-email"
+                className="text-sm font-medium text-gray-700"
+              >
+                {String(emailLabel)}
+              </label>
+              <input
+                id="profile-email"
+                type="text"
+                value={profile.formData.email}
+                disabled
+                className="h-11 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 text-sm text-gray-500 outline-none"
+              />
+            </div>
+
+            {/* Phone */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="profile-phone"
+                className="text-sm font-medium text-gray-700"
+              >
+                {String(phoneLabel)}
+              </label>
+              <input
+                id="profile-phone"
+                type="tel"
+                value={profile.formData.phone}
+                onChange={(e) =>
+                  profile.handleFieldChange("phone", e.target.value)
+                }
+                placeholder={String(phonePlaceholder)}
+                disabled={profile.isSubmitting || 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>
+
+            {/* Address */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="profile-address"
+                className="text-sm font-medium text-gray-700"
+              >
+                {String(addressLabel)}
+              </label>
+              <input
+                id="profile-address"
+                type="text"
+                value={profile.formData.address}
+                onChange={(e) =>
+                  profile.handleFieldChange("address", e.target.value)
+                }
+                placeholder={String(addressPlaceholder)}
+                disabled={profile.isSubmitting || 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>
+          </form>
+
+          {/* Update Button Footer */}
+          <div className="flex justify-end border-t border-gray-100 bg-gray-50/50 px-8 py-4">
+            <button
+              type="button"
+              onClick={profile.handleSubmit}
+              disabled={profile.isSubmitting || !profile.isDirty || isEditing}
+              className="px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              style={{ backgroundColor: btnColor }}
+            >
+              {profile.isSubmitting && (
+                <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>
+              )}
+              {profile.isSubmitting
+                ? String(updatingText)
+                : String(updateButtonText)}
+            </button>
+          </div>
+
+          {/* Change Password Section */}
+          <div className="border-t border-gray-100 px-8 py-6">
+            {!profile.showPasswordForm ? (
+              <button
+                type="button"
+                onClick={() => profile.setShowPasswordForm(true)}
+                disabled={isEditing}
+                className="text-sm font-medium hover:opacity-80 transition-colors disabled:opacity-50"
+                style={{ color: btnColor }}
+              >
+                {String(changePasswordText)}
+              </button>
+            ) : (
+              <div className="space-y-4">
+                <h3
+                  className="text-base font-semibold"
+                  style={{ color: headingColor }}
+                >
+                  {String(changePasswordText)}
+                </h3>
+
+                {passwordErrors.form && (
+                  <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-600">
+                    {passwordErrors.form}
+                  </div>
+                )}
+
+                {/* Current Password */}
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="current-password"
+                    className="text-sm font-medium text-gray-700"
+                  >
+                    {String(currentPasswordLabel)}{" "}
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      id="current-password"
+                      type={profile.showCurrentPassword ? "text" : "password"}
+                      value={profile.passwordData.currentPassword}
+                      onChange={(e) =>
+                        profile.handlePasswordFieldChange(
+                          "currentPassword",
+                          e.target.value
+                        )
+                      }
+                      placeholder={String(currentPasswordPlaceholder)}
+                      disabled={profile.isChangingPassword}
+                      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 ${
+                        passwordErrors.currentPassword
+                          ? "border-red-400"
+                          : "border-gray-300"
+                      }`}
+                    />
+                    <button
+                      type="button"
+                      onClick={profile.toggleCurrentPassword}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                      tabIndex={-1}
+                    >
+                      <EyeIcon open={profile.showCurrentPassword} />
+                    </button>
+                  </div>
+                  {passwordErrors.currentPassword && (
+                    <p className="text-xs text-red-500">
+                      {passwordErrors.currentPassword}
+                    </p>
+                  )}
+                </div>
+
+                {/* New Password */}
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="new-password"
+                    className="text-sm font-medium text-gray-700"
+                  >
+                    {String(newPasswordLabel)}{" "}
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      id="new-password"
+                      type={profile.showNewPassword ? "text" : "password"}
+                      value={profile.passwordData.newPassword}
+                      onChange={(e) =>
+                        profile.handlePasswordFieldChange(
+                          "newPassword",
+                          e.target.value
+                        )
+                      }
+                      placeholder={String(newPasswordPlaceholder)}
+                      disabled={profile.isChangingPassword}
+                      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 ${
+                        passwordErrors.newPassword
+                          ? "border-red-400"
+                          : "border-gray-300"
+                      }`}
+                    />
+                    <button
+                      type="button"
+                      onClick={profile.toggleNewPassword}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                      tabIndex={-1}
+                    >
+                      <EyeIcon open={profile.showNewPassword} />
+                    </button>
+                  </div>
+                  {passwordErrors.newPassword ? (
+                    <p className="text-xs text-red-500">
+                      {passwordErrors.newPassword}
+                    </p>
+                  ) : (
+                    <p className="text-xs text-gray-400">
+                      {String(passwordRequirementText)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Confirm Password */}
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="confirm-new-password"
+                    className="text-sm font-medium text-gray-700"
+                  >
+                    {String(confirmPasswordLabel)}{" "}
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      id="confirm-new-password"
+                      type={profile.showConfirmPassword ? "text" : "password"}
+                      value={profile.passwordData.confirmPassword}
+                      onChange={(e) =>
+                        profile.handlePasswordFieldChange(
+                          "confirmPassword",
+                          e.target.value
+                        )
+                      }
+                      placeholder={String(confirmPasswordPlaceholder)}
+                      disabled={profile.isChangingPassword}
+                      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 ${
+                        passwordErrors.confirmPassword
+                          ? "border-red-400"
+                          : "border-gray-300"
+                      }`}
+                    />
+                    <button
+                      type="button"
+                      onClick={profile.toggleConfirmPassword}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                      tabIndex={-1}
+                    >
+                      <EyeIcon open={profile.showConfirmPassword} />
+                    </button>
+                  </div>
+                  {passwordErrors.confirmPassword && (
+                    <p className="text-xs text-red-500">
+                      {passwordErrors.confirmPassword}
+                    </p>
+                  )}
+                </div>
+
+                {/* Buttons */}
+                <div className="flex items-center gap-3 pt-1">
+                  <button
+                    type="button"
+                    onClick={profile.handlePasswordSubmit}
+                    disabled={profile.isChangingPassword}
+                    className="px-5 py-2.5 rounded-lg text-sm font-medium text-white transition-colors hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                    style={{ backgroundColor: btnColor }}
+                  >
+                    {profile.isChangingPassword && (
+                      <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>
+                    )}
+                    {profile.isChangingPassword
+                      ? String(changingPasswordText)
+                      : String(changePasswordButtonText)}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => profile.setShowPasswordForm(false)}
+                    className="px-5 py-2.5 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                  >
+                    {String(cancelText)}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/** Inline eye icon to avoid lucide-react dependency */
+function EyeIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <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>
+    );
+  }
+  return (
+    <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>
+  );
+}
+
+export default ProfileDefault;