@sneat/auth-ui 0.1.2 → 0.1.4

package/eslint.config.cjs

@@ -1,7 +0,0 @@
-const baseConfig = require('../../../eslint.config.js');
-const { sneatLibConfig } = require('../../../eslint.lib.config.js');
-
-module.exports = [
-  ...baseConfig,
-  ...sneatLibConfig(__dirname),
-];

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/libs/auth/ui",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json

@@ -1,38 +0,0 @@
-{
-  "name": "auth-ui",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/auth/ui/src",
-  "prefix": "sneat",
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:ng-packagr-lite",
-      "outputs": [
-        "{workspaceRoot}/dist/libs/auth/ui"
-      ],
-      "options": {
-        "project": "libs/auth/ui/ng-package.json",
-        "tsConfig": "libs/auth/ui/tsconfig.lib.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/auth/ui/tsconfig.lib.prod.json"
-        },
-        "development": {}
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/vitest:test",
-      "outputs": [
-        "{workspaceRoot}/coverage/libs/auth/ui"
-      ],
-      "options": {
-        "tsConfig": "libs/auth/ui/tsconfig.spec.json"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/src/lib/components/auth-menu-item/auth-menu-item.component.html

@@ -1,59 +0,0 @@
-<ion-item-divider color="light">
-  @if ($authStatus() === "authenticated") {
-    <ion-label>Signed in as</ion-label>
-  } @else {
-    <ion-label>Authentication</ion-label>
-  }
-</ion-item-divider>
-@if (!$authState()) {
-  <ion-item>
-    <ion-label>Loading....</ion-label>
-  </ion-item>
-} @else if ($isAuthenticating()) {
-  <ion-item routerLink="login">
-    <ion-label>Authenticating....</ion-label>
-  </ion-item>
-}
-@if ($authStatus() === "notAuthenticated") {
-  <ion-item routerLink="/login" tappable="true">
-    <ion-icon slot="start" name="person-circle-outline" />
-    <ion-label color="primary"> Please sign in</ion-label>
-  </ion-item>
-}
-@if ($authStatus() === "authenticated") {
-  <ion-item
-    tappable="true"
-    routerLink="/my"
-    routerDirection="forward"
-    (click)="closeMenu()"
-  >
-    <!--    <ion-buttons slot="start" class="ion-no-margin">-->
-    <!--      <ion-button disabled color="medium" >-->
-    <!--        <ion-icon  slot="start" name="person-circle-outline"></ion-icon>-->
-    <!--      </ion-button>-->
-    <!--    </ion-buttons>-->
-    <ion-icon slot="start" name="person-circle-outline" />
-
-    <ion-label color="medium">
-      @if ($user()?.record?.names; as names) {
-        {{ names | personNames }}
-      } @else {
-        @if ($authState()?.user; as user) {
-          {{ user.displayName || user.email || user.phoneNumber || user.uid }}
-        }
-      }
-    </ion-label>
-
-    <ion-buttons slot="end">
-      <!--		<ion-button color="medium" title="Settings">-->
-      <!--			<ion-icon name="settings-outline"></ion-icon>-->
-      <!--		</ion-button>-->
-      <ion-button color="medium" title="Sign-out" (click)="logout($event)">
-        <ion-icon name="log-out-outline" />
-      </ion-button>
-    </ion-buttons>
-  </ion-item>
-}
-@if ($err()) {
-  <ion-item> ERROR: {{ $err() | json }}</ion-item>
-}

package/src/lib/components/auth-menu-item/auth-menu-item.component.spec.ts

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

package/src/lib/components/auth-menu-item/auth-menu-item.component.ts

@@ -1,116 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  signal,
-  OnDestroy,
-  inject,
-} from '@angular/core';
-import { RouterModule } from '@angular/router';
-import {
-  IonButton,
-  IonButtons,
-  IonIcon,
-  IonItem,
-  IonItemDivider,
-  IonLabel,
-  MenuController,
-  NavController,
-} from '@ionic/angular/standalone';
-import {
-  ISneatAuthState,
-  ISneatUserState,
-  SneatAuthStateService,
-  SneatUserService,
-} from '@sneat/auth-core';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-import { Subject, takeUntil } from 'rxjs';
-import { PersonNamesPipe, personNames } from '../../pipes/person-names.pipe';
-@Component({
-  selector: 'sneat-auth-menu-item',
-  templateUrl: './auth-menu-item.component.html',
-  imports: [
-    RouterModule,
-    PersonNamesPipe,
-    IonItemDivider,
-    IonLabel,
-    IonItem,
-    IonIcon,
-    IonButtons,
-    IonButton,
-    JsonPipe,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AuthMenuItemComponent implements OnDestroy {
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-  private readonly navCtrl = inject(NavController);
-  private readonly authStateService = inject(SneatAuthStateService);
-  private readonly menuController = inject(MenuController);
-
-  protected readonly $user = signal<ISneatUserState | undefined>(undefined);
-  protected $err = signal<unknown>(undefined);
-
-  protected readonly $authState = signal<ISneatAuthState | undefined>(
-    undefined,
-  );
-  protected readonly $authStatus = computed(() => this.$authState()?.status);
-  protected readonly $isAuthenticating = computed(
-    () => this.$authStatus() === 'authenticating',
-  );
-
-  protected readonly $destroyed = new Subject<void>();
-
-  public ngOnDestroy(): void {
-    this.$destroyed.next();
-    this.$destroyed.complete();
-  }
-
-  constructor() {
-    const errorLogger = this.errorLogger;
-    const authStateService = this.authStateService;
-    const userService = inject(SneatUserService);
-
-    userService.userState
-      .pipe(takeUntil(this.$destroyed))
-      .subscribe(this.$user.set);
-    authStateService.authState.pipe(takeUntil(this.$destroyed)).subscribe({
-      next: this.$authState.set,
-      error: (err) => {
-        this.$err.set(err);
-        errorLogger.logError('failed to get auth state');
-      },
-    });
-  }
-
-  public closeMenu(): void {
-    this.menuController
-      .close()
-      .catch(this.errorLogger.logErrorHandler('Failed to close menu'));
-  }
-
-  public logout(event: Event): boolean {
-    event.stopPropagation();
-    event.preventDefault();
-    try {
-      this.authStateService
-        .signOut()
-        .then(() => {
-          this.navCtrl
-            .navigateBack('/signed-out')
-            .catch(
-              this.errorLogger.logErrorHandler(
-                'Failed to navigate to signed out page',
-              ),
-            );
-        })
-        .catch(this.errorLogger.logErrorHandler('Failed to sign out'));
-    } catch (e) {
-      this.errorLogger.logError(e, 'Failed to logout');
-    }
-    return false;
-  }
-
-  protected readonly personName = personNames;
-}

package/src/lib/components/user-auth-providers/user-auth-accounts.component.html

@@ -1,127 +0,0 @@
-<ion-card>
-  <!--	<ion-item color="light" lines="full">-->
-  <!--		<ion-label color="medium"-->
-  <!--			><h2 style="font-weight: bold">Authentication</h2></ion-label-->
-  <!--		>-->
-  <!--	</ion-item>-->
-  <!--	<ion-accordion-group [value]="integrations">-->
-  <!--		<ion-accordion value="messaging-apps">-->
-  <!--			<ion-item slot="header" color="light">-->
-  <!--				<ion-label>First Accordion</ion-label>-->
-  <!--			</ion-item>-->
-  <!--			<div class="ion-padding" slot="content">First Content</div>-->
-  <!--		</ion-accordion>-->
-  <!--		<ion-accordion value="quick-logins">-->
-  <!--			<ion-item slot="header" color="light">-->
-  <!--				<ion-label>Second Accordion</ion-label>-->
-  <!--			</ion-item>-->
-  <!--			<div class="ion-padding" slot="content">Second Content</div>-->
-  <!--		</ion-accordion>-->
-  <!--	</ion-accordion-group>-->
-  <!--	<ion-item>-->
-  <!--		<ion-segment [(ngModel)]="integrations" style="margin-bottom: 0.5em">-->
-  <!--			<ion-segment-button value="messaging-apps"-->
-  <!--				>Messaging Apps-->
-  <!--			</ion-segment-button>-->
-  <!--			<ion-segment-button value="quick-logins">Quick logins</ion-segment-button>-->
-  <!--		</ion-segment>-->
-  <!--	</ion-item>-->
-  <ion-list>
-    <ion-item-divider color="light">
-      <ion-label color="medium" style="font-weight: bold"
-        >Quick logins</ion-label
-      >
-    </ion-item-divider>
-    <sneat-user-auth-provider-status
-      providerID="google.com"
-      [signingInWith]="signingInWith()"
-      (signingInWithChange)="signingInWith.set($event)"
-    />
-    <sneat-user-auth-provider-status
-      providerID="apple.com"
-      [signingInWith]="signingInWith()"
-      (signingInWithChange)="signingInWith.set($event)"
-    />
-    <sneat-user-auth-provider-status
-      providerID="microsoft.com"
-      [signingInWith]="signingInWith()"
-      (signingInWithChange)="signingInWith.set($event)"
-    />
-  </ion-list>
-  <ion-list>
-    <ion-item-divider color="light">
-      <ion-label color="medium" style="font-weight: bold"
-        >Messaging apps</ion-label
-      >
-    </ion-item-divider>
-
-    <ion-item>
-      <ion-icon slot="start" name="paper-plane" color="primary"></ion-icon>
-      @if (!$userRecord()) {
-        <ion-label>
-          <h3>Telegram</h3>
-          <p>Checking....</p>
-        </ion-label>
-      } @else if (hasAccount("telegram")) {
-        <ion-label>
-          <h3 style="font-weight: bold">Telegram</h3>
-          <ion-text color="success" [title]="getAccountID('telegram')"
-            >Connected!
-          </ion-text>
-        </ion-label>
-        <ion-buttons slot="end">
-          <ion-button
-            [disabled]="disconnecting"
-            color="warning"
-            fill="solid"
-            (click)="disconnect('telegram')"
-          >
-            <ion-icon name="close-outline" slot="start"></ion-icon>
-            <ion-label>Disconnect</ion-label>
-          </ion-button>
-        </ion-buttons>
-      } @else {
-        <ion-label>
-          <h3>Telegram</h3>
-          <p>Not connected yet.</p>
-        </ion-label>
-        <ion-buttons slot="end">
-          <sneat-login-with-telegram [isUserAuthenticated]="true" />
-        </ion-buttons>
-      }
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="logo-whatsapp"></ion-icon>
-      <ion-label color="medium">
-        <h3 style="font-weight: bold">WhatsApp</h3>
-        <p>Not implemented yet - coming soon!</p>
-      </ion-label>
-      <!--		<ion-buttons slot="end">-->
-      <!--			<ion-button color="danger">-->
-      <!--				<ion-icon name="close-circle-outline" slot="start"></ion-icon>-->
-      <!--				<ion-label>I have no WhatsApp</ion-label>-->
-      <!--			</ion-button>-->
-      <!--		</ion-buttons>-->
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="logo-whatsapp"></ion-icon>
-      <!-- TODO: place Viber logo here -->
-      <ion-label color="medium">
-        <h3 style="font-weight: bold">Viber</h3>
-        <p>Not implemented yet - coming soon!</p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-  <ion-card-content>
-    <p>
-      You'll get much more out of Sneat.app if you integrate it with messaging
-      apps you use. Benefits:
-    </p>
-    <ul>
-      <li>Easily add contacts</li>
-      <li>Get reminders</li>
-      <li>Add todo/to_buy from your messenger</li>
-      <li>etc.</li>
-    </ul>
-  </ion-card-content>
-</ion-card>

package/src/lib/components/user-auth-providers/user-auth-accounts.component.spec.ts

@@ -1,47 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { SneatApiService } from '@sneat/api';
-import { SneatUserService } from '@sneat/auth-core';
-import { ErrorLogger } from '@sneat/core';
-import { ClassName } from '@sneat/ui';
-import { of } from 'rxjs';
-import { UserAuthAccountsComponent } from './user-auth-accounts.component';
-
-describe('UserAuthAccountsComponent', () => {
-  let component: UserAuthAccountsComponent;
-  let fixture: ComponentFixture<UserAuthAccountsComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [UserAuthAccountsComponent],
-      providers: [
-        { provide: ClassName, useValue: 'TestComponent' },
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        {
-          provide: SneatUserService,
-          useValue: {
-            userState: of({ record: undefined }),
-          },
-        },
-        {
-          provide: SneatApiService,
-          useValue: { delete: vi.fn() },
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(UserAuthAccountsComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(UserAuthAccountsComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/user-auth-providers/user-auth-accounts.component.ts

@@ -1,109 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  signal,
-  inject,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import {
-  IonButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonIcon,
-  IonItem,
-  IonItemDivider,
-  IonLabel,
-  IonList,
-  IonText,
-} from '@ionic/angular/standalone';
-import { SneatApiService } from '@sneat/api';
-import { AuthProviderID, SneatUserService } from '@sneat/auth-core';
-import { IUserRecord } from '@sneat/auth-models';
-import { ClassName, SneatBaseComponent } from '@sneat/ui';
-import { LoginWithTelegramComponent } from '../../pages/login-page/login-with-telegram.component';
-import { UserAuthAProviderStatusComponent } from './user-auth-provider-status';
-
-@Component({
-  selector: 'sneat-user-auth-accounts',
-  templateUrl: './user-auth-accounts.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    LoginWithTelegramComponent,
-    FormsModule,
-    UserAuthAProviderStatusComponent,
-    IonCard,
-    IonList,
-    IonItemDivider,
-    IonLabel,
-    IonItem,
-    IonIcon,
-    IonText,
-    IonButtons,
-    IonButton,
-    IonCardContent,
-  ],
-  providers: [
-    {
-      provide: ClassName,
-      useValue: 'UserAuthAccountsComponent',
-    },
-  ],
-})
-export class UserAuthAccountsComponent extends SneatBaseComponent {
-  private readonly sneatUserService = inject(SneatUserService);
-  private readonly sneatApiService = inject(SneatApiService);
-
-  protected readonly $userRecord = signal<IUserRecord | undefined>(undefined);
-
-  protected readonly signingInWith = signal<AuthProviderID | undefined>(
-    undefined,
-  );
-
-  constructor() {
-    super();
-    this.sneatUserService.userState.pipe(this.takeUntilDestroyed()).subscribe({
-      next: (user) => {
-        this.$userRecord.set(user.record || undefined);
-      },
-    });
-  }
-
-  protected hasAccount(provider: 'telegram' | 'viber' | 'whatsapp'): boolean {
-    provider = provider + ':';
-    for (const account of this.$userRecord()?.accounts || []) {
-      if (account.startsWith(provider)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  protected getAccountID(provider: 'telegram'): string {
-    const prefix = provider + '::';
-    const a = this.$userRecord()?.accounts?.find((a) => a.startsWith(prefix));
-    return a?.replace(prefix, '') || '';
-  }
-
-  protected disconnecting?: 'telegram' | 'viber' | 'whatsapp';
-
-  protected disconnect(provider: 'telegram'): void {
-    if (
-      !confirm(
-        'Are you sure you want to disconnect Telegram login from your account?',
-      )
-    ) {
-      return;
-    }
-    this.disconnecting = provider;
-    this.sneatApiService
-      .delete('auth/disconnect?provider=' + provider)
-      .subscribe({
-        next: () => {
-          this.disconnecting = undefined;
-          alert('Disconnected!');
-        },
-        error: this.errorLogger.logErrorHandler('Failed to disconnect'),
-      });
-  }
-}

package/src/lib/components/user-auth-providers/user-auth-provider-status.html

@@ -1,42 +0,0 @@
-<ion-item>
-  <ion-icon [color]="provider().color" [name]="provider().icon" slot="start" />
-  <ion-label>
-    <h3>{{ provider().title || providerID() }}</h3>
-    <p>
-      @if(isConnected()) { Connected as
-      <b>{{authProviderUserInfo()?.displayName}}</b>
-      &nbsp;&dash;&nbsp;
-      <a href="mailto:{{authProviderUserInfo()?.email}}"
-        >{{authProviderUserInfo()?.email}}</a
-      >. } @else { Not connected yet. }
-    </p>
-  </ion-label>
-  <ion-buttons slot="end">
-    @if (isConnected()) {
-    <ion-button color="medium" fill="outline" (click)="disconnect()">
-      <ion-icon name="close-circle-outline" slot="start"></ion-icon>
-      <ion-label>
-        @if (isSigningIn()) { Disconnecting... } @else { Disconnect }
-      </ion-label>
-    </ion-button>
-    } @else {
-    <ion-button
-      [disabled]="isDisabled()"
-      [color]="provider().color"
-      [fill]="'solid'"
-      (click)="connect()"
-    >
-      @if (isSigningIn()) {
-      <ion-spinner slot="start" name="lines-small" />
-      } @else {
-      <ion-icon slot="start" [name]="provider().icon" />
-      }
-
-      <ion-label>
-        @if (signingInWith() === providerID()) { Signing in... } @else { Connect
-        }
-      </ion-label>
-    </ion-button>
-    }
-  </ion-buttons>
-</ion-item>