@c8y/login 1022.45.2 → 1023.0.0

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@c8y/login",
-  "version": "1022.45.2",
+  "version": "1023.0.0",
   "description": "This package is used to scaffold a login application for Cumulocity IoT.",
   "dependencies": {
-    "@c8y/style": "1022.45.2",
-    "@c8y/ngx-components": "1022.45.2",
-    "@c8y/client": "1022.45.2",
-    "@c8y/bootstrap": "1022.45.2",
-    "@angular/cdk": "^19.2.19",
+    "@c8y/style": "1023.0.0",
+    "@c8y/ngx-components": "1023.0.0",
+    "@c8y/client": "1023.0.0",
+    "@c8y/bootstrap": "1023.0.0",
+    "@angular/cdk": "^20.2.7",
     "monaco-editor": "~0.53.0",
-    "ngx-bootstrap": "19.0.2",
-    "rxjs": "7.8.1"
+    "ngx-bootstrap": "20.0.2",
+    "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1022.45.2",
-    "@c8y/devkit": "1022.45.2"
+    "@c8y/options": "1023.0.0",
+    "@c8y/devkit": "1023.0.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=19 <20"
+    "@angular/common": ">=20 <21"
   },
   "author": "Cumulocity GmbH",
   "license": "Apache-2.0"

package/src/app/bootstrap-login/bootstrap-login.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { CookieBannerComponent, TranslationLoaderService } from '@c8y/ngx-components';
-import { LoginComponent } from '../login';
+import { CookieBannerComponent } from '@c8y/ngx-components';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
   selector: 'c8y-bootstrap',
@@ -8,9 +8,4 @@ import { LoginComponent } from '../login';
   standalone: true,
   imports: [LoginComponent, CookieBannerComponent]
 })
-export class BootstrapLoginComponent {
-  constructor(
-    // only here to ensure the service is instantiated
-    public translationLoaderService: TranslationLoaderService
-  ) {}
-}
+export class BootstrapLoginComponent {}

package/src/app/login/login.component.html

@@ -1,128 +1,127 @@
 <div class="login-panel {{ platformAnimationSrc ? 'isc8y' : '' }}">
-  <div
-    class="square animated fadeIn"
-    *ngIf="platformAnimationSrc"
-  >
-    <img [src]="platformAnimationSrc" />
-  </div>
+  @if (platformAnimationSrc) {
+    <div class="square animated fadeIn">
+      <img [src]="platformAnimationSrc" />
+    </div>
+  }
 
