@c8y/login 1022.3.2

package/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { CoreModule, RouterModule } from '@c8y/ngx-components';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    importProvidersFrom(RouterModule.forRoot()),
+    importProvidersFrom(CoreModule.forRoot())
+  ]
+};

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

@@ -0,0 +1,3 @@
+<c8y-login></c8y-login>
+
+<c8y-cookie-banner></c8y-cookie-banner>

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

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

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

@@ -0,0 +1,97 @@
+<form class="loginForm" (ngSubmit)="changePassword()" #changePasswordForm="ngForm" novalidate>
+  <div class="legend form-block center" translate>Change password</div>
+
+  <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>
+
+  <c8y-form-group>
+    <label translate>Email address</label>
+    <input
+      [(ngModel)]="model.email"
+      #email="ngModel"
+      type="text"
+      name="email"
+      autocapitalize="off"
+      autocorrect="off"
+      class="form-control"
+      placeholder="{{ 'Email address' | translate }}"
+      email
+      required
+      [readonly]="emailReadOnly"
+    />
+  </c8y-form-group>
+
+  <div class="row content-flex-50">
+    <div class="col-6">
+      <c8y-form-group>
+        <label translate>New password</label>
+        <input
+          [(ngModel)]="model.newPassword"
+          #newPassword="ngModel"
+          type="password"
+          name="newPassword"
+          class="form-control"
+          placeholder="{{ 'New password' | translate }}"
+          [pattern]="passwordPattern"
+          autocomplete="new-password"
+          [passwordStrengthEnforced]="passwordStrengthEnforced"
+          required
+        />
+        <c8y-messages>
+          <c8y-message
+            name="pattern"
+            [text]="loginService.ERROR_MESSAGES.pattern_newPassword"
+          ></c8y-message>
+        </c8y-messages>
+      </c8y-form-group>
+
+      <c8y-form-group>
+        <label translate>Confirm password</label>
+        <input
+          [(ngModel)]="model.newPasswordConfirm"
+          #newPasswordConfirm="ngModel"
+          type="password"
+          name="newPasswordConfirm"
+          class="form-control"
+          placeholder="{{ 'Confirm password' | translate }}"
+          passwordConfirm="newPassword"
+          autocomplete="new-password"
+          required
+        />
+        <c8y-messages>
+          <c8y-message
+            name="passwordConfirm"
+            [text]="loginService.ERROR_MESSAGES.passwordConfirm"
+          ></c8y-message>
+        </c8y-messages>
+      </c8y-form-group>
+    </div>
+    <div class="col-6">
+      <c8y-password-check-list
+        [password]="model.newPassword"
+        [strengthEnforced]="passwordStrengthEnforced"
+      ></c8y-password-check-list>
+    </div>
+  </div>
+
+  <button
+    title="{{ 'Set password' | translate }}"
+    [disabled]="!changePasswordForm.form.valid || isLoading"
+    type="submit"
+    class="btn btn-primary btn-lg btn-block form-group"
+  >
+    {{ 'Set password' | translate }}
+  </button>
+</form>

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

