mirror
/
dex
mirror of https://github.com/dexidp/dex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add CSS for example app to make it prettier (#3886) 

Signed-off-by: maksim.nabokikh <max.nabokih@gmail.com>
pull/3887/head
Maksim Nabokikh 1 year ago committed by GitHub
parent
2476f0e96a
commit
00c0e28d65
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 322 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 371
      examples/example-app/templates.go

371
examples/example-app/templates.go
Unescape View File

@ -6,38 +6,225 @@ import (
"net/http"
)
const css = `
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.dex {
font-size: 2em;
font-weight: bold;
color: #3F9FD8; /* Main color */
}
.example-app {
font-size: 1em;
color: #EF4B5C; /* Secondary color */
}
.form-instructions {
text-align: center;
margin-bottom: 15px;
font-size: 1em;
color: #555;
}
hr {
border: none;
border-top: 1px solid #ccc;
margin-top: 10px;
margin-bottom: 20px;
}
label {
flex: 1;
font-weight: bold;
color: #333;
}
p {
margin-bottom: 15px;
display: flex;
align-items: center;
}
input[type="text"] {
flex: 2;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
input[type="checkbox"] {
margin-left: 10px;
transform: scale(1.2);
}
.back-button {
display: inline-block;
padding: 8px 16px;
background-color: #EF4B5C; /* Secondary color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed;
right: 20px;
bottom: 20px;
}
.back-button:hover {
background-color: #C43B4B; /* Darker shade of secondary color */
}
.token-block {
background-color: #fff;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
word-wrap: break-word;
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
}
.token-title {
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.token-title a {
font-size: 0.9em;
text-decoration: none;
color: #3F9FD8; /* Main color */
}
.token-title a:hover {
text-decoration: underline;
}
.token-code {
overflow-wrap: break-word;
word-break: break-all;
white-space: normal;
}
pre {
white-space: pre-wrap;
background-color: #f9f9f9;
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
margin: 0;
font-family: 'Courier New', Courier, monospace;
overflow-x: auto;
font-size: 0.9em;
position: relative;
margin-top: 5px;
}
pre .key {
color: #c00;
}
pre .string {
color: #080;
}
pre .number {
color: #00f;
}
`
var indexTmpl = template.Must(template.New("index.html").Parse(`<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example App - Login</title>
<style>
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
` + css + `
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #3F9FD8; /* Main color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #357FAA; /* Darker shade of main color */
}
</style>
</head>
<body>
</head>
<body>
<div class="header">
<div class="dex">Dex</div>
<div class="example-app">Example App</div>
</div>
<form action="/login" method="post">
<p>
<label> Authenticate for: </label>
<input type="text" name="cross_client" placeholder="list of client-ids">
</p>
<p>
<label>Extra scopes: </label>
<input type="text" name="extra_scopes" placeholder="list of scopes">
</p>
<p>
<label>Connector ID: </label>
<input type="text" name="connector_id" placeholder="connector id">
</p>
<p>
<label>Request offline access: </label>
<input type="checkbox" name="offline_access" value="yes" checked>
</p>
<p>
<input type="submit" value="Login">
</p>
<div class="form-instructions">
If needed, customize your login settings below, then click <strong>Login</strong> to proceed.
</div>
<hr/>
<p>
<label for="cross_client">Authenticate for:</label>
<input type="text" id="cross_client" name="cross_client" placeholder="list of client-ids">
</p>
<p>
<label for="extra_scopes">Extra scopes:</label>
<input type="text" id="extra_scopes" name="extra_scopes" placeholder="list of scopes">
</p>
<p>
<label for="connector_id">Connector ID:</label>
<input type="text" id="connector_id" name="connector_id" placeholder="connector id">
</p>
<p>
<label for="offline_access">Request offline access:</label>
<input type="checkbox" id="offline_access" name="offline_access" value="yes" checked>
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
</body>
</body>
</html>`))
func renderIndex(w http.ResponseWriter) {
@ -53,30 +240,116 @@ type tokenTmplData struct {
}
var tokenTmpl = template.Must(template.New("token.html").Parse(`<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tokens</title>
<style>
/* make pre wrap */
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
` + css + `
body {
color: #333;
margin: 0;
padding: 20px;
position: relative;
}
input[type="submit"] {
margin-top: 10px;
padding: 8px 16px;
background-color: #3F9FD8; /* Main color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #357FAA; /* Darker shade of main color */
}
</style>
</head>
<body>
<p> ID Token: <pre><code>{{ .IDToken }}</code></pre></p>
<p> Access Token: <pre><code>{{ .AccessToken }}</code></pre></p>
<p> Claims: <pre><code>{{ .Claims }}</code></pre></p>
{{ if .RefreshToken }}
<p> Refresh Token: <pre><code>{{ .RefreshToken }}</code></pre></p>
<form action="{{ .RedirectURL }}" method="post">
<input type="hidden" name="refresh_token" value="{{ .RefreshToken }}">
<input type="submit" value="Redeem refresh token">
</form>
{{ end }}
</body>
</head>
<body>
{{ if .IDToken }}
<div class="token-block">
<div class="token-title">
ID Token:
<a href="#" onclick="window.open('https://jwt.io/#debugger-io?token=' + encodeURIComponent('{{ .IDToken }}'), '_blank')">Decode on jwt.io</a>
</div>
<pre><code class="token-code">{{ .IDToken }}</code></pre>
</div>
{{ end }}
{{ if .AccessToken }}
<div class="token-block">
<div class="token-title">
Access Token:
<a href="#" onclick="window.open('https://jwt.io/#debugger-io?token=' + encodeURIComponent('{{ .AccessToken }}'), '_blank')">Decode on jwt.io</a>
</div>
<pre><code class="token-code">{{ .AccessToken }}</code></pre>
</div>
{{ end }}
{{ if .Claims }}
<div class="token-block">
<div class="token-title">Claims:</div>
<pre><code id="claims">{{ .Claims }}</code></pre>
</div>
{{ end }}
{{ if .RefreshToken }}
<div class="token-block">
<div class="token-title">Refresh Token:</div>
<pre><code class="token-code">{{ .RefreshToken }}</code></pre>
<form action="{{ .RedirectURL }}" method="post">
<input type="hidden" name="refresh_token" value="{{ .RefreshToken }}">
<input type="submit" value="Redeem refresh token">
</form>
</div>
{{ end }}
<a href="/" class="back-button">Back to Home</a>
<script>
// Simple JSON syntax highlighter
document.addEventListener("DOMContentLoaded", function() {
const claimsElement = document.getElementById("claims");
if (claimsElement) {
try {
const json = JSON.parse(claimsElement.textContent);
claimsElement.innerHTML = syntaxHighlight(json);
} catch (e) {
console.error("Invalid JSON in claims:", e);
}
}
});
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g, function (match) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</body>
</html>
`))

Write Preview
Loading…
Cancel
Save