Merge pull request #118 from georchestra/header-use-property-from-dat…

…adir-117 login - do not hardcode header's script url (#117)
georchestra · Jun 24, 2024 · acc22ce · acc22ce
2 parents d3507c9 + 216a0dd
commit acc22ce
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 46 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) {
@@ -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
@@ -6,56 +6,50 @@
     <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 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
@@ -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