@sneat/auth-ui 0.1.0

package/eslint.config.cjs

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

package/ng-package.json

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

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@sneat/auth-ui",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@ionic/angular": ">=8",
+    "firebase": "*",
+    "@angular/fire": ">=20",
+    "@sneat/random": "*"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  },
+  "type": "module"
+}

package/project.json

@@ -0,0 +1,38 @@
+{
+  "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/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/pages/sneat-auth-routing.module';
+export * from './lib/components';
+export * from './lib/pipes/person-names.pipe';

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

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

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

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

@@ -0,0 +1,116 @@
+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/index.ts

@@ -0,0 +1,3 @@
+export * from './user-required-fields';
+export * from './user-auth-providers/user-auth-accounts.component';
+export * from './auth-menu-item/auth-menu-item.component';

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

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

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

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

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