@@ -0,0 +1,101 @@
+import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
+import { LoginService } from '../login.service';
+import { IResetPassword, ICredentials, UserService, PasswordStrength } from '@c8y/client';
+import { LoginEvent, LoginViews } from '../login.model';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { PasswordStrengthValidatorDirective } from '../password-strength-validator.directive';
+import {
+  C8yTranslatePipe,
+  PasswordCheckListComponent,
+  PasswordConfirm,
+  MessageDirective,
+  MessagesComponent,
+  RequiredInputPlaceholderDirective,
+  FormGroupComponent,
+  C8yTranslateDirective,
+  AlertService,
+  OptionsService
+} from '@c8y/ngx-components';
+import { PasswordStrengthService } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-change-password',
+  templateUrl: './change-password.component.html',
+  styles: [],
+  standalone: true,
+  imports: [
+    FormsModule,
+    C8yTranslateDirective,
+    NgIf,
+    FormGroupComponent,
+    RequiredInputPlaceholderDirective,
+    PasswordStrengthValidatorDirective,
+    MessagesComponent,
+    MessageDirective,
+    PasswordConfirm,
+    PasswordCheckListComponent,
+    C8yTranslatePipe
+  ]
+})
+export class ChangePasswordComponent implements OnInit {
+  @Input() credentials: ICredentials;
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+
+  passwordPattern = /^[a-zA-Z0-9`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]{8,32}$/;
+  isLoading = false;
+  model = {
+    tenantId: '',
+    email: '',
+    newPassword: '',
+    newPasswordConfirm: ''
+  };
+  emailReadOnly = false;
+  passwordStrengthEnforced = false;
+
+  private TOKEN_PARAM = 'token';
+  private EMAIL_PARAM = 'email';
+
+  constructor(
+    public loginService: LoginService,
+    private passwordStrength: PasswordStrengthService,
+    private users: UserService,
+    private options: OptionsService,
+    private alert: AlertService
+  ) {}
+
+  async ngOnInit() {
+    this.model.tenantId = this.loginService.getTenant();
+    this.model.email = this.options.get(this.EMAIL_PARAM, '');
+    this.emailReadOnly = !!this.model.email;
+    this.passwordStrengthEnforced = await this.passwordStrength.getPasswordStrengthEnforced();
+  }
+
+  async changePassword() {
+    const resetPassword: IResetPassword = {
+      token: this.credentials.token,
+      email: this.model.email,
+      newPassword: this.model.newPassword,
+      passwordStrength: PasswordStrength.GREEN // @TODO: MTM-58234 - Deprecated - currently Backend requires this parameter.
+    };
+    try {
+      this.isLoading = true;
+      const { res } = await this.users.resetPassword(resetPassword, this.model.tenantId);
+      if (res.status === 200) {
+        this.loginService.addSuccessMessage('password_changed');
+        this.credentials.token = undefined;
+        this.options.set(this.TOKEN_PARAM, undefined);
+        if (this.loginService.showTenantSetup()) {
+          this.onChangeView.emit({ view: LoginViews.TenantIdSetup });
+        } else {
+          this.onChangeView.emit({ view: LoginViews.Credentials });
+        }
+      }
+    } catch (e) {
+      this.alert.addServerFailure(e);
+    } finally {
+      this.loginService.reset();
+      this.isLoading = false;
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+<div
+  id="oauth"
+  class="m-b-40"
+  *ngIf="oauthOptions.initRequest && oauthOptions.visibleOnLoginPage"
+>
+  <button
+    class="btn btn-default btn-block btn-lg form-group m-t-8"
+    title="{{ oauthOptions.buttonName | translate }}"
+    type="button"
+    (click)="redirectToOauth()"
+  >
+    <i
+      class="pull-left"
+      [c8yIcon]="'sign-in'"
+    ></i>
+    {{ oauthOptions.buttonName | translate }}
+  </button>
+</div>
+
+<form
+  class="loginForm"
+  (ngSubmit)="login()"
+  #loginForm="ngForm"
+  *ngIf="showLoginForm"
+  novalidate
+>
+  <span
+    class="legend form-block center"
+    *ngIf="!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend"
+    translate
+  >
+    Login
+  </span>
+
+  <ng-template #orLegend>
+    <div
+      class="legend form-block center"
+      translate
+    >
+      or enter your credentials`prefixed by login button`
+    </div>
+  </ng-template>
+
+  <c8y-form-group
+    class="tenantField m-b-40"
+    id="tenantField"
+    *ngIf="showTenant"
+  >
+    <label
+      for="tenant"
+      translate
+    >
+      Tenant ID
+    </label>
+    <input
+      class="form-control"
+      id="tenant"
+      placeholder="{{ 'e.g.' | translate }} t12345"
+      name="tenant"
+      type="text"
+      required
+      [(ngModel)]="model.tenant"
+      #tenant="ngModel"
+      autocapitalize="off"
+      autocorrect="off"
+      placeholder-no-required-hint
+      [readonly]="loginViewParams.disableTenant"
+    />
+  </c8y-form-group>
+  <c8y-form-group class="m-b-40">
+    <label
+      for="user"
+      translate
+    >
+      Username
+    </label>
+    <input
+      class="form-control"
+      id="user"
+      placeholder="{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}"
+      name="user"
+      type="text"
+      required
+      [(ngModel)]="model.user"
+      #user="ngModel"
+      autocapitalize="off"
+      autocorrect="off"
+      placeholder-no-required-hint
+    />
+  </c8y-form-group>
+  <c8y-form-group class="m-b-40">
+    <label
+      for="password"
+      translate
+    >
+      Password
+    </label>
+    <c8y-password-input
+      name="password"
+      required
+      [id]="'password'"
+      [(ngModel)]="model.password"
+      [autocomplete]="'off'"
+    ></c8y-password-input>
+  </c8y-form-group>
+  <div
+    class="form-group "
+    *ngIf="showBasicAuth"
+  >
+    <label
+      class="c8y-checkbox"
+      title="{{ 'Remember me' | translate }}"
+    >
+      <input
+        name="remember"
+        type="checkbox"
+        [(ngModel)]="loginService.rememberMe"
+      />
+      <span></span>
+      <span>{{ 'Remember me' | translate }}</span>
+    </label>
+  </div>
+  <button
+    class="btn btn-primary btn-lg btn-block form-group"
+    title="{{ 'Log in' | translate }}"
+    type="submit"
+    [disabled]="!loginForm.form.valid || isLoading"
+  >
+    {{ 'Log in' | translate }}
+  </button>
+  <div class="text-center m-t-8">
+    <button
+      class="btn btn-link btn-sm"
+      title="{{ 'Forgot password?' | translate }}"
+      type="button"
+      (click)="onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })"
+    >
+      {{ 'Forgot password?' | translate }}
+    </button>
+  </div>
+</form>

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

@@ -0,0 +1,148 @@
+import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
+import { LoginService } from '../login.service';
+import { ICredentials } from '@c8y/client';
+import {
+  AlertService,
+  IconDirective,
+  C8yTranslateDirective,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  PasswordInputComponent,
+  C8yTranslatePipe
+} from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { LoginEvent, LoginViews } from '../login.model';
+import { CredentialsFromQueryParamsService } from '../credentials-from-query-params.service';
+import { CredentialsComponentParams } from '../credentials-component-params';
+import { NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'c8y-credentials',
+  templateUrl: './credentials.component.html',
+  styles: [],
+  standalone: true,
+  imports: [
+    NgIf,
+    IconDirective,
+    FormsModule,
+    C8yTranslateDirective,
+    FormGroupComponent,
+    RequiredInputPlaceholderDirective,
+    PasswordInputComponent,
+    C8yTranslatePipe
+  ]
+})
+export class CredentialsComponent implements OnInit {
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+
+  @Input() loginViewParams: CredentialsComponentParams = {
+    disableTenant: false,
+    showTenant: false
+  };
+
+  LOGIN_VIEWS = LoginViews;
+  model: ICredentials = {};
+  isLoading = false;
+  showLoginForm = false;
+  showBasicAuth = false;
+  oauthOptions: any = {};
+  showTenant = false;
+
+  private readonly PASSWORD_RESET_HEADER_NAME = 'passwordresettoken';
+  private readonly NO_PHONE_HEADER_NAME = 'NoPhoneHeader';
+
+  constructor(
+    public loginService: LoginService,
+    public alert: AlertService,
+    private credentialsFromQueryParamsService: CredentialsFromQueryParamsService
+  ) {}
+
+  ngOnInit() {
+    const { oauthOptions, loginMode } = this.loginService;
+    this.model.tenant = this.loginService.getTenant();
+    this.showLoginForm =
+      typeof loginMode.visibleOnLoginPage === 'undefined' || loginMode.visibleOnLoginPage;
+    this.showBasicAuth = loginMode.type === 'BASIC';
+    this.oauthOptions = oauthOptions;
+    const credentialsFromQueryParams =
+      this.credentialsFromQueryParamsService.getCredentialsFromQueryParams();
+    Object.assign(this.model, credentialsFromQueryParams);
+    this.showTenant = this.loginViewParams.showTenant || this.loginService.showTenant();
+  }
+
+  redirectToOauth() {
+    this.loginService.redirectToOauth();
+  }
+
+  /**
+   * Allows to login into the application using basic auth.
+   * If successful logged in the client is set in shared/cumulocity.service.ts
+   */
+  async login() {
+    try {
+      this.isLoading = true;
+      const basicAuth = this.loginService.useBasicAuth(this.model);
+      const hasPermission = await this.loginService.login(basicAuth, this.model);
+      if (!hasPermission) {
+        this.onChangeView.emit({ view: LoginViews.MissingApplicationAccess });
+      }
+    } catch (e) {
+      if (e.res && e.res.headers && e.res.headers.get(this.PASSWORD_RESET_HEADER_NAME)) {
+        this.handlePasswordReset(e.res);
+      } else if (e.res && e.res.status === 401 && /pin.*generated/i.test(e.data.message)) {
+        this.handleSmsChallenge(e.data.message);
+      } else if (e.res && e.res.status === 401 && /TOTP/i.test(e.data.message)) {
+        this.handleTotpChallenge(e.data.message);
+      } else if (
+        e.res &&
+        e.res.headers &&
+        e.res.headers.get(this.NO_PHONE_HEADER_NAME) &&
+        !this.loginService.isSupportUser(this.model)
+      ) {
+        this.handleNoPhoneNumberProvided();
+      } else {
+        this.loginService.generateOauthToken(this.model);
+        this.loginService.reset();
+        this.alert.addServerFailure(e);
+      }
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private handlePasswordReset(e: any) {
+    this.alert.removeLastDanger();
+    this.model.token = e.headers.get(this.PASSWORD_RESET_HEADER_NAME);
+    this.onChangeView.emit({ view: LoginViews.ChangePassword, credentials: this.model });
+  }
+
+  private handleTotpChallenge(message) {
+    if (/TOTP setup required/i.test(message)) {
+      this.onChangeView.emit({ view: LoginViews.TotpSetup, credentials: this.model });
+    } else {
+      this.onChangeView.emit({ view: LoginViews.TotpChallenge, credentials: this.model });
+    }
+  }
+
+  private handleSmsChallenge(message: string) {
+    if (/pin has already been generated/i.test(message)) {
+      this.alert.warning(
+        gettext(
+          'The verification code was already sent. For a new verification code, please click on the link above.'
+        )
+      );
+    }
+    this.alert.removeLastDanger();
+    this.onChangeView.emit({ view: LoginViews.SmsChallenge, credentials: this.model });
+  }
+
+  private handleNoPhoneNumberProvided() {
+    this.onChangeView.emit({ view: LoginViews.ProvidePhoneNumber, credentials: this.model });
+    this.alert.warning(
+      gettext(
+        'Two-factor authentication has been turned on for this account. Provide your phone number above to save it in your user profile and start receiving verification codes via SMS.'
+      )
+    );
+  }
+}

package/src/app/login/credentials-component-params.ts

@@ -0,0 +1,4 @@
+export interface CredentialsComponentParams {
+  showTenant: boolean;
+  disableTenant: boolean;
+}

package/src/app/login/credentials-from-query-params.service.ts

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+import { ICredentials } from '@c8y/client';
+
+@Injectable({ providedIn: 'root' })
+export class CredentialsFromQueryParamsService {
+  private readonly queryParamsToHandle: Array<keyof ICredentials> = ['tenant', 'user'];
+
+  /**
+   * Retrieves any subset of credentials provided via queryParams
+   * @return ICredentials found in queryParams.
+   */
+  getCredentialsFromQueryParams(): ICredentials {
+    const credentials: ICredentials = {};
+    try {
+      const params = new URLSearchParams(window.location.search);
+      this.queryParamsToHandle.forEach(param => {
+        const value = this.getParameterFromQueryParams(params, param);
+        if (value) {
+          credentials[param] = value;
+        }
+      });
+    } catch (e) {
+      // URLSearchParams probably not available in all browsers (https://caniuse.com/urlsearchparams)
+    }
+    return credentials;
+  }
+
+  /**
+   * Removes credentials from the queryParameters if any are present.
+   * In case some credentials were present, this method will cause a page reload.
+   * @return boolean if credentials were found.
+   */
+  removeCredentialsFromQueryParams(): boolean {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const hasRemovedAtLeastOneParam = this.queryParamsToHandle
+        .map(param => this.removeParameterFromQueryParameters(params, param))
+        .reduceRight((prev, curr) => prev || curr, false);
+      if (hasRemovedAtLeastOneParam) {
+        window.location.search = params.toString();
+        return true;
+      }
+    } catch (e) {
+      // URLSearchParams probably not available in all browsers (https://caniuse.com/urlsearchparams)
+    }
+    return false;
+  }
+
+  /**
+   * Looks for the specified key in the provided URLSearchParams.
+   * If the specified key was found, it will be removed.
+   * @return boolean if key was found.
+   */
+  private removeParameterFromQueryParameters(
+    params: URLSearchParams,
+    key: keyof ICredentials
+  ): boolean {
+    const keyAsString = `${key}`;
+    if (!params.has(keyAsString)) {
+      return false;
+    }
+    params.delete(keyAsString);
+    return true;
+  }
+
+  /**
+   * Looks for the specified key in the provided URLSearchParams.
+   * If the specified key was found, it's value will be returned.
+   * Otherwise null will be returned.
+   * @return string/null.
+   */
+  private getParameterFromQueryParams(
+    params: URLSearchParams,
+    key: keyof ICredentials
+  ): string | null {
+    const keyAsString = `${key}`;
+    if (!params.has(keyAsString)) {
+      return null;
+    }
+    const value = params.get(keyAsString);
+    if (!value) {
+      return null;
+    }
+    return value;
+  }
+}

package/src/app/login/index.ts

@@ -0,0 +1,9 @@
+export * from './login.service';
+export * from './login.model';
+export * from './login.component';
+export * from './password-strength-validator.directive';
+export * from './strength-validator-service';
+export * from './recover-password/recover-password.component';
+export * from './change-password/change-password.component';
+export * from './totp-auth/totp-auth.component';
+export * from './credentials/credentials.component';