Skip to content

#426 gateway - Add UI customization part #468

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

Open
Gaetanbrl wants to merge 2 commits into
base: master
Choose a base branch
from
Open

#426 gateway - Add UI customization part #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28d8bdd
gateway - Add UI customization part
Gaetanbrl Nov 6, 2025
7fbb228
use georchestra's color
Gaetanbrl Nov 6, 2025
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
17 changes: 17 additions & 0 deletions gateway/application.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,20 @@ spring:
filter:
secure-headers:
referrer-policy: strict-origin

#####
# Uncomment and adapt to use UI customization.
# See documentation :
# https://docs.georchestra.org/gateway/en/latest/user_guide/ui_customization/?h=thy#main-principles
#
# WARN : if enable, don't forget to adapt path in /templates and /static files.
#
#####
# thymeleaf:
# prefix: file:${georchestra.datadir}/gateway/templates/
# web:
# resources:
# static-locations: file:${georchestra.datadir}/gateway/templates/static/
Copy link
Contributor

@f-necas f-necas Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the comment I wrote in : georchestra/georchestra-gateway#235 (review)

You can set up static-locations: file:/etc/georchestra/gateway/static/, classpath:/static/. With this line, resources willl be fetched from datadir first and then fallback into classpath:/static/

Copy link
Contributor

@f-necas f-necas Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# static-locations: file:${georchestra.datadir}/gateway/templates/static/
# In order to import your resources, create a folder /etc/georchestra/gateway/static/ and put them inside. e.g. If you create /etc/georchestra/gateway/static/img/myimg.png, your resource will be available on <your domain>/img/myimg.png
# static-locations: file:/etc/georchestra/gateway/static/, classpath:/static/

# webflux:
# static-path-pattern: /static/**
Copy link
Contributor

@f-necas f-necas Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not mandatory by default it's /.

It just change the path in url with prefixing it, but folder hierarchy may resolve this. By now, resources are fetched only from classpath:/static/ and the folder hirearchy inside is everything under /login.

So by default, we can resolve static resources with the url /login/error.css or /login/img/default.png

If you set # static-path-pattern: /static/**, urls will be /static/login/error.css or /static/login/img/default.png.

Copy link
Contributor

@f-necas f-necas Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# static-path-pattern: /static/**
# Change this line if you want to set a "base path" to your static resources
# static-path-pattern: /static/** # <- your resource will be available with a /static/ prefix

#####
22 changes: 22 additions & 0 deletions gateway/templates/error/403.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="robots" content="none"/>
<meta name="googlebot" content="noarchive"/>
<title>Access forbidden</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang="EN">
<div id="wrapper">
<div class="error-code">403</div>
<p class="error-desc">Forbidden</p>
<p>Sorry, access to this page is forbidden.</p>
<a href="/" class="error-back">Return to the homepage</a>
</div>
</body>
</html>

21 changes: 21 additions & 0 deletions gateway/templates/error/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="none" />
<meta name="googlebot" content="noarchive" />
<title>Page not found</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang=EN>
<div id="wrapper">
<div class="error-code">404</div>
<p class="error-desc">Page not found</p>
<p>Sorry the page you requested doesn't exist.</p>
<a href="/" class="error-back">Return to the homepage</a>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions gateway/templates/error/500.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="robots" content="none"/>
<meta name="googlebot" content="noarchive"/>
<meta http-equiv="refresh" content="5">
<title>Site in maintenance</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang=EN>
<div id="wrapper">
<div class="error-code">500</div>
<p class="error-desc">Site in maintenance</p>
<p>
Due to maintenance, this service is temporarily unavailable.
</p>
<p>We're sorry for the inconvenience !</p>
<p class="error-hint">Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions gateway/templates/error/501.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="robots" content="none"/>
<meta name="googlebot" content="noarchive"/>
<meta http-equiv="refresh" content="5">
<title>Site in maintenance</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang=EN>
<div id="wrapper">
<div class="error-code">501</div>
<p class="error-desc">Site in maintenance</p>
<p>
Due to maintenance, this service is temporarily unavailable.
</p>
<p>We're sorry for the inconvenience !</p>
<p class="error-hint">Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions gateway/templates/error/503.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="robots" content="none"/>
<meta name="googlebot" content="noarchive"/>
<meta http-equiv="refresh" content="5">
<title>Site in maintenance</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang=EN>
<div id="wrapper">
<div class="error-code">503</div>
<p class="error-desc">Site in maintenance</p>
<p>
Due to maintenance, this service is temporarily unavailable.
</p>
<p>We're sorry for the inconvenience !</p>
<p class="error-hint">Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions gateway/templates/error/generic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="robots" content="none"/>
<meta name="googlebot" content="noarchive"/>
<title>Access forbidden</title>
<link href="/login/error.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body lang="EN">
<div id="wrapper">
<div class="error-code">Oops</div>
<p class="error-desc">An error has occurred</p>
<p>Please ask an administrator of the platform.</p>
<a href="/" class="error-back">Return to the homepage</a>
</div>
</body>
</html>

