Client: try to improve ux for the upload form

4 files changed, 57 insertions, 28 deletions

diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index 1e8a69771..a5732e083 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -21,4 +21,20 @@ export abstract class FormReactive {
       }
     }
   }
+
+  // Same as onValueChanged but force checking even if the field is not dirty
+  protected forceCheck() {
+    for (const field in this.formErrors) {
+      // clear previous error message (if any)
+      this.formErrors[field] = '';
+      const control = this.form.get(field);
+
+      if (control && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
 }
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index 14c7a0136..b6be0d782 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -15,7 +15,7 @@
   </div>
 
   <div class="form-group">
-    <label for="tags">Tags</label>
+    <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
     <input
       type="text" class="form-control" id="currentTag"
       formControlName="currentTag" (keyup)="onTagKeyPress($event)"
@@ -32,6 +32,10 @@
     </div>
   </div>
 
+  <div *ngIf="tagsError" class="alert alert-danger">
+    {{ tagsError }}
+  </div>
+
   <div class="form-group">
     <label for="videofile">File</label>
     <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
@@ -39,6 +43,7 @@
       <input
         type="file" name="videofile" id="videofile"
         ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
+        (change)="fileChanged()"
       >
     </div>
   </div>
@@ -50,6 +55,10 @@
     </div>
   </div>
 
+  <div *ngIf="fileError" class="alert alert-danger">
+    {{ fileError }}
+  </div>
+
   <div class="form-group">
     <label for="description">Description</label>
     <textarea
@@ -69,7 +78,6 @@
   <div class="form-group">
     <input
       type="button" value="Upload" class="btn btn-default form-control"
-      [title]="getInvalidFieldsTitle()" [disabled]="!form.valid || tags.length === 0 || filename === null"
       (click)="upload()"
     >
   </div>
diff --git a/client/src/app/videos/video-add/video-add.component.scss b/client/src/app/videos/video-add/video-add.component.scss
index d66df2fd4..11ee3297e 100644
--- a/client/src/app/videos/video-add/video-add.component.scss
+++ b/client/src/app/videos/video-add/video-add.component.scss
@@ -51,6 +51,7 @@ div.file-to-upload {
   }
 }
 
-div.progress {
-  // height: 40px;
+.little-information {
+  font-size: 0.8em;
+  font-style: italic;
 }
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 6eab54f7e..1e700ae48 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -30,6 +30,10 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     currentTag: VIDEO_TAGS.MESSAGES
   };
 
+  // Special error messages
+  tagsError = '';
+  fileError = '';
+
   constructor(
     private authService: AuthService,
     private elementRef: ElementRef,
@@ -57,30 +61,6 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.form.valueChanges.subscribe(data => this.onValueChanged(data));
   }
 
-  getInvalidFieldsTitle() {
-    let title = '';
-    const nameControl = this.form.controls['name'];
-    const descriptionControl = this.form.controls['description'];
-
-    if (!nameControl.valid) {
-      title += 'A name is required\n';
-    }
-
-    if (this.tags.length === 0) {
-      title += 'At least one tag is required\n';
-    }
-
-    if (this.filename === null) {
-      title += 'A file is required\n';
-    }
-
-    if (!descriptionControl.valid) {
-      title += 'A description is required\n';
-    }
-
-    return title;
-  }
-
   ngOnInit() {
     this.uploader = new FileUploader({
       authToken: this.authService.getRequestHeaderValue(),
@@ -104,6 +84,24 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.buildForm();
   }
 
+  checkForm() {
+    this.forceCheck();
+
+    if (this.tags.length === 0) {
+      this.tagsError = 'You have 0 tags';
+    }
+
+    if (this.filename === null) {
+      this.fileError = 'You did not add a file.';
+    }
+
+    return this.form.valid === true && this.tagsError === '' && this.fileError === '';
+  }
+
+  fileChanged() {
+    this.fileError = '';
+  }
+
   onTagKeyPress(event: KeyboardEvent) {
     const currentTag = this.form.value['currentTag'];
 
@@ -121,6 +119,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
         if (this.tags.length >= 3) {
           this.form.get('currentTag').disable();
         }
+
+        this.tagsError = '';
       }
     }
   }
@@ -135,6 +135,10 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   }
 
   upload() {
+    if (this.checkForm() === false) {
+      return;
+    }
+
     const item = this.uploader.queue[0];
     // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
     item.alias = 'videofile';