@c8y/login 1022.3.2

package/src/app/login/provide-phone-number/provide-phone-number.component.html

@@ -0,0 +1,39 @@
+<form #twoFactorForm="ngForm" class="loginForm" (ngSubmit)="save()" novalidate>
+  <div class="legend form-block center" translate>Two-factor authentication</div>
+
+  <c8y-form-group [ngClass]="requestInProgress || twoFactorForm.invalid ? 'p-b-8' : ''">
+    <label translate>Provide your phone number</label>
+
+    <input
+      class="form-control"
+      [(ngModel)]="phoneNumber"
+      #contactPhone="ngModel"
+      type="text"
+      name="phone"
+      autocomplete="off"
+      placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
+      c8yPhoneValidation
+      required
+    />
+  </c8y-form-group>
+
+  <button
+    title="{{ 'Save and continue' | translate }}"
+    type="submit"
+    class="btn btn-primary btn-lg btn-block form-group"
+    [disabled]="requestInProgress || twoFactorForm.invalid"
+  >
+    {{ 'Save and continue' | translate }}
+  </button>
+
+  <div class="d-flex m-t-8">
+    <a
+      title="{{ 'Login' | translate }}"
+      class="small pointer m-auto"
+      href="#"
+      (click)="onCancel.emit()"
+    >
+      {{ 'Login' | translate }}
+    </a>
+  </div>
+</form>

package/src/app/login/provide-phone-number/provide-phone-number.component.ts

