feat(user-profile): compress new anti-phishing images

* when uploading anti-phishing image, in case it is bigger than 100x100 pixels, shrink image down to 100x100 and if needed try even smaller sizes up to 50x50 until the desired size is reached
* maximal size of saved image changed from 5kB to 6kB

Author: xkostka2

apps/user-profile/src/app/components/dialogs/add-auth-img-dialog/add-auth-img-dialog.component.html

@@ -11,8 +11,8 @@
       alert_type="error"
       >{{'DIALOGS.ADD_AUTH_IMG.IMG_TOO_LONG' | customTranslate | translate}}</perun-web-apps-alert
     >
-    <div *ngIf="newImage" class="center-content">
-      <img [src]="newImage" alt="" class="img-size" />
+    <div *ngIf="newImage && !imgTooLong" class="center-content">
+      <img [src]="newImage" alt="" />
     </div>
     <button (click)="generateImg()" class="m-1" color="accent" mat-flat-button>
       {{'DIALOGS.ADD_AUTH_IMG.GENERATE' | customTranslate | translate}}

apps/user-profile/src/app/components/dialogs/add-auth-img-dialog/add-auth-img-dialog.component.scss

@@ -1,8 +1,3 @@
-.img-size {
-  width: 100px;
-  height: 100px;
-}
-
 .center-content {
   display: flex;
   justify-content: center;

apps/user-profile/src/app/components/dialogs/add-auth-img-dialog/add-auth-img-dialog.component.ts

@@ -10,7 +10,7 @@ export interface AddAuthImgDialogData {
 
 const MAX_SIZE = 100;
 const MIN_SIZE = 50;
-const MAX_LENGTH = 5120;
+const MAX_LENGTH = 6144;
 
 @Component({
   selector: 'perun-web-apps-add-auth-img-dialog',
@@ -21,8 +21,8 @@ export class AddAuthImgDialogComponent implements OnInit {
   theme: string;
   newImage = '';
   attribute: Attribute;
-  radioBtn: string;
   imgTooLong: boolean;
+  imageType: string;
 
   constructor(
     private dialogRef: MatDialogRef<AddAuthImgDialogComponent>,
@@ -35,11 +35,10 @@ export class AddAuthImgDialogComponent implements OnInit {
     this.theme = this.data.theme;
     this.attribute = this.data.attribute;
     this.newImage = this.attribute.value as unknown as string;
-    this.imageType = null;
   }
 
-  handleInputChange(e: Event | DragEvent): void {
-    const file = (e as DragEvent).dataTransfer.files[0] ?? (e.target as HTMLInputElement)?.files[0];
+  handleInputChange(e: InputEvent): void {
+    const file = e.dataTransfer?.files[0] ?? (e.target as HTMLInputElement)?.files[0];
     const pattern = /image-*/;
     const reader = new FileReader();
     if (!file.type.match(pattern)) {
@@ -51,38 +50,51 @@ export class AddAuthImgDialogComponent implements OnInit {
     reader.readAsDataURL(file);
   }
 
-  _handleReaderLoaded(e) {
-    const reader = e.target;
-
+  _handleReaderLoaded(event: ProgressEvent): void {
+    const reader: FileReader = event.target as FileReader;
     let size = MAX_SIZE;
-    let result = null;
-    do {
-      const img = document.createElement("img");
-      img.src = reader.result;
-      const canvas = document.createElement("canvas");
-      let ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0);
-      const width = img.width;
-      const height = img.height;
-      if (width > height) {
-        if (width > MAX_SIZE) {
-          height *= MAX_SIZE / width;
-          width = MAX_SIZE;
-        }
-      } else if (height > MAX_SIZE) {
-        width *= MAX_SIZE / height;
-        height = MAX_SIZE;
-      }
-      canvas.width = width;
-      canvas.height = height;
-      ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, width, height);
-      result = canvas.toDataURL(this.imageType);
-      size -= 10;
-    } while(size >= MIN_SIZE && result.length >= MAX_LENGTH);
-
-    this.imgTooLong = result.length >= MAX_LENGTH;
-    this.newImage = result;
+    const compressRecursive = (): void => {
+      compressImage(reader.result as string)
+        .then((compressed) => {
+          if (size > MIN_SIZE && compressed.length > MAX_LENGTH) {
+            size -= 10;
+            compressRecursive();
+          } else {
+            this.newImage = compressed;
+            this.imgTooLong = this.newImage.length >= MAX_LENGTH;
+          }
+        })
+        .catch((error) => console.error(error));
+    };
+
+    const compressImage = (src: string): Promise<string> =>
+      new Promise((res, rej) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = (): void => {
+          const elem = document.createElement('canvas');
+          let width = img.width;
+          let height = img.height;
+          if (width > height) {
+            if (width > size) {
+              height *= size / width;
+              width = size;
+            }
+          } else if (height > size) {
+            width *= size / height;
+            height = size;
+          }
+          elem.width = width;
+          elem.height = height;
+          const ctx = elem.getContext('2d');
+          ctx.drawImage(img, 0, 0, width, height);
+          const data = ctx.canvas.toDataURL();
+          res(data);
+        };
+        img.onerror = (error): void => rej(error);
+      });
+
+    compressRecursive();
   }
 
   onAdd(): void {

apps/user-profile/src/app/pages/settings-page/settings-authorization/settings-authentication.component.html

@@ -3,14 +3,13 @@
     <h1 class="page-subtitle">{{'AUTHENTICATION.TITLE' | customTranslate | translate}}</h1>
     <p>{{'AUTHENTICATION.ANTI_PHISHING_INFO' | customTranslate | translate}}</p>
     <div *ngIf="imageSrc && imageSrc.length">
-      <img [src]="imageSrc" alt="" class="img-size" />
+      <img [src]="imageSrc" alt="" />
     </div>
-    <button (click)="onAddImg()" class="m-1 action-button" color="accent" mat-flat-button>
+    <button (click)="onAddImg()" class="mr-2 mt-1 action-button" color="accent" mat-flat-button>
       {{'AUTHENTICATION.NEW_IMG' | customTranslate | translate}}
     </button>
     <button
       (click)="onDeleteImg()"
-      class="m-1"
       color="warn"
       [disabled]="!imgAtt || !imgAtt.value"
       mat-flat-button>

apps/user-profile/src/app/pages/settings-page/settings-authorization/settings-authentication.component.scss

@@ -1,4 +0,0 @@
-.img-size {
-  width: 100px;
-  height: 100px;
-}

apps/user-profile/src/app/pages/settings-page/settings-authorization/settings-authentication.component.ts

@@ -3,7 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { getDefaultDialogConfig } from '@perun-web-apps/perun/utils';
 import { AddAuthImgDialogComponent } from '../../../components/dialogs/add-auth-img-dialog/add-auth-img-dialog.component';
 import { Attribute, AttributesManagerService } from '@perun-web-apps/perun/openapi';
-import { AuthService, StoreService } from '@perun-web-apps/perun/services';
+import { AuthService, NotificatorService, StoreService } from '@perun-web-apps/perun/services';
 import { RemoveStringValueDialogComponent } from '../../../components/dialogs/remove-string-value-dialog/remove-string-value-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { OAuthService } from 'angular-oauth2-oidc';
@@ -27,21 +27,30 @@ export class SettingsAuthenticationComponent implements OnInit, AfterViewInit {
   mfaApiUrl = '';
   loadingMfa = false;
   loadingImg = false;
+  saveImgSuccess = '';
+  removeImgSuccess = '';
 
   constructor(
     private dialog: MatDialog,
     private attributesManagerService: AttributesManagerService,
     private store: StoreService,
     private translate: TranslateService,
     private oauthService: OAuthService,
-    private authService: AuthService
+    private authService: AuthService,
+    private notificatorService: NotificatorService
   ) {
     translate
       .get('AUTHENTICATION.DELETE_IMG_DIALOG_TITLE')
       .subscribe((res: string) => (this.removeDialogTitle = res));
     translate
       .get('AUTHENTICATION.DELETE_IMG_DIALOG_DESC')
       .subscribe((res: string) => (this.removeDialogDescription = res));
+    translate
+      .get('AUTHENTICATION.SAVE_IMG_SUCCESS')
+      .subscribe((res: string) => (this.saveImgSuccess = res));
+    translate
+      .get('AUTHENTICATION.REMOVE_IMG_SUCCESS')
+      .subscribe((res: string) => (this.removeImgSuccess = res));
   }
 
   ngAfterViewInit(): void {
@@ -94,6 +103,7 @@ export class SettingsAuthenticationComponent implements OnInit, AfterViewInit {
 
     dialogRef.afterClosed().subscribe((result) => {
       if (result) {
+        this.notificatorService.showSuccess(this.saveImgSuccess);
         this.loadImage();
       }
     });
@@ -136,8 +146,9 @@ export class SettingsAuthenticationComponent implements OnInit, AfterViewInit {
 
     const dialogRef = this.dialog.open(RemoveStringValueDialogComponent, config);
 
-    dialogRef.afterClosed().subscribe((sshAdded) => {
-      if (sshAdded) {
+    dialogRef.afterClosed().subscribe((imgRemoved) => {
+      if (imgRemoved) {
+        this.notificatorService.showSuccess(this.removeImgSuccess);
         this.loadImage();
       }
     });

apps/user-profile/src/assets/i18n/cs.json

@@ -165,9 +165,11 @@
     "NEW_IMG": "Nový obrázek",
     "DELETE_IMG": "Vymazat obrázek",
     "ANTI_PHISHING_INFO": "Tento bezpečnostní obrázek se vám ukáže před tím, než zadáte heslo, ujistíte se tak, že se nepřihlašujete na podvrženou stránku",
-    "DELETE_IMG_DIALOG_TITLE": "Vymazat proti-phishingový obrázek",
+    "DELETE_IMG_DIALOG_TITLE": "Vymazat bezpečnostní obrázek",
     "DELETE_IMG_DIALOG_DESC": "Váš bezpečnostní obrázek bude odstraněn a nebude použit během autentizace.",
-    "MFA_INFO": "Spravovat moje prostředky vícefázového ověření (MFA)"
+    "MFA_INFO": "Spravovat moje prostředky vícefázového ověření (MFA)",
+    "SAVE_IMG_SUCCESS": "Bezpečnostní obrázek byl změněn.",
+    "REMOVE_IMG_SUCCESS": "Bezpečnostní obrázek byl odebrán."
   },
   "LOCAL_ACCOUNT": {
     "TITLE": "Lokální účet",
@@ -230,13 +232,13 @@
       "CLOSE": "Zrušit"
     },
     "ADD_AUTH_IMG": {
-      "TITLE": "Změna proti-phishingového obrázku",
-      "INFO": "Prosím, zvolte obrázek s velikostí maximálně 5kB.",
+      "TITLE": "Změna bezpečnostního obrázku",
+      "INFO": "Prosím, zvolte obrázek.",
       "GENERATE": "Generovat obrázek",
       "UPLOAD_IMG_LABEL": "Nahrát obrázek z vašeho počítače",
       "CANCEL": "Zrušit",
       "ADD": "Uložit obrázek",
-      "IMG_TOO_LONG": "Velikost obrázku je větší než 5kB",
+      "IMG_TOO_LONG": "Zvolený obrázek se nepodařilo zmenšit na cílovou velikost. Prosím zvolte jiný obrázek.",
       "DELAY_INFO": "Změna bezpečnostního obrázku se projeví většinou do 5 minut, v ojedinělých případech může propagace změny trvat několik hodin."
     }
   },

apps/user-profile/src/assets/i18n/en.json

@@ -165,9 +165,11 @@
     "NEW_IMG": "New image",
     "DELETE_IMG": "Delete image",
     "ANTI_PHISHING_INFO": "You will be shown this security image before you enter your password so you will know that you are visiting the right site",
-    "DELETE_IMG_DIALOG_TITLE": "Delete anti-phishing image",
+    "DELETE_IMG_DIALOG_TITLE": "Delete security image",
     "DELETE_IMG_DIALOG_DESC": "Your security image will be deleted and will not be used during authentication process.",
-    "MFA_INFO": "Manage my MFA tokens"
+    "MFA_INFO": "Manage my MFA tokens",
+    "SAVE_IMG_SUCCESS": "Security image has been saved.",
+    "REMOVE_IMG_SUCCESS": "Security image has been removed."
   },
   "LOCAL_ACCOUNT": {
     "TITLE": "Local account",
@@ -230,13 +232,13 @@
       "CLOSE": "Cancel"
     },
     "ADD_AUTH_IMG": {
-      "TITLE": "Change anti-phishing image",
-      "INFO": "Please, choose an image with size max 5kB",
+      "TITLE": "Change security image",
+      "INFO": "Please, choose an image.",
       "GENERATE": "Generate image",
       "UPLOAD_IMG_LABEL": "Upload an image from your computer",
       "CANCEL": "Cancel",
       "ADD": "Save image",
-      "IMG_TOO_LONG": "The image size is more than 5kB.",
+      "IMG_TOO_LONG": "Your image could not be resized to fit. Please try a different one.",
       "DELAY_INFO": "New security image usually becomes effective in 5 minutes, in rare cases it might take a couple of hours."
     }
   },