taon-ui 21.0.74 → 21.0.76

package/ts-source/browser-code/ui/taon-auth/auth-button.component.ts

@@ -0,0 +1,64 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { CommonModule } from '@angular/common';
+import { Component, Input, inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import { _ } from 'tnp-core/browser';
+import { AuthDialogComponent } from './auth-dialog.component';
+import { SessionService } from './session.service';
+@Component({
+    selector: 'taon-auth-button',
+    standalone: true,
+    imports: [CommonModule, MatButtonModule, ButtonModule, MatIconModule],
+    templateUrl: './auth-button.component.html',
+    styleUrl: './auth-button.component.scss',
+})
+export class AuthButtonComponent implements OnInit {
+    @Input({ required: true })
+    linkToDashboard!: string;
+    @Input()
+    googleClientId?: string;
+    @Input()
+    microsoftClientId?: string;
+    @Input()
+    displayDashboardButton: boolean;
+    readonly session = inject(SessionService);
+    private readonly dialog = inject(MatDialog);
+    private readonly router = inject(Router);
+    openLogin() {
+        const instance = this.dialog.open(AuthDialogComponent, {
+            width: '410px',
+            data: null,
+        }).componentInstance;
+        instance.googleClientId = this.googleClientId;
+        instance.microsoftClientId = this.microsoftClientId;
+    }
+    goDashboard() {
+        if (this.linkToDashboard) {
+            this.router.navigateByUrl(this.linkToDashboard);
+        }
+    }
+    logout() {
+        this.session.logout();
+    }
+    ngOnInit(): void {
+        if (!this.microsoftClientId) {
+            console.warn('[taon-auth-button] Microsoft client id missing [microsoftClientId]');
+        }
+        if (!this.googleClientId) {
+            console.warn('[taon-auth-button] Google client id missing [googleClientId]');
+        }
+        this.displayDashboardButton = _.isBoolean(this.displayDashboardButton)
+            ? this.displayDashboardButton
+            : true;
+    }
+}

package/ts-source/browser-code/ui/taon-auth/auth-dialog.component.html

@@ -0,0 +1,115 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div class="absolute top-2 right-2">
+  <button
+    mat-icon-button
+    aria-label="Close dialog"
+    (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+<div class="auth-dialog p-5">
+  <h4
+    class="mb-3"
+    translate [translate-t]="t">
+    Login or Register
+  </h4>
+
+  <div
+    class="w-full pt-3"
+    #emailLoginBtn>
+    <form
+      [formGroup]="form"
+      (ngSubmit)="loginByEmail()"
+      class="w-full">
+      <mat-form-field
+        appearance="outline"
+        class="w-full email-field">
+        <mat-label *ngIf="!diableLoginByEmail">Email</mat-label>
+
+        <input
+          matInput
+          formControlName="email"
+          class="pl-1"
+          type="email"
+          [placeholder]="
+            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''
+          " />
+
+        <button
+          mat-icon-button
+          [disabled]="diableLoginByEmail"
+          matSuffix
+          color="primary">
+          <mat-icon>mail</mat-icon>
+        </button>
+        <mat-error
+          *ngIf="
+            form.get('email')?.hasError('pattern') && form.get('email')?.touched
+          "
+          translate [translate-t]="t" [translate-t]="t">
+          Please enter a valid email address
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            form.get('email')?.hasError('required') &&
+            form.get('email')?.touched
+          ">
+          {{ t.gettext('Email is') }} <strong translate [translate-t]="t">required</strong>
+        </mat-error>
+      </mat-form-field>
+    </form>
+
+    <div class="divider">
+      <span translate [translate-t]="t">or</span>
+    </div>
+
+    
+    <div
+      #googleBtn
+      class="google-container">
+      <span
+        *ngIf="!googleButtonLoaded"
+        class="text-300 p-2"
+        translate
+         [translate-t]="t" [translate-t]="t">loading google button..</span
+      >
+      <mat-progress-bar
+        *ngIf="!googleButtonLoaded"
+        mode="indeterminate"
+        class="auth-progress" />
+    </div>
+
+    
+    <div
+      *ngIf="microsoftClientId"
+      #microsoftBtn
+      class="microsoft-container">
+      <button
+        mat-stroked-button
+        color="primary"
+        class="w-full microsoft-btn"
+        (click)="loginWithMicrosoft()">
+        <mat-icon class="mr-2">login</mat-icon>
+        {{ t.gettext('Continue with Microsoft') }}
+      </button>
+    </div>
+  </div>
+
+  <br />
+
+  <div class="flex justify-content-end">
+    <button
+      mat-button
+      mat-dialog-close>
+      {{ t.gettext('Cancel') }}
+    </button>
+  </div>
+</div>

package/ts-source/browser-code/ui/taon-auth/auth-dialog.component.scss

@@ -0,0 +1,65 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+.auth-dialog {
+  width: 100%;
+}
+
+.google-container {
+  width: 100%;
+  height: 50px;
+  border-color: #9ca3af !important;
+}
+
+.microsoft-container {
+  width: 100%;
+}
+
+.microsoft-btn {
+  height: 40px;
+  border-radius: 4px !important; // square-ish
+  border-color: #9ca3af !important;
+  background-color: white;
+}
+
+:host::ng-deep {
+  .email-field {
+    .mdc-notched-outline__trailing,
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch {
+      border-color: #9ca3af !important;
+    }
+  }
+}
+
+:host ::ng-deep {
+  .auth-progress {
+    .mdc-linear-progress__bar-inner {
+      border-color: #9ca3af !important;
+    }
+  }
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #ccc;
+}
+
+.divider span {
+  padding: 0 10px;
+  color: #666;
+  font-size: 14px;
+}

package/ts-source/browser-code/ui/taon-auth/auth-dialog.component.ts

@@ -0,0 +1,147 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, inject, ChangeDetectorRef, OnInit, } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators, } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { ThemePalette } from '@angular/material/core';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MtxLoaderModule, MtxLoaderType } from '@ng-matero/extensions/loader';
+import { Translation, Translatable, TranslateDirective, } from '@taon-dev/i18n/browser';
+import { PrimeIcons } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { Taon } from 'taon/browser';
+import { _ } from 'tnp-core/browser';
+import { GoogleAuthService } from './google-auth.service';
+import { MicrosoftAuthService } from './microsoft-auth.service';
+import { SessionService } from './session.service';
+const t = Translation.for('src/lib/ui/taon-auth/auth-dialog.component.ts', { "src/lib/ui/taon-auth/auth-dialog.component.html": { "en-US": async () => (await import('./i18n/auth-dialog.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/auth-dialog.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/auth-dialog.component.html.de-DE.i18n.data')).default }, "src/lib/ui/taon-auth/auth-dialog.component.ts": { "en-US": async () => (await import('./i18n/auth-dialog.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/auth-dialog.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/auth-dialog.component.ts.de-DE.i18n.data')).default } } as any);
+@Component({
+    selector: 'app-auth-dialog',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatIconModule,
+        MatDividerModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatProgressSpinnerModule,
+        MatProgressBarModule,
+        MtxLoaderModule,
+        ButtonModule,
+        InputTextModule,
+        ReactiveFormsModule,
+        FormsModule,
+        TranslateDirective,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './auth-dialog.component.html',
+    styleUrl: './auth-dialog.component.scss',
+})
+export class AuthDialogComponent implements AfterViewInit, OnInit, Translatable {
+    t = t.for(this);
+    cdr = inject(ChangeDetectorRef);
+    emailRegex = /^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
+    form = new FormGroup({
+        email: new FormControl('', [
+            Validators.required,
+            Validators.pattern(this.emailRegex),
+        ]),
+    });
+    @Input()
+    googleClientId?: string;
+    @Input()
+    microsoftClientId?: string;
+    @ViewChild('emailLoginBtn', { static: true })
+    emailLoginBtn!: ElementRef<HTMLDivElement>;
+    @ViewChild('googleBtn', { static: true })
+    googleBtn!: ElementRef<HTMLDivElement>;
+    diableLoginByEmail = !(window.location.hostname === 'localhost');
+    private readonly dialogRef = inject(MatDialogRef<AuthDialogComponent>);
+    private readonly googleAuth = inject(GoogleAuthService);
+    private readonly microsoftAuth = inject(MicrosoftAuthService);
+    private readonly session = inject(SessionService);
+    googleButtonLoaded = false;
+    close(): void {
+        this.dialogRef.close();
+    }
+    loginWithMicrosoft(): void {
+        if (!this.microsoftClientId) {
+            console.warn('Microsoft client id missing [microsoftClientId]');
+            return;
+        }
+        this.microsoftAuth.login(this.microsoftClientId).subscribe(profile => {
+            if (!profile?.email)
+                return;
+            this.session.loginWithGoogle({
+                email: profile.email,
+                emailVerified: true,
+                displayName: profile.name,
+                pictureUrl: profile.picture,
+            });
+            this.dialogRef.close();
+        });
+    }
+    loginByEmail(): void {
+        this.form.markAllAsTouched();
+        this.form.updateValueAndValidity();
+        if (this.form.invalid) {
+            return;
+        }
+        const displayName = _.startCase((this.form.value.email || '').split('@')[0]);
+        this.session.loginWithGoogle({
+            email: this.form.value.email,
+            emailVerified: true,
+            displayName,
+        });
+        this.dialogRef.close();
+    }
+    ngOnInit(): void {
+        if (this.diableLoginByEmail) {
+            this.form.controls.email.disable();
+        }
+    }
+    ngAfterViewInit(): void {
+        if (!this.googleClientId) {
+            console.warn('Google client id missing [googleClientId]');
+            return;
+        }
+        this.dialogRef.afterOpened().subscribe(() => {
+            setTimeout(() => {
+                const el: HTMLElement = this.emailLoginBtn.nativeElement;
+                const width = Math.floor(el.getBoundingClientRect().width);
+                this.googleAuth
+                    .renderButton(this.googleBtn.nativeElement, this.googleClientId, width)
+                    .subscribe(payload => {
+                    const email = payload.email;
+                    const verified = !!payload.email_verified;
+                    this.googleButtonLoaded = true;
+                    this.cdr.markForCheck();
+                    if (email && verified) {
+                        this.session.loginWithGoogle({
+                            email,
+                            emailVerified: verified,
+                            displayName: payload.name,
+                            pictureUrl: payload.picture,
+                        });
+                        this.dialogRef.close();
+                    }
+                });
+            });
+        });
+    }
+}

