@taon-dev/session 21.0.216 → 21.0.240

package/html/lib/taon-session/taon-session/taon-session.component.html

@@ -1,33 +1,416 @@
-<h2>Auth Demo</h2>
-
-<ng-container *ngIf="userId$ | async; else notLoggedIn">
-  Logged in as userId: {{ userId ? userId : '- wrong id -' }}
-</ng-container>
-<ng-template #notLoggedIn> Not logged in </ng-template>
-
-<div>
-  <ng-container *ngIf="!userId">
-    <input
-      [(ngModel)]="email"
-      placeholder="email" />
-    <br />
-    <input
-      [(ngModel)]="password"
-      type="password"
-      placeholder="password" />
-  </ng-container>
-
-  <br /><br />
-
-  <button
-    (click)="login()"
-    *ngIf="!userId">
-    Login
-  </button>
-  <button (click)="reloadMe()">Reload /me</button>
+<!-- #region close button -->
+<div
+  class="absolute top-1 right-1 pointer z-1"
+  *ngIf="isInsideDialog">
   <button
-    (click)="logout()"
-    *ngIf="userId">
-    Logout
+    mat-icon-button
+    aria-label="Close dialog"
+    (click)="close()">
+    <mat-icon>close</mat-icon>
   </button>
-</div>
+</div>
+<!-- #endregion -->
+<!-- STATE: {{ state.currentValue }} <br /> -->
+<!-- ERRORS: {{ form.errors | json }} <br /> -->
+<!-- IS LOGGED IN: {{ isLoggedIn$ | async }}<br /> -->
+<!-- {{ context$ | async | json }} -->
+<!-- <button (click)="test()" >test</button> -->
+<h1 class="flex items-center justify-center pt-10">
+  <taon-profile-picture [hideButtons]="!(isLoggedIn$ | async)" />
+  <!-- <mat-icon
+    class="!w-[100px] !h-[100px] !text-[100px] !leading-[100px]"
+    fontIcon="account_circle">
+  </mat-icon> -->
+</h1>
+<taon-slide-content
+  #slide
+  [whenAllowedAnimationMap]="whenAllowedAnimationMap">
+  <taon-slide-content-child
+    [assignToState]="TaonSessionState.LOADING_INITIAL_AUTH_INFO">
+    <!-- #region login success -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Loading authenticaiton info..
+      </h4>
+
+      <div class="w-full pt-3">
+        <!-- success stuff -->
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child
+    [assignToState]="TaonSessionState.LOADING_CHECK_USER_EMAIL_EXISTS">
+    <!-- #region LOADING_CHECK_USER_EMAIL_EXISTS -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Loading...
+      </h4>
+
+      <div class="w-full pt-3">
+        <!-- success stuff -->
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child [assignToState]="TaonSessionState.LOADING_AUTH">
+    <!-- #region LOADING_AUTH -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Loading authentication info...
+      </h4>
+
+      <div class="w-full pt-3">
+        <!-- success stuff -->
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child
+    [assignToState]="TaonSessionState.LOGIN_OR_REGISTER">
+    <!-- #region login or register -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Login or Register
+      </h4>
+
+      <div class="w-full pt-3">
+        <!-- #region normal email -->
+        <form
+          [formGroup]="form"
+          (ngSubmit)="executeActionForState()"
+          class="w-full">
+          <mat-form-field
+            [ngClass]="{
+              'cursor-not-allowed pointer-events-none select-none':
+                diableLoginByEmail,
+            }"
+            appearance="outline"
+            class="w-full email-field">
+            <mat-label *ngIf="!diableLoginByEmail">Email</mat-label>
+
+            <input
+              #emailInput
+              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>
+              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>required</strong>
+            </mat-error>
+          </mat-form-field>
+        </form>
+        <!-- #endregion -->
+
+        @if (isAnySocialLoginEnabled) {
+          <div class="divider">
+            <span translate>or</span>
+          </div>
+        }
+
+        <!-- GOOGLE BUTTON -->
+        @if (googleClientId) {
+          <google-login-register-button
+            (googleSignIn)="loginWithGoogle()"></google-login-register-button>
+
+          <mat-error
+            *ngIf="
+              form
+                .get('googleCode')
+                ?.hasError(TaonLoginErrors.INVALID_SOCIAL_LOGIN)
+            ">
+            {{ TaonErorsMap.get(TaonLoginErrors.INVALID_SOCIAL_LOGIN) }}
+          </mat-error>
+        }
+
+        <!-- <div
+          *ngIf="googleClientId"
+          #googleBtn
+          class="google-container">
+          <span
+            *ngIf="!googleButtonLoaded"
+            class="text-300 p-2"
+            translate
+            >loading google button..</span
+          >
+          <mat-progress-bar
+            *ngIf="!googleButtonLoaded"
+            mode="indeterminate"
+            class="auth-progress" />
+        </div> -->
+
+        <!-- MICROSOFT BUTTON -->
+        <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>
+          {{ t.gettext('Login') }}
+        </button> -->
+
+        <!-- <button
+          *ngIf="isInsideDialog"
+          mat-button
+          mat-dialog-close>
+          {{ t.gettext('Cancel') }}
+        </button> -->
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child [assignToState]="TaonSessionState.ENTER_PASSWORD">
+    <!-- #region password -->
+    <div class="p-5">
+      <h4 class="mb-3 flex items-center">
+        <button
+          (click)="
+            resetPasswordScreen(); goTo(TaonSessionState.LOGIN_OR_REGISTER)
+          "
+          mat-icon-button
+          type="button">
+          <mat-icon>keyboard_arrow_left</mat-icon>
+        </button>
+        <span class="flex">{{ t.gettext('Enter Password') }}</span>
+      </h4>
+      <div class="w-full pt-3">
+        <form
+          [formGroup]="form"
+          (ngSubmit)="executeActionForState()"
+          class="w-full">
+          <mat-form-field
+            appearance="outline"
+            class="w-full email-field">
+            <mat-label>Password</mat-label>
+
+            <input
+              #passwordInput
+              matInput
+              formControlName="password"
+              class="pl-1"
+              type="password" />
+
+            <button
+              mat-icon-button
+              matSuffix
+              color="primary">
+              <mat-icon>lock</mat-icon>
+            </button>
+            <mat-error
+              *ngIf="
+                form
+                  .get('password')
+                  ?.hasError(TaonLoginErrors.INVALID_PASSWORD) &&
+                form.get('password')?.touched
+              ">
+              {{ TaonErorsMap.get(TaonLoginErrors.INVALID_PASSWORD) }}
+            </mat-error>
+
+            <mat-error
+              *ngIf="
+                form.get('password')?.hasError('required') &&
+                form.get('password')?.touched
+              ">
+              {{ t.gettext('Password is') }} <strong translate>required</strong>
+            </mat-error>
+          </mat-form-field>
+        </form>
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child
+    [assignToState]="TaonSessionState.ENTER_REGISTRATION_PASSWORDS">
+    <!-- #region registration passwords -->
+    <div class="p-5">
+      <h4 class="mb-3 flex items-center">
+        <button
+          (click)="
+            resetPasswordScreen(); goTo(TaonSessionState.LOGIN_OR_REGISTER)
+          "
+          mat-icon-button
+          type="button">
+          <mat-icon>keyboard_arrow_left</mat-icon>
+        </button>
+        <span class="flex">{{ t.gettext('Enter Registration Password') }}</span>
+      </h4>
+      <div class="w-full pt-3">
+        <form
+          [formGroup]="form"
+          (ngSubmit)="executeActionForState()"
+          class="w-full">
+          <mat-form-field
+            appearance="outline"
+            class="w-full email-field">
+            <mat-label>Enter Password For New Account</mat-label>
+
+            <input
+              #registrationPasswordInput
+              matInput
+              formControlName="password"
+              class="pl-1"
+              type="password" />
+
+            <mat-error
+              *ngIf="
+                form
+                  .get('password')
+                  ?.hasError(TaonLoginErrors.INVALID_PASSWORD) &&
+                form.get('password')?.touched
+              ">
+              {{ TaonErorsMap.get(TaonLoginErrors.INVALID_PASSWORD) }}
+            </mat-error>
+
+            <mat-error
+              *ngIf="
+                form.get('password')?.hasError('required') &&
+                form.get('password')?.touched
+              ">
+              {{ t.gettext('Password is') }} <strong translate>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field
+            appearance="outline"
+            class="w-full email-field">
+            <mat-label>Repeat Password</mat-label>
+
+            <input
+              matInput
+              formControlName="passwordRepeat"
+              class="pl-1"
+              type="password" />
+
+            <button
+              mat-icon-button
+              matSuffix
+              color="primary">
+              <mat-icon>key_vertical</mat-icon>
+            </button>
+            <mat-error
+              *ngIf="
+                form
+                  .get('passwordRepeat')
+                  ?.hasError(TaonLoginErrors.INVALID_PASSWORD) &&
+                form.get('passwordRepeat')?.touched
+              ">
+              {{ TaonErorsMap.get(TaonLoginErrors.INVALID_PASSWORD) }}
+            </mat-error>
+
+            <mat-error
+              *ngIf="
+                form.get('passwordRepeat')?.hasError('required') &&
+                form.get('passwordRepeat')?.touched
+              ">
+              {{ t.gettext('Repeated Password is ') }}
+              <strong translate>required</strong>
+            </mat-error>
+          </mat-form-field>
+          <mat-error
+            *ngIf="
+              form.get('passwordRepeat').valid &&
+              form.get('password').valid &&
+              form.hasError(TaonLoginErrors.PASSWORDS_DO_NOT_MATCH)
+            ">
+            {{ TaonErorsMap.get(TaonLoginErrors.PASSWORDS_DO_NOT_MATCH) }}
+          </mat-error>
+        </form>
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child [assignToState]="TaonSessionState.LOGIN_SUCCESS">
+    <!-- #region login success -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Login Successfully
+      </h4>
+
+      @if (!isInsideDialog) {
+        <div class="w-full pt-3">
+          <!-- success stuff -->
+          <button
+            mat-button
+            (click)="logout()">
+            Logout
+          </button>
+        </div>
+      }
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+
+  <taon-slide-content-child [assignToState]="TaonSessionState.PROFILE_INFO">
+    <!-- #region profile info -->
+    <div class="p-5">
+      <h4
+        class="mb-3"
+        translate>
+        Welcome
+      </h4>
+
+      <div class="w-full pt-3">
+        <!-- success stuff -->
+
+        <taon-session-profile
+          [config]="config"
+          (logout)="logout()" />
+        <!-- context -->
+      </div>
+    </div>
+    <!-- #endregion -->
+  </taon-slide-content-child>
+</taon-slide-content>

