[Library | Trunk]: Add url and logoURL on dashboard

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60568 d315682c-612b-4755-9ff5-7f18f6832af3

role-verification/role-verification.component.ts

@@ -21,8 +21,8 @@ import {Composer} from "../utils/email/composer";
         email, to accept the invitation request.
       </div>
       <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-center">
-        <div dashboard-input [formInput]="code" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">
-          <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>
+        <div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code">
+          <span *ngIf="error" error>{{error}}</span>
         </div>
       </div>
       <div *ngIf="loading" class="uk-margin-medium-top uk-flex uk-flex-center">
@@ -46,8 +46,8 @@ import {Composer} from "../utils/email/composer";
           email, to accept the invitation request.
         </div>
         <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-wrap uk-flex-center">
-          <div dashboard-input [formInput]="code" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">
-            <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>
+          <div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code">
+            <span *ngIf="error" error>{{error}}</span>>
           </div>
         </div>
         <div *ngIf="loading" class="uk-margin-medium-top">

sharedComponents/input/input.component.ts

@@ -45,7 +45,7 @@ export interface Option {
             <icon [name]="'lock'"></icon>
           </span>
         </ng-template>
-        <ng-template [ngIf]="type === 'text'">
+        <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
           <div [ngClass]="inputClass"
                [class.uk-form-danger]="formControl.invalid && formControl.touched"
                [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">
@@ -112,10 +112,22 @@ export interface Option {
             </mat-form-field>
           </div>
         </ng-template>
-        <span *ngIf="formControl.invalid && formControl.errors.error"
-              class="uk-text-danger input-message">{{formControl.errors.error}}</span>
-        <span *ngIf="warning" class="uk-text-warning input-message">{{warning}}</span>
-        <span *ngIf="note" class="input-message">{{note}}</span>
+        <span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message">
+          <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
+          <span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
+          <ng-content select="[error]"></ng-content>
+        </span>
+        <span *ngIf="formControl.valid" class="uk-text-warning input-message">
+          <ng-content select="[warning]"></ng-content>
+          <span *ngIf="!secure">
+            <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"
+                instead of "<span class="uk-text-bold">http://</span>example.com/my-image.png".
+                <span class="uk-text-bold">Browsers may not load non secure content.</span>
+          </span>
+        </span>
+        <span class="input-message">
+          <ng-content select="[note]"></ng-content>
+        </span>
       </div>
     </div>
     <mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
@@ -125,8 +137,9 @@ export interface Option {
 export class InputComponent implements OnInit, OnDestroy, OnChanges {
   /** Basic information */
   @Input('formInput') formControl: AbstractControl;
-  @Input('type') type: 'text' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';
+  @Input('type') type: 'text' | 'URL' | 'logoURL' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';
   @Input('label') label: string;
+  /** Textarea options */
   @Input('rows') rows: number = 3;
   /** Select | chips available options */
   @Input('options') options: Option[];
@@ -152,6 +165,8 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   @Input() panelClass: string = null;
   @Input() showOptionsOnEmpty: boolean = true;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+  /** LogoUrl information */
+  public secure: boolean = true;
   /** Internal basic information */
   public required: boolean = false;
   private initValue: any;
@@ -187,8 +202,12 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   }
   
   reset() {
+    this.secure = true;
     this.unsubscribe();
     this.initValue = HelperFunctions.copy(this.formControl.value);
+    if(this.type === 'logoURL') {
+      this.secure = (!this.initValue || this.initValue.includes('https://'));
+    }
     if (this.options && this.type === 'chips') {
       this.filteredOptions = of(this.options);
       this.searchControl = new FormControl('');
@@ -201,6 +220,9 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
     }
     this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
       value = (value === '') ? null : value;
+      if(this.type === 'logoURL') {
+        this.secure = (!value || value.includes('https://'));
+      }
       if (this.initValue === value || (this.initValue === '' && value === null)) {
         this.formControl.markAsPristine();
       }

sharedComponents/input/input.module.ts

@@ -11,6 +11,7 @@ import {lock, remove_circle} from "../../utils/icons/icons";
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatIconModule} from "@angular/material/icon";
+import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import {MatIconModule} from "@angular/material/icon";
     IconsModule,
     MatChipsModule,
     MatAutocompleteModule,
-    MatIconModule
+    MatIconModule,
+    SafeHtmlPipeModule
   ],
   exports: [
     InputComponent

sharedComponents/subscriber-invite/subscriber-invite.component.ts

@@ -22,10 +22,11 @@ declare var UIkit;
           From:
         </div>
       </div>
-      <div dashboard-input [formInput]="inviteForm.get('recipients')" [gridSmall]="true" note="Separate multiple emails with a comma">
+      <div dashboard-input [formInput]="inviteForm.get('recipients')" [gridSmall]="true">
         <div class="uk-text-bold field-label uk-margin-bottom">
           To *:
         </div>
+        <span note>Separate multiple emails with a comma</span>
       </div>
       <div class="uk-grid uk-grid-small" uk-grid>
         <div class="uk-text-bold field-label">

utils/string-utils.class.ts

@@ -291,7 +291,7 @@ export class StringUtils {
   }
   
   public static urlValidator(): ValidatorFn {
-    return Validators.pattern(this.urlRegex);
+    return Validators.pattern(StringUtils.urlRegex);
   }
   
   public static sliceString(mystr, size: number): string {