From 1d4c721afa474ac0067c5bfa7352e26bc7d33f29 Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Mon, 9 Dec 2024 13:05:08 +0100
Subject: [PATCH 1/5] feat: dynamically get url to make api calls

---
 .../org/hisp/dhis/webapi/servlet/login.html   | 157 +++++++++---------
 1 file changed, 78 insertions(+), 79 deletions(-)

diff --git a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
index d25aebd5459c..7ce9141bd9f3 100644
--- a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
+++ b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
@@ -321,46 +321,47 @@ <h1>Log in</h1>
     </div>
 
     <script>
+      // This function will dynamically determine the base URL of the current page
+      function getBaseUrl() {
+        const url = window.location.origin;
+        return url
+      }
+    
+      // Fetch the login configuration dynamically
       async function fetchLoginConfig() {
         try {
-          const response = await fetch("/api/loginConfig");
-
+          const baseUrl = getBaseUrl();
+          const response = await fetch(`${baseUrl}/api/loginConfig`);
+    
           if (!response.ok) {
             let errorMessage = "Login failed: " + response.status;
             try {
               const errorData = await response.json();
               errorMessage = errorData.message || errorMessage;
             } catch (jsonError) {
-              console.warn(
-                "Failed to parse error response as JSON:",
-                jsonError
-              );
+              console.warn("Failed to parse error response as JSON:", jsonError);
             }
             throw new Error(errorMessage);
           }
-
+    
           const config = await response.json();
-          document.getElementById("appTitle").innerText =
-            config.applicationTitle || "DHIS2 Login";
-          document.getElementById("appWelcomeMessage").innerText =
-            config.applicationDescription || "Welcome to the DHIS2 application";
-
+          document.getElementById("appTitle").innerText = config.applicationTitle || "DHIS2 Login";
+          document.getElementById("appWelcomeMessage").innerText = config.applicationDescription || "Welcome to the DHIS2 application";
           if (config.countryFlag) {
             const flag = document.getElementById("flag");
-            flag.src = `/dhis-web-commons/flags/${config.countryFlag}.png`;
+            flag.src = `${baseUrl}/dhis-web-commons/flags/${config.countryFlag}.png`;
             flag.style.display = "block";
           }
-
+    
         } catch (error) {
           console.error("Error:", error);
         }
       }
-
+    
       document.addEventListener("DOMContentLoaded", () => {
         const twoFAToggle = document.getElementById("twoFAToggle");
         const twoFAContainer = document.getElementById("twoFAContainer");
-
-        // Function to toggle visibility based on checkbox state
+    
         const toggleTwoFAInput = () => {
           if (twoFAToggle.checked) {
             twoFAContainer.style.display = "block";
@@ -369,74 +370,72 @@ <h1>Log in</h1>
             document.getElementById("twoFA").value = "";
           }
         };
-
+    
         toggleTwoFAInput();
         twoFAToggle.addEventListener("change", toggleTwoFAInput);
       });
