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.
georchestra · Apr 10, 2024 · af89bc2 · af89bc2
1 parent 5039f9e
commit af89bc2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 45 deletions.
diff --git a/docs/ui-customization.adoc 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
+----
diff --git 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) {
@@ -116,7 +117,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
@@ -6,55 +6,49 @@
     <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>
 <body>
   <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>
-    </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>
+      </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
@@ -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