From 17baed658640139564461be59d220c081c12a9be Mon Sep 17 00:00:00 2001
From: Xenos F <git@xenosfio.com>
Date: Sun, 24 Mar 2024 20:49:57 +0800
Subject: [PATCH] Create submission acknowledgement view

---
 .../instructor-request-form.component.html    |  2 +-
 .../request-page/request-page.component.html  | 72 ++++++++++++++-----
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/web/app/pages-static/request-page/instructor-request-form/instructor-request-form.component.html b/src/web/app/pages-static/request-page/instructor-request-form/instructor-request-form.component.html
index 23f8ff02822..e107db79a4c 100644
--- a/src/web/app/pages-static/request-page/instructor-request-form/instructor-request-form.component.html
+++ b/src/web/app/pages-static/request-page/instructor-request-form/instructor-request-form.component.html
@@ -2,7 +2,7 @@
     <!-- aria-hidden as screen readers use the required attribute -->
     Questions marked with an asterisk <span class="red-font">*</span> are required.
 </p>
-<form (ngSubmit)="onSubmit()" [formGroup]="arf" class="col-xs-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
+<form (ngSubmit)="onSubmit()" [formGroup]="arf">
     <div class="form-group {{isFieldRequired(name) ? 'required' : ''}}">
         <label for="name" id="name-label" class="qn">
             Full Name
diff --git a/src/web/app/pages-static/request-page/request-page.component.html b/src/web/app/pages-static/request-page/request-page.component.html
index 017c1384c18..d8d12c00a07 100644
--- a/src/web/app/pages-static/request-page/request-page.component.html
+++ b/src/web/app/pages-static/request-page/request-page.component.html
@@ -1,21 +1,61 @@
 <h1 class="color-orange">
   Request for an Instructor Account
 </h1>
-<p>
-  Request for an instructor account using this form if you are an instructor and want to use TEAMMATES to manage peer evaluations and/or other feedback paths of your students.
-</p>
-<hr>
-<div *ngIf="!isDeclarationDone">
-  <p>
-    Note: <b>Students should not use this form to request for TEAMMATES accounts</b>, as students do not need accounts to use TEAMMATES. Instead, TEAMMATES will email students (who have been added to TEAMMATES by a course instructor) an access link when there is a TEAMMATES session available for them to access.
-  </p>
-  <a type="button" class="btn btn-secondary" tmRouterLink="/web/front/home">Back to home page</a>
-  <button type="button" class="btn btn-primary ms-3" (click)="onDeclarationButtonClicked()">I am an instructor</button>
-</div>
-<div *ngIf="isDeclarationDone">
-  <tm-instructor-request-form *ngIf="!submittedFormData" (requestSubmitted)="onRequestSubmitted($event)"></tm-instructor-request-form>
+<div class="col-xs-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
+  <div *ngIf="!submittedFormData">
+    <p>
+      Request for an instructor account using this form if you are an instructor and want to use TEAMMATES to manage peer evaluations and/or other feedback paths of your students.
+    </p>
+    <hr>
+    <div *ngIf="!isDeclarationDone">
+      <p>
+        Note: <b>Students should not use this form to request for TEAMMATES accounts</b>, as students do not need accounts to use TEAMMATES. Instead, TEAMMATES will email students (who have been added to TEAMMATES by a course instructor) an access link when there is a TEAMMATES session available for them to access.
+      </p>
+      <a type="button" class="btn btn-secondary" tmRouterLink="/web/front/home">Back to home page</a>
+      <button type="button" class="btn btn-primary ms-3" (click)="onDeclarationButtonClicked()">I am an instructor</button>
+    </div>
+    <div *ngIf="isDeclarationDone">
+      <tm-instructor-request-form *ngIf="!submittedFormData" (requestSubmitted)="onRequestSubmitted($event)"></tm-instructor-request-form>
+    </div>
+    <hr>
+  </div>
   <div *ngIf="submittedFormData">
-    name: {{submittedFormData!.name}}
+    <p>
+      Your request has been submitted successfully:
+    </p>
+    <table class="table table-bordered my-3">
+      <tbody>
+        <tr>
+          <th scope="row" class="col-3">Full Name</th>
+          <td>{{submittedFormData.name}}</td>
+        </tr>
+        <tr>
+          <th scope="row">Institution</th>
+          <td>{{submittedFormData.institution}}</td>
+        </tr>
+        <tr>
+          <th scope="row">Country</th>
+          <td>{{submittedFormData.country}}</td>
+        </tr>
+        <tr>
+          <th scope="row">Email</th>
+          <td>{{submittedFormData.email}}</td>
+        </tr>
+        <tr>
+          <th scope="row">Home Page URL</th>
+          <td>{{submittedFormData.homePage}}</td>
+        </tr>
+        <tr>
+          <th scope="row">Comments</th>
+          <td>{{submittedFormData.comments}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+      We have sent an acknowledgement email to your email address <b>{{submittedFormData.email}}</b>.
+      Please check your email inbox or spam folder.<br>
+      If you do not receive the acknowledgement email within 1 hour, please <a tmRouterLink="/web/front/contact">contact</a> us. 
+    </p>
   </div>
-</div>
-<hr>
\ No newline at end of file
+
+</div>
\ No newline at end of file