@@ -0,0 +1,73 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { LoginService } from '../login.service';
+import { LoginEvent, LoginViews } from '../login.model';
+import { ICredentials, UserService } from '@c8y/client';
+import { FormsModule } from '@angular/forms';
+import { NgClass } from '@angular/common';
+import {
+  RequiredInputPlaceholderDirective,
+  PhoneValidationDirective,
+  C8yTranslatePipe,
+  FormGroupComponent,
+  C8yTranslateDirective,
+  AlertService
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-provide-phone-number',
+  templateUrl: './provide-phone-number.component.html',
+  standalone: true,
+  imports: [
+    FormsModule,
+    C8yTranslateDirective,
+    FormGroupComponent,
+    NgClass,
+    RequiredInputPlaceholderDirective,
+    PhoneValidationDirective,
+    C8yTranslatePipe
+  ]
+})
+export class ProvidePhoneNumberComponent {
+  @Input() credentials: ICredentials;
+  @Output() onCancel = new EventEmitter();
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+
+  phoneNumber: string;
+  requestInProgress = false;
+  private readonly sendTfa: string = '0';
+
+  constructor(
+    public loginService: LoginService,
+    public alert: AlertService,
+    private userService: UserService
+  ) {}
+
+  async save() {
+    try {
+      this.requestInProgress = true;
+      await this.userService.savePhoneNumber(this.phoneNumber);
+      await this.sendTFASms();
+      this.onChangeView.emit({
+        view: LoginViews.SmsChallenge,
+        credentials: this.credentials
+      });
+    } catch (e) {
+      this.alert.addServerFailure(e);
+    } finally {
+      this.requestInProgress = false;
+    }
+  }
+
+  private async sendTFASms() {
+    try {
+      await this.userService.verifyTFACode(this.sendTfa);
+    } catch (e) {
+      if (e.res.status === 403) {
+        this.loginService.cleanMessages();
+        this.loginService.addSuccessMessage('send_sms');
+      } else {
+        throw e;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+<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>
+
+  <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
+    />
+  </c8y-form-group>
+
+  <div class="m-t-32">
+    <button
+      title="{{ 'Reset password' | translate }}"
+      [disabled]="!resetForm.form.valid || isLoading"
+      type="submit"
+      class="btn btn-primary btn-lg btn-block form-group"
+    >
+      {{ 'Reset password' | translate }}
+    </button>
+    <div class="text-center m-t-8">
+      <button
+        type="submit"
+        title="{{ 'Login' | translate }}"
+        class="btn btn-link btn-sm"
+        (click)="onChangeView.emit({ view: LOGIN_VIEWS.Credentials })"
+      >
+        {{ 'Login' | translate }}
+      </button>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,59 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { UserService } from '@c8y/client';
+import { LoginService } from '../login.service';
+import { LoginEvent, LoginViews } from '../login.model';
+import { FormsModule } from '@angular/forms';
+import {
+  C8yTranslateDirective,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  C8yTranslatePipe
+} from '@c8y/ngx-components';
+
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'c8y-recover-password',
+  templateUrl: './recover-password.component.html',
+  styles: [],
+  standalone: true,
+  imports: [
+    FormsModule,
+    C8yTranslateDirective,
+    NgIf,
+    FormGroupComponent,
+    RequiredInputPlaceholderDirective,
+    C8yTranslatePipe
+  ]
+})
+export class RecoverPasswordComponent implements OnInit {
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+  LOGIN_VIEWS = LoginViews;
+  isLoading = false;
+  model = {
+    email: '',
+    tenantId: ''
+  };
+
+  constructor(
+    private users: UserService,
+    public loginService: LoginService
+  ) {}
+
+  ngOnInit() {
+    this.model.tenantId = this.loginService.getTenant();
+  }
+
+  async resetPassword() {
+    try {
+      this.isLoading = true;
+      const { res } = await this.users.sendPasswordResetMail(this.model.email, this.model.tenantId);
+      if (res.status === 200) {
+        this.loginService.addSuccessMessage('password_reset_requested');
+      }
+    } finally {
+      this.loginService.reset();
+      this.isLoading = false;
+    }
+  }
+}

package/src/app/login/sms-challenge/sms-challenge.component.html

@@ -0,0 +1,50 @@
+<form #twoFactorForm="ngForm" class="loginForm" (ngSubmit)="verifyTFACode()" novalidate>
+  <div class="legend form-block center" translate>Two-factor authentication</div>
+
+  <c8y-form-group>
+    <label translate>Verification code</label>
+    <input
+      [(ngModel)]="model.smsToken"
+      #sms_token="ngModel"
+      type="text"
+      name="sms_token"
+      autofocus
+      autocapitalize="off"
+      autocorrect="off"
+      class="form-control"
+      placeholder="{{ 'e.g.' | translate }} 624327"
+      required
+    />
+    <p *ngIf="!twoFactorForm.form.valid || isLoading" class="help-block" translate>
+      Insert the code received via SMS.
+    </p>
+  </c8y-form-group>
+
+  <button
+    title="{{ 'Verify' | translate }}"
+    [disabled]="!twoFactorForm.form.valid || isLoading"
+    class="btn btn-primary btn-lg btn-block form-group"
+  >
+    {{ 'Verify' | translate }}
+  </button>
+
+  <div class="d-flex m-t-8 j-c-center">
+    <button
+      type="button"
+      title="{{ 'Send new code' | translate }}"
+      [ngClass]="{ disabled: isLoading }"
+      class="btn btn-link btn-sm"
+      (click)="resendTFASms()"
+    >
+      {{ 'Send new code' | translate }}
+    </button>
+    <button
+      type="button"
+      title="{{ 'Log in' | translate }}"
+      class="btn btn-link btn-sm"
+      (click)="onCancel.emit()"
+    >
+      {{ 'Log in' | translate }}
+    </button>
+  </div>
+</form>

package/src/app/login/sms-challenge/sms-challenge.component.ts

@@ -0,0 +1,134 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { UserService, ICredentials } from '@c8y/client';
+import { LoginService } from '../login.service';
+import {
+  AlertService,
+  C8yTranslateDirective,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  C8yTranslatePipe,
+  AppStateService
+} from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { FormsModule } from '@angular/forms';
+import { NgIf, NgClass } from '@angular/common';
+import { LoginEvent, LoginViews } from '../login.model';
+
+@Component({
+  selector: 'c8y-sms-challenge',
+  templateUrl: './sms-challenge.component.html',
+  styles: [],
+  standalone: true,
+  imports: [
+    FormsModule,
+    C8yTranslateDirective,
+    FormGroupComponent,
+    RequiredInputPlaceholderDirective,
+    NgIf,
+    NgClass,
+    C8yTranslatePipe
+  ]
+})
+export class SmsChallengeComponent {
+  @Input() credentials: ICredentials;
+  @Output() onCancel = new EventEmitter();
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+
+  model = {
+    smsToken: ''
+  };
+  isLoading = false;
+
+  private resendTfa = '0';
+
+  constructor(
+    public loginService: LoginService,
+    private users: UserService,
+    private alert: AlertService,
+    private appState: AppStateService
+  ) {}
+
+  async verifyTFACode() {
+    this.isLoading = true;
+    if (await this.usesOAuthInternal()) {
+      await this.verifyCodeWithOauth();
+    } else {
+      await this.verifyCodeWithBasicAuth();
+    }
+    this.isLoading = false;
+  }
+
+  async resendTFASms() {
+    try {
+      this.isLoading = true;
+      await this.users.verifyTFACode(this.resendTfa);
+    } catch (e) {
+      if (e.res.status === 403) {
+        this.loginService.cleanMessages();
+        this.loginService.addSuccessMessage('resend_sms');
+      } else {
+        this.alert.addServerFailure(e);
+      }
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private async usesOAuthInternal() {
+    return this.loginService.isPasswordGrantLogin(this.credentials);
+  }
+
+  private async verifyCodeWithOauth() {
+    try {
+      const { credentials } = this;
+      await this.loginService.switchLoginMode({ ...credentials, tfa: this.model.smsToken });
+      await this.loginService.authFulfilled();
+      const result = await this.loginService.ensureUserPermissionsForRedirect(
+        this.appState.currentUser.value
+      );
+      if (!result) {
+        this.onChangeView.emit({ view: LoginViews.MissingApplicationAccess });
+      }
+    } catch (e) {
+      const resStatus = e.res && e.res.status;
+      if (resStatus === 401) {
+        // it is assumed that the user and password are correct so it must be the tfa code
+        this.alert.danger(gettext('Invalid code'));
+      } else {
+        this.alert.addServerFailure(e);
+      }
+    }
+  }
+
+  private async verifyCodeWithBasicAuth() {
+    try {
+      const { res } = await this.users.verifyTFACode(this.model.smsToken);
+      const tfaToken = res.headers.get('tfatoken');
+      this.credentials.tfa = tfaToken;
+      await this.loginWithTFA(tfaToken);
+    } catch (e) {
+      const resStatus = e.res && e.res.status;
+      // BE returns 403 in case of invalid tfa code
+      if (resStatus === 403) {
+        this.alert.danger(gettext('Invalid code'));
+      } else {
+        this.alert.addServerFailure(e);
+      }
+    }
+  }
+
+  private async loginWithTFA(tfaToken) {
+    try {
+      await this.loginService.login(
+        this.loginService.useBasicAuth({ tfa: tfaToken }),
+        this.credentials
+      );
+      this.loginService.saveTFAToken(tfaToken, sessionStorage);
+      if (this.loginService.rememberMe) {
+        this.loginService.saveTFAToken(tfaToken, localStorage);
+      }
+    } catch (e) {
+      this.alert.addServerFailure(e);
+    }
+  }
+}

package/src/app/login/strength-validator-service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { PasswordService } from '@c8y/ngx-components';
+import { PasswordStrength } from '@c8y/client';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StrengthValidatorService {
+  constructor(private passwordService: PasswordService) {}
+
+  isStrong(password: string): boolean {
+    return this.isPasswordGreen(this.passwordService.getStrengthColor(password).passwordStrength);
+  }
+
+  private isPasswordGreen(strength: PasswordStrength) {
+    return (strength as PasswordStrength) === (PasswordStrength.GREEN as PasswordStrength);
+  }
+}

package/src/app/login/tenant-id-setup/tenant-id-setup.component.html

@@ -0,0 +1,28 @@
+<form #tenantIdSetupForm="ngForm" class="loginForm" (ngSubmit)="setupLoginMode()" novalidate>
+  <div class="legend form-block center" translate>Tenant setup</div>
+  <c8y-form-group class="tenantField" id="tenantField">
+    <label for="tenant" translate>Tenant ID</label>
+    <input
+      [(ngModel)]="model.tenant"
+      #tenant="ngModel"
+      type="text"
+      name="tenant"
+      id="tenant"
+      autocapitalize="off"
+      autocorrect="off"
+      class="form-control"
+      placeholder="{{ 'e.g.' | translate }} t12345"
+      placeholder-no-required-hint
+      required
+    />
+  </c8y-form-group>
+
+  <button
+    title="{{ 'Apply' | translate }}"
+    type="submit"
+    class="btn btn-primary btn-lg btn-block form-group"
+    [disabled]="!tenantIdSetupForm.form.valid"
+  >
+    {{ 'Apply' | translate }}
+  </button>
+</form>

package/src/app/login/tenant-id-setup/tenant-id-setup.component.ts

@@ -0,0 +1,94 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { LoginEvent, LoginViews } from '../login.model';
+import { FetchClient } from '@c8y/client';
+import {
+  AppStateService,
+  AlertService,
+  C8yTranslateDirective,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  C8yTranslatePipe
+} from '@c8y/ngx-components';
+import { LoginService } from '../login.service';
+import { TranslateService } from '@ngx-translate/core';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'c8y-tenant-id-setup',
+  templateUrl: './tenant-id-setup.component.html',
+  styles: [],
+  standalone: true,
+  imports: [
+    FormsModule,
+    C8yTranslateDirective,
+    FormGroupComponent,
+    RequiredInputPlaceholderDirective,
+    C8yTranslatePipe
+  ]
+})
+
+/**
+ * `TenantIdSetupComponent` is intended to be shown when tenant's id cannot be determined based on the current URL.
+ * It asks the user to provide target tenant's id and then it fetches login options for this tenant.
+ * In case of OAI-Secure login mode, login options will contain `domain` property set by backend.
+ * The component will redirect user to this domain, preserving URL path and params.
+ */
+export class TenantIdSetupComponent {
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+  LOGIN_VIEWS = LoginViews;
+  model = {
+    tenant: ''
+  };
+
+  constructor(
+    private client: FetchClient,
+    private ui: AppStateService,
+    private loginService: LoginService,
+    private alert: AlertService,
+    private translateService: TranslateService
+  ) {}
+
+  /**
+   * Sets up login mode for particular tenant. In case of OAI-Secure will redirect user to tenant domain.
+   */
+  async setupLoginMode() {
+    this.client.tenant = this.model.tenant;
+    try {
+      await this.ui.refreshLoginOptions();
+      this.loginService.initLoginOptions();
+      this.redirectToCorrectDomain();
+    } catch (e) {
+      if (e.res && e.res.status === 401) {
+        this.alert.danger(
+          this.translateService.instant(
+            gettext('Could not find tenant with ID "{{ tenantId }}".'),
+            { tenantId: this.model.tenant }
+          )
+        );
+      } else {
+        this.alert.addServerFailure(e);
+      }
+    }
+  }
+
+  /**
+   * Redirects to tenant domain when login mode contains domain.
+   */
+  redirectToCorrectDomain() {
+    const loginRedirectDomain = this.loginService.loginMode.loginRedirectDomain;
+    if (loginRedirectDomain) {
+      const alreadyOnCorrectDomain = window.location.href.includes(loginRedirectDomain);
+      if (!alreadyOnCorrectDomain) {
+        this.loginService.redirectToDomain(loginRedirectDomain);
+      } else {
+        this.onChangeView.emit({
+          view: LoginViews.Credentials,
+          loginViewParams: { showTenant: true, disableTenant: true }
+        });
+      }
+    } else {
+      this.onChangeView.emit({ view: LoginViews.Credentials });
+    }
+  }
+}

package/src/app/login/totp-auth/totp-auth.component.html

@@ -0,0 +1,18 @@
+<div
+  class="legend form-block center"
+  translate
+>
+  Two-factor authentication
+</div>
+
+<c8y-totp-setup *ngIf="isSetup">
+</c8y-totp-setup>
+<c8y-totp-challenge
+  [isModal]="false"
+  [loading]="loading"
+  [hasError]="hasError"
+  [verify]="view === LOGIN_VIEWS.TotpSetup"
+  (onSuccess)="onTotpSuccess($event)"
+  (totpUnconfirmedEmitter)="onCancel.emit()"
+></c8y-totp-challenge>
+

package/src/app/login/totp-auth/totp-auth.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { ICredentials, UserService } from '@c8y/client';
+import {
+  AlertService,
+  C8yTranslateDirective,
+  TotpSetupComponent,
+  TotpChallengeComponent,
+  AppStateService
+} from '@c8y/ngx-components';
+import { LoginService } from '../login.service';
+import { LoginEvent, LoginViews } from '../login.model';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'c8y-totp-auth',
+  templateUrl: './totp-auth.component.html',
+  standalone: true,
+  imports: [C8yTranslateDirective, NgIf, TotpSetupComponent, TotpChallengeComponent]
+})
+export class TotpAuthComponent implements OnInit {
+  @Input() credentials: ICredentials;
+  @Input() view: LoginViews;
+  @Output() onCancel = new EventEmitter();
+  @Output() onChangeView = new EventEmitter<LoginEvent>();
+  LOGIN_VIEWS = LoginViews;
+  loading = false;
+  hasError = false;
+  isSetup = false;
+
+  constructor(
+    public loginService: LoginService,
+    private userService: UserService,
+    private alert: AlertService,
+    private appState: AppStateService
+  ) {}
+
+  ngOnInit() {
+    if (this.view === this.LOGIN_VIEWS.TotpSetup) {
+      this.isSetup = true;
+    }
+  }
+
+  async onTotpSuccess(code: string) {
+    try {
+      this.loading = true;
+      this.hasError = false;
+      this.credentials.tfa = code;
+      if (this.isSetup) {
+        await this.userService.activateTotp();
+      }
+      await this.loginService.switchLoginMode(this.credentials);
+      await this.loginService.authFulfilled();
+      const result = await this.loginService.ensureUserPermissionsForRedirect(
+        this.appState.currentUser.value
+      );
+      if (!result) {
+        this.onChangeView.emit({ view: LoginViews.MissingApplicationAccess });
+      }
+    } catch (e) {
+      this.alert.removeLastDanger();
+      if (e.data && e.data.message === 'Authentication failed! : User account is locked') {
+        this.alert.warning(gettext('Authentication failed due to: user account is locked.'));
+      } else {
+        this.alert.addServerFailure(e);
+        this.hasError = true;
+      }
+    } finally {
+      this.loading = false;
+    }
+  }
+}

