@sneat/auth-ui 0.1.3 → 0.1.4

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

@@ -1,356 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,146 +0,0 @@
-<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

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