-
-      document
-        .getElementById("loginForm")
-        .addEventListener("submit", async function (event) {
-          event.preventDefault();
-
-          const username = document.getElementById("username").value;
-          const password = document.getElementById("password").value;
-          const submitButton = document.querySelector('input[type="submit"]');
-          const spinner = document.getElementById("spinner");
-          const errorMessage = document.getElementById("errorMessage");
-          const twoFA = document.getElementById("twoFA").value.trim(); // Trim whitespace
-
-          spinner.style.display = "block";
-          errorMessage.innerText = "";
-          submitButton.disabled = true;
-
-          let requestBody;
-          if (twoFAToggle.checked && twoFA) {
-            requestBody = { username, password, twoFactorCode: twoFA };
-          } else {
-            requestBody = { username, password };
-          }
-
-          try {
-            const response = await fetch("/api/auth/login", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify(requestBody),
-            });
-
-            if (!response.ok) {
-              let errorMessage = "Login failed: " + response.status;
-              try {
-                const errorData = await response.json();
-                errorMessage = errorData.message || errorMessage;
-              } catch (jsonError) {
-                console.warn(
-                  "Failed to parse error response as JSON:",
-                  jsonError
-                );
-              }
-              throw new Error(errorMessage);
-            }
-
-            const user = await response.json();
-
-            if (user.loginStatus === "SUCCESS") {
-              const redirectUrl = user.redirectUrl || "/";
-              window.location.href = redirectUrl;
-            } else {
-              throw new Error("Login failed. Status: " + user.loginStatus);
+    
+      document.getElementById("loginForm").addEventListener("submit", async function (event) {
+        event.preventDefault();
+    
+        const username = document.getElementById("username").value;
+        const password = document.getElementById("password").value;
+        const submitButton = document.querySelector('input[type="submit"]');
+        const spinner = document.getElementById("spinner");
+        const errorMessage = document.getElementById("errorMessage");
+        const twoFA = document.getElementById("twoFA").value.trim();
+    
+        const baseUrl = getBaseUrl();  // Get dynamic base URL
+    
+        spinner.style.display = "block";
+        errorMessage.innerText = "";
+        submitButton.disabled = true;
+    
+        let requestBody;
+        if (twoFAToggle.checked && twoFA) {
+          requestBody = { username, password, twoFactorCode: twoFA };
+        } else {
+          requestBody = { username, password };
+        }
+    
+        try {
+          const response = await fetch(`${baseUrl}/api/auth/login`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(requestBody),
+          });
+    
+          if (!response.ok) {
+            let errorMessage = "Login failed: " + response.status;
+            try {
+              const errorData = await response.json();
+              errorMessage = errorData.message || errorMessage;
+            } catch (jsonError) {
+              console.warn("Failed to parse error response as JSON:", jsonError);
             }
-          } catch (error) {
-            errorMessage.innerText = error.message;
-          } finally {
-            spinner.style.display = "none";
-            submitButton.disabled = false;
+            throw new Error(errorMessage);
           }
-        });
-
+    
+          const user = await response.json();
+    
+          if (user.loginStatus === "SUCCESS") {
+            const redirectUrl = user.redirectUrl || "/";
+            window.location.href = redirectUrl;
+          } else {
+            throw new Error("Login failed. Status: " + user.loginStatus);
+          }
+        } catch (error) {
+          errorMessage.innerText = error.message;
+        } finally {
+          spinner.style.display = "none";
+          submitButton.disabled = false;
+        }
+      });
+    
       fetchLoginConfig();
     </script>
+    
   </body>
 </html>

From c8b8aefefd0fd018448a90c4ef7238e0d9ba53d9 Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Mon, 9 Dec 2024 13:37:54 +0100
Subject: [PATCH 2/5] feat: dynamically get url to make api calls

---
 .../org/hisp/dhis/webapi/servlet/login.html   | 185 ++++++++++--------
 1 file changed, 103 insertions(+), 82 deletions(-)

