@c8y/ngx-components 1006.6.36 → 1006.6.40

package/bundles/c8y-ngx-components.umd.js

@@ -3553,7 +3553,7 @@
             }
         },
         '^Error updating tenant! Cannot insert second configuration for Password code grant internal/Bad Request$': {
-            gettext: gettext('This login mode was already set by other admin, please refresh page to update data')
+            gettext: gettext('This login mode was already set by another administrator. Refresh the page to update the data.')
         },
     };
 
@@ -3651,6 +3651,106 @@
         return TranslateParserCustom;
     }(core$1.TranslateDefaultParser));
 
+    /**
+     * This is temporary fallback directive that is used to handle HTML blocks translation on maintenance versions
+     * in version 10.9.4 and later, this is replaced by default translate directive.
+     */
+    var ForceHtmlTranslateDirective = /** @class */ (function () {
+        function ForceHtmlTranslateDirective(translateService, element, _ref) {
+            var _this = this;
+            this.translateService = translateService;
+            this.element = element;
+            this._ref = _ref;
+            /**
+             * Used to trigger events when html is replaced by directive.
+             */
+            this.htmlUpdateEvent = new core.EventEmitter();
+            // subscribe to onTranslationChange event, in case the translations of the current lang change
+            if (!this.onTranslationChangeSub) {
+                this.onTranslationChangeSub = this.translateService.onTranslationChange.subscribe(function (event) {
+                    if (event.lang === _this.translateService.currentLang) {
+                        _this.checkNodes();
+                    }
+                });
+            }
+            // subscribe to onLangChange event, in case the language changes
+            if (!this.onLangChangeSub) {
+                this.onLangChangeSub = this.translateService.onLangChange.subscribe(function (event) {
+                    _this.checkNodes();
+                });
+            }
+            // subscribe to onDefaultLangChange event, in case the default language changes
+            if (!this.onDefaultLangChangeSub) {
+                this.onDefaultLangChangeSub = this.translateService.onDefaultLangChange.subscribe(function (event) {
+                    _this.checkNodes();
+                });
+            }
+        }
+        Object.defineProperty(ForceHtmlTranslateDirective.prototype, "translateParams", {
+            set: function (params) {
+                if (!lodashEs.isEqual(this.currentParams, params)) {
+                    this.currentParams = params;
+                    this.checkNodes();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ForceHtmlTranslateDirective.prototype.ngAfterViewChecked = function () {
+            this.checkNodes();
+        };
+        ForceHtmlTranslateDirective.prototype.checkNodes = function () {
+            if (this.isLookupKeyMissing()) {
+                this.element.nativeElement.lookupKey = this.getLookupKey();
+            }
+            this.translateAndUpdateHtmlContent();
+            this.htmlUpdateEvent.emit();
+        };
+        ForceHtmlTranslateDirective.prototype.ngOnDestroy = function () {
+            if (this.onLangChangeSub) {
+                this.onLangChangeSub.unsubscribe();
+            }
+            if (this.onDefaultLangChangeSub) {
+                this.onDefaultLangChangeSub.unsubscribe();
+            }
+            if (this.onTranslationChangeSub) {
+                this.onTranslationChangeSub.unsubscribe();
+            }
+            this.htmlUpdateEvent.complete();
+        };
+        /**
+         * Builds lookup key from innerHTML, removes comments (that might be added by Angular) and trims it.
+         */
+        ForceHtmlTranslateDirective.prototype.getLookupKey = function () {
+            return this.element.nativeElement.innerHTML.replace(/<!--.*?-->/gs, '').trim();
+        };
+        ForceHtmlTranslateDirective.prototype.isLookupKeyMissing = function () {
+            return !this.element.nativeElement.lookupKey;
+        };
+        ForceHtmlTranslateDirective.prototype.lookupKeyExist = function () {
+            return this.element.nativeElement.lookupKey;
+        };
+        ForceHtmlTranslateDirective.prototype.translateAndUpdateHtmlContent = function () {
+            if (this.lookupKeyExist()) {
+                this.element.nativeElement.innerHTML = this.translateService.instant(this.element.nativeElement.lookupKey, this.currentParams || {});
+            }
+        };
+        ForceHtmlTranslateDirective.ctorParameters = function () { return [
+            { type: core$1.TranslateService },
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ForceHtmlTranslateDirective.prototype, "translateParams", null);
+        ForceHtmlTranslateDirective = __decorate([
+            core.Directive({
+                selector: '[forceHtmlTranslate]'
+            })
+        ], ForceHtmlTranslateDirective);
+        return ForceHtmlTranslateDirective;
+    }());
+
     // Load these as a side effect
     try {
         // tslint:disable:no-var-requires
@@ -3727,8 +3827,9 @@
         var I18nModule_1;
         I18nModule = I18nModule_1 = __decorate([
             core.NgModule({
-                exports: [core$1.TranslateModule],
-                imports: [http.HttpClientModule]
+                exports: [core$1.TranslateModule, ForceHtmlTranslateDirective],
+                imports: [http.HttpClientModule],
+                declarations: [ForceHtmlTranslateDirective]
             })
         ], I18nModule);
         return I18nModule;
@@ -6938,6 +7039,7 @@
             };
             this.passwordStrengthSetting = {
                 enforcePasswordStrength: false,
+                passwordStrengthValidity: false,
                 greenMinLength: this.GREEN_MIN_LENGTH_DEFAULT
             };
             this.localhostRegExp = new RegExp('localhost');
@@ -7032,14 +7134,50 @@
             return this.passwordStrengthSetting.greenMinLength;
         };
         /**
-         * Checks if password strength is enforced.
-         * @return true if enforced.
+         * Checks if password strength is enforced for system
+         * by retrieving value of `enforceStrength` property from loginOptions response
+         * @return boolean value, true if enforced, false otherwise.
          */
         LoginService.prototype.getEnforcePasswordStrength = function () {
             var loginOption = this.getLoginOption();
-            this.passwordStrengthSetting.enforcePasswordStrength = lodashEs.get(loginOption, 'enforceStrength', 'false') === 'true' ? true : false;
+            var enforcePasswordStrength = lodashEs.get(loginOption, 'enforceStrength');
+            if (lodashEs.isString(enforcePasswordStrength)) {
+                this.passwordStrengthSetting.enforcePasswordStrength = enforcePasswordStrength === 'true' ? true : false;
+            }
+            else {
+                this.passwordStrengthSetting.enforcePasswordStrength = !!enforcePasswordStrength;
+            }
             return this.passwordStrengthSetting.enforcePasswordStrength;
         };
+        /**
+         * Checks if password strength is enforced for particular tenant
+         * by retrieving value of `strengthValidity` property from loginOptions response
+         * @return boolean value, true if enforced, false otherwise.
+         */
+        LoginService.prototype.getPasswordStrengthValidity = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var loginOption, strengthValidity;
+                return __generator(this, function (_a) {
+                    loginOption = this.getLoginOption();
+                    strengthValidity = lodashEs.get(loginOption, 'strengthValidity');
+                    if (lodashEs.isString(strengthValidity)) {
+                        this.passwordStrengthSetting.passwordStrengthValidity = strengthValidity === 'true' ? true : false;
+                    }
+                    else {
+                        this.passwordStrengthSetting.passwordStrengthValidity = !!strengthValidity;
+                    }
+                    return [2 /*return*/, this.passwordStrengthSetting.passwordStrengthValidity];
+                });
+            });
+        };
+        /**
+         * Function determines if enforced strength checks should be enabled for current tenant
+         * based on properties retrieved from loginOptions
+         * @return boolean value, true if strength is enforced for tenant, false otherwise.
+         */
+        LoginService.prototype.getPasswordStrengthEnforced = function () {
+            return this.getEnforcePasswordStrength() || this.getPasswordStrengthValidity();
+        };
         /**
          * Clears all backend errors.
          */
@@ -7651,7 +7789,7 @@
     }());
 
     var UserEditComponent = /** @class */ (function () {
-        function UserEditComponent(state, translate, passwordService, modalConfirmService, bsModalService, alert, userService, tenantLoginOptionsService) {
+        function UserEditComponent(state, translate, passwordService, modalConfirmService, bsModalService, alert, userService, tenantLoginOptionsService, tenantService) {
             this.state = state;
             this.translate = translate;
             this.passwordService = passwordService;
@@ -7660,6 +7798,7 @@
             this.alert = alert;
             this.userService = userService;
             this.tenantLoginOptionsService = tenantLoginOptionsService;
+            this.tenantService = tenantService;
             this.loading = false;
             this.onUser = new core.EventEmitter();
             this.onLanguage = new core.EventEmitter();
@@ -7678,11 +7817,19 @@
         });
         UserEditComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.initializeTotpSettings()];
+                var currentTenant, _a, enabledOnSystemLevel, enabledOnTenantLevel;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.tenantService.current()];
                         case 1:
-                            _a.sent();
+                            currentTenant = (_b.sent()).data;
+                            return [4 /*yield*/, this.tenantService.getTfaSettings(currentTenant)];
+                        case 2:
+                            _a = _b.sent(), enabledOnSystemLevel = _a.enabledOnSystemLevel, enabledOnTenantLevel = _a.enabledOnTenantLevel;
+                            this.isTfaEnabled = enabledOnSystemLevel || enabledOnTenantLevel;
+                            return [4 /*yield*/, this.initializeTotpSettings()];
+                        case 3:
+                            _b.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -7769,7 +7916,8 @@
             { type: modal.BsModalService },
             { type: AlertService },
             { type: client.UserService },
-            { type: client.TenantLoginOptionsService }
+            { type: client.TenantLoginOptionsService },
+            { type: client.TenantService }
         ]; };
         __decorate([
             core.Input()
@@ -7792,7 +7940,7 @@
         UserEditComponent = __decorate([
             core.Component({
                 selector: 'c8y-user-edit',
-                template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n    You cannot edit the user since it is managed via your authorization server.\n  </div>\n  <c8y-form-group>\n    <label translate for=\"userName\">Username (e.g. email)</label>\n    <input\n      id=\"userName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.userName\"\n      name=\"userName\"\n      autocomplete=\"off\"\n      required\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [disabled]=\"user.id\"\n      c8yDefaultValidation=\"user\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"displayName\">Login alias</label>\n    <input\n      id=\"displayName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.displayName\"\n      name=\"displayName\"\n      autocomplete=\"off\"\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n      [disabled]=\"userIsExternal\"\n      c8yDefaultValidation=\"loginAlias\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group [hasWarning]=\"!user.email\">\n    <label translate for=\"userEmail\">Email</label>\n    <input\n      id=\"userEmail\"\n      class=\"form-control\"\n      type=\"email\"\n      name=\"email\"\n      [maxlength]=\"254\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [(ngModel)]=\"user.email\"\n      email\n      [required]=\"user.newsletter\"\n      [disabled]=\"userIsExternal\"\n    />\n    <c8y-messages>\n      <c8y-message *ngIf=\"!user.email\" translate\n        >Note that email is required to reset password.</c8y-message\n      >\n    </c8y-messages>\n  </c8y-form-group>\n\n  <div class=\"row\" style=\"margin-left:-15px; margin-right:-15px\">\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userFirstName\">First name</label>\n        <input\n          id=\"userFirstName\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"firstName\"\n          [(ngModel)]=\"user.firstName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userLastName\">Last name</label>\n        <input\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"lastName\"\n          [(ngModel)]=\"user.lastName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n\n  <c8y-form-group>\n    <label translate for=\"userTelephone\">Telephone</label>\n    <input\n      id=\"userTelephone\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      name=\"phone\"\n      maxlength=\"254\"\n      [(ngModel)]=\"user.phone\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      c8yDefaultValidation=\"phoneNumber\"\n      [required]=\"user.twoFactorAuthenticationEnabled\"\n      [disabled]=\"userIsExternal\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"userLang\">Language</label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        class=\"form-control\"\n        #selectLang\n        name=\"lang\"\n        [(ngModel)]=\"lang\"\n        (change)=\"onLanguage.emit(selectLang.value)\"\n        [disabled]=\"userIsExternal\"\n      >\n        <option *ngFor=\"let lang of langs\" [value]=\"lang\">{{\n          translate.getNativeLanguage(lang)\n        }}</option>\n      </select>\n      <span></span>\n    </div>\n  </c8y-form-group>\n\n  <div class=\"form-group\" *ngIf=\"!userIsExternal\">\n    <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n    <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n    <button\n      title=\"{{ 'Set up two-factor authentication' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"setupTotp()\"\n      translate\n      *ngIf=\"userCanSetupTotp && !userHasActiveTotp\"\n    >\n      Set up two-factor authentication\n    </button>\n  </div>\n\n  <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n    <label translate>Newsletter</label>\n    <label class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        name=\"newsletter\"\n        [(ngModel)]=\"user.newsletter\"\n        [disabled]=\"userIsExternal\"\n      />\n      <span></span>\n      {{ 'Send me information about outages, maintenance or updates.' | translate }}\n    </label>\n  </c8y-form-group>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading || userIsExternal\"\n      translate\n    >\n      Save\n    </button>\n  </div>\n</form>\n"
+                template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n    You cannot edit the user since it is managed via your authorization server.\n  </div>\n  <c8y-form-group>\n    <label translate for=\"userName\">Username (e.g. email)</label>\n    <input\n      id=\"userName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.userName\"\n      name=\"userName\"\n      autocomplete=\"off\"\n      required\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [disabled]=\"user.id\"\n      c8yDefaultValidation=\"user\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"displayName\">Login alias</label>\n    <input\n      id=\"displayName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.displayName\"\n      name=\"displayName\"\n      autocomplete=\"off\"\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n      [disabled]=\"userIsExternal\"\n      c8yDefaultValidation=\"loginAlias\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group [hasWarning]=\"!user.email\">\n    <label translate for=\"userEmail\">Email</label>\n    <input\n      id=\"userEmail\"\n      class=\"form-control\"\n      type=\"email\"\n      name=\"email\"\n      [maxlength]=\"254\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [(ngModel)]=\"user.email\"\n      email\n      [required]=\"user.newsletter\"\n      [disabled]=\"userIsExternal\"\n    />\n    <c8y-messages>\n      <c8y-message *ngIf=\"!user.email\" translate\n        >Note that email is required to reset password.</c8y-message\n      >\n    </c8y-messages>\n  </c8y-form-group>\n\n  <div class=\"row\" style=\"margin-left:-15px; margin-right:-15px\">\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userFirstName\">First name</label>\n        <input\n          id=\"userFirstName\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"firstName\"\n          [(ngModel)]=\"user.firstName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userLastName\">Last name</label>\n        <input\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"lastName\"\n          [(ngModel)]=\"user.lastName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n\n  <c8y-form-group>\n    <label translate for=\"userTelephone\">Telephone</label>\n    <input\n      id=\"userTelephone\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      name=\"phone\"\n      maxlength=\"254\"\n      [(ngModel)]=\"user.phone\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      c8yDefaultValidation=\"phoneNumber\"\n      [required]=\"user.twoFactorAuthenticationEnabled\"\n      [disabled]=\"userIsExternal\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"userLang\">Language</label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        class=\"form-control\"\n        #selectLang\n        name=\"lang\"\n        [(ngModel)]=\"lang\"\n        (change)=\"onLanguage.emit(selectLang.value)\"\n        [disabled]=\"userIsExternal\"\n      >\n        <option *ngFor=\"let lang of langs\" [value]=\"lang\">{{\n          translate.getNativeLanguage(lang)\n        }}</option>\n      </select>\n      <span></span>\n    </div>\n  </c8y-form-group>\n\n  <div class=\"form-group\" *ngIf=\"!userIsExternal\">\n    <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n    <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n    <button\n      title=\"{{ 'Set up two-factor authentication' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"setupTotp()\"\n      translate\n      *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n    >\n      Set up two-factor authentication\n    </button>\n  </div>\n\n  <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n    <label translate>Newsletter</label>\n    <label class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        name=\"newsletter\"\n        [(ngModel)]=\"user.newsletter\"\n        [disabled]=\"userIsExternal\"\n      />\n      <span></span>\n      {{ 'Send me information about outages, maintenance or updates.' | translate }}\n    </label>\n  </c8y-form-group>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading || userIsExternal\"\n      translate\n    >\n      Save\n    </button>\n  </div>\n</form>\n"
             })
         ], UserEditComponent);
         return UserEditComponent;
@@ -8214,15 +8362,16 @@
     }());
 
     var NewPasswordComponent = /** @class */ (function () {
-        function NewPasswordComponent(systemOptions) {
-            this.systemOptions = systemOptions;
+        function NewPasswordComponent(loginService) {
+            this.loginService = loginService;
             this.password = new core.EventEmitter();
             this.model = {};
-            this.enforcePasswordStrength = false;
             this.changePassword = false;
+            this.passwordEnforced = false;
         }
         NewPasswordComponent.prototype.ngOnInit = function () {
-            this.loadEnforcePasswordStrength();
+            this.loadPasswordStrengthSettings();
+            this.minlength = this.loginService.getGreenMinLength();
         };
         NewPasswordComponent.prototype.newPasswordChanged = function () {
             this.password.emit({
@@ -8230,29 +8379,24 @@
                 passwordStrength: this.model.strength
             });
         };
-        NewPasswordComponent.prototype.loadEnforcePasswordStrength = function () {
+        NewPasswordComponent.prototype.loadPasswordStrengthSettings = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var data, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, this.systemOptions.detail({
-                                    category: 'password',
-                                    key: 'enforce.strength'
-                                })];
+                            _a = this;
+                            return [4 /*yield*/, this.loginService.getEnforcePasswordStrength()];
                         case 1:
-                            data = (_a.sent()).data;
-                            this.enforcePasswordStrength = data.value === 'true';
-                            return [3 /*break*/, 3];
-                        case 2:
-                            e_1 = _a.sent();
-                            return [3 /*break*/, 3];
-                        case 3: return [2 /*return*/];
+                            _a.passwordEnforced = _b.sent();
+                            return [2 /*return*/];
                     }
                 });
             });
         };