package/html/lib/taon-session/taon-session-backoffice/taon-session-backoffice.component.html

@@ -0,0 +1,12 @@
+<h2>{{ t.gettext('Active sessions') }}</h2>
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [allowedColumns]="['userId', 'deviceName', 'ip']"
+  [hideAddButton]="true"
+  searchMode="advanced"
+  [expansionTemplate]="expansionTemplate">
+</taon-datatable>
+<ng-template #expansionTemplate let-session>
+  <taon-session-details [sessionId]="session.id"></taon-session-details>
+</ng-template>

package/html/lib/taon-session/taon-session-backoffice/taon-session-details.component.html

@@ -0,0 +1,50 @@
+@if (loading()) {
+  <p role="status">{{ t.gettext('Loading session details...') }}</p>
+}
+@if (error()) {
+  <p role="alert">{{ error() }}</p>
+}
+@if (session(); as detail) {
+  <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 p-4">
+    <dt>{{ t.gettext('Session ID') }}</dt>
+    <dd>{{ detail.id }}</dd>
+    <dt>{{ t.gettext('User ID') }}</dt>
+    <dd>{{ detail.userId }}</dd>
+    <dt>{{ t.gettext('Username') }}</dt>
+    <dd>
+      @if (detail.user; as user) {
+        <a [routerLink]="taonBackofficeNavigationService.detailsLink('user', user.id)">
+          {{ user.username || 'User #' + user.id }}
+        </a>
+      } @else {
+        {{ t.gettext('Unavailable') }}
+      }
+    </dd>
+    <dt>{{ t.gettext('Email') }}</dt>
+    <dd>{{ detail.identity?.email || t.gettext('Unavailable') }}</dd>
+    <dt>{{ t.gettext('Provider') }}</dt>
+    <dd>{{ detail.authenticationProvider || detail.identity?.provider || t.gettext('Unavailable') }}</dd>
+    @if (detail.identityId) {
+      <dt>{{ t.gettext('Identity ID') }}</dt>
+      <dd>{{ detail.identityId }}</dd>
+    }
+    <dt>{{ t.gettext('Device') }}</dt>
+    <dd>{{ detail.deviceName || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('IP') }}</dt>
+    <dd>{{ detail.ip || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('User agent') }}</dt>
+    <dd class="break-all">{{ detail.userAgent || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('Logged in') }}</dt>
+    <dd>{{ (detail.createdAt | date: 'medium') || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('Last activity') }}</dt>
+    <dd>{{ (detail.lastActivityAt | date: 'medium') || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('Expires') }}</dt>
+    <dd>{{ (detail.expiresAt | date: 'medium') || t.gettext('Unknown') }}</dd>
+    <dt>{{ t.gettext('Revoked') }}</dt>
+    <dd>{{ (detail.revokedAt | date: 'medium') || t.gettext('Not revoked') }}</dd>
+    @if (detail.revokeReason) {
+      <dt>{{ t.gettext('Revocation reason') }}</dt>
+      <dd>{{ detail.revokeReason }}</dd>
+    }
+  </dl>
+}