99 changes: 99 additions & 0 deletions gateway/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Please sign in</title>
<script th:src="${headerScript}"></script>
<link href="login/bootstrap5.min.css?v5.3.3" rel="stylesheet">
<link href="login/signin.css" rel="stylesheet"/>
<link th:if="${georchestraStylesheet != null and !#strings.isEmpty(georchestraStylesheet)}"
th:href="${georchestraStylesheet}" rel="stylesheet"/>
</head>
<body class="d-flex flex-column" id="georchestra-login-page">
<header th:if="${headerEnabled}">
<geor-header th:stylesheet="${georchestraStylesheet}" th:legacy-header="${useLegacyHeader}" th:legacy-url="${headerUrl}" th:logo-url="${logoUrl}"
th:height="${headerHeight}" th:config-file="${headerConfigFile}"></geor-header>
</header>
<div class="container h-100 py-4 px-3">
<div class="d-flex justify-content-center align-items-center rounded-5 h-100">
<div class="row h-100 rounded-lg w-100">
<div class="col p-0 d-none d-md-block" id="login-left-col">
<div class="bg-transparent w-100 h-100 flex align-items-center justify-content-center">
<div class="h-100 w-100 text-white rounded-5" style="background: url('login/img/login.webp')" id="login-left-img">
</div>
</div>
</div>
<div class="col d-flex flex-column align-items-center justify-content-between bg-white py-5">
<a href="/" class="d-flex align-items-center justify-content-center" th:if="${not headerEnabled}">
<img th:src="${logoUrl}" alt="" width="200" height="72">
</a>
<form class="form-signin" method="post" action="/login" th:if="${ldapEnabled}">
<h2 class="form-signin-heading"><span th:text="#{login_message_title}"/></h2>
<h4 class="fs-6 fw-light"><span th:text="#{login_message_subtitle}"/></h4>
<div class="my-4 text-danger text-center"
th:if="${invalidCredentials or passwordExpired or duplicateAccount} ">
<div th:if="${invalidCredentials}"><span th:text="#{invalid_credentials}"></span></div>
<div th:if="${passwordExpired}"><span th:text="#{expired_password}"></span>
<a href="/console/account/passwordRecovery"> <span
th:text="#{expired_password_link}"></span> </a>
</div>
<div th:if="${duplicateAccount}"><span th:text="#{duplicate_account}"></span></div>
</div>
<p class="my-4">
<label for="username" class="sr-only fs-7"><span th:text="#{username}"></span></label>
<input type="text" id="username" name="username" class="form-control"
th:placeholder="#{username}" required autofocus>
</p>
<p class="my-4">
<label for="password" class="sr-only fs-7"><span th:text="#{password}"></span></label>
<input type="password" id="password" name="password" class="form-control"
th:placeholder="#{password}" required>
</p>
<div class="d-flex justify-content-end my-4 fs-7">
<a href="/console/account/passwordRecovery">
<span th:text="#{forget_password}"></span>
</a>
</div>

<button class="btn btn-primary btn-block mb-2 w-100" type="submit"><span th:text="#{login}"></span>
</button>
<div th:if="${oauth2LoginLinks.size() != 0}" class="container">
<div class="separator" th:text="#{separator_login}"></div>
<div class="d-flex align-items-center justify-content-evenly my-3">
<div class="bg-light border p-2 rounded btn-oauth2" th:each="oauth2Client : ${oauth2LoginLinks}">
<a th:href="${oauth2Client.key}" th:title="${oauth2Client.value.left}">
<img th:src="${oauth2Client.value.right}" th:alt="${oauth2Client.value.left}" width="24" height="24" th:class="${oauth2Client.value.left}">
</a>
</div>
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<span th:text="#{register_no_account}"></span>
<span>&nbsp;</span>
<a href="/console/account/new">
<span th:text="#{register}"></span>
</a>

</div>
</form>

<div class="h-auto d-flex justify-content-start w-100">
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" style="height: 24px">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
</svg>
<span th:text="#{back_home}"></span>
</a>
</div>
</div>
</div>
</div>


</div>
</body>
</html>
Binary file added gateway/templates/static/favicon.ico
View file
Open in desktop
Binary file not shown.
6 changes: 6 additions & 0 deletions gateway/templates/static/login/bootstrap5.min.css
View file
Open in desktop

Large diffs are not rendered by default.

58 changes: 58 additions & 0 deletions gateway/templates/static/login/error.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
:root {
--georchestra: var(--georchestra-primary, #85127e);
--google: #4285F4;
}

html, body{
padding: 0;
margin: 0;
font-family: Inter, sans-serif, Georgia, Cambria, "Times New Roman", Times, serif;
color: #333;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
p {
margin-top: 0;
}
.error-desc {
font-weight: bold;
font-size: 1.25rem;
}
.error-back {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
background: var(--georchestra);
padding: 8px 8px;
margin-top: 20px;
border-radius: 5px;
}
.error-back:hover {
background: color-mix(in srgb,var(--georchestra),#000 25%);
}
#error-img {
max-height: 200px;
max-width: 50vw;
}
.error-code{
font-size: 15rem;
font-weight: bold;
background-image: linear-gradient(180deg, color-mix(in srgb,var(--georchestra),#fff 40%), color-mix(in srgb,var(--georchestra),#fff 95%));
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.error-hint {
font-size: 1rem;
font-weight: 500;
color: var(--georchestra);
}
Binary file added gateway/templates/static/login/img/default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gateway/templates/static/login/img/github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gateway/templates/static/login/img/google.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gateway/templates/static/login/img/login.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gateway/templates/static/login/img/proconnect.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading