@onexapis/cli 1.1.37 → 1.1.38

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

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