Skip to content

Commit

Permalink
Merge pull request #118 from georchestra/header-use-property-from-dat…
Browse files Browse the repository at this point in the history 
…adir-117

login - do not hardcode header's script url (#117)
  • Loading branch information
@pmauduit
pmauduit authored Jun 24, 2024
2 parents d3507c9 + 216a0dd commit acc22ce
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 46 deletions.
38 changes: 38 additions & 0 deletions docs/ui-customization.adoc
View file
Original file line number Diff line number Diff line change
@@ -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
----
5 changes: 3 additions & 2 deletions gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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"));
Expand Down
82 changes: 38 additions & 44 deletions gateway/src/main/resources/templates/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions gateway/src/test/resources/test-datadir/default.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ instanceName=geOrchestra
language=en
headerHeight=90
headerUrl=/header/
headerScript=/public/header.js
administratorEmail=[email protected]
### PostgreSQL properties
pgsqlHost=database
Expand Down

0 comments on commit acc22ce

Please sign in to comment.