Version 4.16

package.json

@@ -3,7 +3,7 @@
   "displayName": "Cyclos 4 UI",
   "description": "The new Cyclos 4 frontend",
   "icon": "cyclos.png",
-  "version": "4.16-BETA.0",
+  "version": "4.16.0",
   "license": "MIT",
   "author": {
     "name": "Cyclos development team",

src/app/core/stored-file-cache.service.ts

@@ -56,6 +56,14 @@ export class StoredFileCacheService {
     return this.cache.get(id);
   }
 
+  /**
+   * Returns if the given id is in the cache
+   * @param key The stored file id
+   */
+  contains(id: string): boolean {
+    return this.cache.has(id);
+  }
+
   /**
    * Returns the cached elements count
    */

src/app/shared/base-form-field.component.ts

@@ -69,13 +69,7 @@ export abstract class BaseFormFieldComponent<T> extends BaseControlComponent<T>
   disabledFormat: ValueFormat = 'plain';
 
   /** The field size */
-  private _fieldSize: CustomFieldSizeEnum;
-  @Input() get fieldSize(): CustomFieldSizeEnum {
-    return this._fieldSize;
-  }
-  set fieldSize(size: CustomFieldSizeEnum) {
-    this._fieldSize = size;
-  }
+  @Input() fieldSize: CustomFieldSizeEnum;
 
   constructor(injector: Injector, protected controlContainer: ControlContainer) {
     super(injector, controlContainer);

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

@@ -16,31 +16,33 @@
         [size]="avatarSize" [image]="img" [additionalImages]="images">
       </avatar-lightbox>
     </div>
-    <div class="d-flex align-items-center">
-      <ng-container *ngIf="maxFiles === 1 || images.length < maxFiles">
-        <button #upload type="button"
-          class="btn btn-icon d-flex align-content-center"
-          [tooltip]="i18n.field.image.upload"
-          (click)="imageUpload.perform(); blurIfClick(upload, $event)">
-          <icon [icon]="SvgIcon.Upload"></icon>
+    <ng-container *ngIf="!disabled">
+      <div class="d-flex align-items-center">
+        <ng-container *ngIf="maxFiles === 1 || images.length < maxFiles">
+          <button #upload type="button"
+            class="btn btn-icon d-flex align-content-center"
+            [tooltip]="i18n.field.image.upload"
+            (click)="imageUpload.perform(); blurIfClick(upload, $event)">
+            <icon [icon]="SvgIcon.Upload"></icon>
+          </button>
+          <button type="button"
+            class="ml-2 btn btn-icon d-flex align-content-center"
+            [tooltip]="i18n.field.image.camera" (click)="captureCamera()">
+            <icon [icon]="SvgIcon.Camera"></icon>
+          </button>
+        </ng-container>
+        <button type="button" *ngIf="maxFiles > 1 && images.length > 0"
+          class="ml-2 btn btn-icon d-flex align-content-center"
+          [tooltip]="i18n.field.image.manage" (click)="manageImages()">
+          <icon [icon]="SvgIcon.Pencil"></icon>
         </button>
-        <button type="button"
+        <button type="button" *ngIf="maxFiles === 1 && images.length > 0"
           class="ml-2 btn btn-icon d-flex align-content-center"
-          [tooltip]="i18n.field.image.camera" (click)="captureCamera()">
-          <icon [icon]="SvgIcon.Camera"></icon>
+          [tooltip]="i18n.field.image.remove" (click)="removeAllImages()">
+          <icon [icon]="SvgIcon.Trash"></icon>
         </button>
-      </ng-container>
-      <button type="button" *ngIf="maxFiles > 1 && images.length > 0"
-        class="ml-2 btn btn-icon d-flex align-content-center"
-        [tooltip]="i18n.field.image.manage" (click)="manageImages()">
-        <icon [icon]="SvgIcon.Pencil"></icon>
-      </button>
-      <button type="button" *ngIf="maxFiles === 1 && images.length > 0"
-        class="ml-2 btn btn-icon d-flex align-content-center"
-        [tooltip]="i18n.field.image.remove" (click)="removeAllImages()">
-        <icon [icon]="SvgIcon.Trash"></icon>
-      </button>
-    </div>
+      </div>
+    </ng-container>
   </div>
 
   <image-upload #imageUpload containerClass="mt-3"

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

@@ -96,6 +96,7 @@ export class ImagesFieldComponent extends BaseFormFieldComponent<string | string
 
   ngOnInit() {
     super.ngOnInit();
+    this.disabledFormat = 'component';
     if (this.initialImages == null) {
       this.images = [];
     } else if (this.initialImages instanceof Array) {
@@ -185,7 +186,7 @@ export class ImagesFieldComponent extends BaseFormFieldComponent<string | string
   onValueInitialized(_value: string | string[]) {
     this.imageIds
       .map(id => this.storedFileCacheService.read(id))
-      .filter(sf => sf)
+      .filter(sf => sf && !this.images.find(i => i.id === sf.id))
       .forEach(sf => this.images.push(sf));
   }
 

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

@@ -143,8 +143,9 @@ export class UserFieldComponent
     filters.ignoreProfileFieldsInList = true;
     filters.pageSize = PageSize;
     filters.keywords = text;
+    filters.usersToExclude = [...(filters.usersToExclude || [])];
     if (!this.allowSelf) {
-      filters.usersToExclude = [...(filters.usersToExclude || []), ApiHelper.SELF];
+      filters.usersToExclude.push(ApiHelper.SELF);
     }
     this.nextRequestState.leaveNotification = true;
     return this.usersService.searchUsers(filters);

src/app/ui/banking/payment/payment-step-confirm.component.html

@@ -47,7 +47,7 @@
   <user-link [user]="toUser" [display]="preview.payment.toName"></user-link>
 </label-value>
 <ng-template #toUserTemplate>
-  <ng-container *ngIf="!toSelf">
+  <ng-container *ngIf="!(fromSelf && toSelf)">
     <label-value *ngIf="toUser; else toSystemTemplate"
       [label]="i18n.transaction.toUser">
       <user-link [user]="toUser"></user-link>

src/app/ui/banking/payment/payment-step-form.component.html

@@ -64,8 +64,8 @@
     </single-selection-field>
     <ng-template #toUserField>
       <user-field #toUser focused [autoSearch]="!allowPrincipal"
-        [filters]="{usersToExclude: fromUser && !fromSelf ? [fromParam] : null}"
-        formControlName="subject" [allowContacts]="allowContacts"
+        [filters]="{usersToExclude: usersToExclude}" formControlName="subject"
+        [allowSelf]="allowSelf" [allowContacts]="allowContacts"
         [allowSearch]="allowSearch" [allowPrincipal]="allowPrincipal"
         [allowQrCode]="allowQrCode" [principalTypes]="data.principalTypes"
         [allowLocate]="data.allowAutocomplete"

src/app/ui/banking/payment/payment-step-form.component.ts

@@ -61,6 +61,9 @@ export class PaymentStepFormComponent extends BaseComponent implements OnInit {
   paymentTypes$ = new BehaviorSubject<TransferType[]>(null);
   private dataCache: Map<string, TransactionTypeData>;
 
+  usersToExclude: string[];
+  allowSelf = false;
+
   @Input() customValuesControlGetter: (cf: CustomFieldDetailed) => FormControl;
 
   constructor(
@@ -86,6 +89,13 @@ export class PaymentStepFormComponent extends BaseComponent implements OnInit {
     this.toUser = this.data.toUser;
     this.toSelf = this.authHelper.isSelf(this.toUser);
 
+    // Initialize the users to exclude from autocomplete
+    this.usersToExclude = [];
+    if (this.fromUser) {
+      this.usersToExclude.push(this.fromUser.id);
+    }
+    this.allowSelf = !this.fromSelf;
+
     if (this.fixedDestination || this.form.value?.type) {
       // When there's a fixed destination, the payment types are already present in the initial data |
       // When coming back from confirm payment (the type is set in the form)

src/app/ui/core/user-helper.service.ts

@@ -3,7 +3,7 @@ import { AbstractControl, AsyncValidatorFn, FormBuilder, FormControl, FormGroup,
 import {
   AddressConfigurationForUserProfile, AvailabilityEnum, BasicUserDataForNew, OperatorDataForNew,
   OperatorGroupAccountAccessEnum, ProfileFieldActions, TokenStatusEnum, User,
-  UserBasicData, UserDataForNew, UserNew, UserRegistrationResult, UserRegistrationStatusEnum, UserStatusEnum
+  UserBasicData, UserDataForNew, UserNew, UserRegistrationResult, UserRegistrationStatusEnum, UserStatusEnum, WizardStepField
 } from 'app/api/models';
 import { UsersService } from 'app/api/services/users.service';
 import { FieldHelperService } from 'app/core/field-helper.service';
@@ -195,7 +195,7 @@ export class UserHelperService {
    * according to the given configuration. When the configuration disables addresses, both are null.
    * Also returns an array of subscriptions, which should be unsubscribed when the calling component is disposed.
    */
-  registrationAddressForm(configuration: AddressConfigurationForUserProfile): [FormGroup, FormControl, Subscription[]] {
+  registrationAddressForm(configuration: AddressConfigurationForUserProfile, wizardStepAddressField?: WizardStepField): [FormGroup, FormControl, Subscription[]] {
     const addressAvailability = configuration.availability;
     let addressForm: FormGroup = null;
     let defineControl: FormControl = null;
@@ -206,14 +206,18 @@ export class UserHelperService {
       const address = configuration.address;
       addressForm.patchValue(address);
       // When any of the fields change, clear the location
-      for (const field of configuration.enabledFields) {
-        let previous = address[field] || null;
-        subscriptions.push(addressForm.get(field).valueChanges.subscribe(newVal => {
-          if (previous !== newVal) {
-            addressForm.get('location').patchValue({ latitude: null, longitude: null });
-          }
-          previous = newVal;
-        }));
+      if (!wizardStepAddressField || !wizardStepAddressField.readOnly) {
+        for (const field of configuration.enabledFields) {
+          let previous = address[field] || null;
+          subscriptions.push(addressForm.get(field).valueChanges.subscribe(newVal => {
+            if (previous !== newVal) {
+              addressForm.get('location').patchValue({ latitude: null, longitude: null });
+            }
+            previous = newVal;
+          }));
+        }
+      } else {
+        addressForm.clearValidators();
       }
     }
     return [addressForm, defineControl, subscriptions];

src/app/ui/operations/run-operation.component.html

@@ -76,7 +76,9 @@
     <alert type="info" *ngIf="data.informationText">
       <div [innerHTML]="data.informationText | trust"></div>
     </alert>
-    <ng-container *ngTemplateOutlet="theForm"></ng-container>
+    <div [ngClass]="{'mt-3': data.informationText}">
+      <ng-container *ngTemplateOutlet="theForm"></ng-container>
+    </div>
     <div *ngIf="data.submitWithQrCodeScan" class="operation-qr-code-scan">
       <button type="button" class="btn btn-icon operation-qr-code-scan-button"
         (click)="run()">

src/app/ui/shared/address-form.component.html

@@ -4,7 +4,7 @@
     <single-selection-field [id]="idPrefix + field + idSuffix"
       *ngIf="!addressForm.controls[field].disabled || addressForm.controls[field].value"
       formControlName="country" [label]="getLabel(field)"
-      [required]="isRequired(field)">
+      [required]="isRequired(field, addressForm.controls[field])">
       <field-option *ngFor="let country of countriesResolve.data | async"
         [value]="country.code" [text]="country.name">
       </field-option>
@@ -14,7 +14,7 @@
     <input-field [id]="idPrefix + field + idSuffix"
       *ngIf="!addressForm.controls[field].disabled || addressForm.controls[field].value"
       [formControlName]="field" [label]="getLabel(field)"
-      [required]="isRequired(field)"></input-field>
+      [required]="isRequired(field, addressForm.controls[field])"></input-field>
   </ng-template>
 </ng-container>
 <ng-container

src/app/ui/shared/address-form.component.ts

@@ -1,13 +1,13 @@
-import { ChangeDetectionStrategy, Component, Injector, Input, OnInit, HostBinding } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
+import { AbstractControl, FormGroup } from '@angular/forms';
 import {
   AddressConfiguration, AddressConfigurationForUserProfile,
-  AddressFieldEnum, Country, CustomFieldBinaryValues,
+  AddressFieldEnum, Country, CustomFieldBinaryValues
 } from 'app/api/models';
-import { AddressHelperService } from 'app/ui/core/address-helper.service';
-import { CountriesResolve } from 'app/ui/countries.resolve';
 import { BaseComponent } from 'app/shared/base.component';
 import { truthyAttr } from 'app/shared/helper';
+import { AddressHelperService } from 'app/ui/core/address-helper.service';
+import { CountriesResolve } from 'app/ui/countries.resolve';
 
 /**
  * Form used to input all fields of an address
@@ -58,8 +58,8 @@ export class AddressFormComponent extends BaseComponent implements OnInit {
     return this.addressHelper.addressFieldLabel(field);
   }
 
-  isRequired(field: AddressFieldEnum): boolean {
-    return (this.configuration.requiredFields || []).includes(field);
+  isRequired(field: AddressFieldEnum, control: AbstractControl): boolean {
+    return (this.configuration.requiredFields || []).includes(field) && !control.disabled;
   }
 
   ngOnInit() {

src/app/ui/shared/field-privacy.component.html

@@ -1,6 +1,6 @@
 <button type="button" #ttip="bs-tooltip"
   class="btn btn-icon d-flex align-content-center" (click)="toggle()"
-  [tooltip]="tooltip">
+  [tooltip]="tooltip" [disabled]="control.disabled">
   <icon [icon]="icon"></icon>
 </button>
 <field-errors [control]="control">

src/app/ui/users/profile/edit-profile.component.html

@@ -178,8 +178,7 @@ <h2 class="mb-2">{{ i18n.phone.mobile }}</h2>
         </field-privacy>
       </label-value>
 
-      <ng-container
-        *ngIf="phoneHasSms(singleMobileManage) && (byManager || !singleMobile.get('verified').value)">
+      <ng-container *ngIf="phoneHasSms(singleMobileManage) && byManager">
         <boolean-field [label]="i18n.phone.verified"
           *ngIf="canEdit('phone'); else plainVerified"
           [formControl]="singleMobile.get('verified')">
@@ -325,8 +324,7 @@ <h2 class="mb-2">{{ i18n.address.address }}</h2>
             [label]="i18n.phone.extension"></input-field>
         </ng-container>
 
-        <ng-container
-          *ngIf="(byManager || !phone.verified) && phoneHasSms(phone)">
+        <ng-container *ngIf="byManager && phoneHasSms(phone)">
           <boolean-field [label]="i18n.phone.verified"
             *ngIf="byManager && canEdit('phone'); else plainVerified"
             formControlName="verified">
@@ -451,10 +449,10 @@ <h2 class="mb-2">{{ i18n.address.address }}</h2>
       </ng-container>
     </ng-container>
 
-    <!-- Additional contacts -->
+    <!-- Public contacts -->
     <!--
-      It would be a strange configuration to have a maximum of 1 additional contact.
-      Hence we don't handle the case of a single additional contact, but always as multiple.
+      It would be a strange configuration to have a maximum of 1 public contact.
+      Hence we don't handle the case of a single public contact, but always as multiple.
     -->
     <ng-container *ngIf="contactInfoAvailability !== 'disabled'">
       <h2
@@ -478,7 +476,7 @@ <h2 class="mb-2">{{ i18n.address.address }}</h2>
           [initialImages]="data.contactInfoBinaryValues[contactInfo['id']]?.image">
         </images-field>
         <input-field [id]="'contact-info_name' + contactInfo['idSuffix']"
-          formControlName="name" [label]="i18n.general.name">
+          formControlName="name" [label]="i18n.general.name" required>
         </input-field>
         <input-field [id]="'contact-info_email' + contactInfo['idSuffix']"
           formControlName="email" [label]="i18n.user.email"></input-field>

src/app/ui/users/profile/edit-profile.component.ts

@@ -392,7 +392,7 @@ export class EditProfileComponent
     this.removedContactInfos = [];
 
     if (data.contactInfoConfiguration && data.contactInfoConfiguration.availability !== AvailabilityEnum.DISABLED) {
-      // Additional contacts are enabled. Copy the fields to the address configuration
+      // Public contacts are enabled. Copy the fields to the address configuration
       data.addressConfiguration.contactInfoEnabled = true;
       data.addressConfiguration.contactInfoFields = data.contactInfoConfiguration.customFields;
     }