-  <div
-    class="login-form animated fadeIn"
-    *ngIf="currentView !== LOGIN_VIEWS.None"
-    [ngSwitch]="currentView"
-  >
-    <main class="card-block p-b-0 form-group-lg">
-      <span class="mainlogo {{ !isBrandLogoSet ? 'c8y-logo' : '' }}"></span>
-      <ng-container *ngSwitchCase="LOGIN_VIEWS.Credentials">
-        <span class="{{ platformAnimationSrc ? '' : 'text-center' }}">
-          <h2
-            class="m-b-8"
-            translate
-          >
-            Welcome
-          </h2>
-          <p
-            class="text-16 m-b-40"
-            translate
-          >
-            Log in to access your IoT platform.
-          </p>
-        </span>
-      </ng-container>
-      <ng-container *ngSwitchCase="LOGIN_VIEWS.RecoverPassword">
-        <span class="{{ platformAnimationSrc ? '' : 'text-center' }}">
-          <h2
-            class="m-b-8"
-            translate
-          >
-            Reset password
-          </h2>
-          <p
-            class="text-16 m-b-40"
-            translate
-          >
-            Enter your email address and we'll send you a secure link to reset your password.
-          </p>
-        </span>
-      </ng-container>
-      <c8y-alert-outlet
-        class="m-b-24 d-block"
-        position="static"
-      ></c8y-alert-outlet>
-
-      <c8y-credentials
-        *ngSwitchCase="LOGIN_VIEWS.Credentials"
-        (onChangeView)="handleLoginTemplate($event)"
-        [loginViewParams]="loginViewParams"
-      ></c8y-credentials>
-      <c8y-recover-password
-        *ngSwitchCase="LOGIN_VIEWS.RecoverPassword"
-        (onChangeView)="handleLoginTemplate($event)"
-      ></c8y-recover-password>
-      <c8y-change-password
-        *ngSwitchCase="LOGIN_VIEWS.ChangePassword"
-        (onChangeView)="handleLoginTemplate($event)"
-        [credentials]="credentials"
-      ></c8y-change-password>
-      <c8y-totp-auth
-        *ngSwitchCase="LOGIN_VIEWS.TotpChallenge"
-        (onCancel)="reset(false)"
-        [view]="currentView"
-        [credentials]="credentials"
-      ></c8y-totp-auth>
-      <c8y-totp-auth
-        *ngSwitchCase="LOGIN_VIEWS.TotpSetup"
-        (onCancel)="reset(false)"
-        [view]="currentView"
-        [credentials]="credentials"
-      ></c8y-totp-auth>
-      <c8y-sms-challenge
-        *ngSwitchCase="LOGIN_VIEWS.SmsChallenge"
-        (onCancel)="reset(false)"
-        [credentials]="credentials"
-      ></c8y-sms-challenge>
-
-      <c8y-provide-phone-number
-        *ngSwitchCase="LOGIN_VIEWS.ProvidePhoneNumber"
-        (onCancel)="reset(false)"
-        (onChangeView)="handleLoginTemplate($event)"
-        [credentials]="credentials"
-      ></c8y-provide-phone-number>
-      <c8y-tenant-id-setup
-        *ngSwitchCase="LOGIN_VIEWS.TenantIdSetup"
-        (onChangeView)="handleLoginTemplate($event)"
-      ></c8y-tenant-id-setup>
-
-      <c8y-missing-application-access
-        *ngSwitchCase="LOGIN_VIEWS.MissingApplicationAccess"
-      ></c8y-missing-application-access>
-
-      <div
-        class="text-center m-t-8"
-        *ngIf="!!(ui.state$ | async).loginExtraLink"
-      >
-        <div *ngIf="!!(ui.state$ | async).loginExtraLink.length; else singleExtraLink">
-          <a
-            class="small d-block m-t-8"
-            title="{{ link.label }}"
-            role="button"
-            *ngFor="let link of (ui.state$ | async).loginExtraLink"
-            [href]="link.url"
-          >
-            {{ link.label }}
-          </a>
-        </div>
-        <ng-template #singleExtraLink>
-          <a
-            class="small"
-            title="{{ (ui.state$ | async).loginExtraLink.label }}"
-            role="button"
-            [href]="(ui.state$ | async).loginExtraLink.url"
-          >
-            {{ (ui.state$ | async).loginExtraLink.label }}
-          </a>
-        </ng-template>
-      </div>
-    </main>
-  </div>
+  @if (currentView !== LOGIN_VIEWS.None) {
+    <div class="login-form animated fadeIn">
+      <main class="card-block p-b-0 form-group-lg">
+        <span class="mainlogo {{ !isBrandLogoSet ? 'c8y-logo' : '' }}"></span>
+        <c8y-alert-outlet
+          class="m-b-24 d-block"
+          position="static"
+        ></c8y-alert-outlet>
+        @switch (currentView) {
+          @case (LOGIN_VIEWS.Credentials) {
+            <span class="{{ platformAnimationSrc ? '' : 'text-center' }}">
+              <h2
+                class="m-b-8"
+                translate
+              >
+                Welcome
+              </h2>
+              <p
+                class="text-16 m-b-40"
+                translate
+              >
+                Log in to access your IoT platform.
+              </p>
+            </span>
+            <c8y-credentials
+              (onChangeView)="handleLoginTemplate($event)"
+              [loginViewParams]="loginViewParams"
+            ></c8y-credentials>
+          }
+          @case (LOGIN_VIEWS.RecoverPassword) {
+            <span class="{{ platformAnimationSrc ? '' : 'text-center' }}">
+              <h2
+                class="m-b-8"
+                translate
+              >
+                Reset password
+              </h2>
+              <p
+                class="text-16 m-b-40"
+                translate
+              >
+                Enter your email address and we'll send you a secure link to reset your password.
+              </p>
+            </span>
+            <c8y-recover-password
+              [recoverPasswordData]="recoverPasswordData"
+              (onChangeView)="handleLoginTemplate($event)"
+            ></c8y-recover-password>
+          }
+          @case (LOGIN_VIEWS.ChangePassword) {
+            <c8y-change-password
+              (onChangeView)="handleLoginTemplate($event)"
+              [credentials]="credentials"
+            ></c8y-change-password>
+          }
+          @case (LOGIN_VIEWS.TotpChallenge) {
+            <c8y-totp-auth
+              (onCancel)="reset(false)"
+              [view]="currentView"
+              [credentials]="credentials"
+            ></c8y-totp-auth>
+          }
+          @case (LOGIN_VIEWS.TotpSetup) {
+            <c8y-totp-auth
+              (onCancel)="reset(false)"
+              [view]="currentView"
+              [credentials]="credentials"
+            ></c8y-totp-auth>
+          }
+          @case (LOGIN_VIEWS.SmsChallenge) {
+            <c8y-sms-challenge
+              (onCancel)="reset(false)"
+              [credentials]="credentials"
+            ></c8y-sms-challenge>
+          }
+          @case (LOGIN_VIEWS.ProvidePhoneNumber) {
+            <c8y-provide-phone-number
+              (onCancel)="reset(false)"
+              (onChangeView)="handleLoginTemplate($event)"
+              [credentials]="credentials"
+            ></c8y-provide-phone-number>
+          }
+          @case (LOGIN_VIEWS.TenantIdSetup) {
+            <c8y-tenant-id-setup (onChangeView)="handleLoginTemplate($event)"></c8y-tenant-id-setup>
+          }
+          @case (LOGIN_VIEWS.MissingApplicationAccess) {
+            <c8y-missing-application-access></c8y-missing-application-access>
+          }
+        }
+        @if (!!(ui.state$ | async).loginExtraLink) {
+          <div class="text-center m-t-8">
+            @if (!!(ui.state$ | async).loginExtraLink.length) {
+              <div>
+                @for (link of (ui.state$ | async).loginExtraLink; track link) {
+                  <a
+                    class="small d-block m-t-8"
+                    title="{{ link.label }}"
+                    role="button"
+                    [href]="link.url"
+                  >
+                    {{ link.label }}
+                  </a>
+                }
+              </div>
+            } @else {
+              <a
+                class="small"
+                title="{{ (ui.state$ | async).loginExtraLink.label }}"
+                role="button"
+                [href]="(ui.state$ | async).loginExtraLink.url"
+              >
+                {{ (ui.state$ | async).loginExtraLink.label }}
+              </a>
+            }
+          </div>
+        }
+      </main>
+    </div>
+  }
 </div>