+        NewPasswordComponent.prototype.showPasswordStrength = function () {
+            return this.model.newPassword && this.model.newPassword.length >= this.minlength;
+        };
         NewPasswordComponent.prototype.toggleChangePassword = function () {
             this.changePassword = !this.changePassword;
             if (!this.changePassword) {
@@ -8261,7 +8405,7 @@
             }
         };
         NewPasswordComponent.ctorParameters = function () { return [
-            { type: client.SystemOptionsService }
+            { type: LoginService }
         ]; };
         __decorate([
             core.Output()
@@ -8269,7 +8413,7 @@
         NewPasswordComponent = __decorate([
             core.Component({
                 selector: 'c8y-new-password',
-                template: "<div class=\"form-group\">\n  <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div *ngIf=\"changePassword\">\n  <c8y-form-group>\n    <label for=\"newPassword\" translate>Password</label>\n    <input\n      id=\"newPassword\"\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      (change)=\"newPasswordChanged()\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      c8yDefaultValidation=\"password\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label for=\"newConfirmPassword\" translate>Confirm password</label>\n    <input\n      id=\"newConfirmPassword\"\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword\"\n    (strength)=\"model.strength = $event\"\n  ></c8y-password-strength>\n\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!enforcePasswordStrength\"\n  ></c8y-password-check-list>\n</div>\n",
+                template: "<div class=\"form-group\">\n  <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div *ngIf=\"changePassword\">\n  <c8y-form-group>\n    <label for=\"newPassword\" translate>Password</label>\n    <input\n      id=\"newPassword\"\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      (change)=\"newPasswordChanged()\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      c8yDefaultValidation=\"password\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label for=\"newConfirmPassword\" translate>Confirm password</label>\n    <input\n      id=\"newConfirmPassword\"\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!showPasswordStrength()\"\n    (strength)=\"model.strength = $event\"\n  ></c8y-password-strength>\n\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!passwordEnforced\"\n  ></c8y-password-check-list>\n</div>\n",
                 viewProviders: [{ provide: forms.ControlContainer, useExisting: forms.NgForm }]
             })
         ], NewPasswordComponent);
@@ -8331,6 +8475,7 @@
             opcuaBrowsePath: gettext('Invalid OPC UA URI.'),
             password: gettext('Password must have at least 8 characters and no more than 32 and can only contain letters, numbers and following symbols: `~!@#$%^&*()_|+-=?;:\'",.<>{}[]\\/'),
             passwordConfirm: gettext('Passwords do not match.'),
+            passwordStrength: gettext('Password not good enough, password must be stronger (green).'),
             phoneNumber: gettext('Invalid phone number format. Only digits, spaces, slashes ("/") and dashes ("-") allowed.'),
             required: gettext('This field is required.'),
             tenantId: gettext('May contain lowercase letters, digits, hyphens and underscores. ' +
@@ -10420,9 +10565,9 @@
                 tenantId: '',
                 email: '',
                 newPassword: '',
-                newPasswordConfirm: ''
+                newPasswordConfirm: '',
+                passwordStrengthEnforced: false
             };
-            this.enforcePasswordStrength = false;
             this.emailReadOnly = false;
             this.TOKEN_PARAM = 'token';
             this.EMAIL_PARAM = 'email';
@@ -10433,7 +10578,7 @@
                     this.model.tenantId = this.loginService.getTenant();
                     this.model.email = this.options.get(this.EMAIL_PARAM, '');
                     this.emailReadOnly = !!this.model.email;
-                    this.enforcePasswordStrength = this.loginService.getEnforcePasswordStrength();
+                    this.model.passwordStrengthEnforced = this.loginService.getEnforcePasswordStrength();
                     return [2 /*return*/];
                 });
             });
