@c8y/ngx-components 1018.503.45 → 1018.503.49

package/fesm2020/c8y-ngx-components.mjs

@@ -14570,10 +14570,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }] } });
 
 class CredentialsComponent {
-    constructor(loginService, alert, ui, credentialsFromQueryParamsService) {
+    constructor(loginService, alert, credentialsFromQueryParamsService) {
         this.loginService = loginService;
         this.alert = alert;
-        this.ui = ui;
         this.credentialsFromQueryParamsService = credentialsFromQueryParamsService;
         this.onChangeView = new EventEmitter();
         this.loginViewParams = {
@@ -14665,12 +14664,12 @@ class CredentialsComponent {
         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.'));
     }
 }
-CredentialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CredentialsComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: AppStateService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component });
-CredentialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-block btn-lg form-group\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <c8y-password-input\n      [id]=\"'password'\"\n      name=\"password\"\n      required\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n  <div\n    class=\"text-center m-t-8\"\n    *ngIf=\"!!(ui.state$ | async).loginExtraLink\"\n  >\n    <a\n      class=\"small\"\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      role=\"button\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
+CredentialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CredentialsComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component });
+CredentialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-block btn-lg form-group\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"password\"\n      translate\n    >\n      Password\n    </label>\n    <c8y-password-input\n      name=\"password\"\n      required\n      [id]=\"'password'\"\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CredentialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-credentials', template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-block btn-lg form-group\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <c8y-password-input\n      [id]=\"'password'\"\n      name=\"password\"\n      required\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n  <div\n    class=\"text-center m-t-8\"\n    *ngIf=\"!!(ui.state$ | async).loginExtraLink\"\n  >\n    <a\n      class=\"small\"\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      role=\"button\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n" }]
-        }], ctorParameters: function () { return [{ type: LoginService }, { type: AlertService }, { type: AppStateService }, { type: CredentialsFromQueryParamsService }]; }, propDecorators: { onChangeView: [{
+            args: [{ selector: 'c8y-credentials', template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-block btn-lg form-group\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"password\"\n      translate\n    >\n      Password\n    </label>\n    <c8y-password-input\n      name=\"password\"\n      required\n      [id]=\"'password'\"\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: function () { return [{ type: LoginService }, { type: AlertService }, { type: CredentialsFromQueryParamsService }]; }, propDecorators: { onChangeView: [{
                 type: Output
             }], loginViewParams: [{
                 type: Input
@@ -14812,11 +14811,12 @@ class LoginComponent {
     /**
      * Just DI.
      */
-    constructor(loginService, options, alert, credentialsFromQueryParamsService) {
+    constructor(loginService, options, alert, credentialsFromQueryParamsService, ui) {
         this.loginService = loginService;
         this.options = options;
         this.alert = alert;
         this.credentialsFromQueryParamsService = credentialsFromQueryParamsService;
+        this.ui = ui;
         this.currentView = LoginViews.None;
         this.LOGIN_VIEWS = LoginViews;
         this.disabled = false;
@@ -14899,12 +14899,12 @@ class LoginComponent {
         return token;
     }
 }
-LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: LoginComponent, deps: [{ token: LoginService }, { token: OptionsService }, { token: AlertService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: LoginComponent, selector: "c8y-login", inputs: { name: "name" }, host: { listeners: { "keyup": "onkeyup($event)" } }, ngImport: i0, template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: ["credentials"], outputs: ["onCancel"] }, { kind: "component", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: ["credentials"], outputs: ["onCancel", "onChangeView"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: ["onChangeView"] }, { kind: "component", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: ["credentials"], outputs: ["onChangeView"] }, { kind: "component", type: CredentialsComponent, selector: "c8y-credentials", inputs: ["loginViewParams"], outputs: ["onChangeView"] }, { kind: "component", type: TotpAuthComponent, selector: "c8y-totp-auth", inputs: ["credentials", "view"], outputs: ["onCancel"] }, { kind: "component", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: ["onChangeView"] }] });
+LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: LoginComponent, deps: [{ token: LoginService }, { token: OptionsService }, { token: AlertService }, { token: CredentialsFromQueryParamsService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Component });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: LoginComponent, selector: "c8y-login", inputs: { name: "name" }, host: { listeners: { "keyup": "onkeyup($event)" } }, ngImport: i0, template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <div\n      class=\"text-center m-t-8\"\n      *ngIf=\"!!(ui.state$ | async).loginExtraLink\"\n    >\n      <div *ngIf=\"!!(ui.state$ | async).loginExtraLink.length; else singleExtraLink\">\n        <a\n          class=\"small d-block m-t-8\"\n          title=\"{{ link.label }}\"\n          role=\"button\"\n          *ngFor=\"let link of (ui.state$ | async).loginExtraLink\"\n          [href]=\"link.url\"\n        >\n          {{ link.label }}\n        </a>\n      </div>\n      <ng-template #singleExtraLink>\n        <a\n          class=\"small\"\n          title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n          role=\"button\"\n          [href]=\"(ui.state$ | async).loginExtraLink.url\"\n        >\n          {{ (ui.state$ | async).loginExtraLink.label }}\n        </a>\n      </ng-template>\n    </div>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: ["credentials"], outputs: ["onCancel"] }, { kind: "component", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: ["credentials"], outputs: ["onCancel", "onChangeView"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: ["onChangeView"] }, { kind: "component", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: ["credentials"], outputs: ["onChangeView"] }, { kind: "component", type: CredentialsComponent, selector: "c8y-credentials", inputs: ["loginViewParams"], outputs: ["onChangeView"] }, { kind: "component", type: TotpAuthComponent, selector: "c8y-totp-auth", inputs: ["credentials", "view"], outputs: ["onCancel"] }, { kind: "component", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: ["onChangeView"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-login', template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: LoginService }, { type: OptionsService }, { type: AlertService }, { type: CredentialsFromQueryParamsService }]; }, propDecorators: { name: [{
+            args: [{ selector: 'c8y-login', template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <div\n      class=\"text-center m-t-8\"\n      *ngIf=\"!!(ui.state$ | async).loginExtraLink\"\n    >\n      <div *ngIf=\"!!(ui.state$ | async).loginExtraLink.length; else singleExtraLink\">\n        <a\n          class=\"small d-block m-t-8\"\n          title=\"{{ link.label }}\"\n          role=\"button\"\n          *ngFor=\"let link of (ui.state$ | async).loginExtraLink\"\n          [href]=\"link.url\"\n        >\n          {{ link.label }}\n        </a>\n      </div>\n      <ng-template #singleExtraLink>\n        <a\n          class=\"small\"\n          title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n          role=\"button\"\n          [href]=\"(ui.state$ | async).loginExtraLink.url\"\n        >\n          {{ (ui.state$ | async).loginExtraLink.label }}\n        </a>\n      </ng-template>\n    </div>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: LoginService }, { type: OptionsService }, { type: AlertService }, { type: CredentialsFromQueryParamsService }, { type: AppStateService }]; }, propDecorators: { name: [{
                 type: Input
             }], onkeyup: [{
                 type: HostListener,