@sneat/auth-ui 0.1.2 → 0.1.4

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

@@ -1,209 +0,0 @@
-import { Component, signal, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { Capacitor } from '@capacitor/core';
-import {
-  NavController,
-  IonBackButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonCol,
-  IonContent,
-  IonGrid,
-  IonHeader,
-  IonIcon,
-  IonItem,
-  IonItemDivider,
-  IonLabel,
-  IonList,
-  IonRow,
-  IonSpinner,
-  IonText,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/angular/standalone';
-import {
-  AuthProviderID,
-  AuthStatuses,
-  ILoginEventsHandler,
-  ISneatAuthState,
-  LoginEventsHandler,
-  SneatAuthStateService,
-} from '@sneat/auth-core';
-import { SneatUserService } from '@sneat/auth-core';
-import {
-  AnalyticsService,
-  APP_INFO,
-  IAnalyticsService,
-  IAppInfo,
-} from '@sneat/core';
-import { RandomIdService } from '@sneat/random';
-import { ClassName, SneatBaseComponent } from '@sneat/ui';
-import { Subject, takeUntil } from 'rxjs';
-import {
-  EmailFormSigningWith,
-  EmailLoginFormComponent,
-} from './email-login-form/email-login-form.component';
-import { UserCredential } from 'firebase/auth';
-import { LoginWithTelegramComponent } from './login-with-telegram.component';
-
-type Action = 'join' | 'refuse'; // TODO: inject provider for action descriptions/messages.
-
-@Component({
-  selector: 'sneat-login',
-  templateUrl: './login-page.component.html',
-  imports: [
-    FormsModule,
-    LoginWithTelegramComponent,
-    EmailLoginFormComponent,
-    IonHeader,
-    IonToolbar,
-    IonButtons,
-    IonBackButton,
-    IonTitle,
-    IonContent,
-    IonCardContent,
-    IonText,
-    IonCard,
-    IonItemDivider,
-    IonLabel,
-    IonRow,
-    IonCol,
-    IonItem,
-    IonSpinner,
-    IonIcon,
-    IonList,
-    IonGrid,
-  ],
-  providers: [
-    {
-      provide: ClassName,
-      useValue: 'LoginPageComponent',
-    },
-    RandomIdService,
-  ],
-})
-export class LoginPageComponent extends SneatBaseComponent {
-  private readonly analyticsService =
-    inject<IAnalyticsService>(AnalyticsService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly navController = inject(NavController);
-  private readonly userService = inject(SneatUserService);
-  private readonly authStateService = inject(SneatAuthStateService);
-  private appInfo = inject<IAppInfo>(APP_INFO);
-  private readonly loginEventsHandler = inject<ILoginEventsHandler>(
-    LoginEventsHandler,
-    { optional: true },
-  );
-
-  protected readonly signingWith = signal<AuthProviderID | undefined>(
-    undefined,
-  );
-  private readonly redirectTo?: string;
-  protected readonly to?: string;
-  protected readonly action?: Action; // TODO: document possible values?
-
-  protected readonly isNativePlatform = Capacitor.isNativePlatform();
-
-  protected readonly appTitle: string;
-
-  constructor() {
-    super();
-    const appInfo = this.appInfo;
-    this.appTitle = appInfo.appTitle || 'Sneat.app';
-    if (location.hash.startsWith('#/')) {
-      this.redirectTo = location.hash.substring(1);
-    }
-    this.to = this.route.snapshot.queryParams['to']; // should we subscribe? I believe no.
-    const action = location.hash.match(/[#&]action=(\w+)/);
-    this.action = action?.[1] as Action;
-
-    const userRecordLoaded = new Subject<void>();
-    this.userService.userState
-      .pipe(takeUntil(userRecordLoaded), this.takeUntilDestroyed())
-      .subscribe({
-        next: (userState) => {
-          if (userState.record) {
-            userRecordLoaded.next();
-          } else {
-            return;
-          }
-          const redirectTo = this.redirectTo || '/'; // TODO: default one should be app specific.
-          this.navController
-            .navigateRoot(redirectTo)
-            .catch(
-              this.errorLogger.logErrorHandler(
-                'Failed to navigate back to ' + redirectTo,
-              ),
-            );
-        },
-        error: this.errorHandler('Failed to get user state after login'),
-      });
-  }
-
-  protected onEmailFormStatusChanged(signingWith?: EmailFormSigningWith): void {
-    this.signingWith.set(signingWith as AuthProviderID);
-  }
-
-  protected async loginWith(provider: AuthProviderID) {
-    this.signingWith.set(provider);
-    try {
-      await this.authStateService.signInWith(provider);
-      // We do not reset this.signingWith in case of succesful sign in as we should redirect from login page
-      // and not to allow user to do a double sign-in.
-    } catch (e) {
-      const errMsg = (e as { errorMessage?: string }).errorMessage;
-      if (
-        errMsg !== 'The user canceled the sign-in flow.' &&
-        !errMsg?.includes(
-          'com.apple.AuthenticationServices.AuthorizationError error 1001.',
-        )
-      ) {
-        this.errorLogger.logError(e, `Failed to sign-in with ${provider}`);
-      }
-      this.signingWith.set(undefined);
-    }
-  }
-
-  protected onLoggedIn(userCredential: UserCredential): void {
-    this.signingWith.set(undefined);
-    if (!userCredential.user) {
-      return;
-    }
-    if (userCredential.user.email) {
-      const prevEmail = localStorage.getItem('emailForSignIn') || '';
-      if (!prevEmail) {
-        localStorage.setItem('emailForSignIn', userCredential.user.email);
-      }
-    }
-    const authState: ISneatAuthState = {
-      status: AuthStatuses.authenticated,
-      user: userCredential.user,
-    };
-    this.userService.onUserSignedIn(authState);
-  }
-
-  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 {
-    if (eventName) {
-      this.analyticsService.logEvent(eventName, eventParams);
-    }
-    this.errorLogger.logError(err, m, {
-      report: !(err as { code: unknown }).code,
-    });
-    this.signingWith.set(undefined);
-  }
-}

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

@@ -1,42 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { SneatApiService } from '@sneat/api';
-import { SneatAuthStateService } from '@sneat/auth-core';
-import { ErrorLogger } from '@sneat/core';
-import { LoginWithTelegramComponent } from './login-with-telegram.component';
-
-describe('LoginWithTelegramComponent', () => {
-  let component: LoginWithTelegramComponent;
-  let fixture: ComponentFixture<LoginWithTelegramComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LoginWithTelegramComponent],
-      providers: [
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        {
-          provide: SneatApiService,
-          useValue: { post: vi.fn(), postAsAnonymous: vi.fn() },
-        },
-        {
-          provide: SneatAuthStateService,
-          useValue: { signInWithToken: vi.fn() },
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(LoginWithTelegramComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(LoginWithTelegramComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/pages/login-page/login-with-telegram.component.ts

@@ -1,82 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, Input, OnInit, inject } from '@angular/core';
-import {
-  ITelegramAuthData,
-  SneatAuthWithTelegramService,
-} from './sneat-auth-with-telegram.service';
-
-let authWithTelegramService: SneatAuthWithTelegramService;
-
-@Component({
-  providers: [SneatAuthWithTelegramService],
-  selector: 'sneat-login-with-telegram',
-  template: `
-    <!--
-				<script
-					async
-					src="https://telegram.org/js/telegram-widget.js?22"
-					data-telegram-login="SneatBot"
-					data-size="large"
-					data-onauth="onTelegramAuth(user)"
-					data-request-access="write"
-				></script>
-				-->
-  `,
-})
-export class LoginWithTelegramComponent implements OnInit {
-  private readonly el = inject(ElementRef);
-  private readonly document = inject<Document>(DOCUMENT);
-  readonly authWithTelegram = inject(SneatAuthWithTelegramService);
-
-  // TODO: Article about Telegram login
-  constructor() {
-    const authWithTelegram = this.authWithTelegram;
-
-    authWithTelegramService = authWithTelegram;
-  }
-
-  @Input() public isUserAuthenticated = false;
-
-  @Input() public botID: string = location.hostname.startsWith('local')
-    ? 'AlextDevBot'
-    : 'SneatBot';
-
-  @Input() public size: 'small' | 'medium' | 'large' = 'large';
-  @Input() public requestAccess: 'write' | 'read' = 'write';
-  @Input() public userPic = true;
-
-  ngOnInit() {
-    const botID = this.botID;
-    if (botID) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      window.onTelegramAuth = (tgAuthData: ITelegramAuthData) => {
-        // https://core.telegram.org/widgets/login#receiving-authorization-data
-        // After a successful authorization, the widget returns data
-        // by calling the callback function data-onauth with the JSON-object containing
-        // id, first_name, last_name, username, photo_url, auth_date and hash fields.
-        authWithTelegramService.loginWithTelegram(
-          botID,
-          tgAuthData,
-          this.isUserAuthenticated,
-        );
-      };
-
-      const script = this.document.createElement('script');
-
-      script.src = 'https://telegram.org/js/telegram-widget.js?22';
-      script.setAttribute('data-telegram-login', botID);
-      script.setAttribute('data-request-access', this.requestAccess);
-      script.setAttribute('data-size', this.size);
-      if (!this.userPic) {
-        script.setAttribute('data-userpic', 'false');
-      }
-      // https://core.telegram.org/widgets/login#receiving-authorization-data
-      // After a successful authorization, the widget returns data
-      // by calling the callback function data-onauth with the JSON-object containing
-      // id, first_name, last_name, username, photo_url, auth_date and hash fields.
-      script.setAttribute('data-onauth', 'onTelegramAuth(user)');
-      this.el.nativeElement.appendChild(script);
-    }
-  }
-}

package/src/lib/pages/login-page/sneat-auth-with-telegram.service.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { SneatApiService } from '@sneat/api';
-import { SneatAuthStateService } from '@sneat/auth-core';
-import { ErrorLogger } from '@sneat/core';
-import { SneatAuthWithTelegramService } from './sneat-auth-with-telegram.service';
-
-describe('SneatAuthWithTelegramService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        SneatAuthWithTelegramService,
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        {
-          provide: SneatApiService,
-          useValue: { post: vi.fn(), postAsAnonymous: vi.fn() },
-        },
-        {
-          provide: SneatAuthStateService,
-          useValue: { signInWithToken: vi.fn() },
-        },
-      ],
-    });
-  });
-
-  it('should be created', () => {
-    expect(TestBed.inject(SneatAuthWithTelegramService)).toBeTruthy();
-  });
-});

package/src/lib/pages/login-page/sneat-auth-with-telegram.service.ts

@@ -1,56 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { SneatApiService } from '@sneat/api';
-import { SneatAuthStateService } from '@sneat/auth-core';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-import { Observable } from 'rxjs';
-
-export interface ITelegramAuthData {
-  id: number;
-  first_name: string;
-  last_name: string;
-  username?: string;
-  photo_url?: string;
-  auth_date: number;
-  hash: string;
-}
-
-interface IResponse {
-  token: string;
-}
-
-@Injectable()
-export class SneatAuthWithTelegramService {
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-  private readonly apiService = inject(SneatApiService);
-  private readonly authService = inject(SneatAuthStateService);
-
-  public loginWithTelegram(
-    botID: string,
-    tgAuthData: ITelegramAuthData,
-    isUserAuthenticated: boolean,
-  ): void {
-    const postRequest: (
-      endpoint: string,
-      body: unknown,
-    ) => Observable<IResponse> = isUserAuthenticated
-      ? (endpoint: string, body: unknown) =>
-          this.apiService.post<IResponse>(endpoint, body)
-      : (endpoint: string, body: unknown) =>
-          this.apiService.postAsAnonymous<IResponse>(endpoint, body);
-    postRequest(
-      'auth/login-from-telegram-widget?botID=' + botID,
-      tgAuthData,
-    ).subscribe({
-      next: (response) => {
-        this.authService
-          .signInWithToken(response.token)
-          .catch(
-            this.errorLogger.logErrorHandler(
-              'Failed to sign-in with custom token',
-            ),
-          );
-      },
-      error: this.errorLogger.logErrorHandler('signInWithTelegram() error:'),
-    });
-  }
-}

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.html

@@ -1,35 +0,0 @@
-<ion-header>
-  <ion-toolbar color="light">
-    <ion-title>Signing in with email link</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <ion-card>
-    @if (!emailFromStorage) {
-      <p>
-        Welcome to our app! For your safety please re-type your email address to
-        sign-in.
-      </p>
-    }
-    <ion-item>
-      <ion-icon name="mail-outline" slot="start" />
-      <ion-input
-        label="Email"
-        [required]="true"
-        [readonly]="isSigning"
-        [value]="email"
-        [disabled]="emailFromStorage || isSigning"
-      />
-    </ion-item>
-
-    <ion-button [disabled]="isSigning" (click)="signIn()">
-      <ion-label>
-        @if (isSigning) {
-          Signing in...
-        } @else {
-          Sign in
-        }
-      </ion-label>
-    </ion-button>
-  </ion-card>
-</ion-content>

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.spec.ts

@@ -1,43 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NavController } from '@ionic/angular/standalone';
-import { SneatAuthStateService } from '@sneat/auth-core';
-import { ErrorLogger } from '@sneat/core';
-import { of } from 'rxjs';
-import { SignInFromEmailLinkPageComponent } from './sign-in-from-email-link-page.component';
-
-describe('SignInFromEmailLinkPageComponent', () => {
-  let component: SignInFromEmailLinkPageComponent;
-  let fixture: ComponentFixture<SignInFromEmailLinkPageComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SignInFromEmailLinkPageComponent],
-      providers: [
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        {
-          provide: SneatAuthStateService,
-          useValue: { signInWithEmailLink: vi.fn(() => of({})) },
-        },
-        {
-          provide: NavController,
-          useValue: { navigateRoot: vi.fn(() => Promise.resolve()) },
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(SignInFromEmailLinkPageComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(SignInFromEmailLinkPageComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.ts

@@ -1,70 +0,0 @@
-import { Component, inject } from '@angular/core';
-import {
-  IonButton,
-  IonCard,
-  IonContent,
-  IonHeader,
-  IonIcon,
-  IonInput,
-  IonItem,
-  IonLabel,
-  IonTitle,
-  IonToolbar,
-  NavController,
-} from '@ionic/angular/standalone';
-import { SneatAuthStateService } from '@sneat/auth-core';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-
-@Component({
-  selector: 'sneat-sign-in-from-email-link-page',
-  templateUrl: 'sign-in-from-email-link-page.component.html',
-  imports: [
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonContent,
-    IonCard,
-    IonItem,
-    IonIcon,
-    IonInput,
-    IonButton,
-    IonLabel,
-  ],
-})
-export class SignInFromEmailLinkPageComponent {
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-  private readonly authStateService = inject(SneatAuthStateService);
-  private readonly navController = inject(NavController);
-
-  email: string;
-  emailFromStorage = false;
-  isSigning = false;
-
-  constructor() {
-    this.email = localStorage.getItem('emailForSignIn') || '';
-    this.emailFromStorage = !!this.email;
-    if (this.email) {
-      this.signIn();
-    }
-  }
-
-  public signIn(): void {
-    this.isSigning = true;
-    this.authStateService.signInWithEmailLink(this.email).subscribe({
-      next: () => {
-        this.navController
-          .navigateRoot('/')
-          .catch(
-            this.errorLogger.logErrorHandler(
-              'Failed to navigate to root page after signing in with email link',
-            ),
-          );
-      },
-      error: (err) => {
-        this.isSigning = false;
-        this.emailFromStorage = false;
-        this.errorLogger.logError(err, 'Failed to sign in with email link');
-      },
-    });
-  }
-}

package/src/lib/pages/sneat-auth-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-export const authRoutes: Routes = [
-  {
-    path: 'login',
-    loadComponent: () =>
-      import('./login-page/login-page.component').then(
-        (m) => m.LoginPageComponent,
-      ),
-  },
-  {
-    path: 'sign-in-from-email-link',
-    loadComponent: () =>
-      import('./sign-in-from-email-link/sign-in-from-email-link-page.component').then(
-        (m) => m.SignInFromEmailLinkPageComponent,
-      ),
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(authRoutes)],
-  exports: [RouterModule],
-})
-export class SneatAuthRoutingModule {}