[TEAMMATES#11152] Student update profile: profile image does not disp…

…lay correctly when certain formats are used (TEAMMATES#11550)

* Add validation for student profile picture file types

* Add more user-friendly notice message

* Change validProfileFileTypes to readonly

* Fix linting problems

src/web/app/pages-student/student-profile-page/__snapshots__/student-profile-page.component.spec.ts.snap

@@ -97,7 +97,7 @@ exports[`StudentProfilePageComponent should snap with a student field without in
             >
               <button
                 class="btn btn-primary upload-edit-photo btn-margin-right"
-                ngbtooltip=".jpg or .png, max size 5 MB"
+                ngbtooltip=".jpg, .png, .gif or .svg, max size 5 MB"
               >
                  Upload/Edit Photo 
               </button>
@@ -363,7 +363,7 @@ exports[`StudentProfilePageComponent should snap with values and a profile photo
             >
               <button
                 class="btn btn-primary upload-edit-photo btn-margin-right"
-                ngbtooltip=".jpg or .png, max size 5 MB"
+                ngbtooltip=".jpg, .png, .gif or .svg, max size 5 MB"
               >
                  Upload/Edit Photo 
               </button>

src/web/app/pages-student/student-profile-page/student-profile-page.component.html

@@ -17,7 +17,7 @@ <h1>{{ name }}</h1>
           <div class="col-md-12 cursor-pointer">
             <button
                 class="btn btn-primary upload-edit-photo btn-margin-right"
-                ngbTooltip=".jpg or .png, max size 5 MB"
+                ngbTooltip=".jpg, .png, .gif or .svg, max size 5 MB"
                 (click)="onUploadEdit()">
               Upload/Edit Photo
             </button>

src/web/app/pages-student/student-profile-page/upload-edit-profile-picture-modal/upload-edit-profile-picture-modal.component.html

@@ -10,16 +10,16 @@ <h4 class="modal-title">
 <div class="modal-body align-center">
   <div class="row">
     <div class="col sm-5">
-      <p>If you have no profile picture, upload one from your computer. Once a picture is uploaded,
-        you will be able to edit it using the buttons below. Cropping is available by adjusting the box
-        size.
+      <p>Please upload an image file <b>(ending with .jpg, .png, .gif or .svg)</b> from your computer.
+      Once a picture is uploaded, you will be able to edit it using the buttons below.
+      Cropping is available by adjusting the box size.
       </p>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-4">
-      <input class="row col student-photo" type="file" (change)="fileChangeEvent($event)"/>
+      <input class="row col student-photo" type="file" accept="{{ validProfileFileTypes }}" (change)="fileChangeEvent($event)"/>
       <small>Max Size: 5MB</small>
     </div>
 
@@ -52,6 +52,6 @@ <h4 class="modal-title">
 </div>
 <div class="modal-footer">
   <div>
-    <button class="btn btn-success btn-lg profile-upload-picture-submit" (click)="uploadPicture()">Upload Image</button>
+    <button class="btn btn-success btn-lg profile-upload-picture-submit" (click)="uploadPicture()" [disabled]="!isValidProfileFileType">Upload Image</button>
   </div>
 </div>

src/web/app/pages-student/student-profile-page/upload-edit-profile-picture-modal/upload-edit-profile-picture-modal.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
+import { StatusMessageService } from '../../../../services/status-message.service';
 
 /**
  * Student profile page's modal to upload/edit photo.
@@ -13,12 +14,16 @@ import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
 export class UploadEditProfilePictureModalComponent implements OnInit {
   imageChangedEvent: any = '';
   formData?: FormData;
+  isValidProfileFileType: boolean = false;
+  readonly validProfileFileTypes: string[] = ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'];
 
   @ViewChild(ImageCropperComponent) imageCropper!: ImageCropperComponent;
 
   @Input() image!: Blob | null;
 
-  constructor(public activeModal: NgbActiveModal) { }
+  constructor(public activeModal: NgbActiveModal,
+    private statusMessageService: StatusMessageService,
+    ) { }
 
   ngOnInit(): void {
     if (this.image == null) {
@@ -65,8 +70,12 @@ export class UploadEditProfilePictureModalComponent implements OnInit {
     this.imageChangedEvent = event;
 
     const file: File = event.target.files[0];
-    if (file) {
+    if (this.validProfileFileTypes.includes(file.type)) {
       this.populateFormData(file);
+      this.isValidProfileFileType = true;
+    } else {
+      this.statusMessageService.showErrorToast('Please upload an accepted file type!');
+      this.isValidProfileFileType = false;
     }
   }