Skip to content

Commit

Permalink
feat: oauth2-proxy custom error page (#1758)
Browse files Browse the repository at this point in the history 
Co-authored-by: jeho <17126497+j-zimnowoda@users.noreply.github.com>
  • Loading branch information
@ferruhcihan @j-zimnowoda
ferruhcihan and j-zimnowoda authored Oct 15, 2024
1 parent fdbd80d commit fef95dd
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 0 deletions.
167 changes: 167 additions & 0 deletions values/oauth2-proxy/oauth2-proxy-raw.gotmpl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{{- $v := .Values }}
{{- $domain := printf "auth.%s" $v.cluster.domainSuffix }}
{{- $consoleUrl := printf "https://console.%s" $v.cluster.domainSuffix }}
{{- $cm := $v.apps | get "cert-manager" }}
{{- $name := $domain | replace "." "-" }}
{{- $ingress := $v.ingress.platformClass }}
Expand Down Expand Up @@ -46,3 +47,169 @@ resources:
- secretName: {{ $v._derived.tlsSecretName }}
hosts:
- '{{ $domain }}'
- apiVersion: v1
kind: ConfigMap
metadata:
name: oauth2-proxy-error-page
data:
error.html: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Redirect</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 280px;
width: 400px;
padding: 32px;
font-family: "Public Sans", sans-serif;
}
.logo {
box-sizing: border-box;
position: absolute;
height: 50px;
width: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
animation: logoAnimation 2s ease-in-out infinite;
}
@keyframes logoAnimation {
0%,
100% {
transform: scale(1);
opacity: 1;
}
25%,
75% {
transform: scale(0.9);
opacity: 0.48;
}
}
.circle1 {
position: absolute;
border-radius: 25%;
width: 100px;
height: 100px;
border: solid 4px rgba(16, 57, 150, 0.24);
animation: circle1Animation 3.2s linear infinite;
top: calc(50% - 52px);
left: calc(50% - 52px);
}
@keyframes circle1Animation {
0%,
100% {
transform: scale(1.2) rotate(270deg);
opacity: 0.25;
border-radius: 25%;
}
25%,
75% {
transform: scale(1) rotate(0deg);
opacity: 1;
border-radius: 50%;
}
}
.circle2 {
position: absolute;
border-radius: 25%;
width: 120px;
height: 120px;
border: solid 8px rgba(16, 57, 150, 0.24);
animation: circle2Animation 3.2s linear infinite;
top: calc(50% - 66px);
left: calc(50% - 66px);
}
@keyframes circle2Animation {
0%,
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
border-radius: 25%;
}
25%,
75% {
transform: scale(1.2) rotate(270deg);
opacity: 0.25;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div>You are being redirected to <strong>console</strong>...</div>
<div>If you don't wish to wait, <a href="{{ $consoleUrl }}">click here</a>.</div>
</div>
<div class="logo">
<svg
viewBox="0 0 100 108"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<title>Shape</title>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="akamai-logo-rgb"
transform="translate(0.600000, 0.700000)"
fill="#009CDE"
fillRule="nonzero"
>
<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"
/>
</g>
</g>
</svg>
</div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<script>
document.title = "Login Redirect";
document.body = document.createElement("body");
document.body.innerHTML =
'<div class="container">' +
'<div class="content">' +
"<div>You are being redirected to <strong>console</strong>...</div>" +
'<div>If you don\'t wish to wait, <a href="{{ $consoleUrl }}">click here</a>.</div>' +
"</div>" +
'<div class="logo">' +
'<svg viewBox="0 0 100 108" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
"<title>Shape</title>" +
'<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">' +
'<g id="akamai-logo-rgb" transform="translate(0.600000, 0.700000)" fill="#009CDE" fill-rule="nonzero">' +
'<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"/>' +
"</g>" +
"</g>" +
"</svg>" +
"</div>" +
'<div class="circle1"></div>' +
'<div class="circle2"></div>' +
"</div>";
window.location.href = "{{ $consoleUrl }}";
</script>
</body>
</html>


11 changes: 11 additions & 0 deletions values/oauth2-proxy/oauth2-proxy.gotmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,17 @@ extraArgs:
# - # oidc-issuer-url={{ $v._derived.oidcBaseUrlBackchannel }}
- --insecure-oidc-allow-unverified-email=true
- --show-debug-on-error=true
- --custom-templates-dir=/etc/oauth2-proxy

extraVolumes:
- name: error-page
configMap:
name: oauth2-proxy-error-page

extraVolumeMounts:
- name: error-page
mountPath: /etc/oauth2-proxy/error.html
subPath: error.html

{{- with .Values.otomi | get "globalPullSecret" nil }}
imagePullSecrets:
Expand Down

0 comments on commit fef95dd

Please sign in to comment.