package/ts-source/browser-code/ui/taon-auth/auth.guard.ts

@@ -0,0 +1,23 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { Injectable } from '@angular/core';
+import { CanActivate, Router, UrlTree } from '@angular/router';
+import { Observable, map, take } from 'rxjs';
+import { SessionService } from './session.service';
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+    constructor(private readonly session: SessionService, private readonly router: Router) { }
+    canActivate(): Observable<boolean | UrlTree> {
+        return this.session.isLoggedIn$.pipe(take(1), map(isLoggedIn => {
+            if (isLoggedIn) {
+                return true;
+            }
+            return this.router.parseUrl('/');
+        }));
+    }
+}

package/ts-source/browser-code/ui/taon-auth/google-auth.service.ts

@@ -0,0 +1,64 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { Injectable, NgZone } from '@angular/core';
+import { Observable } from 'rxjs';
+interface Window {
+    google?: any;
+}
+@Injectable({ providedIn: 'root' })
+export class GoogleAuthService {
+    constructor(private zone: NgZone) { }
+    loadScript(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            if ((window as Window).google?.accounts?.id) {
+                resolve();
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = 'https://accounts.google.com/gsi/client';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => resolve();
+            script.onerror = () => reject();
+            document.head.appendChild(script);
+        });
+    }
+    renderButton(container: HTMLElement, clientId: string, width: number): Observable<any> {
+        return new Observable(subscriber => {
+            this.loadScript().then(() => {
+                const google = (window as Window).google;
+                google.accounts.id.initialize({
+                    client_id: clientId,
+                    auto_select: false,
+                    callback: (response: any) => {
+                        this.zone.run(() => {
+                            const payload = this.decodeJwt(response.credential);
+                            subscriber.next(payload);
+                        });
+                    },
+                });
+                google.accounts.id.disableAutoSelect();
+                google.accounts.id.renderButton(container, {
+                    theme: 'outline',
+                    size: 'large',
+                    width,
+                    type: 'standard',
+                });
+            });
+        });
+    }
+    private decodeJwt(token: string): any {
+        const base64Url = token.split('.')[1];
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(atob(base64)
+            .split('')
+            .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join(''));
+        return JSON.parse(jsonPayload);
+    }
+}

