From 216a0dd1474268f29e73f725192e8fb5af0e462f Mon Sep 17 00:00:00 2001
From: Pierre Mauduit <pierre.mauduit@camptocamp.com>
Date: Wed, 10 Apr 2024 17:11:18 +0200
Subject: [PATCH] login - do not hardcode header's script url (#117)

Use the value from datadir's default.properties instead.

Adding some doc in what is configureable about the header and how tu
customize the login page.

Also removing the commented out footer url.
---
 docs/ui-customization.adoc                    | 38 +++++++++
 .../app/GeorchestraGatewayApplication.java    |  5 +-
 .../src/main/resources/templates/login.html   | 82 +++++++++----------
 .../resources/test-datadir/default.properties |  1 +
 4 files changed, 80 insertions(+), 46 deletions(-)
 create mode 100644 docs/ui-customization.adoc

diff --git a/docs/ui-customization.adoc b/docs/ui-customization.adoc
new file mode 100644
index 00000000..9a50bb56
--- /dev/null
+++ b/docs/ui-customization.adoc
@@ -0,0 +1,38 @@
+= UI customizations
+
+:toc:
+:toc-placement!:
+
+toc::[]
+
+== Main principles
+
+If you need to e.g. customize the login page / error pages, you can copy the templates provided under gateway/src/main/resources/templates into another directory, modify the templates to suit
+your needs, then reconfigure the gateway to point to the newly created directory:
+
+[source,yaml]
+----
+spring:
+  thymeleaf:
+    prefix: file:/path/to/templates/
+----
+
+See also the <<custom-error-pages.adoc#,documentation to customize the error pages>>.
+
+== header
+
+The header being integrated by default to every geOrchestra pages is also present onto the login page provided by the Gateway. If you look into the `login.html` template, you should see a `<geor-header></geor-header>` html tag somewhere in the file.
+
+The web component is sourced from a Javascript file defined in the `default.properties` file from the geOrchestra datadir. Below is a list of variables which can be configured to tweak the header integration:
+
+[source,yaml]
+----
+# From georchestra datadir's default.properties
+# URL to the Javascript definition of the <geor-header> web component
+headerScript: https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js
+
+
+# From the gateway's yaml configuration
+# includes or disables the <geor-header/> web component
+georchestra.gateway.headerEnabled: true
+----
\ No newline at end of file
diff --git a/gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java b/gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java
index d7c3d736..555f90d1 100644
--- a/gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java
+++ b/gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java
@@ -70,7 +70,8 @@ public class GeorchestraGatewayApplication {
 
     private @Autowired(required = false) OAuth2ClientProperties oauth2ClientConfig;
     private @Value("${georchestra.gateway.headerEnabled:true}") boolean headerEnabled;
-    private @Value("${georchestra.gateway.footerUrl:#{null}}") String georchestraFooterUrl;
+    // defined in georchestra datadir's default.properties
+    private @Value("${headerScript:https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js}") String headerScript;
     private @Value("${spring.messages.basename:}") String messagesBasename;
 
     public static void main(String[] args) {
@@ -121,7 +122,7 @@ public String loginPage(@RequestParam Map<String, String> allRequestParams, Mode
             });
         }
         mdl.addAttribute("header_enabled", headerEnabled);
-        mdl.addAttribute("footer_url", georchestraFooterUrl);
+        mdl.addAttribute("header_script", headerScript);
         mdl.addAttribute("ldapEnabled", ldapEnabled);
         mdl.addAttribute("oauth2LoginLinks", oauth2LoginLinks);
         boolean expired = "expired_password".equals(allRequestParams.get("error"));
diff --git a/gateway/src/main/resources/templates/login.html b/gateway/src/main/resources/templates/login.html
index 7158d908..cae0bad7 100644
--- a/gateway/src/main/resources/templates/login.html
+++ b/gateway/src/main/resources/templates/login.html
@@ -6,7 +6,7 @@
     <meta name="description" content="">
     <meta name="author" content="">
     <title>Please sign in</title>
-    <script src="https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js"></script>
+    <script th:src="${header_script}"></script>
     <link href="login/bootstrap.min.css" rel="stylesheet">
     <link href="login/signin.css" rel="stylesheet"/>
 </head>
@@ -14,48 +14,42 @@
   <header th:if="${header_enabled}">
     <geor-header></geor-header>
   </header>