@@ -10494,7 +10639,7 @@
         ChangePasswordComponent = __decorate([
             core.Component({
                 selector: 'c8y-change-password',
-                template: "<form\n  role=\"form\"\n  class=\"loginForm\"\n  (ngSubmit)=\"changePassword()\"\n  #changePasswordForm=\"ngForm\"\n  novalidate\n>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>New password</label>\n    <input\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'New password' | translate }}\"\n      [pattern]=\"passwordPattern\"\n      autocomplete=\"new-password\"\n      required\n    />\n    <c8y-messages>\n      <c8y-message\n        name=\"pattern\"\n        [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Confirm password</label>\n    <input\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Confirm password' | translate }}\"\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n      required\n    />\n    <c8y-messages>\n      <c8y-message\n        name=\"passwordConfirm\"\n        [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword\"\n  ></c8y-password-strength>\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword || !enforcePasswordStrength\"\n  ></c8y-password-check-list>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    translate\n  >\n    Set password\n  </button>\n</form>\n"
+                template: "<form\n  role=\"form\"\n  class=\"loginForm\"\n  (ngSubmit)=\"changePassword()\"\n  #changePasswordForm=\"ngForm\"\n  novalidate\n>\n\n  <div\n    class=\"legend form-block center\"\n    translate\n  >\n    Change password\n  </div>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <div class=\"row content-flex-50\">\n    <div class=\"col-7\">\n      <c8y-form-group>\n        <label translate>New password</label>\n        <input\n          [(ngModel)]=\"model.newPassword\"\n          #newPassword=\"ngModel\"\n          type=\"password\"\n          name=\"newPassword\"\n          class=\"form-control\"\n          placeholder=\"{{ 'New password' | translate }}\"\n          [pattern]=\"passwordPattern\"\n          autocomplete=\"new-password\"\n          [passwordStrengthEnforced]=\"model.passwordStrengthEnforced\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"pattern\"\n            [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label translate>Confirm password</label>\n        <input\n          [(ngModel)]=\"model.newPasswordConfirm\"\n          #newPasswordConfirm=\"ngModel\"\n          type=\"password\"\n          name=\"newPasswordConfirm\"\n          class=\"form-control\"\n          placeholder=\"{{ 'Confirm password' | translate }}\"\n          passwordConfirm=\"newPassword\"\n          autocomplete=\"new-password\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"passwordConfirm\"\n            [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-5\">\n      <c8y-password-strength\n        [password]=\"model.newPassword\"\n        [hidden]=\"!model.newPassword\"\n      ></c8y-password-strength>\n      <c8y-password-check-list\n        class=\"m-t-32\"\n        [password]=\"model.newPassword\"\n        [hidden]=\"!model.newPassword || !model.passwordStrengthEnforced\"\n      ></c8y-password-check-list>\n    </div>\n  </div>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    translate\n  >\n    Set password\n  </button>\n</form>\n"
             })
         ], ChangePasswordComponent);
         return ChangePasswordComponent;