package/html/lib/taon-session/taon-session-button/taon-session-button.component.html

@@ -0,0 +1,32 @@
+<div class="flex align-items-center gap-2">
+  <ng-container
+    *ngIf="
+      (taonSessionStateService.isLoggedIn$ | async) === false;
+      else loggedIn
+    ">
+    <button
+      mat-button
+      (click)="openLogin()">
+      Login
+    </button>
+  </ng-container>
+
+  <ng-template #loggedIn>
+    <button
+      *ngIf="displayDashboardButton"
+      mat-button
+      color="primary"
+      class="auth-btn"
+      (click)="goDashboard()">
+      <mat-icon>dashboard</mat-icon>
+      Dashboard
+    </button>
+
+    <button
+      mat-button
+      class="ml-2"
+      (click)="profile()">
+      Welcome user: {{ taonSessionStateService.userId() }}
+    </button>
+  </ng-template>
+</div>

package/html/lib/taon-session-user/taon-session-backoffice-users/taon-session-backoffice-users.component.html

@@ -0,0 +1,11 @@
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [allowedColumns]="['id', 'username']"
+  searchMode="advanced"
+  (addingItem)="add()"
+  [expansionTemplate]="expansionTemplate">
+</taon-datatable>
+<ng-template #expansionTemplate let-user>
+  <taon-session-user-details [user]="user"></taon-session-user-details>
+</ng-template>