package/src/bootstrap.ts

@@ -0,0 +1,19 @@
+import './polyfills';
+import '@angular/compiler';
+
+import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { BootstrapLoginComponent } from './app/bootstrap-login/bootstrap-login.component';
+import { provideBootstrapMetadata } from '@c8y/ngx-components';
+import { BootstrapMetaData } from '@c8y/bootstrap';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+  enableProdMode();
+}
+
+export function bootstrap(metadata: BootstrapMetaData) {
+  appConfig.providers.push(...provideBootstrapMetadata(metadata));
+  return bootstrapApplication(BootstrapLoginComponent, appConfig).catch(err => console.log(err));
+}

package/src/i18n.ts

@@ -0,0 +1,18 @@
+/**
+ * Internationalizing files in po format (https://en.wikipedia.org/wiki/Gettext#Translating)
+ * You can always add additional strings by adding your own po file. All po files are
+ * combined to one JSON file per language and are loaded if the specific language is needed.
+ */
+import '@c8y/ngx-components/locales/de.po';
+import '@c8y/ngx-components/locales/en.po';
+import '@c8y/ngx-components/locales/en_US.po';
+import '@c8y/ngx-components/locales/es.po';
+import '@c8y/ngx-components/locales/fr.po';
+import '@c8y/ngx-components/locales/ja_JP.po';
+import '@c8y/ngx-components/locales/ko.po';
+import '@c8y/ngx-components/locales/nl.po';
+import '@c8y/ngx-components/locales/pl.po';
+import '@c8y/ngx-components/locales/pt_BR.po';
+import '@c8y/ngx-components/locales/zh_CN.po';
+import '@c8y/ngx-components/locales/zh_TW.po';
+// import './locales/de.po'; // <- adding additional strings to the german translation.