@sneat/auth-ui 0.1.0

package/src/lib/pages/login-page/email-login-form/email-login-form.component.ts

@@ -0,0 +1,356 @@
+import {
+  Component,
+  EventEmitter,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core';
+// import { getApp } from '@angular/fire/app';
+// import { getAuth } from '@angular/fire/auth';
+import {
+  Auth,
+  sendPasswordResetEmail,
+  sendSignInLinkToEmail,
+} from '@angular/fire/auth';
+import { FormsModule } from '@angular/forms';
+import {
+  ToastController,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonSegment,
+  IonSegmentButton,
+  IonSpinner,
+  IonText,
+} from '@ionic/angular/standalone';
+import { SneatApiService } from '@sneat/api';
+import { IInitUserRecordRequest, UserRecordService } from '@sneat/auth-core';
+import { createSetFocusToInput } from '@sneat/ui';
+import {
+  AnalyticsService,
+  APP_INFO,
+  IAnalyticsService,
+  IAppInfo,
+} from '@sneat/core';
+import { ErrorLogger, IErrorLogger } from '@sneat/core';
+import { RandomIdService } from '@sneat/random';
+import { UserCredential, sendEmailVerification } from 'firebase/auth';
+import { FirebaseError } from 'firebase/app';
+
+export type EmailFormSigningWith = 'email' | 'emailLink' | 'resetPassword';
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} from 'firebase/auth';
+
+@Component({
+  selector: 'sneat-email-login-form',
+  templateUrl: 'email-login-form.component.html',
+  imports: [
+    FormsModule,
+    IonCard,
+    IonItemDivider,
+    IonSegment,
+    IonSegmentButton,
+    IonIcon,
+    IonLabel,
+    IonCardContent,
+    IonItem,
+    IonInput,
+    IonSpinner,
+    IonText,
+    IonButton,
+    IonButtons,
+  ],
+})
+export class EmailLoginFormComponent {
+  readonly appInfo = inject<IAppInfo>(APP_INFO);
+  private readonly analyticsService =
+    inject<IAnalyticsService>(AnalyticsService);
+  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
+  private readonly toastController = inject(ToastController);
+  private readonly afAuth = inject(Auth);
+  private readonly randomIdService = inject(RandomIdService);
+  private readonly sneatApiService = inject(SneatApiService);
+  private readonly userRecordService = inject(UserRecordService);
+
+  protected sign: 'in' | 'up' = 'up'; // TODO: document here what 'in' & 'up' means
+  protected email = '';
+  protected password = '';
+  protected firstName = '';
+  protected lastName = '';
+  protected spaceTitle = '';
+  protected wrongPassword = false;
+
+  protected signingWith?: EmailFormSigningWith;
+
+  @Output() readonly signingWithChange = new EventEmitter<
+    EmailFormSigningWith | undefined
+  >();
+  @Output() readonly loggedIn = new EventEmitter<UserCredential>();
+
+  @ViewChild('emailInput', { static: true }) emailInput?: IonInput;
+  @ViewChild('spaceTitleInput', { static: false }) spaceTitleInput?: IonInput;
+
+  public readonly setFocusToInput = createSetFocusToInput(this.errorLogger);
+
+  constructor() {
+    this.email = localStorage.getItem('emailForSignIn') || '';
+    if (this.email) {
+      this.sign = 'in';
+    }
+  }
+
+  public get validEmail(): boolean {
+    const email = this.email,
+      i = email?.indexOf('@');
+    return i > 0 && i < email.length - 1;
+  }
+
+  public getFirebaseAuth(): Auth {
+    return this.afAuth as unknown as Auth; // TODO: pending https://github.com/angular/angularfire/pull/3402
+  }
+
+  public async signUp(): Promise<void> {
+    if (!this.firstName) {
+      // this.toaster.showToast('Full name is required');
+      return;
+    }
+    // this.signingWith = 'email';
+    this.email = this.email.trim();
+    const email = this.email;
+    const firstName = this.firstName.trim();
+    const lastName = this.lastName.trim();
+    if (!email) {
+      alert('Email is a required field');
+      return;
+    }
+    if (!firstName) {
+      alert('First name is a required field');
+      return;
+    }
+    if (!lastName) {
+      alert('Last name is a required field');
+      return;
+    }
+    this.spaceTitle = this.spaceTitle.trim();
+    const spaceTitle = this.spaceTitle;
+    if (this.appInfo.requiredSpaceType && !spaceTitle) {
+      alert('Company title is a required field');
+      this.setFocusToSpaceTitle();
+      return;
+    }
+    localStorage.setItem('emailForSignIn', email);
+    const password = this.randomIdService.newRandomId({ len: 9 });
+
+    this.setSigningWith('email');
+    try {
+      // const auth = getAuth(getApp());
+      const auth = this.getFirebaseAuth();
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password,
+      );
+      this.sendVerificationEmail(userCredential);
+      userCredential.user
+        ?.getIdToken()
+        .then((token) => {
+          this.sneatApiService.setApiAuthToken(token);
+          const request: IInitUserRecordRequest = {
+            authProvider: 'password',
+            email,
+            ianaTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            names: { firstName, lastName },
+            space: this.appInfo.requiredSpaceType
+              ? {
+                  type: this.appInfo.requiredSpaceType,
+                  title: spaceTitle,
+                }
+              : undefined,
+          };
+          this.userRecordService.initUserRecord(request).subscribe({
+            next: () => this.onLoggedIn(userCredential),
+            error: (err) => {
+              this.analyticsService.logEvent('FailedToSetUserTitle');
+              this.errorLogger.logError(err, 'Failed to set user title', {
+                feedback: false,
+              });
+              this.onLoggedIn(userCredential);
+            },
+          });
+        })
+        .catch(
+          this.errorHandler(
+            'Failed to get Firebase ID token',
+            'FirebaseGetIdTokenFailed',
+          ),
+        );
+    } catch (e) {
+      this.handleError(
+        e,
+        'Failed to sign up with email',
+        'FailedToSignUpWithEmail',
+      );
+    }
+  }
+
+  public keyupEnter(): void {
+    switch (this.sign) {
+      case 'in':
+        this.signIn();
+        break;
+      case 'up':
+        this.signUp().catch(() => this.errorHandler('Failed to sign up'));
+        break;
+    }
+  }
+
+  public signIn(): void {
+    this.setSigningWith('email');
+    this.email = this.email.trim();
+    this.wrongPassword = false;
+    this.saveEmailForReuse();
+    // const auth = getAuth(getApp());
+    const auth = this.getFirebaseAuth();
+    signInWithEmailAndPassword(auth, this.email, this.password)
+      .then((userCredential) => {
+        this.onLoggedIn(userCredential); // TODO: add analytics event
+      })
+      .catch(
+        this.errorHandler('Failed to sign in with email & password', 'email'),
+      );
+  }
+
+  private saveEmailForReuse(): void {
+    localStorage.setItem('emailForSignIn', this.email);
+  }
+
+  public sendSignInLink(): void {
+    this.setSigningWith('emailLink');
+    this.email = this.email.trim();
+    this.saveEmailForReuse();
+    sendSignInLinkToEmail(this.afAuth, this.email, {
+      // url: 'https://dailyscrum.app/pwa/sign-in',
+      url: document.baseURI + 'sign-in-from-email-link',
+      handleCodeInApp: true,
+    })
+      .then(() => {
+        this.showToast(`Sign-in link has been sent to email: ${this.email}`);
+        this.setSigningWith(undefined);
+      })
+      .catch(
+        this.errorHandler(
+          'Failed to send sign in link to email',
+          'FailedToSendSignInLinkToEmail',
+        ),
+      );
+  }
+
+  private showToast(message: string): void {
+    this.toastController
+      .create({
+        message,
+        position: 'middle',
+        keyboardClose: true,
+        duration: 3000,
+        color: 'tertiary',
+        icon: 'send-outline',
+        buttons: [{ icon: 'close', role: 'cancel' }],
+      })
+      .then((toast) => {
+        toast
+          .present()
+          .catch(
+            this.errorLogger.logErrorHandler(
+              'Failed to present toast about password reset email sent success',
+            ),
+          );
+      });
+  }
+
+  public resetPassword(): void {
+    this.setSigningWith('resetPassword');
+    sendPasswordResetEmail(this.afAuth, this.email)
+      .then(() => {
+        this.setSigningWith(undefined);
+        this.showToast(
+          `Password reset link has been sent to email: ${this.email}`,
+        );
+      })
+      .catch(
+        this.errorHandler(
+          'Failed to send password reset email',
+          'FailedToSendPasswordResetEmail',
+        ),
+      );
+  }
+
+  private sendVerificationEmail(userCredential: UserCredential): void {
+    setTimeout(async () => {
+      try {
+        await sendEmailVerification(userCredential.user);
+      } catch (e) {
+        this.handleError(e, 'Failed to send verification email');
+      }
+    });
+  }
+
+  private onLoggedIn(userCredential: UserCredential): void {
+    this.loggedIn.emit(userCredential);
+  }
+
+  private errorHandler(
+    m: string,
+    eventName?: string,
+    eventParams?: Record<string, string>,
+  ): (err: unknown) => void {
+    return (err) => this.handleError(err, m, eventName, eventParams);
+  }
+
+  private handleError(
+    err: unknown,
+    m: string,
+    eventName?: string,
+    eventParams?: Record<string, string>,
+  ): void {
+    this.setSigningWith(undefined);
+    if (eventName) {
+      this.analyticsService.logEvent(eventName, eventParams);
+    }
+    if ((err as FirebaseError).code === 'auth/wrong-password') {
+      this.wrongPassword = true;
+      return;
+    }
+    this.errorLogger.logError(err, m, {
+      report: !(err as { code: unknown }).code,
+    });
+  }
+
+  private setSigningWith(signingWith?: EmailFormSigningWith): void {
+    this.signingWith = signingWith;
+    this.signingWithChange.emit(signingWith);
+  }
+
+  signChanged(): void {
+    this.setFocusToEmail();
+  }
+
+  ionViewDidEnter(): void {
+    this.setFocusToEmail();
+  }
+
+  private setFocusToEmail(): void {
+    this.setFocusToInput(undefined /*this.emailInput*/);
+  }
+
+  private setFocusToSpaceTitle(): void {
+    this.setFocusToInput(undefined /*this.spaceTitleInput*/);
+  }
+}

