@c8y/login 1022.3.2

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

@@ -0,0 +1,128 @@
+<div class="login-panel {{ platformAnimationSrc ? 'isc8y' : '' }}">
+  <div
+    class="square animated fadeIn"
+    *ngIf="platformAnimationSrc"
+  >
+    <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>
+</div>

package/src/app/login/login.component.less

@@ -0,0 +1,136 @@
+.login-panel {
+  display: grid;
+  min-height: 100vh;
+  &.isc8y{
+    @media( min-width: 768px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+c8y-bootstrap, c8y-login, c8y-cookie-banner {
+  display: contents;
+}
+
+.square{
+  background-color: var(--c8y-palette-gray-10);
+  color: var(--c8y-palette-gray-90);
+  display: none;
+  img{
+    max-width: 100%;
+  }
+  .c8y-dark-theme & {
+    background-color: var(--c8y-palette-gray-100);
+    color: var(--c8y-palette-gray-20);
+  }
+  @media( min-width: 768px) {
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+  }
+}
+
+.password-strength {
+  width: 180px;
+  margin-bottom: 20px;
+
+  .table & {
+    width: 100px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.password-strength>div {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background-color: var(--c8y-palette-gray-90);
+}
+
+.password-strength>.password-strength-label {
+  float: left;
+  color: var(--c8y-component-form-label-color, var(--c8y-root-component-form-label-color));
+}
+
+.password-green .password-bar,
+.password-yellow .password-bar,
+.password-red .password-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.password-green {
+  .password-bar {
+    width: 100%;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+  }
+}
+
+.password-yellow {
+  .password-bar {
+    width: 50%;
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+  }
+}
+
+.password-red {
+  .password-bar {
+    width: 25%;
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));;
+  }
+}
+
+.login-form {
+  height: auto;
+  padding: 32px;
+  width: 100%;
+  margin: auto;
+  @media (min-width: 768px) {
+    animation-delay: .5s;
+    max-width: 550px;
+    .isc8y &{
+      padding-left: 56px;
+      margin-left: 0;
+    }
+  }
+}
+
+.init-load {
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 320px;
+}
+
+.mainlogo { 
+  background-image: var(--brand-logo-img, var(--c8y-brand-logo-img));
+  width: 100%;
+  max-width: 350px;
+  padding-bottom: var(--brand-logo-height, var(--c8y-brand-logo-height));
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: block;
+  margin: 0 auto 32px;
+  &.c8y-logo{
+    margin: 0 0 32px;
+    background-position: top left;
+    filter: brightness(.4);
+    .c8y-dark-theme &{
+      filter: grayscale(1) contrast(0.5) brightness(1.4);
+    }
+  }
+}
+
+.mainlogo[src] {
+  background: none;
+  padding-bottom: 0;
+}

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

@@ -0,0 +1,238 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  HostListener,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core';
+import { ICredentials, TenantLoginOptionType } from '@c8y/client';
+import { LoginService } from './login.service';
+import {
+  OptionsService,
+  AlertService,
+  AppStateService,
+  AlertOutletComponent,
+  C8yTranslateDirective,
+  C8yTranslatePipe
+} from '@c8y/ngx-components';
+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 { CredentialsComponent } from './credentials/credentials.component';
+import { RecoverPasswordComponent } from './recover-password/recover-password.component';
+import { ChangePasswordComponent } from './change-password/change-password.component';
+import { TotpAuthComponent } from './totp-auth/totp-auth.component';
+import { TenantIdSetupComponent } from './tenant-id-setup/tenant-id-setup.component';
+import { ProvidePhoneNumberComponent } from './provide-phone-number/provide-phone-number.component';
+import { SmsChallengeComponent } from './sms-challenge/sms-challenge.component';
+import { MissingApplicationAccessComponent } from './missing-application-access/missing-application-access.component';
+
+@Component({
+  selector: 'c8y-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.less'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgIf,
+    NgSwitch,
+    NgSwitchCase,
+    CredentialsComponent,
+    RecoverPasswordComponent,
+    ChangePasswordComponent,
+    TotpAuthComponent,
+    SmsChallengeComponent,
+    ProvidePhoneNumberComponent,
+    TenantIdSetupComponent,
+    NgFor,
+    AlertOutletComponent,
+    AsyncPipe,
+    MissingApplicationAccessComponent,
+    C8yTranslateDirective,
+    C8yTranslatePipe
+  ]
+})
+export class LoginComponent implements OnInit, OnDestroy {
+  currentView: LoginViews = LoginViews.None;
+  LOGIN_VIEWS = LoginViews;
+  platformAnimationSrc: string | false = false;
+  isBrandLogoSet = false;
+
+  disabled = false;
+
+  @Input() name: string;
+
+  credentials: ICredentials = {};
+  loginViewParams: CredentialsComponentParams | { [key: string]: any } = {};
+  displayAlerts = false;
+  private TOKEN_PARAM = 'token';
+
+  /**
+   * Just DI.
+   */
+  constructor(
+    public loginService: LoginService,
+    private options: OptionsService,
+    private alert: AlertService,
+    private credentialsFromQueryParamsService: CredentialsFromQueryParamsService,
+    public ui: AppStateService
+  ) {
+    this.isBrandLogoSet = !!this.getValueForCSSVariable('--brand-logo-img');
+    this.platformAnimationSrc = this.getPlatformAnimationPath();
+  }
+
+  ngOnInit() {
+    const token = this.getParamAndClear(this.TOKEN_PARAM);
+    const ssoData = this.getSsoData();
+    if (ssoData) {
+      this.handleSso(ssoData);
+    } else if (this.loginService.isFirstLogin) {
+      if (!token) {
+        this.loginAutomatically();
+      } else {
+        this.credentials.token = token;
+        this.reset(false);
+      }
+    }
+    this.loginService.isFirstLogin = false;
+  }
+
+  ngOnDestroy(): void {
+    // make sure that we do not have any queryParameters related to credentials after logging in or even if we were already logged in.
+    this.credentialsFromQueryParamsService.removeCredentialsFromQueryParams();
+  }
+
+  handleLoginTemplate(event: LoginEvent) {
+    this.currentView = event.view;
+    this.credentials = event.credentials || {};
+    this.loginViewParams = event.loginViewParams || {};
+  }
+
+  @HostListener('keyup', ['$event']) onkeyup(event: KeyboardEvent) {
+    if (event.key !== 'Enter') {
+      this.loginService.cleanMessages();
+    }
+  }
+
+  reset(missingPermissions: boolean) {
+    if (missingPermissions) {
+      this.handleLoginTemplate({ view: LoginViews.MissingApplicationAccess });
+      return;
+    }
+    this.loginService.reset();
+    this.setView();
+    this.loginService.cleanMessages();
+  }
+
+  private getPlatformAnimationPath() {
+    const defaultPath = './platform-animation.svg';
+
+    const platformAnimationImagePath = this.getValueForCSSVariable(
+      '--login-platform-animation-img'
+    );
+    if (platformAnimationImagePath) {
+      return platformAnimationImagePath;
+    }
+
+    // in case we have a brand logo image, we don't want to show the platform animation
+    if (this.isBrandLogoSet) {
+      return false;
+    }
+
+    return defaultPath;
+  }
+
+  private getValueForCSSVariable(variableName: string): string {
+    const rootStyles = getComputedStyle(document.body);
+
+    // getPropertyValue might not be available in e.g. unit tests
+    if (rootStyles && typeof rootStyles.getPropertyValue === 'function') {
+      const brandLogo = rootStyles?.getPropertyValue(variableName).trim();
+      return brandLogo;
+    }
+    return '';
+  }
+
+  private async loginAutomatically() {
+    this.loginService.automaticLoginInProgress$.next(true);
+    try {
+      const result = await this.loginService.login();
+      if (result) {
+        return;
+      }
+      this.reset(true);
+    } catch (e) {
+      await this.loginService.clearCookies();
+      const preferredLoginOptionType = this.loginService.loginMode.type;
+      if (preferredLoginOptionType === TenantLoginOptionType.OAUTH2) {
+        this.loginService.redirectToOauth();
+      } else {
+        this.reset(false);
+        if (
+          preferredLoginOptionType === TenantLoginOptionType.OAUTH2_INTERNAL &&
+          window.location.protocol !== 'https:'
+        ) {
+          this.alert.danger(gettext('Current login mode only supports HTTPS.'));
+        } else if (e.res && e.res.status === 403) {
+          this.alert.addServerFailure(e);
+        }
+      }
+    }
+    this.loginService.automaticLoginInProgress$.next(false);
+  }
+
+  private setView() {
+    if (this.credentials && this.credentials.token) {
+      this.handleLoginTemplate({ view: LoginViews.ChangePassword, credentials: this.credentials });
+    } else if (this.loginService.showTenantSetup()) {
+      this.handleLoginTemplate({ view: LoginViews.TenantIdSetup });
+    } else {
+      this.handleLoginTemplate({ view: LoginViews.Credentials });
+    }
+  }
+
+  private getParamAndClear(paramName: string): string | undefined {
+    const paramValue = this.options.get<string>(paramName);
+    if (paramValue) {
+      this.options.set(paramName, undefined); // only use once
+    }
+    return paramValue;
+  }
+
+  private getSsoData(): SsoData | SsoError | false {
+    const code = this.getParamAndClear('code');
+    const sessionState = this.getParamAndClear('session_state');
+    if (code) {
+      return { sessionState, code };
+    }
+
+    const ssoError = this.getParamAndClear('error');
+    const ssoErrorDescription = this.getParamAndClear('error_description');
+    if (ssoError && ssoErrorDescription) {
+      return { ssoError, ssoErrorDescription };
+    }
+    return false;
+  }
+
+  private handleSso(ssoData: SsoData | SsoError) {
+    if ('ssoError' in ssoData) {
+      this.loginService.showSsoError(
+        decodeURIComponent(ssoData.ssoErrorDescription).replace(/\+/g, '%20')
+      );
+      this.reset(false);
+    } else {
+      this.loginService
+        .loginBySso(ssoData)
+        .then(() => this.loginService.login())
+        .catch(e => {
+          this.reset(false);
+          if (e.res?.status) {
+            this.alert.addServerFailure(e);
+          }
+        });
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ICredentials } from '@c8y/client';
+import { CredentialsComponentParams } from './credentials-component-params';
+
+export interface LoginMessage {
+  message: string;
+  type: string;
+}
+
+export interface LoginEvent {
+  view: LoginViews;
+  credentials?: ICredentials;
+  loginViewParams?: CredentialsComponentParams | { [key: string]: any };
+}
+
+export enum LoginViews {
+  None = 'NONE',
+  Credentials = 'CREDENTIALS',
+  RecoverPassword = 'RECOVER_PASSWORD',
+  SmsChallenge = 'SMS_CHALLENGE',
+  ChangePassword = 'CHANGE_PASSWORD',
+  TotpChallenge = 'TOTP_CHALLENGE',
+  TotpSetup = 'TOTP_SETUP',
+  ProvidePhoneNumber = 'PROVIDE_PHONE_NUMBER',
+  TenantIdSetup = 'TENANT_ID_SETUP',
+  MissingApplicationAccess = 'MISSING_APPLICATION_ACCESS'
+}
+
+export type SsoData = {
+  code: string;
+  sessionState?: string;
+};
+
+export type SsoError = {
+  ssoError: string;
+  ssoErrorDescription: string;
+};