package/ts-source/browser-code/ui/taon-auth/i18n/auth-dialog.component.html.de-DE.i18n.data.ts

@@ -0,0 +1,72 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export interface DeDeTraslationOverrideSrcLibUiTaonAuthAuthDialogComponentHtml {
+    "de-DE": {
+        "": {
+            "Cancel"?: string;
+            "Continue with Microsoft"?: string;
+            "Email is"?: string;
+            "Login by email (disabled)"?: string;
+            "Login or Register"?: string;
+            "Please enter a valid email address"?: string;
+            "loading google button.."?: string;
+            "or"?: string;
+            "required"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-auth/auth-dialog.component.html",
+    "tags": [
+        {
+            "gettextString": "Login or Register",
+            "lineNumber": 10,
+            "translation": "Zaloguj lub Zarejestruj się"
+        },
+        {
+            "gettextString": "Please enter a valid email address",
+            "lineNumber": 44,
+            "translation": "Proszę wprowadź poprawny adres email"
+        },
+        {
+            "gettextString": "Email is",
+            "lineNumber": 57,
+            "translation": "Adres email jest"
+        },
+        {
+            "gettextString": "required",
+            "lineNumber": 57,
+            "translation": "wymagany"
+        },
+        {
+            "gettextString": "or",
+            "lineNumber": 63,
+            "translation": "lub"
+        },
+        {
+            "gettextString": "loading google button..",
+            "lineNumber": 70,
+            "translation": "ładowanie przycisku google"
+        },
+        {
+            "gettextString": "Continue with Microsoft",
+            "lineNumber": 93,
+            "translation": "Zaloguj się przez konto Microsoft"
+        },
+        {
+            "gettextString": "Cancel",
+            "lineNumber": 104,
+            "translation": "Anuluj"
+        },
+        {
+            "gettextString": "Login by email (disabled)",
+            "lineNumber": 34,
+            "translation": "Logowanie mailem (wyłączone)"
+        }
+    ]
+};

package/ts-source/browser-code/ui/taon-auth/i18n/auth-dialog.component.html.de-DE.po

@@ -0,0 +1,41 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:10
+msgid "Login or Register"
+msgstr "Zaloguj lub Zarejestruj się"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:44
+msgid "Please enter a valid email address"
+msgstr "Proszę wprowadź poprawny adres email"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:57
+msgid "Email is"
+msgstr "Adres email jest"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:57
+msgid "required"
+msgstr "wymagany"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:63
+msgid "or"
+msgstr "lub"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:70
+msgid "loading google button.."
+msgstr "ładowanie przycisku google"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:93
+msgid "Continue with Microsoft"
+msgstr "Zaloguj się przez konto Microsoft"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:104
+msgid "Cancel"
+msgstr "Anuluj"
+
+#: src/lib/ui/taon-auth/auth-dialog.component.html:34
+msgid "Login by email (disabled)"
+msgstr "Logowanie mailem (wyłączone)"

package/ts-source/browser-code/ui/taon-auth/i18n/auth-dialog.component.html.en-US.i18n.data.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export interface EnUsTraslationOverrideSrcLibUiTaonAuthAuthDialogComponentHtml {
+    "en-US": {
+        "": {
+            "Cancel"?: string;
+            "Continue with Microsoft"?: string;
+            "Email is"?: string;
+            "Login by email (disabled)"?: string;
+            "Login or Register"?: string;
+            "Please enter a valid email address"?: string;
+            "loading google button.."?: string;
+            "or"?: string;
+            "required"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-auth/auth-dialog.component.html",
+    "tags": [
+        {
+            "gettextString": "Login or Register",
+            "lineNumber": 10
+        },
+        {
+            "gettextString": "Please enter a valid email address",
+            "lineNumber": 44
+        },
+        {
+            "gettextString": "Email is",
+            "lineNumber": 57
+        },
+        {
+            "gettextString": "required",
+            "lineNumber": 57
+        },
+        {
+            "gettextString": "or",
+            "lineNumber": 63
+        },
+        {
+            "gettextString": "loading google button..",
+            "lineNumber": 70
+        },
+        {
+            "gettextString": "Continue with Microsoft",
+            "lineNumber": 93
+        },
+        {
+            "gettextString": "Cancel",
+            "lineNumber": 104
+        },
+        {
+            "gettextString": "Login by email (disabled)",
+            "lineNumber": 34
+        }
+    ]
+};