version 4.14.5

package.json

@@ -3,7 +3,7 @@
   "displayName": "Cyclos 4 UI",
   "description": "The new Cyclos 4 frontend",
   "icon": "cyclos.png",
-  "version": "4.14.4",
+  "version": "4.14.5",
   "license": "MIT",
   "author": {
     "name": "Cyclos development team",
@@ -28,37 +28,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.2.3",
+    "@angular/animations": "^10.2.4",
     "@angular/cdk": "^10.2.7",
-    "@angular/common": "^10.2.3",
-    "@angular/compiler": "^10.2.3",
-    "@angular/core": "^10.2.3",
-    "@angular/forms": "^10.2.3",
-    "@angular/platform-browser": "^10.2.3",
-    "@angular/platform-browser-dynamic": "^10.2.3",
-    "@angular/router": "^10.2.3",
+    "@angular/common": "^10.2.4",
+    "@angular/compiler": "^10.2.4",
+    "@angular/core": "^10.2.4",
+    "@angular/forms": "^10.2.4",
+    "@angular/platform-browser": "^10.2.4",
+    "@angular/platform-browser-dynamic": "^10.2.4",
+    "@angular/router": "^10.2.4",
     "@googlemaps/loader": "^0.0.9",
     "@types/autosize": "^3.0.7",
-    "@types/chart.js": "^2.9.28",
+    "@types/chart.js": "^2.9.30",
     "@types/downloadjs": "^1.4.2",
-    "@types/googlemaps": "^3.40.3",
-    "@types/lodash-es": "^4.17.3",
+    "@types/googlemaps": "^3.43.3",
+    "@types/js-cookie": "^2.2.6",
+    "@types/lodash-es": "^4.17.4",
     "@types/lscache": "^1.3.0",
     "@types/markerclustererplus": "^2.1.33",
     "@types/rangy": "0.0.33",
     "@zxing/browser": "0.0.5",
-    "@zxing/library": "^0.18.3",
-    "@zxing/ngx-scanner": "^3.1.2",
+    "@zxing/library": "^0.18.4",
+    "@zxing/ngx-scanner": "^3.1.3",
     "autosize": "^4.0.2",
     "b64-to-blob": "^1.2.19",
     "bootstrap": "~4.4.1",
     "chart.js": "^2.9.4",
-    "core-js": "^2.6.11",
+    "core-js": "^2.6.12",
     "downloadjs": "^1.4.7",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.5.1",
-    "lodash-es": "^4.17.15",
+    "js-cookie": "^2.2.1",
+    "lodash-es": "^4.17.20",
     "lscache": "^1.3.0",
     "moment-mini-ts": "^2.20.1",
     "ng-event-source": "^1.0.14",
@@ -68,17 +70,17 @@
     "popper.js": "^1.16.1",
     "rangy": "^1.3.0",
     "rxjs": "^6.6.3",
-    "tslib": "^2.0.3",
+    "tslib": "^2.1.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1000.8",
-    "@angular/cli": "^10.2.0",
-    "@angular/compiler-cli": "^10.2.3",
-    "@angular/language-service": "^10.2.3",
-    "@mdi/js": "^5.8.55",
-    "@types/node": "^12.19.6",
-    "bootstrap-icons": "^1.1.0",
+    "@angular/cli": "^10.2.2",
+    "@angular/compiler-cli": "^10.2.4",
+    "@angular/language-service": "^10.2.4",
+    "@mdi/js": "^5.9.55",
+    "@types/node": "^12.20.1",
+    "bootstrap-icons": "^1.3.0",
     "codelyzer": "^6.0.1",
     "ng-openapi-gen": "^0.13.0",
     "ng-translation-gen": "^0.5.2",

src/app/core/svg-icon.ts

@@ -65,6 +65,7 @@ export enum SvgIcon {
   Funnel = 'funnel',
   Gear = 'gear',
   GeoAlt = 'geo-alt',
+  Globe = 'globe',
   ChatText = 'chat-text',
   Grid = 'grid',
   GridFill = 'grid-fill',

src/app/shared/boolean-field.component.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Host, Injector,
-  Input, Optional, Output, SkipSelf, ViewChild,
+  Input, Optional, Output, SkipSelf, ViewChild, HostBinding,
 } from '@angular/core';
 import { ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseFormFieldComponent } from 'app/shared/base-form-field.component';
@@ -26,7 +26,7 @@ export class BooleanFieldComponent
   @Output() click = new EventEmitter<Event>();
   @ViewChild('checkbox') checkbox: ElementRef;
   _switch: boolean | string = false;
-  @Input() get switch(): boolean | string {
+  @HostBinding('class.switch') @Input() get switch(): boolean | string {
     return this._switch;
   }
   set switch(flag: boolean | string) {

src/app/shared/files-field.component.html

@@ -9,7 +9,7 @@
     }"></div>
 
   <div class="d-flex flex-column flex-xs-row">
-    <div *ngIf="files?.length > 0"
+    <div
       class="d-flex flex-grow-1 flex-wrap align-items-center mb-2 mb-xs-0 mr-2">
       <div class="file-item" *ngFor="let file of files; let last = last;">
         <a [href]="appendAuth(file.url)" [type]="file.contentType"

src/app/ui/core/menu.service.ts

@@ -892,7 +892,7 @@ export class MenuService {
         // Add a language switcher
         const languages = addRoot(RootMenu.LANGUAGE, SvgIcon.ChatText, this.i18n.menu.language);
         locales.forEach(locale => {
-          const switchLocale = add(Menu.LANGUAGE, '', null, locale.name);
+          const switchLocale = add(Menu.LANGUAGE, '', SvgIcon.Globe, locale.name);
           switchLocale.locale = locale;
         });
         languages.dropdown = true;

src/app/ui/initialize.ts

@@ -58,6 +58,12 @@ export function initialize(
     const iconRoot = apiRoot === 'api' ? 'svg' : apiRoot + '/../ui/svg';
     iconLoading.iconRoot = iconRoot;
 
+    // Change the media of the styles link
+    const stylesLink = document.getElementById('stylesLink') as HTMLLinkElement;
+    if (stylesLink) {
+      stylesLink.media = '';
+    }
+
     // Initialize the data for frontend
     dataForFrontendHolder.registerLoadHook(dataForFrontend => {
       const dataForUi = dataForFrontend?.dataForUi || {};

src/app/ui/marketplace/search/ads-results.component.html

@@ -41,7 +41,7 @@
       {{ ad.name }}
     </div>
     <div class="cell-text">
-      {{ i18n.ad.byOwner(ad.owner.display) }}
+      {{ i18n.ad.byOwner(ad.user.display) }}
     </div>
     <div *ngFor="let field of data.fieldsInList" class="cell-small">
       <format-field-value [fields]="data.customFields" [plainText]="true"
@@ -69,10 +69,10 @@
         </td>
         <ng-container *ngIf="!singleUser">
           <td class="avatar">
-            <avatar [image]="ad.owner.image"></avatar>
+            <avatar [image]="ad.user.image"></avatar>
           </td>
           <td>
-            {{ ad.owner.display }}
+            {{ ad.user.display }}
           </td>
         </ng-container>
         <ng-container *ngIf="layout.gtxs$ | async">
@@ -97,9 +97,9 @@
     [icon]="SvgIcon.Basket">
     <ng-container *ngIf="!singleUser">
       <div class="tile-floating-avatar">
-        <avatar class="solid-icon" [image]="ad.owner.image"
-          [tooltip]="ad.owner.display" size="medium-large"
-          (click)="$event.preventDefault(); $event.stopPropagation; router.navigate(['users', ad.owner.id, 'profile'])">
+        <avatar class="solid-icon" [image]="ad.user.image"
+          [tooltip]="ad.user.display" size="medium-large"
+          (click)="$event.preventDefault(); $event.stopPropagation; router.navigate(['users', ad.user.id, 'profile'])">
         </avatar>
       </div>
     </ng-container>
@@ -108,7 +108,7 @@
         {{ ad.price | number:decimals(ad) }}
       </span>
       {{ (ad.promotionalPrice || ad.price) |
-            currency:lookupCurrency(ad) }}
+      currency:lookupCurrency(ad) }}
     </div>
     <ng-template #blankPrice>
       <div class="card-title">
@@ -132,7 +132,7 @@
       {{ (ad.promotionalPrice || ad.price) | currency:lookupCurrency(ad) }}
     </div>
 
-    <div>{{ i18n.ad.byOwner(ad.owner.display) }}</div>
+    <div>{{ i18n.ad.byOwner(ad.user.display) }}</div>
   </map-result>
 
 </results-layout>

src/app/ui/users/operators/operator-registration.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
-import { AvailabilityEnum, CustomField, OperatorDataForNew, UserRegistrationResult, UserRegistrationStatusEnum } from 'app/api/models';
+import { AvailabilityEnum, CustomField, OperatorDataForNew, UserRegistrationResult, UserRegistrationStatusEnum, OperatorNew } from 'app/api/models';
 import { OperatorsService } from 'app/api/services/operators.service';
 import { UserHelperService } from 'app/ui/core/user-helper.service';
 import { BasePageComponent } from 'app/ui/shared/base-page.component';
-import { cloneControl, validateBeforeSubmit } from 'app/shared/helper';
+import { cloneControl, validateBeforeSubmit, empty } from 'app/shared/helper';
 import { Menu } from 'app/ui/shared/menu';
 import { BehaviorSubject } from 'rxjs';
 
@@ -71,18 +71,24 @@ export class OperatorRegistrationComponent
     // Build a full form, so it can all be validated once
     const fullForm = cloneControl(this.form);
     if (this.mobileForm) {
-      fullForm.setControl('mobile', this.mobileForm);
+      fullForm.setControl('mobilePhones', new FormArray([this.mobileForm]));
     }
     if (this.landLineForm) {
-      fullForm.setControl('landLine', this.landLineForm);
+      fullForm.setControl('landLinePhones', new FormArray([this.landLineForm]));
     }
     fullForm.setControl('passwords', new FormArray(this.passwordForms));
     if (!validateBeforeSubmit(fullForm)) {
       return;
     }
+    // Get the operator itself
+    const operator = fullForm.value as OperatorNew;
+    // We canot send a model without a number, or it will always fail the validation.
+    // If no number is given, the API expects no object either.
+    operator.mobilePhones = operator.mobilePhones.filter(p => !empty(p.number));
+    operator.landLinePhones = operator.landLinePhones.filter(p => !empty(p.number));
     // Register the operator
     this.addSub(this.operatorsService.registerOperator({
-      user: this.user, body: fullForm.value,
+      user: this.user, body: operator,
     }).subscribe(result => this.result$.next(result)));
   }
 

src/app/ui/users/passwords/manage-passwords.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c
 import { FormGroup, Validators } from '@angular/forms';
 import {
   CreateDeviceConfirmation, DataForUserPasswords, DeviceConfirmationTypeEnum,
-  PasswordStatusAndActions, PasswordStatusEnum,
+  PasswordStatusAndActions, PasswordStatusEnum, SendMediumEnum,
 } from 'app/api/models';
 import { PasswordsService } from 'app/api/services/passwords.service';
 import { Action } from 'app/shared/action';
@@ -11,6 +11,7 @@ import { validateBeforeSubmit } from 'app/shared/helper';
 import { Menu } from 'app/ui/shared/menu';
 import { ChangePasswordDialogComponent } from 'app/ui/users/passwords/change-password-dialog.component';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { NextRequestState } from 'app/core/next-request-state';
 
 /**
  * Manages the user passwords
@@ -36,7 +37,8 @@ export class ManagePasswordsComponent
   constructor(
     injector: Injector,
     private modal: BsModalService,
-    private passwordsService: PasswordsService) {
+    private passwordsService: PasswordsService,
+    private nextRequestState: NextRequestState) {
     super(injector);
   }
 
@@ -89,6 +91,28 @@ export class ManagePasswordsComponent
         this.changeGenerated(password);
       }));
     }
+    if (permissions.allowGeneration) {
+      actions.push(new Action(this.i18n.password.action.allowGeneration, () => {
+        this.allowGeneration(password);
+      }));
+    }
+    if (permissions.resetAndSend) {
+      if (this.data.sendMediums.includes(SendMediumEnum.EMAIL)) {
+        actions.push(new Action(this.i18n.password.action.resetAndSendEmail, () => {
+          this.resetAndSend(password, SendMediumEnum.EMAIL);
+        }));
+      }
+      if (this.data.sendMediums.includes(SendMediumEnum.SMS)) {
+        actions.push(new Action(this.i18n.password.action.resetAndSendSms, () => {
+          this.resetAndSend(password, SendMediumEnum.SMS);
+        }));
+      }
+    }
+    if (permissions.resetGenerated) {
+      actions.push(new Action(this.i18n.password.action.resetGenerated, () => {
+        this.resetGenerated(password);
+      }));
+    }
     if (permissions.unblock) {
       actions.push(new Action(this.i18n.password.action.unblock, () => {
         this.unblock(password);
@@ -171,6 +195,7 @@ export class ManagePasswordsComponent
 
   private doGenerate(password: PasswordStatusAndActions) {
     this.addSub(this.passwordsService.generatePassword({ type: password.type.id }).subscribe(newValue => {
+      this.nextRequestState.leaveNotification = true;
       this.notification.info(this.i18n.password.action.changeGeneratedDone({
         type: password.type.name,
         value: newValue,
@@ -201,6 +226,7 @@ export class ManagePasswordsComponent
       type: password.type.id,
       confirmationPassword,
     }).subscribe(newValue => {
+      this.nextRequestState.leaveNotification = true;
       this.notification.info(
         this.i18n.password.action.changeGeneratedDone({
           type: password.type.name,
@@ -210,6 +236,84 @@ export class ManagePasswordsComponent
     }));
   }
 
+  private allowGeneration(password: PasswordStatusAndActions) {
+    this.notification.confirm({
+      title: this.i18n.password.action.allowGeneration,
+      message: this.i18n.password.action.allowGenerationConfirm(password.type.name),
+      callback: () => this.doAllowGeneration(password),
+    });
+  }
+
+  private doAllowGeneration(password: PasswordStatusAndActions) {
+    this.addSub(this.passwordsService.allowGeneration({
+      type: password.type.id,
+      user: this.param,
+    }).subscribe(() => {
+      this.notification.snackBar(
+        this.i18n.password.action.allowGenerationDone(password.type.name));
+      this.reload();
+    }));
+  }
+
+  private resetGenerated(password: PasswordStatusAndActions) {
+    this.notification.confirm({
+      title: this.i18n.password.action.resetGenerated,
+      message: this.i18n.password.action.resetGeneratedConfirm(password.type.name),
+      callback: () => this.doResetGenerated(password),
+    });
+  }
+
+  private doResetGenerated(password: PasswordStatusAndActions) {
+    this.addSub(this.passwordsService.resetGeneratedPassword({
+      type: password.type.id,
+      user: this.param,
+    }).subscribe(() => {
+      this.notification.snackBar(
+        this.i18n.password.action.resetGeneratedDone(password.type.name));
+      this.reload();
+    }));
+  }
+
+  private resetAndSend(password: PasswordStatusAndActions, medium: SendMediumEnum) {
+    let title: string;
+    let message: string;
+    switch (medium) {
+      case SendMediumEnum.EMAIL:
+        title = this.i18n.password.action.resetAndSendEmail;
+        message = this.i18n.password.action.resetAndSendEmailConfirm(password.type.name);
+        break;
+      case SendMediumEnum.SMS:
+        title = this.i18n.password.action.resetAndSendSms;
+        message = this.i18n.password.action.resetAndSendSmsConfirm(password.type.name);
+        break;
+    }
+    this.notification.confirm({
+      title,
+      message,
+      callback: () => this.doResetAndSend(password, medium),
+    });
+  }
+
+  private doResetAndSend(password: PasswordStatusAndActions, medium: SendMediumEnum) {
+    this.addSub(this.passwordsService.resetAndSendPassword({
+      type: password.type.id,
+      sendMediums: [medium],
+      user: this.param,
+    }).subscribe(() => {
+      switch (medium) {
+        case SendMediumEnum.EMAIL:
+          this.notification.snackBar(
+            this.i18n.password.action.resetAndSendEmailDone(password.type.name));
+          break;
+        case SendMediumEnum.SMS:
+          this.notification.snackBar(
+            this.i18n.password.action.resetAndSendSmsDone(password.type.name));
+          break;
+      }
+      this.reload();
+    }));
+  }
+
   private unblock(password: PasswordStatusAndActions) {
     this.notification.confirm({
       title: this.i18n.password.action.unblock,