@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/pages/sign-in.page.ts

@@ -1,291 +0,0 @@
-import { Component, signal, inject, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { DsTextInputComponent } from '../components/text-input';
-import { DsButtonComponent } from '@propbinder/design-system';
-import { DsAppIconComponent } from '../components/app-icon';
-import { WhitelabelService } from '../services/whitelabel.service';
-import { Keyboard } from '@capacitor/keyboard';
-import { StatusBar, Style } from '@capacitor/status-bar';
-
-/**
- * SignInPageComponent
- * 
- * Sign-in page with email authentication.
- * Features logomark, decorative city background, and form validation.
- * Auto-focuses email input on iOS to trigger keyboard.
- */
-@Component({
-  selector: 'app-sign-in',
-  standalone: true,
-  imports: [CommonModule, FormsModule, DsTextInputComponent, DsButtonComponent, DsAppIconComponent],
-  template: `
-    <div class="tw-relative tw-min-h-screen tw-flex tw-justify-center tw-overflow-hidden" [style.background]="whitelabelService.signInBgStyle()">
-      <!-- City background decoration -->
-      @if (whitelabelService.showCityIllustration()) {
-        <div class="tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-w-full tw-h-[35%] tw-z-0 tw-pointer-events-none tw-overflow-hidden md:tw-h-[50%] md:tw-min-h-[400px]" aria-hidden="true">
-          <img src="/Assets/city.svg" alt="" class="tw-w-full tw-h-full tw-object-cover tw-object-top" />
-        </div>
-      }
-
-      <!-- Main content -->
-      <div class="tw-relative tw-z-[1] tw-w-full tw-pt-24 tw-max-w-[440px] tw-flex tw-flex-col tw-items-center lg:tw-max-w-[480px] lg:tw-pt-24">
-        <!-- App Icon -->
-        <div class="tw-flex tw-justify-center tw-items-center app-icon-container">
-          <ds-app-icon size="xl" />
-        </div>
-
-        <!-- Sign in form -->
-        <div class="tw-w-full tw-py-10 tw-px-6 md:tw-px-8 md:tw-py-12 lg:tw-p-12 tw-relative tw-min-h-[400px] tw-box-border">
-          <!-- Form view -->
-          <div class="tw-transition-all tw-duration-300 tw-ease-out tw-absolute tw-inset-y-10 tw-inset-x-6 md:tw-inset-y-12 md:tw-inset-x-8 lg:tw-inset-12 tw-box-border" 
-               [class.tw-opacity-100]="!emailSent()"
-               [class.tw-translate-y-0]="!emailSent()"
-               [class.tw-z-10]="!emailSent()"
-               [class.tw-opacity-0]="emailSent()"
-               [class.-tw-translate-y-5]="emailSent()"
-               [class.tw-pointer-events-none]="emailSent()"
-               [class.tw-z-0]="emailSent()">
-            <div class="tw-w-full tw-h-full tw-flex tw-flex-col">
-              <h1 class="tw-text-2xl lg:tw-text-3xl tw-font-semibold tw-text-center tw-mt-0 tw-mb-2 signin-text">Welcome home</h1>
-
-              <p class="body-base-regular tw-m-0 tw-mb-8 tw-text-center signin-text">
-                Enter your email to continue
-              </p>
-
-              <form class="tw-flex tw-flex-col tw-gap-4" (ngSubmit)="handleSubmit()">
-                <ds-text-input
-                  #emailInput
-                  id="email-input"
-                  type="email"
-                  placeholder="Enter your email"
-                  [(ngModel)]="email"
-                  name="email"
-                  [required]="true"
-                  [hasError]="emailError()"
-                  [errorMessage]="emailError() ? 'Please enter a valid email address' : ''"
-                  [autoClearError]="true"
-                  autocomplete="email"
-                  inputmode="email"
-                  (errorCleared)="emailError.set(false)">
-                </ds-text-input>
-
-                <ds-button
-                  type="submit"
-                  variant="primary"
-                  size="lg"
-                  [loading]="isSubmitting()"
-                  class="tw-w-full">
-                  Continue
-                </ds-button>
-              </form>
-            </div>
-          </div>
-
-          <!-- Email sent confirmation view -->
-          <div class="tw-transition-all tw-duration-300 tw-ease-out tw-flex tw-flex-col tw-items-center tw-absolute tw-inset-y-10 tw-inset-x-6 md:tw-inset-y-12 md:tw-inset-x-8 lg:tw-inset-12 tw-box-border tw-overflow-hidden"
-               [class.tw-opacity-0]="!emailSent()"
-               [class.tw-translate-y-5]="!emailSent()"
-               [class.tw-pointer-events-none]="!emailSent()"
-               [class.tw-z-0]="!emailSent()"
-               [class.tw-opacity-100]="emailSent()"
-               [class.tw-translate-y-0]="emailSent()"
-               [class.tw-pointer-events-auto]="emailSent()"
-               [class.tw-z-10]="emailSent()">
-            <div class="tw-w-full tw-flex tw-flex-col tw-items-center">
-              <h1 class="tw-text-lg tw-font-semibold lg:tw-text-xl tw-text-center tw-mt-0 tw-mb-4 signin-text">Check your email</h1>
-
-              <p class="body-base-regular tw-m-0 tw-mb-8 tw-text-center signin-text tw-max-w-[272px]">
-                We've sent you a temporary login to <span class="body-base-semiBold">{{ email }}</span>
-              </p>
-
-              <a
-                href="#"
-                (click)="handleBackToLogin(); $event.preventDefault()"
-                class="back-link">
-                Back to login
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    /* Button styling override for full width */
-    ds-button {
-      width: 100%;
-    }
-
-    ds-button::ng-deep button {
-      width: 100%;
-    }
-
-    /* Link styling */
-    .back-link {
-      display: block;
-      width: 100%;
-      text-align: center;
-      font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
-      font-size: var(--font-size-base);
-      font-weight: 600;
-      color: var(--color-signin-content, var(--text-color-default-primary));
-      text-decoration: none;
-      cursor: pointer;
-      transition: opacity 0.2s ease;
-    }
-
-    .back-link:hover {
-      opacity: 0.8;
-    }
-
-    /* Sign-in page text color override - applies to text elements only, not buttons */
-    :host ::ng-deep .signin-text,
-    :host h1,
-    :host h2,
-    :host p {
-      color: var(--color-signin-content, var(--text-color-default-primary));
-    }
-    
-    /* Exclude buttons and their children from sign-in content color */
-    :host ::ng-deep ds-button,
-    :host ::ng-deep ds-button * {
-      color: inherit;
-    }
-  `]
-})
-export class SignInPageComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('emailInput', { read: ElementRef }) emailInputRef?: ElementRef;
-  
-  whitelabelService = inject(WhitelabelService);
-  
-  email = '';
-  emailError = signal<boolean>(false);
-  isSubmitting = signal<boolean>(false);
-  emailSent = signal<boolean>(false);
-  
-  ngAfterViewInit(): void {
-    // Update status bar for sign-in page
-    this.updateSignInStatusBar();
-    
-    // Auto-focus email input to bring up keyboard on iOS
-    // Longer delay for sign-in page to ensure gradient background is rendered
-    setTimeout(() => {
-      // Only focus if we haven't already sent the email
-      if (!this.emailSent() && this.emailInputRef) {
-        // The ds-text-input component wraps the actual input element
-        const inputElement = this.emailInputRef.nativeElement.querySelector('input');
-        if (inputElement) {
-          console.log('Found input element, focusing...');
-          inputElement.focus();
-          // Explicitly show keyboard on mobile platforms
-          this.showKeyboard();
-        } else {
-          console.error('Input element not found in ds-text-input component');
-        }
-      } else if (!this.emailInputRef) {
-        console.error('emailInputRef not found');
-      }
-    }, 500);
-  }
-  
-  /**
-   * Show the keyboard on mobile platforms
-   */
-  private showKeyboard(): void {
-    Keyboard.show().catch(() => {
-      // Keyboard API not available (web browser) - focus() is enough
-      console.log('Keyboard API not available');
-    });
-  }
-
-  handleSubmit(): void {
-    // Basic email validation
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    
-    // Always validate on submit
-    if (!this.email || !emailRegex.test(this.email)) {
-      this.emailError.set(true);
-      return;
-    }
-
-    // Only proceed if email is valid
-    this.emailError.set(false);
-    this.isSubmitting.set(true);
-    
-    // Simulate API call
-    setTimeout(() => {
-      console.log('Sign in with email:', this.email);
-      this.isSubmitting.set(false);
-      this.emailSent.set(true);
-      // TODO: Implement actual sign-in logic and navigation
-    }, 1500);
-  }
-
-  handleBackToLogin(): void {
-    this.emailSent.set(false);
-    this.email = '';
-    this.emailError.set(false);
-  }
-  
-  /**
-   * Update status bar for sign-in page background
-   * Uses the sign-in background color to determine appropriate status bar style
-   */
-  private async updateSignInStatusBar(): Promise<void> {
-    try {
-      const config = this.whitelabelService.config();
-      
-      // Get the background color based on sign-in page background type
-      const backgroundColor = config.signInBgType === 'gradient' 
-        ? config.signInBgGradientStart 
-        : config.signInBgSolid;
-      
-      // Calculate and set appropriate style
-      const style = this.whitelabelService.getStatusBarStyleForColor(backgroundColor);
-      
-      // Set background color (Android only)
-      await StatusBar.setBackgroundColor({ color: backgroundColor });
-      
-      // Set style (iOS and Android)
-      await StatusBar.setStyle({ style });
-      
-      console.log(`Sign-in status bar updated: color=${backgroundColor}, style=${style === Style.Light ? 'Light' : 'Dark'}`);
-    } catch (e) {
-      // StatusBar API not available (web browser)
-      console.log('StatusBar not available on sign-in page:', e);
-    }
-  }
-  
-  /**
-   * Restore status bar to header color when leaving sign-in page
-   */
-  ngOnDestroy(): void {
-    this.restoreHeaderStatusBar();
-  }
-  
-  /**
-   * Restore status bar to use header surface color
-   */
-  private async restoreHeaderStatusBar(): Promise<void> {
-    try {
-      const config = this.whitelabelService.config();
-      const headerColor = config.headerSurface;
-      
-      // Calculate and set appropriate style for header
-      const style = this.whitelabelService.getStatusBarStyleForColor(headerColor);
-      
-      // Set background color (Android only)
-      await StatusBar.setBackgroundColor({ color: headerColor });
-      
-      // Set style (iOS and Android)
-      await StatusBar.setStyle({ style });
-      
-      console.log(`Status bar restored to header: color=${headerColor}, style=${style === Style.Light ? 'Light' : 'Dark'}`);
-    } catch (e) {
-      // StatusBar API not available (web browser)
-      console.log('StatusBar restore not available:', e);
-    }
-  }
-}
-