valtech-components 2.0.795 → 2.0.796

package/src/lib/components/organisms/login/login.stories.ts

@@ -1,283 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { applicationConfig, moduleMetadata } from '@storybook/angular';
-import { signal } from '@angular/core';
-import { Router } from '@angular/router';
-import { of } from 'rxjs';
-
-import { LoginComponent } from './login.component';
-import { AuthService } from '../../../services/auth/auth.service';
-import { ToastService } from '../../../services/toast.service';
-import { LoginMetadata, LoginSuccessEvent, LoginErrorEvent, MFARequiredEvent } from './types';
-
-// ---------------------------------------------------------------------------
-// Mock factory helpers
-// ---------------------------------------------------------------------------
-
-function createMockAuthService() {
-  const mfaPendingSignal = signal({ required: false, method: null });
-  const userSignal = signal(null);
-  const isAuthenticatedSignal = signal(false);
-  const isLoadingSignal = signal(false);
-
-  return {
-    mfaPending: mfaPendingSignal.asReadonly(),
-    user: userSignal.asReadonly(),
-    isAuthenticated: isAuthenticatedSignal.asReadonly(),
-    isLoading: isLoadingSignal.asReadonly(),
-    signin: () => of({}),
-    signup: () => of({}),
-    signinWithOAuth: () => of({}),
-    verifyEmail: () => of({}),
-    resendCode: () => of({}),
-    verifyMFA: () => of({}),
-    forgotPassword: () => of({}),
-    resetPassword: () => of({}),
-    signout: () => of({}),
-  };
-}
-
-function createMockRouter() {
-  return {
-    navigate: () => Promise.resolve(true),
-  };
-}
-
-function createMockToastService() {
-  return {
-    show: () => {},
-    presentToast: () => Promise.resolve(),
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Shared applicationConfig decorator with mocked providers
-// ---------------------------------------------------------------------------
-
-const withMockedServices = applicationConfig({
-  providers: [
-    { provide: AuthService, useFactory: createMockAuthService },
-    { provide: Router, useFactory: createMockRouter },
-    { provide: ToastService, useFactory: createMockToastService },
-  ],
-});
-
-// ---------------------------------------------------------------------------
-// Meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<LoginComponent> = {
-  title: 'Organisms/Login',
-  component: LoginComponent,
-  decorators: [
-    withMockedServices,
-    moduleMetadata({
-      imports: [LoginComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Login component configuration object (LoginMetadata)',
-      control: 'object',
-    },
-    onSuccess: {
-      action: 'onSuccess',
-      description: 'Emitted when login succeeds',
-    },
-    onError: {
-      action: 'onError',
-      description: 'Emitted when login fails',
-    },
-    onMFARequired: {
-      action: 'onMFARequired',
-      description: 'Emitted when MFA verification is required',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-login
-
-A fully-featured authentication component that handles sign-in, registration,
-email verification, forgot/reset password and MFA flows out of the box.
-
-### Usage
-
-\`\`\`html
-<val-login
-  [props]="{ showOAuth: true, oauthProviders: ['google'], showCard: true }"
-  (onSuccess)="handleSuccess($event)"
-  (onError)="handleError($event)"
-  (onMFARequired)="handleMFA($event)">
-</val-login>
-\`\`\`
-
-### Key Features
-
-- Email / password sign-in and registration
-- Email verification flow with resend cooldown
-- Forgot & reset password modals
-- MFA verification (TOTP, EMAIL, SMS)
-- OAuth social login (Google, Apple, Microsoft)
-- Optional logo, card wrapper and legal notice
-- Redirect on success via \`redirectOnSuccess\` prop
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<LoginComponent>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-/**
- * Default login with email/password and Google OAuth.
- */
-export const Default: Story = {
-  args: {
-    props: {} satisfies LoginMetadata,
-  },
-};
-
-/**
- * Login with a logo displayed above the form.
- */
-export const WithLogo: Story = {
-  args: {
-    props: {
-      logo: {
-        src: 'https://placehold.co/180x60/3880ff/ffffff?text=MyApp',
-        alt: 'MyApp',
-        mode: 'box',
-        shaded: false,
-        bordered: false,
-        size: 'medium',
-        limited: true,
-        alignment: 'center',
-      },
-      showCard: true,
-    } satisfies LoginMetadata,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the login form inside a card with a logo at the top.',
-      },
-    },
-  },
-};
-
-/**
- * Standalone mode: OAuth and register links are hidden; no auto-redirect.
- * Suitable for embedding in apps that manage routing themselves via (onSuccess).
- */
-export const Standalone: Story = {
-  args: {
-    props: {
-      showOAuth: false,
-      showRegister: false,
-      showForgotPassword: true,
-      showCard: true,
-    } satisfies LoginMetadata,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Simplified login without OAuth buttons or the register shortcut. ' +
-          'The host app listens to (onSuccess) and handles navigation itself.',
-      },
-    },
-  },
-};
-
-/**
- * Login with a legal notice footer showing company info, terms and privacy links.
- */
-export const WithLegal: Story = {
-  args: {
-    props: {
-      showCard: true,
-      legal: {
-        companyName: 'Valtech SA',
-        companyLink: 'https://valtech.com',
-        termsLink: 'https://valtech.com/terms',
-        privacyLink: 'https://valtech.com/privacy',
-      },
-    } satisfies LoginMetadata,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows a legal notice below the form with configurable company and policy links.',
-      },
-    },
-  },
-};
-
-/**
- * All OAuth providers enabled.
- */
-export const AllOAuthProviders: Story = {
-  args: {
-    props: {
-      showOAuth: true,
-      oauthProviders: ['google', 'apple', 'microsoft'],
-      showCard: true,
-    } satisfies LoginMetadata,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Activates Google, Apple and Microsoft OAuth buttons simultaneously.',
-      },
-    },
-  },
-};
-
-/**
- * Side-by-side showcase of the main visual variants.
- */
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; padding: 16px;">
-        <div style="flex: 1; min-width: 320px; max-width: 420px;">
-          <p style="font-family: system-ui; font-size: 13px; color: #666; margin: 0 0 8px 0;">Default</p>
-          <val-login [props]="{}"></val-login>
-        </div>
-
-        <div style="flex: 1; min-width: 320px; max-width: 420px;">
-          <p style="font-family: system-ui; font-size: 13px; color: #666; margin: 0 0 8px 0;">With card + logo</p>
-          <val-login [props]="{
-            showCard: true,
-            logo: {
-              src: 'https://placehold.co/160x48/3880ff/ffffff?text=MyApp',
-              alt: 'MyApp',
-              mode: 'box',
-              shaded: false,
-              bordered: false,
-              size: 'medium',
-              limited: true,
-              alignment: 'center'
-            }
-          }"></val-login>
-        </div>
-
-        <div style="flex: 1; min-width: 320px; max-width: 420px;">
-          <p style="font-family: system-ui; font-size: 13px; color: #666; margin: 0 0 8px 0;">Standalone (no OAuth / register)</p>
-          <val-login [props]="{
-            showOAuth: false,
-            showRegister: false,
-            showCard: true
-          }"></val-login>
-        </div>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/organisms/login/types.ts

@@ -1,89 +0,0 @@
-import { ImageMetadata } from '../../atoms/image/types';
-import { OAuthProvider } from '../../../services/auth/types';
-import { AuthUser } from '../../../services/auth/types';
-
-/**
- * Configuration for legal notice displayed in the login component
- */
-export interface LoginLegalConfig {
-  /** Company name to display */
-  companyName: string;
-  /** Link for company name (optional) */
-  companyLink?: string;
-  /** Link to terms and conditions page */
-  termsLink?: string;
-  /** Link to privacy policy page */
-  privacyLink?: string;
-}
-
-/**
- * Main configuration for the Login component
- */
-export interface LoginMetadata {
-  /** Logo to display at the top of the form */
-  logo?: ImageMetadata;
-
-  /** Show OAuth login buttons (default: true) */
-  showOAuth?: boolean;
-
-  /** OAuth providers to show (default: ['google']) */
-  oauthProviders?: OAuthProvider[];
-
-  /** Show register link and modal (default: true) */
-  showRegister?: boolean;
-
-  /** Show forgot password link and modal (default: true) */
-  showForgotPassword?: boolean;
-
-  /** Wrap component in card-style container with background, shadow, rounded corners (default: false) */
-  showCard?: boolean;
-
-  /** Legal notice configuration */
-  legal?: LoginLegalConfig;
-
-  /** Route to redirect after successful login (optional - if not set, emits event) */
-  redirectOnSuccess?: string;
-}
-
-/**
- * Event emitted when login is successful
- */
-export interface LoginSuccessEvent {
-  /** The authenticated user */
-  user: AuthUser | null;
-  /** Whether MFA was required and completed */
-  mfaCompleted?: boolean;
-  /** Whether this was an OAuth login */
-  oauthProvider?: OAuthProvider;
-}
-
-/**
- * Event emitted when login fails
- */
-export interface LoginErrorEvent {
-  /** Error code from the backend */
-  code?: string;
-  /** Human-readable error message */
-  message: string;
-  /** The operation that failed */
-  operation: 'signin' | 'signup' | 'verify' | 'forgot' | 'reset' | 'mfa' | 'oauth';
-}
-
-/**
- * Event emitted when MFA verification is required
- */
-export interface MFARequiredEvent {
-  /** MFA method required */
-  method: 'TOTP' | 'EMAIL' | 'SMS';
-}
-
-/**
- * Default values for LoginMetadata
- */
-export const LOGIN_DEFAULTS: Required<Omit<LoginMetadata, 'logo' | 'legal' | 'redirectOnSuccess'>> = {
-  showOAuth: true,
-  oauthProviders: ['google'],
-  showRegister: true,
-  showForgotPassword: true,
-  showCard: false,
-};

package/src/lib/components/organisms/menu/menu.component.scss

@@ -1,23 +0,0 @@
-ion-menu {
-  --min-width: 75%;
-  --background: var(--ion-color-light);
-
-  @media (min-width: 768px) {
-    --min-width: 40%;
-  }
-
-  ion-header {
-    background: var(--ion-color-light);
-  }
-
-  ion-content {
-    --background: var(--ion-color-light);
-  }
-}
-
-.menu-close-button {
-  display: block;
-  text-align: center;
-  padding: 1rem 0.5rem;
-  background: var(--ion-color-light);
-}

package/src/lib/components/organisms/menu/menu.component.ts

@@ -1,152 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, computed, inject, Input } from '@angular/core';
-import {
-  IonButton,
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonIcon,
-  IonMenu,
-  IonMenuToggle,
-  IonToolbar,
-  MenuController,
-} from '@ionic/angular/standalone';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { ButtonComponent } from '../../atoms/button/button.component';
-import { MenuMetadata } from './types';
-import { I18nService } from '../../../services/i18n';
-
-/**
- * val-menu
- *
- * A side menu component using Ionic IonMenu with customizable logo,
- * close button, and content projection for menu items.
- *
- * @example
- * <val-menu
- *   [props]="{
- *     id: 'main-menu',
- *     contentId: 'main-content',
- *     side: 'start',
- *     type: 'overlay',
- *     swipe: true,
- *     showCloseButton: true
- *   }"
- * >
- *   <val-links-accordion [props]="menuLinks"></val-links-accordion>
- * </val-menu>
- *
- * <ion-router-outlet id="main-content"></ion-router-outlet>
- *
- * @input props - Menu configuration
- */
-@Component({
-  selector: 'val-menu',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonMenu,
-    IonButtons,
-    IonMenuToggle,
-    IonButton,
-    IonIcon,
-    IonHeader,
-    IonToolbar,
-    IonContent,
-    ImageComponent,
-    ButtonComponent,
-  ],
-  template: `
-    <ion-menu
-      [menuId]="props.id"
-      [contentId]="props.contentId"
-      [type]="props.type || 'overlay'"
-      [side]="props.side || 'start'"
-      [swipeGesture]="props.swipe !== false"
-    >
-      <ion-header [class.ion-no-border]="true">
-        <ion-toolbar>
-          <ion-buttons slot="start" style="padding-left: .5rem;">
-            <val-image
-              *ngIf="props.logo"
-              [props]="props.logo"
-            />
-            <val-image
-              *ngIf="!props.logo"
-              [props]="{
-                src: '--main-logo-mini',
-                alt: 'menu logo',
-                mode: 'box',
-                shaded: false,
-                bordered: false,
-                size: 'small',
-                limited: false,
-                width: 2,
-                flex: true
-              }"
-            />
-          </ion-buttons>
-
-          <ion-buttons slot="end">
-            <ion-menu-toggle>
-              <ion-button>
-                <ion-icon color="dark" slot="icon-only" name="close-outline"></ion-icon>
-              </ion-button>
-            </ion-menu-toggle>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content>
-        <ng-content></ng-content>
-      </ion-content>
-      @if (props.showCloseButton) {
-        <val-button
-          class="menu-close-button"
-          [props]="{
-            text: closeButtonText(),
-            color: 'dark',
-            size: 'default',
-            type: 'button',
-            state: 'ENABLED',
-            fill: 'outline',
-            shape: 'round',
-            icon: {
-              name: 'close-outline',
-              slot: 'start'
-            }
-          }"
-          (onClick)="closeMenu()"
-        />
-      }
-    </ion-menu>
-  `,
-  styleUrls: ['./menu.component.scss'],
-})
-export class MenuComponent {
-  private menuCtrl = inject(MenuController);
-  private i18n = inject(I18nService);
-
-  /**
-   * Menu configuration.
-   */
-  @Input() props: MenuMetadata = {
-    side: 'start',
-    type: 'overlay',
-    swipe: true,
-  };
-
-  /**
-   * Close button text - reactive to language changes.
-   */
-  closeButtonText = computed(() => {
-    this.i18n.lang(); // Track language changes
-    return this.props.closeButtonText || this.i18n.t('close');
-  });
-
-  /**
-   * Closes the menu.
-   */
-  async closeMenu(): Promise<void> {
-    await this.menuCtrl.close(this.props.id);
-  }
-}