package/src/app/login/login.component.ts

@@ -20,7 +20,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
 import { LoginEvent, LoginViews, SsoData, SsoError } from './login.model';
 import { CredentialsFromQueryParamsService } from './credentials-from-query-params.service';
 import { CredentialsComponentParams } from './credentials-component-params';
-import { NgIf, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { CredentialsComponent } from './credentials/credentials.component';
 import { RecoverPasswordComponent } from './recover-password/recover-password.component';
 import { ChangePasswordComponent } from './change-password/change-password.component';
@@ -37,9 +37,6 @@ import { MissingApplicationAccessComponent } from './missing-application-access/
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    NgIf,
-    NgSwitch,
-    NgSwitchCase,
     CredentialsComponent,
     RecoverPasswordComponent,
     ChangePasswordComponent,
@@ -47,7 +44,6 @@ import { MissingApplicationAccessComponent } from './missing-application-access/
     SmsChallengeComponent,
     ProvidePhoneNumberComponent,
     TenantIdSetupComponent,
-    NgFor,
     AlertOutletComponent,
     AsyncPipe,
     MissingApplicationAccessComponent,
@@ -67,6 +63,7 @@ export class LoginComponent implements OnInit, OnDestroy {
 
   credentials: ICredentials = {};
   loginViewParams: CredentialsComponentParams | { [key: string]: any } = {};
+  recoverPasswordData: LoginEvent['recoverPasswordData'];
   displayAlerts = false;
   private TOKEN_PARAM = 'token';
 
@@ -84,17 +81,17 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.platformAnimationSrc = this.getPlatformAnimationPath();
   }
 
-  ngOnInit() {
+  async ngOnInit() {
     const token = this.getParamAndClear(this.TOKEN_PARAM);
     const ssoData = this.getSsoData();
     if (ssoData) {
-      this.handleSso(ssoData);
+      await this.handleSso(ssoData);
     } else if (this.loginService.isFirstLogin) {
       if (!token) {
         this.loginAutomatically();
       } else {
         this.credentials.token = token;
-        this.reset(false);
+        await this.reset(false);
       }
     }
     this.loginService.isFirstLogin = false;
@@ -109,6 +106,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.currentView = event.view;
     this.credentials = event.credentials || {};
     this.loginViewParams = event.loginViewParams || {};
+    this.recoverPasswordData = event.recoverPasswordData || null;
   }
 
   @HostListener('keyup', ['$event']) onkeyup(event: KeyboardEvent) {
@@ -117,13 +115,13 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
   }
 
-  reset(missingPermissions: boolean) {
+  async reset(missingPermissions: boolean) {
     if (missingPermissions) {
       this.handleLoginTemplate({ view: LoginViews.MissingApplicationAccess });
       return;
     }
     this.loginService.reset();
-    this.setView();
+    await this.setView();
     this.loginService.cleanMessages();
   }
 
@@ -163,14 +161,14 @@ export class LoginComponent implements OnInit, OnDestroy {
       if (result) {
         return;
       }
-      this.reset(true);
+      await this.reset(true);
     } catch (e) {
       await this.loginService.clearCookies();
       const preferredLoginOptionType = this.loginService.loginMode.type;
       if (preferredLoginOptionType === TenantLoginOptionType.OAUTH2 && e.res?.status !== 403) {
         this.loginService.redirectToOauth();
       } else {
-        this.reset(false);
+        await this.reset(false);
         if (
           preferredLoginOptionType === TenantLoginOptionType.OAUTH2_INTERNAL &&
           window.location.protocol !== 'https:'
@@ -184,9 +182,25 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.loginService.automaticLoginInProgress$.next(false);
   }
 
-  private setView() {
+  private async setView() {
     if (this.credentials && this.credentials.token) {
-      this.handleLoginTemplate({ view: LoginViews.ChangePassword, credentials: this.credentials });
+      const email = this.options.get('email', '');
+      const tokenStatus = await this.loginService.validateResetToken(this.credentials.token, email);
+      if (tokenStatus === 'valid') {
+        this.handleLoginTemplate({
+          view: LoginViews.ChangePassword,
+          credentials: this.credentials
+        });
+      } else {
+        this.handleLoginTemplate({
+          view: LoginViews.RecoverPassword,
+          recoverPasswordData: {
+            email,
+            tokenStatus,
+            tenantId: this.loginService.getTenant()
+          }
+        });
+      }
     } else if (this.loginService.showTenantSetup()) {
       this.handleLoginTemplate({ view: LoginViews.TenantIdSetup });
     } else {
@@ -217,12 +231,12 @@ export class LoginComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  private handleSso(ssoData: SsoData | SsoError) {
+  private async handleSso(ssoData: SsoData | SsoError) {
     if ('ssoError' in ssoData) {
       this.loginService.showSsoError(
         decodeURIComponent(ssoData.ssoErrorDescription).replace(/\+/g, '%20')
       );
-      this.reset(false);
+      await this.reset(false);
     } else {
       this.loginService
         .loginBySso(ssoData)

package/src/app/login/login.model.ts

@@ -10,6 +10,11 @@ export interface LoginEvent {
   view: LoginViews;
   credentials?: ICredentials;
   loginViewParams?: CredentialsComponentParams | { [key: string]: any };
+  recoverPasswordData?: {
+    email: string;
+    tokenStatus: 'valid' | 'invalid' | 'expired';
+    tenantId?: string;
+  };
 }
 
 export enum LoginViews {

package/src/app/login/login.service.ts

@@ -21,7 +21,7 @@ import { switchMap } from 'rxjs/operators';
 import { BehaviorSubject, EMPTY } from 'rxjs';
 import { isEmpty } from 'lodash-es';
 import { TranslateService } from '@ngx-translate/core';
-import { SsoData } from './login.model';
+import { LoginEvent, SsoData } from './login.model';
 import {
   getStoredToken,
   getStoredTfaToken,
@@ -546,6 +546,28 @@ export class LoginService extends SimplifiedAuthService {
     return await this.cookieAuth.logout({ redirect: 'manual' });
   }
 
+  /**
+   * Validates the reset password token.
+   * @param token The reset password token to validate.
+   * @param email The email address associated with the token.
+   * @returns  Returns 'valid', 'invalid', or 'expired' based on the token status.
+   */
+  async validateResetToken(
+    token: string,
+    email: string
+  ): Promise<LoginEvent['recoverPasswordData']['tokenStatus']> {
+    try {
+      await this.user.validateResetToken(token, email);
+      return 'valid';
+    } catch (e) {
+      if (e.res?.status === 422) {
+        return 'expired';
+      } else {
+        return 'invalid';
+      }
+    }
+  }
+
   /**
    * Sets the tenant to the client and updates the credentials on the
    * auth strategy.

package/src/app/login/recover-password/recover-password.component.html

@@ -1,49 +1,59 @@
-<form #resetForm="ngForm" class="loginForm" (ngSubmit)="resetPassword()" novalidate>
-  <c8y-form-group class="tenantField" id="tenantField" *ngIf="loginService.showTenant()">
-    <label translate>Tenant ID</label>
-    <input
-      [(ngModel)]="model.tenantId"
-      #tenantId="ngModel"
-      type="text"
-      name="tenantId"
-      autocapitalize="off"
-      autocorrect="off"
-      class="form-control"
-      placeholder="{{ 'Tenant ID' | translate }}"
-      required
-    />
-  </c8y-form-group>
+<form
+  class="loginForm"
+  #resetForm="ngForm"
+  (ngSubmit)="resetPassword()"
+  novalidate
+>
+  @if (loginService.showTenant()) {
+    <c8y-form-group
+      class="tenantField"
+      id="tenantField"
+    >
+      <label translate>Tenant ID</label>
+      <input
+        class="form-control"
+        placeholder="{{ 'Tenant ID' | translate }}"
+        name="tenantId"
+        type="text"
+        required
+        [(ngModel)]="model.tenantId"
+        #tenantId="ngModel"
+        autocapitalize="off"
+        autocorrect="off"
+      />
+    </c8y-form-group>
+  }
 
   <c8y-form-group>
     <label translate>Email address</label>
     <input
+      class="form-control"
+      placeholder="{{ 'Email address' | translate }}"
+      name="email"
+      type="text"
+      required
       [(ngModel)]="model.email"
       #email="ngModel"
-      type="text"
-      name="email"
       autocapitalize="off"
       autocorrect="off"
-      class="form-control"
-      placeholder="{{ 'Email address' | translate }}"
       email
-      required
     />
   </c8y-form-group>
 
   <div class="m-t-32">
     <button
+      class="btn btn-primary btn-lg btn-block form-group"
       title="{{ 'Reset password' | translate }}"
-      [disabled]="!resetForm.form.valid || isLoading"
       type="submit"
-      class="btn btn-primary btn-lg btn-block form-group"
+      [disabled]="!resetForm.form.valid || isLoading"
     >
       {{ 'Reset password' | translate }}
     </button>
     <div class="text-center m-t-8">
       <button
-        type="submit"
-        title="{{ 'Login' | translate }}"
         class="btn btn-link btn-sm"
+        title="{{ 'Login' | translate }}"
+        type="submit"
         (click)="onChangeView.emit({ view: LOGIN_VIEWS.Credentials })"
       >
         {{ 'Login' | translate }}

package/src/app/login/recover-password/recover-password.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { UserService } from '@c8y/client';
 import { LoginService } from '../login.service';
 import { LoginEvent, LoginViews } from '../login.model';
@@ -7,10 +7,10 @@ import {
   C8yTranslateDirective,
   FormGroupComponent,
   RequiredInputPlaceholderDirective,
-  C8yTranslatePipe
+  C8yTranslatePipe,
+  AlertService
 } from '@c8y/ngx-components';
-
-import { NgIf } from '@angular/common';
+import { gettext } from '@c8y/ngx-components/gettext';
 
 @Component({
   selector: 'c8y-recover-password',
@@ -20,13 +20,13 @@ import { NgIf } from '@angular/common';
   imports: [
     FormsModule,
     C8yTranslateDirective,
-    NgIf,
     FormGroupComponent,
     RequiredInputPlaceholderDirective,
     C8yTranslatePipe
   ]
 })
 export class RecoverPasswordComponent implements OnInit {
+  @Input() recoverPasswordData: LoginEvent['recoverPasswordData'];
   @Output() onChangeView = new EventEmitter<LoginEvent>();
   LOGIN_VIEWS = LoginViews;
   isLoading = false;
@@ -37,11 +37,27 @@ export class RecoverPasswordComponent implements OnInit {
 
   constructor(
     private users: UserService,
-    public loginService: LoginService
+    public loginService: LoginService,
+    private alertService: AlertService
   ) {}
 
   ngOnInit() {
-    this.model.tenantId = this.loginService.getTenant();
+    if (this.recoverPasswordData) {
+      this.model.email = this.recoverPasswordData.email || '';
+      this.model.tenantId = this.recoverPasswordData.tenantId || '';
+
+      const message =
+        this.recoverPasswordData.tokenStatus === 'expired'
+          ? gettext('This password reset link expired. To continue, request a new one.')
+          : this.recoverPasswordData.tokenStatus === 'invalid'
+            ? gettext('This password reset link is invalid. To continue, request a new one.')
+            : '';
+      if (message) {
+        this.alertService.danger(message);
+      }
+    } else {
+      this.model.tenantId = this.loginService.getTenant();
+    }
   }
 
   async resetPassword() {