website refactor

apps/website/lib/view-models/auth/ForgotPasswordViewModel.ts

@@ -0,0 +1,79 @@
+/**
+ * Forgot Password ViewModel
+ * 
+ * Client-side state management for forgot password flow.
+ * Immutable, class-based, contains only UI state.
+ */
+
+export interface ForgotPasswordFormField {
+  value: string;
+  error?: string;
+  touched: boolean;
+  validating: boolean;
+}
+
+export interface ForgotPasswordFormState {
+  fields: {
+    email: ForgotPasswordFormField;
+  };
+  isValid: boolean;
+  isSubmitting: boolean;
+  submitError?: string;
+  submitCount: number;
+}
+
+export class ForgotPasswordViewModel {
+  constructor(
+    public readonly returnTo: string,
+    public readonly formState: ForgotPasswordFormState,
+    public readonly showSuccess: boolean = false,
+    public readonly successMessage: string | null = null,
+    public readonly magicLink: string | null = null,
+    public readonly mutationPending: boolean = false,
+    public readonly mutationError: string | null = null
+  ) {}
+
+  withFormState(formState: ForgotPasswordFormState): ForgotPasswordViewModel {
+    return new ForgotPasswordViewModel(
+      this.returnTo,
+      formState,
+      this.showSuccess,
+      this.successMessage,
+      this.magicLink,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withSuccess(successMessage: string, magicLink: string | null = null): ForgotPasswordViewModel {
+    return new ForgotPasswordViewModel(
+      this.returnTo,
+      this.formState,
+      true,
+      successMessage,
+      magicLink,
+      false,
+      null
+    );
+  }
+
+  withMutationState(pending: boolean, error: string | null): ForgotPasswordViewModel {
+    return new ForgotPasswordViewModel(
+      this.returnTo,
+      this.formState,
+      this.showSuccess,
+      this.successMessage,
+      this.magicLink,
+      pending,
+      error
+    );
+  }
+
+  get isSubmitting(): boolean {
+    return this.formState.isSubmitting || this.mutationPending;
+  }
+
+  get submitError(): string | undefined {
+    return this.formState.submitError || this.mutationError || undefined;
+  }
+}

apps/website/lib/view-models/auth/LoginViewModel.ts

@@ -0,0 +1,96 @@
+/**
+ * Login ViewModel
+ * 
+ * Client-side state management for login flow.
+ * Immutable, class-based, contains only UI state.
+ */
+
+export interface LoginFormField {
+  value: string | boolean;
+  error?: string;
+  touched: boolean;
+  validating: boolean;
+}
+
+export interface LoginFormState {
+  fields: {
+    email: LoginFormField;
+    password: LoginFormField;
+    rememberMe: LoginFormField;
+  };
+  isValid: boolean;
+  isSubmitting: boolean;
+  submitError?: string;
+  submitCount: number;
+}
+
+export interface LoginUIState {
+  showPassword: boolean;
+  showErrorDetails: boolean;
+}
+
+export class LoginViewModel {
+  constructor(
+    public readonly returnTo: string,
+    public readonly hasInsufficientPermissions: boolean,
+    public readonly formState: LoginFormState,
+    public readonly uiState: LoginUIState,
+    public readonly mutationPending: boolean = false,
+    public readonly mutationError: string | null = null
+  ) {}
+
+  // Immutable updates
+  withFormState(formState: LoginFormState): LoginViewModel {
+    return new LoginViewModel(
+      this.returnTo,
+      this.hasInsufficientPermissions,
+      formState,
+      this.uiState,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withUIState(uiState: LoginUIState): LoginViewModel {
+    return new LoginViewModel(
+      this.returnTo,
+      this.hasInsufficientPermissions,
+      this.formState,
+      uiState,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withMutationState(pending: boolean, error: string | null): LoginViewModel {
+    return new LoginViewModel(
+      this.returnTo,
+      this.hasInsufficientPermissions,
+      this.formState,
+      this.uiState,
+      pending,
+      error
+    );
+  }
+
+  // Getters for template consumption
+  get showPassword(): boolean {
+    return this.uiState.showPassword;
+  }
+
+  get showErrorDetails(): boolean {
+    return this.uiState.showErrorDetails;
+  }
+
+  get isSubmitting(): boolean {
+    return this.formState.isSubmitting || this.mutationPending;
+  }
+
+  get submitError(): string | undefined {
+    return this.formState.submitError || this.mutationError || undefined;
+  }
+
+  get formFields() {
+    return this.formState.fields;
+  }
+}

apps/website/lib/view-models/auth/ResetPasswordViewModel.ts

@@ -0,0 +1,102 @@
+/**
+ * Reset Password ViewModel
+ * 
+ * Client-side state management for reset password flow.
+ * Immutable, class-based, contains only UI state.
+ */
+
+export interface ResetPasswordFormField {
+  value: string;
+  error?: string;
+  touched: boolean;
+  validating: boolean;
+}
+
+export interface ResetPasswordFormState {
+  fields: {
+    newPassword: ResetPasswordFormField;
+    confirmPassword: ResetPasswordFormField;
+  };
+  isValid: boolean;
+  isSubmitting: boolean;
+  submitError?: string;
+  submitCount: number;
+}
+
+export interface ResetPasswordUIState {
+  showPassword: boolean;
+  showConfirmPassword: boolean;
+}
+
+export class ResetPasswordViewModel {
+  constructor(
+    public readonly token: string,
+    public readonly returnTo: string,
+    public readonly formState: ResetPasswordFormState,
+    public readonly uiState: ResetPasswordUIState,
+    public readonly showSuccess: boolean = false,
+    public readonly successMessage: string | null = null,
+    public readonly mutationPending: boolean = false,
+    public readonly mutationError: string | null = null
+  ) {}
+
+  withFormState(formState: ResetPasswordFormState): ResetPasswordViewModel {
+    return new ResetPasswordViewModel(
+      this.token,
+      this.returnTo,
+      formState,
+      this.uiState,
+      this.showSuccess,
+      this.successMessage,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withUIState(uiState: ResetPasswordUIState): ResetPasswordViewModel {
+    return new ResetPasswordViewModel(
+      this.token,
+      this.returnTo,
+      this.formState,
+      uiState,
+      this.showSuccess,
+      this.successMessage,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withSuccess(successMessage: string): ResetPasswordViewModel {
+    return new ResetPasswordViewModel(
+      this.token,
+      this.returnTo,
+      this.formState,
+      this.uiState,
+      true,
+      successMessage,
+      false,
+      null
+    );
+  }
+
+  withMutationState(pending: boolean, error: string | null): ResetPasswordViewModel {
+    return new ResetPasswordViewModel(
+      this.token,
+      this.returnTo,
+      this.formState,
+      this.uiState,
+      this.showSuccess,
+      this.successMessage,
+      pending,
+      error
+    );
+  }
+
+  get isSubmitting(): boolean {
+    return this.formState.isSubmitting || this.mutationPending;
+  }
+
+  get submitError(): string | undefined {
+    return this.formState.submitError || this.mutationError || undefined;
+  }
+}

apps/website/lib/view-models/auth/SignupViewModel.ts

@@ -0,0 +1,80 @@
+/**
+ * Signup ViewModel
+ * 
+ * Client-side state management for signup flow.
+ * Immutable, class-based, contains only UI state.
+ */
+
+export interface SignupFormField {
+  value: string;
+  error?: string;
+  touched: boolean;
+  validating: boolean;
+}
+
+export interface SignupFormState {
+  fields: {
+    firstName: SignupFormField;
+    lastName: SignupFormField;
+    email: SignupFormField;
+    password: SignupFormField;
+    confirmPassword: SignupFormField;
+  };
+  isValid: boolean;
+  isSubmitting: boolean;
+  submitError?: string;
+  submitCount: number;
+}
+
+export interface SignupUIState {
+  showPassword: boolean;
+  showConfirmPassword: boolean;
+}
+
+export class SignupViewModel {
+  constructor(
+    public readonly returnTo: string,
+    public readonly formState: SignupFormState,
+    public readonly uiState: SignupUIState,
+    public readonly mutationPending: boolean = false,
+    public readonly mutationError: string | null = null
+  ) {}
+
+  withFormState(formState: SignupFormState): SignupViewModel {
+    return new SignupViewModel(
+      this.returnTo,
+      formState,
+      this.uiState,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withUIState(uiState: SignupUIState): SignupViewModel {
+    return new SignupViewModel(
+      this.returnTo,
+      this.formState,
+      uiState,
+      this.mutationPending,
+      this.mutationError
+    );
+  }
+
+  withMutationState(pending: boolean, error: string | null): SignupViewModel {
+    return new SignupViewModel(
+      this.returnTo,
+      this.formState,
+      this.uiState,
+      pending,
+      error
+    );
+  }
+
+  get isSubmitting(): boolean {
+    return this.formState.isSubmitting || this.mutationPending;
+  }
+
+  get submitError(): string | undefined {
+    return this.formState.submitError || this.mutationError || undefined;
+  }
+}