Files
Maksim Nabokikh 6f2e233c7a feat: example app session refactoring (#4712)
Signed-off-by: maksim.nabokikh <max.nabokih@gmail.com>
2026-04-02 14:19:10 +02:00

94 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example App</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<img class="logo" src="{{.LogoURI}}" alt="Dex">
{{if .User}}
<div class="user-card">
<div class="user-card-title">Authenticated User</div>
<div class="user-info-grid">
{{if .User.PreferredUsername}}
<div class="user-info-label">Username:</div>
<div class="user-info-value">{{.User.PreferredUsername}}</div>
{{end}}
{{if .User.Name}}
<div class="user-info-label">Name:</div>
<div class="user-info-value">{{.User.Name}}</div>
{{end}}
{{if .User.Email}}
<div class="user-info-label">Email:</div>
<div class="user-info-value">{{.User.Email}}</div>
{{end}}
<div class="user-info-label">Subject:</div>
<div class="user-info-value user-info-sub">{{.User.Subject}}</div>
</div>
{{if .LogoutURL}}
<a href="{{.LogoutURL}}" class="logout-button">Logout</a>
{{end}}
</div>
{{else if .NotLoggedIn}}
<div class="guest-message">No active session. Log in to get started.</div>
{{end}}
<form id="login-form" action="/login" method="post">
<div class="app-description">
This is an example application for <b>Dex</b> OpenID Connect provider.<br>
Learn more in the <a href="https://dexidp.io/docs/" target="_blank">documentation</a>.
</div>
<div class="login-buttons">
<button type="submit" class="login-button primary-button">
Authorization Code Flow
</button>
<button type="button" id="device-grant-btn" class="login-button primary-button">
Device Code Flow
</button>
</div>
<details class="advanced">
<summary>Advanced options</summary>
<div class="field">
<label>Scopes:</label>
<small class="hint">Select OpenID Connect scopes to request. Standard scopes are pre-selected.</small>
<div class="scopes-list" id="scopes-list">
{{range .ScopesSupported}}
<div class="scope-item">
<input type="checkbox" name="extra_scopes" value="{{.}}" id="scope_{{.}}">
<label for="scope_{{.}}">{{.}}</label>
</div>
{{end}}
</div>
{{if eq (len .ScopesSupported) 0}}
<div class="hint">No scopes from discovery - add custom scopes below.</div>
{{end}}
<div class="inline-input">
<input type="text" id="custom_scope_input" placeholder="custom-scope">
<button type="button" id="add-custom-scope">Add scope</button>
</div>
</div>
<div class="field">
<label for="cross_client_input">Cross-Client auth:</label>
<small class="hint">Each client is sent as audience:server:client_id scope.</small>
<div id="cross-client-list"></div>
<div class="inline-input">
<input type="text" id="cross_client_input" placeholder="client-id">
<button type="button" id="add-cross-client">Add</button>
</div>
</div>
<div class="field">
<label for="connector_id">Connector:</label>
<small class="hint">Specify a connector ID to bypass the connector selection screen.</small>
<input type="text" id="connector_id" name="connector_id" placeholder="connector id">
</div>
</details>
</form>
</div>
<script src="/static/app.js"></script>
</body>
</html>