Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

login - do not hardcode header's script url (#117) #118

Merged
merged 1 commit into from
Jun 24, 2024
Merged

login - do not hardcode header's script url (#117) #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions docs/ui-customization.adoc
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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=georchestra@georchestra-127-0-1-1.traefik.me
### PostgreSQL properties
pgsqlHost=database
Expand Down
Loading