-<div class="container">
-    <form class="form-signin" method="post" action="/login" th:if="${ldapEnabled}">
-        <h2 class="form-signin-heading"><span th:text="#{login_message_title}"></span></h2>
-        <p>
-            <label for="username" class="sr-only"><span th:text="#{username}"></span></label>
-            <input type="text" id="username" name="username" class="form-control" th:placeholder="#{username}" required autofocus>
-        </p>
-        <p>
-            <label for="password" class="sr-only"><span th:text="#{password}"></span></label>
-            <input type="password" id="password" name="password" class="form-control" th:placeholder="#{password}" required>
-        </p>
-        <button class="btn btn-lg btn-primary btn-block mb-2" type="submit"><span th:text="#{login}"></span></button>
-        <div class="d-flex flex-row flex-wrap justify-content-around">
-          <a href="/console/account/new">
-              <span th:text="#{register}"></span>
-          </a>
-          <a href="/console/account/passwordRecovery">
-              <span th:text="#{forget_password}"></span>
-          </a>
-        </div>
-        <div style="margin-top: 60px;">
-            <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${invalidCredentials}"> <span th:text="#{invalid_credentials}"></span> </div>
-            <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${passwordExpired}">  <span th:text="#{expired_password}" ></span>
-                <a href="/console/account/passwordRecovery" > <span th:text="#{expired_password_link}" ></span> </a>
-            </div>
-            <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${duplicateAccount}"> <span th:text="#{duplicate_account}"></span> </div>
-        </div>
-    </form>
-    <div th:if="${oauth2LoginLinks.size() != 0}" class="container"><h2 class="form-signin-heading">Login with OAuth 2.0</h2>
-        <table class="table table-striped">
-        <tr th:each="oauth2Client : ${oauth2LoginLinks}">
-            <td>
-                <a th:href="${oauth2Client.key}" th:text="${oauth2Client.value}"></a>
-            </td>
-        </tr>
-    </table></div>
-</div>
-<!--
-<footer th:if="${footer_url != null}">
-    <iframe id="footer" th:src="${footer_url}" style="width:100%;border:none;overflow:hidden;" scrolling="no"
-            frameborder="0"></iframe>
-</footer>
--->
+  <div class="container">
+      <form class="form-signin" method="post" action="/login" th:if="${ldapEnabled}">
+          <h2 class="form-signin-heading"><span th:text="#{login_message_title}"></span></h2>
+          <p>
+              <label for="username" class="sr-only"><span th:text="#{username}"></span></label>
+              <input type="text" id="username" name="username" class="form-control" th:placeholder="#{username}" required autofocus>
+          </p>
+          <p>
+              <label for="password" class="sr-only"><span th:text="#{password}"></span></label>
+              <input type="password" id="password" name="password" class="form-control" th:placeholder="#{password}" required>
+          </p>
+          <button class="btn btn-lg btn-primary btn-block mb-2" type="submit"><span th:text="#{login}"></span></button>
+          <div class="d-flex flex-row flex-wrap justify-content-around">
+            <a href="/console/account/new">
+                <span th:text="#{register}"></span>
+            </a>
+            <a href="/console/account/passwordRecovery">
+                <span th:text="#{forget_password}"></span>
+            </a>
+          </div>
+          <div style="margin-top: 60px;">
+              <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${invalidCredentials}"> <span th:text="#{invalid_credentials}"></span> </div>
+              <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${passwordExpired}">  <span th:text="#{expired_password}" ></span>
+                  <a href="/console/account/passwordRecovery" > <span th:text="#{expired_password_link}" ></span> </a>
+              </div>
+              <div style="text-align: center; font-size: 18px; color: #ff0033;" th:if="${duplicateAccount}"> <span th:text="#{duplicate_account}"></span> </div>
+          </div>
+      </form>
+      <div th:if="${oauth2LoginLinks.size() != 0}" class="container"><h2 class="form-signin-heading">Login with OAuth 2.0</h2>
+          <table class="table table-striped">
+          <tr th:each="oauth2Client : ${oauth2LoginLinks}">
+              <td>
+                  <a th:href="${oauth2Client.key}" th:text="${oauth2Client.value}"></a>
+              </td>
+          </tr>
+      </table></div>
+  </div>
 </body>
 </html>
diff --git a/gateway/src/test/resources/test-datadir/default.properties b/gateway/src/test/resources/test-datadir/default.properties
index 141180ce..dd472fbb 100644
--- a/gateway/src/test/resources/test-datadir/default.properties
+++ b/gateway/src/test/resources/test-datadir/default.properties
@@ -4,6 +4,7 @@ instanceName=geOrchestra
 language=en
 headerHeight=90
 headerUrl=/header/
+headerScript=/public/header.js
 administratorEmail=georchestra@georchestra-127-0-1-1.traefik.me
 ### PostgreSQL properties
 pgsqlHost=database