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

Customize error pages #152

Merged
merged 3 commits into from
Dec 4, 2024
Merged

Customize error pages #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30b7c43
feat: customize error pages
f-necas Dec 3, 2024
3583b0c
feat: add js file
f-necas Dec 3, 2024
b4837cc
feat: add a style-config entrypoint to expose datadir/georchestra sty…
f-necas Dec 3, 2024
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
9 changes: 9 additions & 0 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 @@ -151,6 +151,15 @@ public String loginPage(@RequestParam Map<String, String> allRequestParams, Mode
return "login";
}

@GetMapping(path = "/style-config", produces = "application/json")
@ResponseBody
public Mono<Map<String, Object>> styleConfig() {
Map<String, Object> ret = new LinkedHashMap<>();
ret.put("stylesheet", georchestraStylesheet);
ret.put("logo", logoUrl);
return Mono.just(ret);
}

@EventListener(ApplicationReadyEvent.class)
public void onApplicationReady(ApplicationReadyEvent e) {
Environment env = e.getApplicationContext().getEnvironment();
Expand Down
57 changes: 57 additions & 0 deletions gateway/src/main/resources/static/login/error.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
:root {
--georchestra: #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);
}
13 changes: 13 additions & 0 deletions gateway/src/main/resources/static/login/getConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
fetch("/style-config").then(res => {
if (res.ok) {
return res.json();
}
throw new Error("Gateway down")
}).then(json => {
if (json.stylesheet){
var styleSheet = document.createElement("style")
styleSheet.textContent = json.stylesheet
document.head.appendChild(styleSheet)
}

})
57 changes: 20 additions & 37 deletions gateway/src/main/resources/templates/error/403.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +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" />
<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>
<style type="text/css">
body {
background-color:#e6e6e6;
font-family:Calibri;
text-align:center;
}
#wrapper {
background:#fff;
width:492px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
border:3px solid #999;
overflow:hidden;
padding: 30px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
#wrapper p {
padding:5px;
}
</style>
</head>
<body lang=EN>
<div id="wrapper">
<img src="https://www.georchestra.org/public/logos/georchestra_logo.png" alt="geOrchestra" />
<p>Sorry, access to this page is forbidden. Return to the <a href="/">homepage</a>.</p>
</div>
</body>
</html>
<link href="login/error.css" rel="stylesheet"/>
<script src="login/getConfig.js"></script>
</head>
<body lang="EN">
<div id="wrapper">
<div class="error-code">403</div>
<img src="" alt="" style="display: none" id="error-img">
<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>

32 changes: 7 additions & 25 deletions gateway/src/main/resources/templates/error/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,16 @@
<meta name="robots" content="none" />
<meta name="googlebot" content="noarchive" />
<title>Page not found</title>
<style type="text/css">
body {
background-color:#e6e6e6;
font-family:Calibri;
text-align:center;
}
#wrapper {
background:#fff;
width:492px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
border:3px solid #999;
overflow:hidden;
padding: 30px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
#wrapper p {
padding:5px;
}
</style>
<link href="login/error.css" rel="stylesheet"/>
<script src="login/getConfig.js"></script>
</head>
<body lang=EN>
<div id="wrapper">
<img src="https://www.georchestra.org/public/logos/georchestra_logo.png" alt="geOrchestra" />
<p>Page not found. Return to the <a href="/">homepage</a>.</p>
<div class="error-code">404</div>
<img src="" alt="" style="display: none" id="error-img">
<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>
62 changes: 20 additions & 42 deletions gateway/src/main/resources/templates/error/500.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,24 @@
<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" />
<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>
<style type="text/css">
body {
background-color:#e6e6e6;
font-family:Calibri;
text-align:center;
}
#wrapper {
background:#fff;
width:492px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
border:3px solid #999;
overflow:hidden;
padding: 30px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
#wrapper p {
padding:5px;
}
</style>
</head>
<body lang=FR>
<div id="wrapper">
<img src="https://www.georchestra.org/public/logos/georchestra_logo.png" alt="geOrchestra" />
<p>
<link href="login/error.css" rel="stylesheet"/>
<script src="login/getConfig.js"></script>
</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>Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
<script>
window.setTimeout(function() {window.location.href = window.location.href}, 5000);
</script>
</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>
62 changes: 20 additions & 42 deletions gateway/src/main/resources/templates/error/501.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,24 @@
<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" />
<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>
<style type="text/css">
body {
background-color:#e6e6e6;
font-family:Calibri;
text-align:center;
}
#wrapper {
background:#fff;
width:492px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
border:3px solid #999;
overflow:hidden;
padding: 30px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
#wrapper p {
padding:5px;
}
</style>
</head>
<body lang=FR>
<div id="wrapper">
<img src="https://www.georchestra.org/public/logos/georchestra_logo.png" alt="geOrchestra" />
<p>
<link href="login/error.css" rel="stylesheet"/>
<script src="login/getConfig.js"></script>
</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>Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
<script>
window.setTimeout(function() {window.location.href = window.location.href}, 5000);
</script>
</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>
62 changes: 20 additions & 42 deletions gateway/src/main/resources/templates/error/503.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,24 @@
<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" />
<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>
<style type="text/css">
body {
background-color:#e6e6e6;
font-family:Calibri;
text-align:center;
}
#wrapper {
background:#fff;
width:492px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
border:3px solid #999;
overflow:hidden;
padding: 30px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
#wrapper p {
padding:5px;
}
</style>
</head>
<body lang=FR>
<div id="wrapper">
<img src="https://www.georchestra.org/public/logos/georchestra_logo.png" alt="geOrchestra" />
<p>
<link href="login/error.css" rel="stylesheet"/>
<script src="login/getConfig.js"></script>
</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>Hint: do not close the tab - the requested page will show up in a few seconds.</p>
</div>
</body>
<script>
window.setTimeout(function() {window.location.href = window.location.href}, 5000);
</script>
</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>
Loading