package/src/lib/pages/login-page/index.ts

@@ -0,0 +1,3 @@
+export * from './login-page.component';
+export * from './login-page.component.module';
+export * from './login-page.routing.module';

package/src/lib/pages/login-page/login-page.component.html

@@ -0,0 +1,146 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start">
+      <ion-back-button />
+    </ion-buttons>
+    <ion-title>Login &#64; {{ appTitle }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content id="main-content">
+  @if (to) {
+    <ion-card color="tertiary">
+      <ion-card-content>
+        <p>Please sign in to join a team</p>
+      </ion-card-content>
+    </ion-card>
+  }
+
+  <p style="text-align: center; font-size: smaller">
+    <ion-text color="medium">
+      This app is free to use &
+      <a target="_blank" href="https://github.com/sneat-co">open source</a>.
+    </ion-text>
+  </p>
+
+  <sneat-email-login-form
+    (signingWithChange)="onEmailFormStatusChanged()"
+    (loggedIn)="onLoggedIn($event)"
+  />
+
+  <ion-card>
+    <ion-item-divider color="light">
+      <ion-label
+        color="medium"
+        style="text-align: center; width: 100%; font-weight: bold"
+      >
+        Quick login
+      </ion-label>
+    </ion-item-divider>
+    <ion-grid class="ion-grid-layout">
+      @if (!isNativePlatform) {
+        <ion-row>
+          <ion-col>
+            <div class="ion-padding" style="text-align: center">
+              <sneat-login-with-telegram />
+            </div>
+          </ion-col>
+        </ion-row>
+      }
+      <ion-row>
+        <ion-col size="12" size-md="6">
+          <ion-list lines="none">
+            <ion-item
+              (click)="loginWith('google.com')"
+              tappable
+              [disabled]="!!signingWith()"
+            >
+              @if (signingWith() === "google.com") {
+                <ion-spinner slot="start" name="lines-small" />
+              } @else {
+                <ion-icon color="danger" name="logo-google" slot="start" />
+              }
+              <ion-label color="danger"> Login with Google</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+        <ion-col size="12" size-md="6">
+          <ion-list lines="none">
+            <ion-item
+              (click)="loginWith('apple.com')"
+              tappable
+              [disabled]="!!signingWith()"
+            >
+              @if (signingWith() === "apple.com") {
+                <ion-spinner slot="start" name="lines-small" />
+              } @else {
+                <ion-icon color="dark" name="logo-apple" slot="start" />
+              }
+
+              <ion-label color="dark"> Login with Apple</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="12" size-md="6">
+          <ion-list lines="none">
+            <ion-item
+              (click)="loginWith('microsoft.com')"
+              tappable
+              [disabled]="!!signingWith()"
+            >
+              @if (signingWith() === "microsoft.com") {
+                <ion-spinner
+                  slot="start"
+                  color="secondary"
+                  name="lines-small"
+                />
+              } @else {
+                <ion-icon slot="start" color="secondary" name="logo-windows" />
+              }
+              <ion-label color="secondary">Login with Microsoft</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+        <ion-col size="12" size-md="6">
+          <ion-list lines="none">
+            <ion-item
+              (click)="loginWith('facebook.com')"
+              tappable
+              [disabled]="!!signingWith()"
+            >
+              @if (signingWith() === "facebook.com") {
+                <ion-spinner slot="start" color="primary" name="lines-small" />
+              } @else {
+                <ion-icon slot="start" color="primary" name="logo-facebook" />
+              }
+              <ion-label color="primary">Login with Facebook</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <!--						<ion-item-->
+    <!--							(click)="loginWith('github.com')"-->
+    <!--							tappable-->
+    <!--							[disabled]="!!signingWith()"-->
+    <!--						>-->
+    <!--							@if (signingWith() === "github.com") {-->
+    <!--								<ion-spinner slot="start" color="tertiary" name="lines-small" />-->
+    <!--							} @else {-->
+    <!--								<ion-icon slot="start" color="tertiary" name="logo-github" />-->
+    <!--							}-->
+    <!--							<ion-label color="tertiary">Login with GitHub</ion-label>-->
+    <!--						</ion-item>-->
+  </ion-card>
+
+  <p style="text-align: center; font-size: smaller">
+    <ion-text color="medium">
+      If any issues get
+      <a href="mailto:help@sneat.app?subject=Problem+with+login+at+Sneat.app"
+        >help&#64;sneat.app</a
+      >
+    </ion-text>
+  </p>
+</ion-content>

package/src/lib/pages/login-page/login-page.component.spec.ts

@@ -0,0 +1,5 @@
+describe('LoginPage', () => {
+  it('should create', () => {
+    expect(true).toBeTruthy();
+  });
+});