@@ -10595,7 +10740,7 @@
         };
         CredentialsComponent.prototype.handleNoPhoneNumberProvided = function () {
             this.onChangeView.emit({ view: exports.LoginViews.ProvidePhoneNumber, credentials: this.model });
-            this.alert.warning(gettext('Two-factor authentication has been turned on for this account. Please provide your phone number above to save it in your user profile and start receiving verification codes via SMS.'));
+            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.ctorParameters = function () { return [
             { type: LoginService },
@@ -10880,6 +11025,61 @@
         return TotpAuthComponent;
     }());
 
+    var StrengthValidatorService = /** @class */ (function () {
+        function StrengthValidatorService(passwordService) {
+            this.passwordService = passwordService;
+        }
+        StrengthValidatorService.prototype.isStrong = function (password) {
+            return this.isPasswordGreen(this.passwordService.getStrengthColor(password).passwordStrength);
+        };
+        StrengthValidatorService.prototype.isPasswordGreen = function (strength) {
+            return strength === client.PasswordStrength.GREEN;
+        };
+        StrengthValidatorService.ctorParameters = function () { return [
+            { type: PasswordService }
+        ]; };
+        StrengthValidatorService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function StrengthValidatorService_Factory() { return new StrengthValidatorService(core.ɵɵinject(PasswordService)); }, token: StrengthValidatorService, providedIn: "root" });
+        StrengthValidatorService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], StrengthValidatorService);
+        return StrengthValidatorService;
+    }());
+
+    var PasswordStrengthValidatorDirective = /** @class */ (function () {
+        function PasswordStrengthValidatorDirective(passwordService) {
+            this.passwordService = passwordService;
+        }
+        PasswordStrengthValidatorDirective_1 = PasswordStrengthValidatorDirective;
+        Object.defineProperty(PasswordStrengthValidatorDirective.prototype, "passwordStrengthEnforced", {
+            set: function (value) {
+                this.forced = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PasswordStrengthValidatorDirective.prototype.validate = function (control) {
+            var strengthFulfilled = this.passwordService.isStrong(control.value || '');
+            var enforcementForcedAndNotFulfilled = this.forced && !strengthFulfilled;
+            return enforcementForcedAndNotFulfilled ? { passwordStrength: true } : null;
+        };
+        var PasswordStrengthValidatorDirective_1;
+        PasswordStrengthValidatorDirective.ctorParameters = function () { return [
+            { type: StrengthValidatorService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], PasswordStrengthValidatorDirective.prototype, "passwordStrengthEnforced", null);
+        PasswordStrengthValidatorDirective = PasswordStrengthValidatorDirective_1 = __decorate([
+            core.Directive({
+                selector: '[passwordStrengthEnforced]',
+                providers: [{ provide: forms.NG_VALIDATORS, useExisting: PasswordStrengthValidatorDirective_1, multi: true }]
+            })
+        ], PasswordStrengthValidatorDirective);
+        return PasswordStrengthValidatorDirective;
+    }());
+
     /**
      * The angular module definition for the login.
      * @exports LoginComponent
@@ -10905,7 +11105,8 @@
                     RecoverPasswordComponent,
                     ChangePasswordComponent,
                     CredentialsComponent,
-                    TotpAuthComponent
+                    TotpAuthComponent,
+                    PasswordStrengthValidatorDirective
                 ],
                 imports: [
                     forms.FormsModule,
@@ -14237,24 +14438,89 @@
     }());
 
     var GuideDocsComponent = /** @class */ (function () {
-        function GuideDocsComponent(docs) {
+        function GuideDocsComponent(docs, el, renderer) {
             this.docs = docs;
+            this.el = el;
+            this.renderer = renderer;
+            this.destroyed$ = new rxjs.ReplaySubject(1);
         }
         GuideDocsComponent.prototype.ngOnInit = function () {
             this.baseUrl = this.docs.getBaseUrl();
         };
+        /**
+         * After content is initialized we subscribe for translation events, then we are able to modify
+         * anchor just as C8yGuideHrefDirective does.
+         */
+        GuideDocsComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            if (this.translateDirective) {
+                this.translateDirective.htmlUpdateEvent
+                    .pipe(operators.takeUntil(this.destroyed$))
+                    .subscribe(function () {
+                    _this.replaceAnchorAttributes();
+                });
+            }
+            else {
+                this.replaceAnchorAttributes();
+            }
+        };
+        /**
+         * Find and modify anchor elements
+         */
+        GuideDocsComponent.prototype.replaceAnchorAttributes = function () {
+            var _this = this;
+            var anchors = this.findGuideAnchors(this.el.nativeElement);
+            anchors.forEach(function (a) {
+                var guideHref = _this.baseUrl + "/" + a.getAttribute('c8y-guide-href');
+                _this.renderer.setAttribute(a, 'href', guideHref);
+                if (!a.hasAttribute('target')) {
+                    _this.renderer.setAttribute(a, 'target', '_blank');
+                }
+            });
+        };
+        /**
+         * Recursive function, returns array of Anchor elements inside HTMLElement.
+         */
+        GuideDocsComponent.prototype.findGuideAnchors = function (el) {
+            var _this = this;
+            var isAnchor = function () { return el.nodeName === 'A'; };
+            var hasGuideHrefAttr = function () { return !!el.attributes.getNamedItem('c8y-guide-href'); };
+            var hasChildren = function () { return el.childNodes && el.childNodes.length > 0; };
+            var result = [];
+            if (isAnchor() && hasGuideHrefAttr()) {
+                result.push(el);
+            }
+            else if (hasChildren()) {
+                el.childNodes.forEach(function (node) {
+                    var searchResult = _this.findGuideAnchors(node);
+                    if (searchResult) {
+                        result = __spread(result, searchResult);
+                    }
+                });
+            }
+            return result;
+        };
         GuideDocsComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this.links.forEach(function (guide) {
                 guide.baseHref = _this.baseUrl;
             });
         };
+        GuideDocsComponent.prototype.ngOnDestroy = function () {
+            this.destroyed$.next(true);
+            this.destroyed$.complete();
+        };
         GuideDocsComponent.ctorParameters = function () { return [
-            { type: DocsService }
+            { type: DocsService },
+            { type: core.ElementRef },
+            { type: core.Renderer2 }
         ]; };
         __decorate([
             core.ContentChildren(GuideHrefDirective, { descendants: true })
         ], GuideDocsComponent.prototype, "links", void 0);
+        __decorate([
+            core.ContentChild(ForceHtmlTranslateDirective, { static: false })
+        ], GuideDocsComponent.prototype, "translateDirective", void 0);
         GuideDocsComponent = __decorate([
             core.Component({
                 selector: '[c8y-guide-docs]',
@@ -15252,7 +15518,7 @@
         WidgetsDashboardComponent = __decorate([
             core.Component({
                 selector: 'c8y-widgets-dashboard',
-                template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onAddWidget.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onAddWidget.emit()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i> {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onEditDashboard.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onEditDashboard.emit()\"\n  >\n    <i c8yIcon=\"pencil\"></i> {{ 'Edit' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"settings.allowFullscreen\">\n  <button class=\"btn btn-link\" (click)=\"toggleFullscreen()\">\n    <i [c8yIcon]=\"fullScreen() ? 'compress' : 'expand'\"></i> {{ 'Full screen' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"onFreeze.observers.length\"\n>\n  <button\n    title=\"{{ 'Lock/unlock this dashboard' | translate }}\"\n    class=\"btn btn-default\"\n    [ngClass]=\"{ active: settings.isFrozen }\"\n    (click)=\"onFreeze.emit(settings)\"\n    [disabled]=\"settings.isDisabled\"\n    uib-btn-checkbox\n  >\n    <i [c8yIcon]=\"settings.isFrozen ? 'lock' : 'unlock'\"></i>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button (click)=\"onDeleteDashboard.emit()\" [disabled]=\"settings.isFrozen || settings.isDisabled\">\n    <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<!-- empty state -->\n<div class=\"c8y-empty-state text-center\" *ngIf=\"!settings.isLoading && widgets.length === 0\">\n  <h1 class=\"c8y-icon c8y-icon-device c8y-icon-duocolor\"></h1>\n  <h3 translate>No widgets to display.</h3>\n  <div *ngIf=\"!settings.isFrozen && onAddWidget.observers.length\">\n    <p translate>Add widgets to this dashboard.</p>\n    <div>\n      <button\n        [disabled]=\"settings.isFrozen || settings.isDisabled\"\n        (click)=\"onAddWidget.emit()\"\n        class=\"btn btn-primary\"\n        translate\n      >\n        Add widget\n      </button>\n    </div>\n    <p c8y-guide-docs>\n      <small translate\n        >Find out more in the\n        <a c8y-guide-href=\"users-guide/cockpit/#dashboards\">User guide`KEEP_ORIGINAL`</a>.</small\n      >\n    </p>\n  </div>\n</div>\n<!-- /.empty settings -->\n\n<div class=\"col-xs-12 text-center\" *ngIf=\"settings.isLoading\">\n  <div class=\"spinner\" style=\"position: relative;\">\n    <div class=\"rect1\"></div>\n    <div class=\"rect2\"></div>\n    <div class=\"rect3\"></div>\n    <div class=\"rect4\"></div>\n    <div class=\"rect5\"></div>\n  </div>\n</div>\n\n<c8y-dashboard\n  (dashboardChange)=\"onChangeDashboard.emit($event)\"\n  #dashboard\n  *ngIf=\"!settings.isLoading\"\n>\n  <c8y-dashboard-child\n    *ngFor=\"let widget of widgets\"\n    [x]=\"widget._x\"\n    [y]=\"widget._y\"\n    [width]=\"widget._width || settings.defaultWidth\"\n    [height]=\"widget._height || settings.defaultHeight\"\n    [margin]=\"settings.widgetMargin\"\n    [isFrozen]=\"settings.isFrozen || settings.isDisabled\"\n    [class]=\"widget.classes\"\n    [data]=\"widget\"\n    [useIntersection]=\"true\"\n    (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    #child\n  >\n    <c8y-dashboard-child-title>\n      <span *ngIf=\"settings.translateWidgetTitle\"> {{ widget.title | translate }}</span>\n      <span *ngIf=\"!settings.translateWidgetTitle\">\n        {{ widget.title }}\n      </span>\n    </c8y-dashboard-child-title>\n    <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n      <button (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\">\n        <i c8yIcon=\"pencil\"></i>&nbsp;<span translate>Edit</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n      <button\n        (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Remove</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dynamic-component\n      [componentId]=\"widget.componentId || widget.name\"\n      [config]=\"\n        widget.templateUrl || widget.widgetComponent\n          ? { child: widget, dashboard: contextDashboard, context: context }\n          : widget.config\n      \"\n      *ngIf=\"child.intersected\"\n    ></c8y-dynamic-component>\n  </c8y-dashboard-child>\n</c8y-dashboard>\n",
+                template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onAddWidget.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onAddWidget.emit()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i> {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onEditDashboard.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onEditDashboard.emit()\"\n  >\n    <i c8yIcon=\"pencil\"></i> {{ 'Edit' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"settings.allowFullscreen\">\n  <button class=\"btn btn-link\" (click)=\"toggleFullscreen()\">\n    <i [c8yIcon]=\"fullScreen() ? 'compress' : 'expand'\"></i> {{ 'Full screen' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"onFreeze.observers.length\"\n>\n  <button\n    title=\"{{ 'Lock/unlock this dashboard' | translate }}\"\n    class=\"btn btn-default\"\n    [ngClass]=\"{ active: settings.isFrozen }\"\n    (click)=\"onFreeze.emit(settings)\"\n    [disabled]=\"settings.isDisabled\"\n    uib-btn-checkbox\n  >\n    <i [c8yIcon]=\"settings.isFrozen ? 'lock' : 'unlock'\"></i>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button (click)=\"onDeleteDashboard.emit()\" [disabled]=\"settings.isFrozen || settings.isDisabled\">\n    <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<!-- empty state -->\n<div class=\"c8y-empty-state text-center\" *ngIf=\"!settings.isLoading && widgets.length === 0\">\n  <h1 class=\"c8y-icon c8y-icon-device c8y-icon-duocolor\"></h1>\n  <h3 translate>No widgets to display.</h3>\n  <div *ngIf=\"!settings.isFrozen && onAddWidget.observers.length\">\n    <p translate>Add widgets to this dashboard.</p>\n    <div>\n      <button\n        [disabled]=\"settings.isFrozen || settings.isDisabled\"\n        (click)=\"onAddWidget.emit()\"\n        class=\"btn btn-primary\"\n        translate\n      >\n        Add widget\n      </button>\n    </div>\n    <p c8y-guide-docs>\n      <small forceHtmlTranslate ngNonBindable\n        >Find out more in the\n        <a c8y-guide-href=\"users-guide/cockpit/#dashboards\">User guide`KEEP_ORIGINAL`</a>.</small\n      >\n    </p>\n  </div>\n</div>\n<!-- /.empty settings -->\n\n<div class=\"col-xs-12 text-center\" *ngIf=\"settings.isLoading\">\n  <div class=\"spinner\" style=\"position: relative;\">\n    <div class=\"rect1\"></div>\n    <div class=\"rect2\"></div>\n    <div class=\"rect3\"></div>\n    <div class=\"rect4\"></div>\n    <div class=\"rect5\"></div>\n  </div>\n</div>\n\n<c8y-dashboard\n  (dashboardChange)=\"onChangeDashboard.emit($event)\"\n  #dashboard\n  *ngIf=\"!settings.isLoading\"\n>\n  <c8y-dashboard-child\n    *ngFor=\"let widget of widgets\"\n    [x]=\"widget._x\"\n    [y]=\"widget._y\"\n    [width]=\"widget._width || settings.defaultWidth\"\n    [height]=\"widget._height || settings.defaultHeight\"\n    [margin]=\"settings.widgetMargin\"\n    [isFrozen]=\"settings.isFrozen || settings.isDisabled\"\n    [class]=\"widget.classes\"\n    [data]=\"widget\"\n    [useIntersection]=\"true\"\n    (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    #child\n  >\n    <c8y-dashboard-child-title>\n      <span *ngIf=\"settings.translateWidgetTitle\"> {{ widget.title | translate }}</span>\n      <span *ngIf=\"!settings.translateWidgetTitle\">\n        {{ widget.title }}\n      </span>\n    </c8y-dashboard-child-title>\n    <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n      <button (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\">\n        <i c8yIcon=\"pencil\"></i>&nbsp;<span translate>Edit</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n      <button\n        (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Remove</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dynamic-component\n      [componentId]=\"widget.componentId || widget.name\"\n      [config]=\"\n        widget.templateUrl || widget.widgetComponent\n          ? { child: widget, dashboard: contextDashboard, context: context }\n          : widget.config\n      \"\n      *ngIf=\"child.intersected\"\n    ></c8y-dynamic-component>\n  </c8y-dashboard-child>\n</c8y-dashboard>\n",
                 host: {
                     style: "\n      display: block;\n    ",
                     class: 'dashboard c8y-grid-dashboard'
@@ -16364,97 +16630,100 @@
     exports.ɵ0 = ɵ0;
     exports.ɵa = ApplicationOptions;
     exports.ɵb = translateLoaderFactory;
-    exports.ɵba = ActionOutletComponent;
-    exports.ɵbb = ActionComponent;
-    exports.ɵbc = AlertModule;
-    exports.ɵbd = AlertOutletComponent;
-    exports.ɵbe = AlertComponent;
-    exports.ɵbf = AlertDetailsComponent;
-    exports.ɵbg = AlertTextComponent;
-    exports.ɵbh = BootstrapModule;
-    exports.ɵbi = CookieBannerComponent;
-    exports.ɵbj = TitleOutletComponent;
-    exports.ɵbk = AppIconComponent;
-    exports.ɵbl = AppSwitcherComponent;
-    exports.ɵbm = RightDrawerComponent;
-    exports.ɵbn = UserModule;
-    exports.ɵbo = UserMenuOutletComponent;
-    exports.ɵbp = UserEditComponent;
-    exports.ɵbq = UserEditModalComponent;
-    exports.ɵbr = UserMenuItemComponent;
-    exports.ɵbs = UserTotpSetupComponent;
-    exports.ɵbt = InputGroupListContainerDirective;
-    exports.ɵbu = RequiredInputPlaceholderDirective;
-    exports.ɵbv = IpRangeInputListComponent;
-    exports.ɵbw = FilterInputComponent;
-    exports.ɵbx = ModalComponent;
-    exports.ɵby = SearchOutletComponent;
-    exports.ɵbz = SearchComponent;
+    exports.ɵba = ActionModule;
+    exports.ɵbb = ActionOutletComponent;
+    exports.ɵbc = ActionComponent;
+    exports.ɵbd = AlertModule;
+    exports.ɵbe = AlertOutletComponent;
+    exports.ɵbf = AlertComponent;
+    exports.ɵbg = AlertDetailsComponent;
+    exports.ɵbh = AlertTextComponent;
+    exports.ɵbi = BootstrapModule;
+    exports.ɵbj = CookieBannerComponent;
+    exports.ɵbk = TitleOutletComponent;
+    exports.ɵbl = AppIconComponent;
+    exports.ɵbm = AppSwitcherComponent;
+    exports.ɵbn = RightDrawerComponent;
+    exports.ɵbo = UserModule;
+    exports.ɵbp = UserMenuOutletComponent;
+    exports.ɵbq = UserEditComponent;
+    exports.ɵbr = UserEditModalComponent;
+    exports.ɵbs = UserMenuItemComponent;
+    exports.ɵbt = UserTotpSetupComponent;
+    exports.ɵbu = InputGroupListContainerDirective;
+    exports.ɵbv = RequiredInputPlaceholderDirective;
+    exports.ɵbw = IpRangeInputListComponent;
+    exports.ɵbx = FilterInputComponent;
+    exports.ɵby = ModalComponent;
+    exports.ɵbz = SearchOutletComponent;
     exports.ɵc = localePathFactory;
-    exports.ɵca = BreadcrumbModule;
-    exports.ɵcb = BreadcrumbComponent;
-    exports.ɵcc = BreadcrumbItemComponent;
-    exports.ɵcd = BreadcrumbOutletComponent;
-    exports.ɵce = NavigatorModule;
-    exports.ɵcf = NavigatorOutletComponent;
-    exports.ɵcg = NavigatorNodeComponent;
-    exports.ɵch = LoginModule;
-    exports.ɵci = LoginComponent;
-    exports.ɵcj = RecoverPasswordComponent;
-    exports.ɵck = ChangePasswordComponent;
-    exports.ɵcl = CredentialsComponent;
-    exports.ɵcm = TotpAuthComponent;
-    exports.ɵcn = TabsModule;
-    exports.ɵco = TabsOutletComponent;
-    exports.ɵcp = TabComponent;
-    exports.ɵcq = CellRendererComponent;
-    exports.ɵcr = FilteringFormRendererDefDirective;
-    exports.ɵcs = FilteringFormRendererComponent;
-    exports.ɵct = ColumnDirective;
-    exports.ɵcu = FilteringFormComponent;
-    exports.ɵcv = StatusCellRendererComponent;
-    exports.ɵcw = NameCellRendererComponent;
-    exports.ɵcx = ModelCellRendererComponent;
-    exports.ɵcy = SerialNumberCellRendererComponent;
-    exports.ɵcz = GroupCellRendererComponent;
+    exports.ɵca = SearchComponent;
+    exports.ɵcb = BreadcrumbModule;
+    exports.ɵcc = BreadcrumbComponent;
+    exports.ɵcd = BreadcrumbItemComponent;
+    exports.ɵce = BreadcrumbOutletComponent;
+    exports.ɵcf = NavigatorModule;
+    exports.ɵcg = NavigatorOutletComponent;
+    exports.ɵch = NavigatorNodeComponent;
+    exports.ɵci = LoginModule;
+    exports.ɵcj = LoginComponent;
+    exports.ɵck = RecoverPasswordComponent;
+    exports.ɵcl = ChangePasswordComponent;
+    exports.ɵcm = CredentialsComponent;
+    exports.ɵcn = TotpAuthComponent;
+    exports.ɵco = PasswordStrengthValidatorDirective;
+    exports.ɵcp = StrengthValidatorService;
+    exports.ɵcq = TabsModule;
+    exports.ɵcr = TabsOutletComponent;
+    exports.ɵcs = TabComponent;
+    exports.ɵct = CellRendererComponent;
+    exports.ɵcu = FilteringFormRendererDefDirective;
+    exports.ɵcv = FilteringFormRendererComponent;
+    exports.ɵcw = ColumnDirective;
+    exports.ɵcx = FilteringFormComponent;
+    exports.ɵcy = StatusCellRendererComponent;
+    exports.ɵcz = NameCellRendererComponent;
     exports.ɵd = languagesFactory;
-    exports.ɵda = RegistrationDateCellRendererComponent;
-    exports.ɵdb = AlarmsCellRendererComponent;
-    exports.ɵdc = ListItemComponent;
-    exports.ɵdd = ListItemFooterComponent;
-    exports.ɵde = ListItemActionComponent;
-    exports.ɵdf = ListItemCollapseComponent;
-    exports.ɵdg = ListItemIconComponent;
-    exports.ɵdh = ListItemBodyComponent;
-    exports.ɵdi = ListItemCheckboxComponent;
-    exports.ɵdj = ListItemRadioComponent;
-    exports.ɵdk = C8yStepperIcon;
-    exports.ɵdl = C8yStepperProgress;
-    exports.ɵdn = RouterTabsResolver;
-    exports.ɵdo = ContextRouteGuard;
-    exports.ɵdp = QuickLinkComponent;
+    exports.ɵda = ModelCellRendererComponent;
+    exports.ɵdb = SerialNumberCellRendererComponent;
+    exports.ɵdc = GroupCellRendererComponent;
+    exports.ɵdd = RegistrationDateCellRendererComponent;
+    exports.ɵde = AlarmsCellRendererComponent;
+    exports.ɵdf = ListItemComponent;
+    exports.ɵdg = ListItemFooterComponent;
+    exports.ɵdh = ListItemActionComponent;
+    exports.ɵdi = ListItemCollapseComponent;
+    exports.ɵdj = ListItemIconComponent;
+    exports.ɵdk = ListItemBodyComponent;
+    exports.ɵdl = ListItemCheckboxComponent;
+    exports.ɵdm = ListItemRadioComponent;
+    exports.ɵdn = C8yStepperIcon;
+    exports.ɵdo = C8yStepperProgress;
+    exports.ɵdq = RouterTabsResolver;
+    exports.ɵdr = ContextRouteGuard;
+    exports.ɵds = QuickLinkComponent;
     exports.ɵe = localeId;
     exports.ɵf = I18nModule;
-    exports.ɵg = MESSAGES;
-    exports.ɵh = LOCALE_PATH;
-    exports.ɵi = LANGUAGES;
-    exports.ɵj = TranslateCustomLoader;
-    exports.ɵk = TranslateParserCustom;
-    exports.ɵl = MissingTranslationCustomHandler;
-    exports.ɵm = PatternMessagesService;
-    exports.ɵn = IconDirective;
-    exports.ɵo = ICONS;
-    exports.ɵp = OutletDirective;
-    exports.ɵq = ShortenUserNamePipe;
-    exports.ɵr = ForOfDirective;
-    exports.ɵs = LoadMoreComponent;
-    exports.ɵt = MapFunctionPipe;
-    exports.ɵu = ProgressBarComponent;
-    exports.ɵv = UserPreferencesService;
-    exports.ɵw = ActionBarModule;
-    exports.ɵx = ActionBarComponent;
-    exports.ɵy = ActionBarItemComponent;
-    exports.ɵz = ActionModule;
+    exports.ɵg = ForceHtmlTranslateDirective;
+    exports.ɵh = MESSAGES;
+    exports.ɵi = LOCALE_PATH;
+    exports.ɵj = LANGUAGES;
+    exports.ɵk = TranslateCustomLoader;
+    exports.ɵl = TranslateParserCustom;
+    exports.ɵm = MissingTranslationCustomHandler;
+    exports.ɵn = PatternMessagesService;
+    exports.ɵo = IconDirective;
+    exports.ɵp = ICONS;
+    exports.ɵq = OutletDirective;
+    exports.ɵr = ShortenUserNamePipe;
+    exports.ɵs = ForOfDirective;
+    exports.ɵt = LoadMoreComponent;
+    exports.ɵu = MapFunctionPipe;
+    exports.ɵv = ProgressBarComponent;
+    exports.ɵw = UserPreferencesService;
+    exports.ɵx = ActionBarModule;
+    exports.ɵy = ActionBarComponent;
+    exports.ɵz = ActionBarItemComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });