hazo_auth 1.4.1 → 1.6.0

package/src/components/layouts/my_settings/components/editable_field.tsx

@@ -1,177 +0,0 @@
-// file_description: reusable component for editable fields with pencil/edit/check/cancel icons
-// section: client_directive
-"use client";
-
-// section: imports
-import { useState } from "react";
-import { Input } from "hazo_auth/components/ui/input";
-import { Label } from "hazo_auth/components/ui/label";
-import { Button } from "hazo_auth/components/ui/button";
-import { Pencil, CheckCircle2, XCircle } from "lucide-react";
-
-// section: types
-export type EditableFieldProps = {
-  label: string;
-  value: string;
-  type?: "text" | "email" | "tel" | "url";
-  placeholder?: string;
-  onSave: (value: string) => Promise<void>;
-  onCancel?: () => void;
-  validation?: (value: string) => string | null;
-  disabled?: boolean;
-  ariaLabel?: string;
-};
-
-// section: component
-/**
- * Editable field component with pencil icon for edit mode
- * Shows check (green) and cancel (red) icons when in edit mode
- * @param props - Component props including label, value, onSave callback, etc.
- * @returns Editable field component
- */
-export function EditableField({
-  label,
-  value,
-  type = "text",
-  placeholder,
-  onSave,
-  onCancel,
-  validation,
-  disabled = false,
-  ariaLabel,
-}: EditableFieldProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState(value);
-  const [error, setError] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleEdit = () => {
-    if (disabled) return;
-    setIsEditing(true);
-    setEditValue(value);
-    setError(null);
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    setEditValue(value);
-    setError(null);
-    onCancel?.();
-  };
-
-  const handleSave = async () => {
-    // Validate if validation function provided
-    if (validation) {
-      const validationError = validation(editValue);
-      if (validationError) {
-        setError(validationError);
-        return;
-      }
-    }
-
-    // Check if value changed
-    if (editValue === value) {
-      setIsEditing(false);
-      return;
-    }
-
-    setIsSaving(true);
-    setError(null);
-
-    try {
-      await onSave(editValue);
-      setIsEditing(false);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to save";
-      setError(errorMessage);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      void handleSave();
-    } else if (e.key === "Escape") {
-      handleCancel();
-    }
-  };
-
-  return (
-    <div className="cls_editable_field flex flex-col gap-2">
-      <Label htmlFor={`editable-field-${label}`} className="cls_editable_field_label text-sm font-medium text-slate-700">
-        {label}
-      </Label>
-      <div className="cls_editable_field_input_container flex items-center gap-2">
-        {isEditing ? (
-          <>
-            <Input
-              id={`editable-field-${label}`}
-              type={type}
-              value={editValue}
-              onChange={(e) => setEditValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder}
-              disabled={isSaving}
-              aria-label={ariaLabel || label}
-              className="cls_editable_field_input flex-1"
-            />
-            <Button
-              type="button"
-              onClick={handleSave}
-              disabled={isSaving}
-              variant="ghost"
-              size="icon"
-              className="cls_editable_field_save_button text-green-600 hover:text-green-700 hover:bg-green-50"
-              aria-label="Save changes"
-            >
-              <CheckCircle2 className="h-5 w-5" aria-hidden="true" />
-            </Button>
-            <Button
-              type="button"
-              onClick={handleCancel}
-              disabled={isSaving}
-              variant="ghost"
-              size="icon"
-              className="cls_editable_field_cancel_button text-red-600 hover:text-red-700 hover:bg-red-50"
-              aria-label="Cancel editing"
-            >
-              <XCircle className="h-5 w-5" aria-hidden="true" />
-            </Button>
-          </>
-        ) : (
-          <>
-            <Input
-              id={`editable-field-${label}`}
-              type={type}
-              value={value || ""}
-              readOnly
-              disabled
-              placeholder={value ? undefined : placeholder || "Not set"}
-              aria-label={ariaLabel || label}
-              className="cls_editable_field_display flex-1 bg-slate-50 cursor-not-allowed"
-            />
-            {!disabled && (
-              <Button
-                type="button"
-                onClick={handleEdit}
-                variant="ghost"
-                size="icon"
-                className="cls_editable_field_edit_button text-slate-600 hover:text-slate-700 hover:bg-slate-50"
-                aria-label={`Edit ${label}`}
-              >
-                <Pencil className="h-5 w-5" aria-hidden="true" />
-              </Button>
-            )}
-          </>
-        )}
-      </div>
-      {error && (
-        <p className="cls_editable_field_error text-sm text-red-600" role="alert">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}
-

package/src/components/layouts/my_settings/components/password_change_dialog.tsx

@@ -1,301 +0,0 @@
-// file_description: dialog component for changing password with current/new/confirm password fields
-// section: client_directive
-"use client";
-
-// section: imports
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "hazo_auth/components/ui/dialog";
-import { Button } from "hazo_auth/components/ui/button";
-import { PasswordField } from "hazo_auth/components/layouts/shared/components/password_field";
-import { FormFieldWrapper } from "hazo_auth/components/layouts/shared/components/form_field_wrapper";
-import type { PasswordRequirementOptions } from "hazo_auth/components/layouts/shared/config/layout_customization";
-
-// section: types
-export type ButtonPalette = {
-  submitBackground: string;
-  submitText: string;
-  cancelBorder: string;
-  cancelText: string;
-};
-
-export type PasswordChangeDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSave: (currentPassword: string, newPassword: string) => Promise<void>;
-  passwordRequirements: PasswordRequirementOptions;
-  buttonPalette?: ButtonPalette;
-  currentPasswordLabel?: string;
-  newPasswordLabel?: string;
-  confirmPasswordLabel?: string;
-  saveButtonLabel?: string;
-  cancelButtonLabel?: string;
-};
-
-// section: component
-/**
- * Dialog component for changing password
- * Shows current password, new password, and confirm password fields
- * Validates password requirements and ensures passwords match
- * @param props - Component props including open state, onSave callback, password requirements
- * @returns Password change dialog component
- */
-export function PasswordChangeDialog({
-  open,
-  onOpenChange,
-  onSave,
-  passwordRequirements,
-  buttonPalette,
-  currentPasswordLabel = "Current password",
-  newPasswordLabel = "New password",
-  confirmPasswordLabel = "Confirm new password",
-  saveButtonLabel = "Save",
-  cancelButtonLabel = "Cancel",
-}: PasswordChangeDialogProps) {
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [currentPasswordVisible, setCurrentPasswordVisible] = useState(false);
-  const [newPasswordVisible, setNewPasswordVisible] = useState(false);
-  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
-  const [errors, setErrors] = useState<{
-    currentPassword?: string;
-    newPassword?: string | string[];
-    confirmPassword?: string;
-  }>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const validatePassword = (password: string): string | null => {
-    if (!password || password.length < passwordRequirements.minimum_length) {
-      return `Password must be at least ${passwordRequirements.minimum_length} characters long`;
-    }
-
-    const errors: string[] = [];
-
-    if (passwordRequirements.require_uppercase && !/[A-Z]/.test(password)) {
-      errors.push("uppercase letter");
-    }
-
-    if (passwordRequirements.require_lowercase && !/[a-z]/.test(password)) {
-      errors.push("lowercase letter");
-    }
-
-    if (passwordRequirements.require_number && !/[0-9]/.test(password)) {
-      errors.push("number");
-    }
-
-    if (passwordRequirements.require_special && !/[^A-Za-z0-9]/.test(password)) {
-      errors.push("special character");
-    }
-
-    if (errors.length > 0) {
-      return `Password must contain at least one: ${errors.join(", ")}`;
-    }
-
-    return null;
-  };
-
-  const validateForm = (): boolean => {
-    const newErrors: typeof errors = {};
-
-    if (!currentPassword) {
-      newErrors.currentPassword = "Current password is required";
-    }
-
-    const newPasswordError = validatePassword(newPassword);
-    if (newPasswordError) {
-      newErrors.newPassword = newPasswordError;
-    }
-
-    if (!confirmPassword) {
-      newErrors.confirmPassword = "Please confirm your new password";
-    } else if (newPassword !== confirmPassword) {
-      newErrors.confirmPassword = "Passwords do not match";
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSave = async () => {
-    if (!validateForm()) {
-      return;
-    }
-
-    setIsSubmitting(true);
-    setErrors({});
-
-    try {
-      await onSave(currentPassword, newPassword);
-      // Reset form on success
-      setCurrentPassword("");
-      setNewPassword("");
-      setConfirmPassword("");
-      onOpenChange(false);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to change password";
-      setErrors({ currentPassword: errorMessage });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setCurrentPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
-    setErrors({});
-    onOpenChange(false);
-  };
-
-  // Format password requirements for display
-  const getPasswordRequirements = (): string[] => {
-    const requirements: string[] = [];
-    requirements.push(`At least ${passwordRequirements.minimum_length} characters`);
-    if (passwordRequirements.require_uppercase) {
-      requirements.push("One uppercase letter");
-    }
-    if (passwordRequirements.require_lowercase) {
-      requirements.push("One lowercase letter");
-    }
-    if (passwordRequirements.require_number) {
-      requirements.push("One number");
-    }
-    if (passwordRequirements.require_special) {
-      requirements.push("One special character");
-    }
-    return requirements;
-  };
-
-  const passwordRequirementsList = getPasswordRequirements();
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="cls_password_change_dialog max-w-md">
-        <DialogHeader className="cls_password_change_dialog_header">
-          <DialogTitle className="cls_password_change_dialog_title">
-            Change Password
-          </DialogTitle>
-          <DialogDescription className="cls_password_change_dialog_description">
-            Enter your current password and choose a new password.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="cls_password_change_dialog_content flex flex-col gap-4 py-4">
-          <FormFieldWrapper
-            fieldId="current-password"
-            label={currentPasswordLabel}
-            input={
-              <PasswordField
-                inputId="current-password"
-                ariaLabel={currentPasswordLabel}
-                value={currentPassword}
-                placeholder="Enter your current password"
-                autoComplete="current-password"
-                isVisible={currentPasswordVisible}
-                onChange={(value) => {
-                  setCurrentPassword(value);
-                  if (errors.currentPassword) {
-                    setErrors({ ...errors, currentPassword: undefined });
-                  }
-                }}
-                onToggleVisibility={() => setCurrentPasswordVisible(!currentPasswordVisible)}
-                errorMessage={errors.currentPassword}
-              />
-            }
-          />
-          <FormFieldWrapper
-            fieldId="new-password"
-            label={newPasswordLabel}
-            input={
-              <PasswordField
-                inputId="new-password"
-                ariaLabel={newPasswordLabel}
-                value={newPassword}
-                placeholder="Enter your new password"
-                autoComplete="new-password"
-                isVisible={newPasswordVisible}
-                onChange={(value) => {
-                  setNewPassword(value);
-                  if (errors.newPassword) {
-                    setErrors({ ...errors, newPassword: undefined });
-                  }
-                }}
-                onToggleVisibility={() => setNewPasswordVisible(!newPasswordVisible)}
-                errorMessage={errors.newPassword}
-              />
-            }
-          />
-          {passwordRequirementsList.length > 0 && (
-            <div className="cls_password_change_dialog_requirements text-xs text-slate-600">
-              <p className="cls_password_change_dialog_requirements_label font-medium mb-1">
-                Password requirements:
-              </p>
-              <ul className="cls_password_change_dialog_requirements_list list-disc list-inside space-y-0.5">
-                {passwordRequirementsList.map((req, index) => (
-                  <li key={index}>{req}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-          <FormFieldWrapper
-            fieldId="confirm-password"
-            label={confirmPasswordLabel}
-            input={
-              <PasswordField
-                inputId="confirm-password"
-                ariaLabel={confirmPasswordLabel}
-                value={confirmPassword}
-                placeholder="Confirm your new password"
-                autoComplete="new-password"
-                isVisible={confirmPasswordVisible}
-                onChange={(value) => {
-                  setConfirmPassword(value);
-                  if (errors.confirmPassword) {
-                    setErrors({ ...errors, confirmPassword: undefined });
-                  }
-                }}
-                onToggleVisibility={() => setConfirmPasswordVisible(!confirmPasswordVisible)}
-                errorMessage={errors.confirmPassword}
-              />
-            }
-          />
-        </div>
-        <div className="cls_password_change_dialog_actions flex justify-end gap-3 pt-4 border-t">
-          <Button
-            type="button"
-            onClick={handleSave}
-            disabled={isSubmitting}
-            className="cls_password_change_dialog_save_button"
-            style={buttonPalette ? {
-              backgroundColor: buttonPalette.submitBackground,
-              color: buttonPalette.submitText,
-            } : undefined}
-            aria-label={saveButtonLabel}
-          >
-            {saveButtonLabel}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleCancel}
-            disabled={isSubmitting}
-            variant="outline"
-            className="cls_password_change_dialog_cancel_button"
-            style={buttonPalette ? {
-              borderColor: buttonPalette.cancelBorder,
-              color: buttonPalette.cancelText,
-            } : undefined}
-            aria-label={cancelButtonLabel}
-          >
-            {cancelButtonLabel}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-