From 08a6195355badd91ffff39b8779b3cc823a076d4 Mon Sep 17 00:00:00 2001
From: Andrei Yusupau <andrei.yusupau@gmail.com>
Date: Sat, 23 Dec 2023 14:07:16 +0100
Subject: [PATCH]  [#12652] Copying feedback session: mark session name as
 mandatory field when copying feedback session (#12670)

* Fix Copying feedback session: mark session name as mandatory field when copying feedback session #12652

* Fix Copying feedback session: mark session name as mandatory field when copying feedback session #12652

* Fix Copying feedback session: mark session name as mandatory field when copying feedback session #12652

---------

Co-authored-by: Dominic Lim <46486515+domlimm@users.noreply.github.com>
---
 .../copy-session-modal.component.spec.ts.snap | 32 ++++++++++++++++---
 .../copy-session-modal.component.html         |  9 ++++--
 .../copy-session-modal.component.scss         |  4 +++
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/web/app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap b/src/web/app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap
index 3984fd54696..889f95c5e13 100644
--- a/src/web/app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap
+++ b/src/web/app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap
@@ -44,15 +44,26 @@ exports[`CopySessionModalComponent should snap with default fields 1`] = `
         >
           <label>
             <b>
-              Name for copied session
+              Name for copied session*
             </b>
           </label>
           <input
-            class="form-control ng-untouched ng-pristine ng-valid"
+            class="form-control ng-untouched ng-pristine ng-invalid"
             id="copy-session-name"
             maxlength="64"
+            required=""
             type="text"
           />
+          <div
+            class="invalid-field"
+            hidden=""
+          >
+            <i
+              aria-hidden="true"
+              class="fa fa-exclamation-circle"
+            />
+             The field "Name for copied session" should not be empty. 
+          </div>
           <span>
             64 characters left
           </span>
@@ -124,15 +135,26 @@ exports[`CopySessionModalComponent should snap with some session and courses can
         >
           <label>
             <b>
-              Name for copied session
+              Name for copied session*
             </b>
           </label>
           <input
-            class="form-control ng-untouched ng-pristine ng-valid"
+            class="form-control ng-untouched ng-pristine ng-invalid"
             id="copy-session-name"
             maxlength="64"
+            required=""
             type="text"
           />
+          <div
+            class="invalid-field"
+            hidden=""
+          >
+            <i
+              aria-hidden="true"
+              class="fa fa-exclamation-circle"
+            />
+             The field "Name for copied session" should not be empty. 
+          </div>
           <span>
             52 characters left
           </span>
@@ -201,4 +223,4 @@ exports[`CopySessionModalComponent should snap with some session and courses can
     </button>
   </div>
 </tm-copy-session-modal>
-`;
\ No newline at end of file
+`;
diff --git a/src/web/app/components/copy-session-modal/copy-session-modal.component.html b/src/web/app/components/copy-session-modal/copy-session-modal.component.html
index 8403422d14a..79ac691daef 100644
--- a/src/web/app/components/copy-session-modal/copy-session-modal.component.html
+++ b/src/web/app/components/copy-session-modal/copy-session-modal.component.html
@@ -9,8 +9,13 @@ <h5 class="modal-title">
   <div class="row">
     <div class="col-12">
       <div class="form-group">
-        <label><b>Name for copied session</b></label>
-        <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" [maxlength]="FEEDBACK_SESSION_NAME_MAX_LENGTH">
+        <label><b>Name for copied session*</b></label>
+        <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" [maxlength]="FEEDBACK_SESSION_NAME_MAX_LENGTH"
+               required #newSessionName="ngModel">
+        <div [hidden]="newSessionName.valid || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field "Name for copied session" should not be empty.
+        </div>
         <span>{{ FEEDBACK_SESSION_NAME_MAX_LENGTH - newFeedbackSessionName.length }} characters left</span>
       </div>
       <div class="form-check" *ngFor="let course of courseCandidates">
diff --git a/src/web/app/components/copy-session-modal/copy-session-modal.component.scss b/src/web/app/components/copy-session-modal/copy-session-modal.component.scss
index e69de29bb2d..b2a5ec189aa 100644
--- a/src/web/app/components/copy-session-modal/copy-session-modal.component.scss
+++ b/src/web/app/components/copy-session-modal/copy-session-modal.component.scss
@@ -0,0 +1,4 @@
+.invalid-field {
+  padding-top: 5px;
+  color: #B50000;
+}