RA-2081: Create modal on submit telling user not to reload the page

.github/workflows/maven.yml

@@ -21,18 +21,13 @@ jobs:
       JAVA_VERSION: ${{ matrix.java-version }}
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Set up JDK
-        uses: actions/setup-java@v1
+        uses: actions/setup-java@v4
         with:
+          distribution: 'temurin'
           java-version: ${{ matrix.java-version }}
-      - name: Cache local Maven repository
-        uses: actions/cache@v2
-        with:
-          path: ~/.m2/repository
-          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
-          restore-keys: |
-            ${{ runner.os }}-maven-
+          cache: 'maven'
       - name: Install dependencies
         run: mvn clean install -DskipTests=true -Dmaven.javadoc.skip=true --batch-mode --show-version --file pom.xml
       - name: Build with Maven

api/src/main/resources/messages.properties

@@ -145,4 +145,6 @@ registrationapp.person.relationship.label=Relatives
 registrationapp.person.relationship.question=Who is the patient related to?
 
 registrationapp.person.name=Person Name
-registrationapp.person.relationship.selectRelationshipType=Select Relationship Type
+registrationapp.person.relationship.selectRelationshipType=Select Relationship Type
+
+registrationapp.pleaseDoNotRefreshPage=Please do not refresh the page

api/src/main/resources/messages_fr.properties

@@ -146,3 +146,5 @@ registrationapp.person.relationship.question=Le Patient a-t-il une relation avec
 
 registrationapp.person.name=Nom de la personne
 registrationapp.person.relationship.selectRelationshipType=Choisissez le type de relation
+
+registrationapp.pleaseDoNotRefreshPage=Veuillez ne pas actualiser la page

omod/src/main/webapp/pages/registerPatient.gsp

@@ -174,6 +174,13 @@ fieldset[id\$="-fieldset"] div > div {
     });
 </script>
 
+<div id="modal-overlay">
+    <div id="modal-content">
+        <div class="spinner"></div>
+        <p>${ui.message("registrationapp.pleaseDoNotRefreshPage")}</p>
+    </div>
+</div>
+
 <div id="validation-errors" class="note-container" style="display: none" >
     <div class="note error">
         <div id="validation-errors-content" class="text">

omod/src/main/webapp/resources/scripts/registerPatient.js

@@ -231,6 +231,7 @@ jq(function() {
     jq('#registration').submit(function (e) {
         e.preventDefault();
         jq('#submit').attr('disabled', 'disabled');
+        jq('#modal-overlay').fadeIn();
         jq('#cancelSubmission').attr('disabled', 'disabled');
         jq('#validation-errors').hide();
         var formData = jq('#registration').serialize();
@@ -248,6 +249,7 @@ jq(function() {
                 jq('#validation-errors-content').html(response.responseJSON.globalErrors);
                 jq('#validation-errors').show();
                 jq('#submit').removeAttr('disabled');
+                jq('#modal-overlay').fadeOut();
                 jq('#cancelSubmission').removeAttr('disabled');
             }
         });

omod/src/main/webapp/resources/styles/registerPatient.scss

@@ -54,3 +54,46 @@
 }
 
 
+#modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: none; /* Hidden by default */
+}
+
+#modal-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 20px;
+  text-align: center;
+  border-radius: 8px;
+  width: 300px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 15px auto;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+