package/html/lib/taon-session-user/taon-session-backoffice-users/taon-session-user-details.component.html

@@ -0,0 +1,99 @@
+<a [routerLink]="navigation.detailsLink('user', user.id)">User details #{{ user.id }}</a>
+  <!-- profile -->
+  <div class="user-details__profile">
+    <div class="user-details__profile-picture">
+      <taon-profile-picture
+        [userId]="user.id"
+        [readOnly]="!(context$ | async)?.isSuperUser">
+      </taon-profile-picture>
+    </div>
+
+    <div class="user-details__profile-fields">
+      <div class="user-details__profile-field">
+        <span class="user-details__profile-label"> First Name </span>
+
+        <span class="user-details__profile-value"> - </span>
+      </div>
+
+      <div class="user-details__profile-field">
+        <span class="user-details__profile-label"> Surname </span>
+
+        <span class="user-details__profile-value"> - </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- groups -->
+  <div class="user-details__section">
+    <div class="user-details__section-header">
+      <h4 class="user-details__section-title">User groups</h4>
+
+      @if (groupChooserUserId() !== user.id) {
+        <button
+          mat-flat-button
+          color="primary"
+          type="button"
+          (click)="openGroupChooser(user.id)">
+          <mat-icon> group_add </mat-icon>
+
+          Assign group
+        </button>
+      }
+    </div>
+
+    @if (groupChooserUserId() === user.id) {
+      <taon-group-chooser
+        [userId]="user.id"
+        [excludedGroupIds]="assignedGroupIds(user.id)"
+        (assigned)="groupAssigned(user.id)"
+        (cancelled)="closeGroupChooser()">
+      </taon-group-chooser>
+    }
+
+    <taon-datatable
+      [data]="groupRowsFor(user.id)"
+      [columns]="groupColumns"
+      [pageSize]="5"
+      [hideSearch]="true"
+      [hideAddButton]="true"
+      [showPaginator]="false"
+      searchMode="simple"
+      [expansionTemplate]="groupExpansionTemplate">
+    </taon-datatable>
+  </div>
+
+  <!-- providers -->
+  <div class="user-details__section">
+    <h4 class="user-details__section-title">Providers</h4>
+
+    <taon-datatable
+      [data]="user.identities"
+      [columns]="identityColumns"
+      [pageSize]="5"
+      [hideSearch]="true"
+      [hideAddButton]="true"
+      [showPaginator]="false"
+      searchMode="simple">
+    </taon-datatable>
+  </div>
+
+
+<ng-template
+  #groupExpansionTemplate
+  let-group>
+  <div class="user-details__group-roles">
+    <span class="user-details__section-title"> Roles from groups </span>
+
+    <ul class="user-details__role-list">
+      @for (role of group.roles; track role.roleId) {
+        <li class="user-details__role-item">
+          <a [routerLink]="navigation.detailsLink('role', role.roleId)">{{ role.name }}</a>
+        </li>
+      } @empty {
+        <li class="user-details__role-item">
+          No roles available through this group
+        </li>
+      }
+    </ul>
+  </div>
+</ng-template>

package/index.d.ts

@@ -1 +1,3 @@
 export * from './lib';
+import def from './lib';
+export default def;

package/index.js

@@ -15,4 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib"), exports);
+const lib_1 = require("./lib");
+exports.default = lib_1.default;
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":[""],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wCAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":[""],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wCAAsB;AACtB,+BAAwB;AACxB,kBAAe,aAAG,CAAC"}

package/lib/build-info._auto-generated_.d.ts

@@ -21,4 +21,7 @@ export declare const CURRENT_PACKAGE_TAON_VERSION = "v21";
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-export declare const CURRENT_PACKAGE_VERSION = "21.0.216";
+export declare const CURRENT_PACKAGE_VERSION = "21.0.240";
+export declare namespace TAON_CLOUDFLARE_WORKERS_URLS {
+    const CwCustomSeoni4B382 = "https://cw-custom-seoni-4b382.darekf77.workers.dev";
+}