git.iko.soy/typeable/oauth2-proxy
on master help sign in
Extract templates to separate files

This allows our users to easily copy the base templates should they wish to make changes to them

commit756d3851547a4cf45000d3597e716ede7b92296e authorJoel Speed <joel.speed@hotmail.co.uk> dateWed 17 Feb 2021, 21:00 (6 years ago) parent5fe947e
3 files changed+197−190
pkg/app/pagewriter/error.html+100 pkg/app/pagewriter/sign_in.html+89 pkg/app/pagewriter/templates.go+8−190
pkg/app/pagewriter/error.htmlnew file+100
@@ -0,0 +1,100 @@
1+{{define "error.html"}}
2+<!DOCTYPE html>
3+<html lang="en" charset="utf-8">
4+<head>
5+<meta charset="utf-8">
6+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7+ <title>{{.StatusCode}} {{.Title}}</title>
8+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
9+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
10+
11+<script type="text/javascript">
12+ document.addEventListener('DOMContentLoaded', function() {
13+ let cardToggles = document.getElementsByClassName('card-toggle');
14+ for (let i = 0; i < cardToggles.length; i++) {
15+ cardToggles[i].addEventListener('click', e => {
16+ e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
17+ });
18+ }
19+ });
20+</script>
21+
22+<style>
23+ body {
24+ height: 100vh;
25+ }
26+ .error-box {
27+ margin: 1.25rem auto;
28+ max-width: 600px;
29+ }
30+ .status-code {
31+ font-size: 12rem;
32+ font-weight: 600;
33+ }
34+ #more-info.card {
35+ border: 1px solid #f0f0f0;
36+ }
37+ footer a {
38+ text-decoration: underline;
39+ }
40+</style>
41+</head>
42+<body class="has-background-light">
43+<section class="section">
44+ <div class="box block error-box has-text-centered">
45+ <div class="status-code">{{.StatusCode}}</div>
46+ <div class="block">
47+ <h1 class="subtitle is-1">{{.Title}}</h1>
48+ </div>
49+
50+ {{ if .Message }}
51+ <div id="more-info" class="block card is-fullwidth is-shadowless">
52+ <header class="card-header is-shadowless">
53+ <p class="card-header-title">More Info</p>
54+ <a class="card-header-icon card-toggle">
55+ <i class="fa fa-angle-down"></i>
56+ </a>
57+ </header>
58+ <div class="card-content has-text-left is-hidden">
59+ <div class="content">
60+ {{.Message}}
61+ </div>
62+ </div>
63+ </div>
64+ {{ end }}
65+
66+ {{ if .Redirect }}
67+ <hr>
68+
69+ <div class="columns">
70+ <div class="column">
71+ <form method="GET" action="{{.Redirect}}">
72+ <button type="submit" class="button is-danger is-fullwidth">Go back</button>
73+ </form>
74+ </div>
75+ <div class="column">
76+ <form method="GET" action="{{.ProxyPrefix}}/sign_in">
77+ <input type="hidden" name="rd" value="{{.Redirect}}">
78+ <button type="submit" class="button is-primary is-fullwidth">Sign in</button>
79+ </form>
80+ </div>
81+ </div>
82+ {{ end }}
83+
84+ </div>
85+</section>
86+
87+<footer class="footer has-text-grey has-background-light is-size-7">
88+ <div class="content has-text-centered">
89+ {{ if eq .Footer "-" }}
90+ {{ else if eq .Footer ""}}
91+ <p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
92+ {{ else }}
93+ <p>{{.Footer}}</p>
94+ {{ end }}
95+ </div>
96+</footer>
97+
98+</body>
99+</html>
100+{{end}}
pkg/app/pagewriter/sign_in.htmlnew file+89
@@ -0,0 +1,89 @@
1+{{define "sign_in.html"}}
2+<!DOCTYPE html>
3+<html lang="en" charset="utf-8">
4+ <head>
5+ <meta charset="utf-8">
6+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7+ <title>Sign In</title>
8+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
9+
10+ <style>
11+ body {
12+ height: 100vh;
13+ }
14+ .sign-in-box {
15+ max-width: 400px;
16+ margin: 1.25rem auto;
17+ }
18+ footer a {
19+ text-decoration: underline;
20+ }
21+ </style>
22+
23+ <script>
24+ if (window.location.hash) {
25+ (function() {
26+ var inputs = document.getElementsByName('rd');
27+ for (var i = 0; i < inputs.length; i++) {
28+ // Add hash, but make sure it is only added once
29+ var idx = inputs[i].value.indexOf('#');
30+ if (idx >= 0) {
31+ // Remove existing hash from URL
32+ inputs[i].value = inputs[i].value.substr(0, idx);
33+ }
34+ inputs[i].value += window.location.hash;
35+ }
36+ })();
37+ }
38+ </script>
39+ </head>
40+ <body class="has-background-light">
41+ <section class="section">
42+ <div class="box block sign-in-box has-text-centered">
43+ <form method="GET" action="{{.ProxyPrefix}}/start">
44+ <input type="hidden" name="rd" value="{{.Redirect}}">
45+ {{ if .SignInMessage }}
46+ <p class="block">{{.SignInMessage}}</p>
47+ {{ end}}
48+ <button type="submit" class="button block is-primary">Sign in with {{.ProviderName}}</button>
49+ </form>
50+
51+ {{ if .CustomLogin }}
52+ <hr>
53+
54+ <form method="POST" action="{{.ProxyPrefix}}/sign_in" class="block">
55+ <input type="hidden" name="rd" value="{{.Redirect}}">
56+
57+ <div class="field">
58+ <label class="label" for="username">Username</label>
59+ <div class="control">
60+ <input class="input" type="email" placeholder="e.g. userx@example.com" name="username" id="username">
61+ </div>
62+ </div>
63+
64+ <div class="field">
65+ <label class="label" for="password">Password</label>
66+ <div class="control">
67+ <input class="input" type="password" placeholder="********" name="password" id="password">
68+ </div>
69+ </div>
70+ <button class="button is-primary">Sign in</button>
71+ {{ end }}
72+ </form>
73+ </div>
74+ </section>
75+
76+ <footer class="footer has-text-grey has-background-light is-size-7">
77+ <div class="content has-text-centered">
78+ {{ if eq .Footer "-" }}
79+ {{ else if eq .Footer ""}}
80+ <p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
81+ {{ else }}
82+ <p>{{.Footer}}</p>
83+ {{ end }}
84+ </div>
85+ </footer>
86+
87+ </body>
88+</html>
89+{{end}}
pkg/app/pagewriter/templates.go+8−190
@@ -1,6 +1,9 @@
11package pagewriter
22
33import (
4+ // Import embed to allow importing default page templates
5+ _ "embed"
6+
47 "fmt"
58 "html/template"
69 "os"
@@ -13,198 +16,13 @@ import (
1316const (
1417 errorTemplateName = "error.html"
1518 signInTemplateName = "sign_in.html"
19+)
1620
17− defaultErrorTemplate = `{{define "error.html"}}
18−<!DOCTYPE html>
19−<html lang="en" charset="utf-8">
20−<head>
21− <meta charset="utf-8">
22− <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
23− <title>{{.StatusCode}} {{.Title}}</title>
24− <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
25− <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
26−
27− <script type="text/javascript">
28− document.addEventListener('DOMContentLoaded', function() {
29− let cardToggles = document.getElementsByClassName('card-toggle');
30− for (let i = 0; i < cardToggles.length; i++) {
31− cardToggles[i].addEventListener('click', e => {
32− e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
33− });
34− }
35− });
36− </script>
37−
38− <style>
39− body {
40− height: 100vh;
41− }
42− .error-box {
43− margin: 1.25rem auto;
44− max-width: 600px;
45− }
46− .status-code {
47− font-size: 12rem;
48− font-weight: 600;
49− }
50− #more-info.card {
51− border: 1px solid #f0f0f0;
52− }
53− footer a {
54− text-decoration: underline;
55− }
56− </style>
57−</head>
58−<body class="has-background-light">
59− <section class="section">
60− <div class="box block error-box has-text-centered">
61− <div class="status-code">{{.StatusCode}}</div>
62− <div class="block">
63− <h1 class="subtitle is-1">{{.Title}}</h1>
64− </div>
65−
66− {{ if .Message }}
67− <div id="more-info" class="block card is-fullwidth is-shadowless">
68− <header class="card-header is-shadowless">
69− <p class="card-header-title">More Info</p>
70− <a class="card-header-icon card-toggle">
71− <i class="fa fa-angle-down"></i>
72− </a>
73− </header>
74− <div class="card-content has-text-left is-hidden">
75− <div class="content">
76− {{.Message}}
77− </div>
78− </div>
79− </div>
80− {{ end }}
81−
82− {{ if .Redirect }}
83− <hr>
84−
85− <div class="columns">
86− <div class="column">
87− <form method="GET" action="{{.Redirect}}">
88− <button type="submit" class="button is-danger is-fullwidth">Go back</button>
89− </form>
90− </div>
91− <div class="column">
92− <form method="GET" action="{{.ProxyPrefix}}/sign_in">
93− <input type="hidden" name="rd" value="{{.Redirect}}">
94− <button type="submit" class="button is-primary is-fullwidth">Sign in</button>
95− </form>
96− </div>
97− </div>
98− {{ end }}
99−
100− </div>
101− </section>
102−
103− <footer class="footer has-text-grey has-background-light is-size-7">
104− <div class="content has-text-centered">
105− {{ if eq .Footer "-" }}
106− {{ else if eq .Footer ""}}
107− <p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
108− {{ else }}
109− <p>{{.Footer}}</p>
110− {{ end }}
111− </div>
112− </footer>
113−
114− </body>
115−</html>
116−{{end}}`
117−
118− defaultSignInTemplate = `{{define "sign_in.html"}}
119−<!DOCTYPE html>
120−<html lang="en" charset="utf-8">
121− <head>
122− <meta charset="utf-8">
123− <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
124− <title>Sign In</title>
125− <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
126−
127− <style>
128− body {
129− height: 100vh;
130− }
131− .sign-in-box {
132− max-width: 400px;
133− margin: 1.25rem auto;
134− }
135− footer a {
136− text-decoration: underline;
137− }
138− </style>
139−
140− <script>
141− if (window.location.hash) {
142− (function() {
143− var inputs = document.getElementsByName('rd');
144− for (var i = 0; i < inputs.length; i++) {
145− // Add hash, but make sure it is only added once
146− var idx = inputs[i].value.indexOf('#');
147− if (idx >= 0) {
148− // Remove existing hash from URL
149− inputs[i].value = inputs[i].value.substr(0, idx);
150− }
151− inputs[i].value += window.location.hash;
152− }
153− })();
154− }
155− </script>
156− </head>
157− <body class="has-background-light">
158− <section class="section">
159− <div class="box block sign-in-box has-text-centered">
160− <form method="GET" action="{{.ProxyPrefix}}/start">
161− <input type="hidden" name="rd" value="{{.Redirect}}">
162− {{ if .SignInMessage }}
163− <p class="block">{{.SignInMessage}}</p>
164− {{ end}}
165− <button type="submit" class="button block is-primary">Sign in with {{.ProviderName}}</button>
166− </form>
167−
168− {{ if .CustomLogin }}
169− <hr>
170−
171− <form method="POST" action="{{.ProxyPrefix}}/sign_in" class="block">
172− <input type="hidden" name="rd" value="{{.Redirect}}">
173−
174− <div class="field">
175− <label class="label" for="username">Username</label>
176− <div class="control">
177− <input class="input" type="email" placeholder="e.g. userx@example.com" name="username" id="username">
178− </div>
179− </div>
180−
181− <div class="field">
182− <label class="label" for="password">Password</label>
183− <div class="control">
184− <input class="input" type="password" placeholder="********" name="password" id="password">
185− </div>
186− </div>
187− <button class="button is-primary">Sign in</button>
188− {{ end }}
189− </form>
190− </div>
191− </section>
192−
193− <footer class="footer has-text-grey has-background-light is-size-7">
194− <div class="content has-text-centered">
195− {{ if eq .Footer "-" }}
196− {{ else if eq .Footer ""}}
197− <p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
198− {{ else }}
199− <p>{{.Footer}}</p>
200− {{ end }}
201− </div>
202− </footer>
21+//go:embed error.html
22+var defaultErrorTemplate string
20323
204− </body>
205−</html>
206−{{end}}`
207−)
24+//go:embed sign_in.html
25+var defaultSignInTemplate string
20826
20927// loadTemplates adds the Sign In and Error templates from the custom template
21028// directory, or uses the defaults if they do not exist or the custom directory