@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,291 @@
+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);
+    }
+  }
+}
+