1
0
mirror of https://github.com/oauth2-proxy/oauth2-proxy.git synced 2025-07-11 01:30:18 +02:00
Files
oauth2-proxy/pkg/app/pagewriter/error.html
Cory Bolar a02ab7c04e Embed static stylesheets and dependencies
Embedding css and webfont dependencies allows the application to present
itself correctly in an environment that does not allow downloading the
files from a cdn.

Inspiration taken from #1492 but reworked to make use of embed.FS
simplifying the approach.
2023-08-24 20:50:17 -04:00

108 lines
2.9 KiB
HTML

{{define "error.html"}}
<!DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>{{.StatusCode}} {{.Title}}</title>
<link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/bulma.min.css">
<link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/all.min.css">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
let cardToggles = document.getElementsByClassName('card-toggle');
for (let i = 0; i < cardToggles.length; i++) {
cardToggles[i].addEventListener('click', e => {
e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
});
}
});
</script>
<style>
body {
height: 100vh;
}
.error-box {
margin: 1.25rem auto;
max-width: 600px;
}
.status-code {
font-size: 12rem;
font-weight: 600;
}
#more-info.card {
border: 1px solid #f0f0f0;
}
footer a {
text-decoration: underline;
}
</style>
</head>
<body class="has-background-light">
<section class="section">
<div class="box block error-box has-text-centered">
<div class="status-code">{{.StatusCode}}</div>
<div class="block">
<h1 class="subtitle is-1">{{.Title}}</h1>
</div>
{{ if or .Message .RequestID }}
<div id="more-info" class="block card is-fullwidth is-shadowless">
<header class="card-header is-shadowless">
<p class="card-header-title">More Info</p>
<a class="card-header-icon card-toggle">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content has-text-left is-hidden">
{{ if .Message }}
<div class="content">
{{.Message}}
</div>
{{ end }}
{{ if .RequestID }}
<div class="content">
Request ID: {{.RequestID}}
</div>
{{ end }}
</div>
</div>
{{ end }}
{{ if .Redirect }}
<hr>
<div class="columns">
<div class="column">
<form method="GET" action="{{.Redirect}}">
<button type="submit" class="button is-danger is-fullwidth">Go back</button>
</form>
</div>
<div class="column">
<form method="GET" action="{{.ProxyPrefix}}/sign_in">
<input type="hidden" name="rd" value="{{.Redirect}}">
<button type="submit" class="button is-primary is-fullwidth">Sign in</button>
</form>
</div>
</div>
{{ end }}
</div>
</section>
<footer class="footer has-text-grey has-background-light is-size-7">
<div class="content has-text-centered">
{{ if eq .Footer "-" }}
{{ else if eq .Footer ""}}
<p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
{{ else }}
<p>{{.Footer}}</p>
{{ end }}
</div>
</footer>
</body>
</html>
{{end}}