diff --git a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
index 7ce9141bd9f3..55c73c12434d 100644
--- a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
+++ b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
@@ -222,14 +222,14 @@
       }
 
       @media (max-width: 600px) {
-        .nav-right img{
+        .nav-right img {
           max-height: 34px;
           width: 50px;
         }
-        .right-content{
+        .right-content {
           display: none;
         }
-        .logo{
+        .logo {
           max-height: 30px;
           width: 60px;
         }
@@ -284,11 +284,7 @@ <h1>Log in</h1>
             </div>
 
             <div id="twoFAContainer" style="display: none">
-              <input
-                type="text"
-                id="twoFA"
-                placeholder="TFA code"
-              />
+              <input type="text" id="twoFA" placeholder="TFA code" />
             </div>
 
             <input type="submit" value="Log in" />
@@ -299,10 +295,18 @@ <h1>Log in</h1>
         </div>
 
         <!-- Notification  -->
-        <div
-          class="notification-container"
-        >
-        <svg height="24" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm1 9h-2v6h2zm-1-4c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1 1-.44771525 1-1-.4477153-1-1-1z" fill="#093371"/></svg>
+        <div class="notification-container">
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm1 9h-2v6h2zm-1-4c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1 1-.44771525 1-1-.4477153-1-1-1z"
+              fill="#093371"
+            />
+          </svg>
           <div class="notification-content">
             You are logging in using the fallback login page.
           </div>
@@ -324,44 +328,57 @@ <h1>Log in</h1>
       // This function will dynamically determine the base URL of the current page
       function getBaseUrl() {
         const url = window.location.origin;
-        return url
+        let path = window.location.pathname.split("/");
+
+        // If the last part of the path is 'login.html', remove it
+        if (path[path.length - 1] === "login.html") {
+          path = path.slice(0, path.length - 1);
+        }
+
+        // Check if there's a version or environment path (like 'dev', 'dev-2-41', etc.)
+        const versionPath = path[1] ? path[1] : "";
+        return versionPath ? `${url}/${versionPath}` : url;
       }
-    
+
       // Fetch the login configuration dynamically
       async function fetchLoginConfig() {
         try {
           const baseUrl = getBaseUrl();
           const response = await fetch(`${baseUrl}/api/loginConfig`);
-    
+
           if (!response.ok) {
             let errorMessage = "Login failed: " + response.status;
             try {
               const errorData = await response.json();
               errorMessage = errorData.message || errorMessage;
             } catch (jsonError) {
-              console.warn("Failed to parse error response as JSON:", jsonError);
+              console.warn(
+                "Failed to parse error response as JSON:",
+                jsonError
+              );
             }
             throw new Error(errorMessage);
           }
-    
+
           const config = await response.json();
-          document.getElementById("appTitle").innerText = config.applicationTitle || "DHIS2 Login";
-          document.getElementById("appWelcomeMessage").innerText = config.applicationDescription || "Welcome to the DHIS2 application";
+          document.getElementById("appTitle").innerText =
+            config.applicationTitle || "DHIS2 Login";
+          document.getElementById("appWelcomeMessage").innerText =
+            config.applicationDescription || "Welcome to the DHIS2 application";
           if (config.countryFlag) {
             const flag = document.getElementById("flag");
             flag.src = `${baseUrl}/dhis-web-commons/flags/${config.countryFlag}.png`;
             flag.style.display = "block";
           }
-    
         } catch (error) {
           console.error("Error:", error);
         }
       }
-    
+
       document.addEventListener("DOMContentLoaded", () => {
         const twoFAToggle = document.getElementById("twoFAToggle");
         const twoFAContainer = document.getElementById("twoFAContainer");
-    
+
         const toggleTwoFAInput = () => {
           if (twoFAToggle.checked) {
             twoFAContainer.style.display = "block";
@@ -370,72 +387,76 @@ <h1>Log in</h1>
             document.getElementById("twoFA").value = "";
           }
         };
-    
+
         toggleTwoFAInput();
         twoFAToggle.addEventListener("change", toggleTwoFAInput);
       });
-    
-      document.getElementById("loginForm").addEventListener("submit", async function (event) {
-        event.preventDefault();
-    
-        const username = document.getElementById("username").value;
-        const password = document.getElementById("password").value;
-        const submitButton = document.querySelector('input[type="submit"]');
-        const spinner = document.getElementById("spinner");
-        const errorMessage = document.getElementById("errorMessage");
-        const twoFA = document.getElementById("twoFA").value.trim();
-    
-        const baseUrl = getBaseUrl();  // Get dynamic base URL
-    
-        spinner.style.display = "block";
-        errorMessage.innerText = "";
-        submitButton.disabled = true;
-    
-        let requestBody;
-        if (twoFAToggle.checked && twoFA) {
-          requestBody = { username, password, twoFactorCode: twoFA };
-        } else {
-          requestBody = { username, password };
-        }
-    
-        try {
-          const response = await fetch(`${baseUrl}/api/auth/login`, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(requestBody),
-          });
-    
-          if (!response.ok) {
-            let errorMessage = "Login failed: " + response.status;
-            try {
-              const errorData = await response.json();
-              errorMessage = errorData.message || errorMessage;
-            } catch (jsonError) {
-              console.warn("Failed to parse error response as JSON:", jsonError);
-            }
-            throw new Error(errorMessage);
-          }
-    
-          const user = await response.json();
-    
-          if (user.loginStatus === "SUCCESS") {
-            const redirectUrl = user.redirectUrl || "/";
-            window.location.href = redirectUrl;
+
+      document
+        .getElementById("loginForm")
+        .addEventListener("submit", async function (event) {
+          event.preventDefault();
+
+          const username = document.getElementById("username").value;
+          const password = document.getElementById("password").value;
+          const submitButton = document.querySelector('input[type="submit"]');
+          const spinner = document.getElementById("spinner");
+          const errorMessage = document.getElementById("errorMessage");
+          const twoFA = document.getElementById("twoFA").value.trim();
+
+          const baseUrl = getBaseUrl(); // Get dynamic base URL
+
+          spinner.style.display = "block";
+          errorMessage.innerText = "";
+          submitButton.disabled = true;
+
+          let requestBody;
+          if (twoFAToggle.checked && twoFA) {
+            requestBody = { username, password, twoFactorCode: twoFA };
           } else {
-            throw new Error("Login failed. Status: " + user.loginStatus);
+            requestBody = { username, password };
           }
-        } catch (error) {
-          errorMessage.innerText = error.message;
-        } finally {
-          spinner.style.display = "none";
-          submitButton.disabled = false;
-        }
-      });
-    
+
+          try {
+            const response = await fetch(`${baseUrl}/api/auth/login`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(requestBody),
+            });
+
+            if (!response.ok) {
+              let errorMessage = "Login failed: " + response.status;
+              try {
+                const errorData = await response.json();
+                errorMessage = errorData.message || errorMessage;
+              } catch (jsonError) {
+                console.warn(
+                  "Failed to parse error response as JSON:",
+                  jsonError
+                );
+              }
+              throw new Error(errorMessage);
+            }
+
+            const user = await response.json();
+
+            if (user.loginStatus === "SUCCESS") {
+              const redirectUrl = user.redirectUrl || "/";
+              window.location.href = redirectUrl;
+            } else {
+              throw new Error("Login failed. Status: " + user.loginStatus);
+            }
+          } catch (error) {
+            errorMessage.innerText = error.message;
+          } finally {
+            spinner.style.display = "none";
+            submitButton.disabled = false;
+          }
+        });
+
       fetchLoginConfig();
     </script>
-    
   </body>
 </html>

From d461569905af4ae0e8a5dff826c27beadab2b353 Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Tue, 10 Dec 2024 11:09:59 +0100
Subject: [PATCH 3/5] fix: use relative path instead of dynamic url

---
 .../org/hisp/dhis/webapi/servlet/login.html   | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
index 55c73c12434d..eb6c3f156269 100644
--- a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
+++ b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
@@ -325,26 +325,10 @@ <h1>Log in</h1>
     </div>
 
     <script>
-      // This function will dynamically determine the base URL of the current page
-      function getBaseUrl() {
-        const url = window.location.origin;
-        let path = window.location.pathname.split("/");
-
-        // If the last part of the path is 'login.html', remove it
-        if (path[path.length - 1] === "login.html") {
-          path = path.slice(0, path.length - 1);
-        }
-
-        // Check if there's a version or environment path (like 'dev', 'dev-2-41', etc.)
-        const versionPath = path[1] ? path[1] : "";
-        return versionPath ? `${url}/${versionPath}` : url;
-      }
-
       // Fetch the login configuration dynamically
       async function fetchLoginConfig() {
         try {
-          const baseUrl = getBaseUrl();
-          const response = await fetch(`${baseUrl}/api/loginConfig`);
+          const response = await fetch("../api/loginConfig");
 
           if (!response.ok) {
             let errorMessage = "Login failed: " + response.status;
@@ -367,7 +351,7 @@ <h1>Log in</h1>
             config.applicationDescription || "Welcome to the DHIS2 application";
           if (config.countryFlag) {
             const flag = document.getElementById("flag");
-            flag.src = `${baseUrl}/dhis-web-commons/flags/${config.countryFlag}.png`;
+            flag.src = `/dhis-web-commons/flags/${config.countryFlag}.png`;
             flag.style.display = "block";
           }
         } catch (error) {
@@ -404,8 +388,6 @@ <h1>Log in</h1>
           const errorMessage = document.getElementById("errorMessage");
           const twoFA = document.getElementById("twoFA").value.trim();
 
-          const baseUrl = getBaseUrl(); // Get dynamic base URL
-
           spinner.style.display = "block";
           errorMessage.innerText = "";
           submitButton.disabled = true;
@@ -418,7 +400,7 @@ <h1>Log in</h1>
           }
 
           try {
-            const response = await fetch(`${baseUrl}/api/auth/login`, {
+            const response = await fetch("../api/auth/login", {
               method: "POST",
               headers: {
                 "Content-Type": "application/json",

From 5f472f17fd2ce203d96882477fcb77e758bda6e8 Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Thu, 19 Dec 2024 12:45:00 +0100
Subject: [PATCH 4/5] feat: update relative path

---
 .../main/resources/org/hisp/dhis/webapi/servlet/login.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
index eb6c3f156269..27ed51bea4b3 100644
--- a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
+++ b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
@@ -328,7 +328,7 @@ <h1>Log in</h1>
       // Fetch the login configuration dynamically
       async function fetchLoginConfig() {
         try {
-          const response = await fetch("../api/loginConfig");
+          const response = await fetch("./api/loginConfig");
 
           if (!response.ok) {
             let errorMessage = "Login failed: " + response.status;
@@ -400,7 +400,7 @@ <h1>Log in</h1>
           }
 
           try {
-            const response = await fetch("../api/auth/login", {
+            const response = await fetch("./api/auth/login", {
               method: "POST",
               headers: {
                 "Content-Type": "application/json",

From c1c3499cad6331b5b5b0500a581a19e8835da9db Mon Sep 17 00:00:00 2001
From: Chisomchima <chimachisom360@gmail.com>
Date: Fri, 20 Dec 2024 08:50:30 +0100
Subject: [PATCH 5/5] chore: add relative paths for images

---
 .../main/resources/org/hisp/dhis/webapi/servlet/login.html  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
index 27ed51bea4b3..a9775e915edd 100644
--- a/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
+++ b/dhis-2/dhis-web-api/src/main/resources/org/hisp/dhis/webapi/servlet/login.html
@@ -250,7 +250,7 @@
           </div>
           <img
             class="logo"
-            src="/dhis-web-commons/security/logo_front.png"
+            src="./dhis-web-commons/security/logo_front.png"
             alt="DHIS2 Logo"
           />
         </div>
@@ -351,7 +351,7 @@ <h1>Log in</h1>
             config.applicationDescription || "Welcome to the DHIS2 application";
           if (config.countryFlag) {
             const flag = document.getElementById("flag");
-            flag.src = `/dhis-web-commons/flags/${config.countryFlag}.png`;
+            flag.src = `./dhis-web-commons/flags/${config.countryFlag}.png`;
             flag.style.display = "block";
           }
         } catch (error) {
@@ -425,7 +425,7 @@ <h1>Log in</h1>
             const user = await response.json();
 
             if (user.loginStatus === "SUCCESS") {
-              const redirectUrl = user.redirectUrl || "/";
+              const redirectUrl = user.redirectUrl || "./";
               window.location.href = redirectUrl;
             } else {
               throw new Error("Login failed. Status: " + user.loginStatus);