git.iko.soy/typeable/oauth2-proxy
on master help sign in
Extract templates to separate files
756d385Joel Speed
pkg/app/pagewriter/error.htmlnew file+100
compare with master
unifiedsplit
@@ -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 @@
1package pagewriter
1package pagewriter
2
2
3import (
3import (
4+ // Import embed to allow importing default page templates
5+ _ "embed"
6+
4 "fmt"
7 "fmt"
5 "html/template"
8 "html/template"
6 "os"
9 "os"
@@ -13,198 +16,13 @@ import (
13const (
16const (
14 errorTemplateName = "error.html"
17 errorTemplateName = "error.html"
15 signInTemplateName = "sign_in.html"
18 signInTemplateName = "sign_in.html"
19+)
16
20
21+//go:embed error.html
17− defaultErrorTemplate = `{{define "error.html"}}
22+var defaultErrorTemplate string
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>
203
23
204− </body>
24+//go:embed sign_in.html
205−</html>
25+var defaultSignInTemplate string
206−{{end}}`
207−)
208
26
209// loadTemplates adds the Sign In and Error templates from the custom template
27// loadTemplates adds the Sign In and Error templates from the custom template
210// directory, or uses the defaults if they do not exist or the custom directory
28// directory, or uses the defaults if they do not exist or the custom directory