Skip to content

Commit fef95dd

Browse files
ferruhcihanj-zimnowoda
ferruhcihan
and
j-zimnowoda
authored
feat: oauth2-proxy custom error page (#1758)
Co-authored-by: jeho <[email protected]>
1 parent fdbd80d commit fef95dd

File tree

2 files changed

+178
-0
lines changed

2 files changed

+178
-0
lines changed

‎values/oauth2-proxy/oauth2-proxy-raw.gotmpl

+167
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{- $v := .Values }}
22
{{- $domain := printf "auth.%s" $v.cluster.domainSuffix }}
3+
{{- $consoleUrl := printf "https://console.%s" $v.cluster.domainSuffix }}
34
{{- $cm := $v.apps | get "cert-manager" }}
45
{{- $name := $domain | replace "." "-" }}
56
{{- $ingress := $v.ingress.platformClass }}
@@ -46,3 +47,169 @@ resources:
4647
- secretName: {{ $v._derived.tlsSecretName }}
4748
hosts:
4849
- '{{ $domain }}'
50+
- apiVersion: v1
51+
kind: ConfigMap
52+
metadata:
53+
name: oauth2-proxy-error-page
54+
data:
55+
error.html: |
56+
<!DOCTYPE html>
57+
<html lang="en">
58+
<head>
59+
<meta charset="UTF-8" />
60+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
61+
<title>Login Redirect</title>
62+
<style>
63+
.container {
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
height: 100vh;
68+
position: relative;
69+
}
70+
.content {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
justify-content: space-between;
75+
height: 280px;
76+
width: 400px;
77+
padding: 32px;
78+
font-family: "Public Sans", sans-serif;
79+
}
80+
.logo {
81+
box-sizing: border-box;
82+
position: absolute;
83+
height: 50px;
84+
width: 50px;
85+
top: calc(50% - 25px);
86+
left: calc(50% - 25px);
87+
animation: logoAnimation 2s ease-in-out infinite;
88+
}
89+
@keyframes logoAnimation {
90+
0%,
91+
100% {
92+
transform: scale(1);
93+
opacity: 1;
94+
}
95+
25%,
96+
75% {
97+
transform: scale(0.9);
98+
opacity: 0.48;
99+
}
100+
}
101+
.circle1 {
102+
position: absolute;
103+
border-radius: 25%;
104+
width: 100px;
105+
height: 100px;
106+
border: solid 4px rgba(16, 57, 150, 0.24);
107+
animation: circle1Animation 3.2s linear infinite;
108+
top: calc(50% - 52px);
109+
left: calc(50% - 52px);
110+
}
111+
@keyframes circle1Animation {
112+
0%,
113+
100% {
114+
transform: scale(1.2) rotate(270deg);
115+
opacity: 0.25;
116+
border-radius: 25%;
117+
}
118+
25%,
119+
75% {
120+
transform: scale(1) rotate(0deg);
121+
opacity: 1;
122+
border-radius: 50%;
123+
}
124+
}
125+
.circle2 {
126+
position: absolute;
127+
border-radius: 25%;
128+
width: 120px;
129+
height: 120px;
130+
border: solid 8px rgba(16, 57, 150, 0.24);
131+
animation: circle2Animation 3.2s linear infinite;
132+
top: calc(50% - 66px);
133+
left: calc(50% - 66px);
134+
}
135+
@keyframes circle2Animation {
136+
0%,
137+
100% {
138+
transform: scale(1) rotate(0deg);
139+
opacity: 1;
140+
border-radius: 25%;
141+
}
142+
25%,
143+
75% {
144+
transform: scale(1.2) rotate(270deg);
145+
opacity: 0.25;
146+
border-radius: 50%;
147+
}
148+
}
149+
</style>
150+
</head>
151+
<body>
152+
<div class="container">
153+
<div class="content">
154+
<div>You are being redirected to <strong>console</strong>...</div>
155+
<div>If you don't wish to wait, <a href="{{ $consoleUrl }}">click here</a>.</div>
156+
</div>
157+
<div class="logo">
158+
<svg
159+
viewBox="0 0 100 108"
160+
version="1.1"
161+
xmlns="http://www.w3.org/2000/svg"
162+
>
163+
<title>Shape</title>
164+
<g
165+
id="Page-1"
166+
stroke="none"
167+
strokeWidth="1"
168+
fill="none"
169+
fillRule="evenodd"
170+
>
171+
<g
172+
id="akamai-logo-rgb"
173+
transform="translate(0.600000, 0.700000)"
174+
fill="#009CDE"
175+
fillRule="nonzero"
176+
>
177+
<path
178+
d="M54.5,104.8 C57,105.6 56.9,107.2 54.1,107.2 C24.3,107.2 0,83.2 0,53.6 C0,24 24.2,0 54.1,0 C56.9,0 57.5,1.5 55.2,2.2 C32.8,8.6 16.4,29.2 16.4,53.6 C16.4,77.7 32.4,98.1 54.5,104.8 M26.6,66.1 C26.5,64.7 26.4,63.2 26.4,61.7 C26.4,38.2 45.5,19.1 69,19.1 C91.2,19.1 97.9,29 98.7,28.4 C99.6,27.7 90.6,8 64.5,8 C41,8 21.9,27.1 21.9,50.6 C21.9,56 22.9,61.2 24.8,66 C25.6,68 26.8,68.1 26.6,66.1 M44.5,35.4 C55.6,30.6 69.5,30.4 83.1,35.2 C92.3,38.4 97.6,43 98,42.8 C98.7,42.5 92.7,32.9 81.7,28.7 C68.4,23.7 54.2,26.3 43.8,34.5 C42.7,35.4 43.1,36 44.5,35.4"
179+
id="Shape"
180+
/>
181+
</g>
182+
</g>
183+
</svg>
184+
</div>
185+
<div class="circle1"></div>
186+
<div class="circle2"></div>
187+
</div>
188+
<script>
189+
document.title = "Login Redirect";
190+
document.body = document.createElement("body");
191+
document.body.innerHTML =
192+
'<div class="container">' +
193+
'<div class="content">' +
194+
"<div>You are being redirected to <strong>console</strong>...</div>" +
195+
'<div>If you don\'t wish to wait, <a href="{{ $consoleUrl }}">click here</a>.</div>' +
196+
"</div>" +
197+
'<div class="logo">' +
198+
'<svg viewBox="0 0 100 108" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
199+
"<title>Shape</title>" +
200+
'<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">' +
201+
'<g id="akamai-logo-rgb" transform="translate(0.600000, 0.700000)" fill="#009CDE" fill-rule="nonzero">' +
202+
'<path d="M54.5,104.8 C57,105.6 56.9,107.2 54.1,107.2 C24.3,107.2 0,83.2 0,53.6 C0,24 24.2,0 54.1,0 C56.9,0 57.5,1.5 55.2,2.2 C32.8,8.6 16.4,29.2 16.4,53.6 C16.4,77.7 32.4,98.1 54.5,104.8 M26.6,66.1 C26.5,64.7 26.4,63.2 26.4,61.7 C26.4,38.2 45.5,19.1 69,19.1 C91.2,19.1 97.9,29 98.7,28.4 C99.6,27.7 90.6,8 64.5,8 C41,8 21.9,27.1 21.9,50.6 C21.9,56 22.9,61.2 24.8,66 C25.6,68 26.8,68.1 26.6,66.1 M44.5,35.4 C55.6,30.6 69.5,30.4 83.1,35.2 C92.3,38.4 97.6,43 98,42.8 C98.7,42.5 92.7,32.9 81.7,28.7 C68.4,23.7 54.2,26.3 43.8,34.5 C42.7,35.4 43.1,36 44.5,35.4" id="Shape"/>' +
203+
"</g>" +
204+
"</g>" +
205+
"</svg>" +
206+
"</div>" +
207+
'<div class="circle1"></div>' +
208+
'<div class="circle2"></div>' +
209+
"</div>";
210+
window.location.href = "{{ $consoleUrl }}";
211+
</script>
212+
</body>
213+
</html>
214+
215+

‎values/oauth2-proxy/oauth2-proxy.gotmpl

+11
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,17 @@ extraArgs:
7070
# - # oidc-issuer-url={{ $v._derived.oidcBaseUrlBackchannel }}
7171
- --insecure-oidc-allow-unverified-email=true
7272
- --show-debug-on-error=true
73+
- --custom-templates-dir=/etc/oauth2-proxy
74+
75+
extraVolumes:
76+
- name: error-page
77+
configMap:
78+
name: oauth2-proxy-error-page
79+
80+
extraVolumeMounts:
81+
- name: error-page
82+
mountPath: /etc/oauth2-proxy/error.html
83+
subPath: error.html
7384

7485
{{- with .Values.otomi | get "globalPullSecret" nil }}
7586
imagePullSecrets:

0 commit comments

Comments
 (0)