{{define "content"}}
{{if .User}}
<div class="card" id="signed-in-card">
    <div class="card-title">Signed in</div>
    <div class="kv">
        {{if .User.Name}}<div class="k">Name</div><div class="v">{{.User.Name}}</div>{{end}}
        {{if .User.Email}}<div class="k">Email</div><div class="v">{{.User.Email}}</div>{{end}}
        <div class="k">Subject</div><div class="v mono">{{.User.Subject}}</div>
        {{if .User.SessionID}}<div class="k">Session (sid)</div><div class="v mono">{{.User.SessionID}}</div>{{end}}
        {{with .Token}}
        <div class="k">Access token</div><div class="v mono">{{.AccessToken}}</div>
        {{if .Expiry}}<div class="k">Expires</div><div class="v">{{.Expiry}}{{if .Expired}} — expired, refreshing on next load{{end}}</div>{{end}}
        <div class="k">Refresh token</div><div class="v">{{if .RefreshToken}}held{{else}}none — request offline_access to get one{{end}}</div>
        {{end}}
    </div>
    <div class="form-actions">
        <a href="/tools" class="button">Inspect tokens</a>
        <a href="/logout" class="button button-secondary">Log out</a>
    </div>
    {{if .SessionCheck}}
    <p class="hint">Re-checked with the provider every {{.SessionCheck}} using prompt=none, so signing out of dex elsewhere ends this session too.</p>
    {{end}}
</div>
{{end}}
{{/* Rendered whichever way round, so a back-channel logout can swap the two
     without the page having to build markup the template already owns. */}}
<div class="card" id="signed-out-card"{{if .User}} hidden{{end}}>
    <div class="card-title">Not signed in</div>
    <p class="hint">
        The example client for <b>dex</b>. Pick a flow to run it and see what comes back.
        Configuration for each one is in the
        <a href="https://github.com/dexidp/dex/blob/master/examples/example-app/README.md" target="_blank" rel="noopener">README</a>.
    </p>
</div>

<div class="card">
    <div class="card-title">Flows through the browser</div>
    <ul class="flows">
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Authorization code{{if .PKCE}} with PKCE{{end}}</div>
                <div class="flow-desc">The one web applications use. Redirects to dex and comes back with a code.</div>
            </div>
            <form action="/login" method="post" id="login-form">
                <button type="submit" class="button button-primary">Run</button>
            </form>
        </li>
        {{if .DeviceSupported}}
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Device code</div>
                <div class="flow-desc">For input-constrained devices: shows a code to type in elsewhere while this page polls.</div>
            </div>
            <button type="button" id="device-grant-btn" class="button button-primary">Run</button>
        </li>
        {{end}}
    </ul>

    <details class="advanced">
        <summary>Authorization request options</summary>
        <p class="hint">These apply to both flows above.</p>
        <div class="form-row form-row--wide">
            <label>Scopes</label>
            <div class="form-control">
                <div class="scopes-list" id="scopes-list">
                    {{range .ScopesSupported}}
                    <div class="scope-item">
                        <input type="checkbox" name="extra_scopes" value="{{.}}" id="scope_{{.}}" form="login-form">
                        <label for="scope_{{.}}">{{.}}</label>
                    </div>
                    {{end}}
                </div>
                {{if eq (len .ScopesSupported) 0}}
                <small class="hint">The provider advertises no scopes — add them by hand.</small>
                {{end}}
                <div class="inline-input">
                    <input type="text" id="custom_scope_input" placeholder="custom-scope">
                    <button type="button" id="add-custom-scope" class="button button-small">Add</button>
                </div>
                <small class="hint">openid is always requested. offline_access is what gets you a refresh token.</small>
            </div>
        </div>
        <div class="form-row">
            <label for="cross_client_input">Cross-client audience</label>
            <div class="form-control">
                <div id="cross-client-list"></div>
                <div class="inline-input">
                    <input type="text" id="cross_client_input" placeholder="other-client-id">
                    <button type="button" id="add-cross-client" class="button button-small">Add</button>
                </div>
                <small class="hint">Sent as audience:server:client_id:&lt;id&gt;, which asks dex for a token another client will accept.</small>
            </div>
        </div>
        <div class="form-row">
            <label for="connector_id">Connector</label>
            <div class="form-control">
                <input type="text" id="connector_id" name="connector_id" placeholder="connector id" form="login-form">
                <small class="hint">Skips dex's connector selection screen.</small>
            </div>
        </div>
    </details>
</div>

<div class="card">
    <div class="card-title">Flows without a browser</div>
    <p class="hint">These call the token endpoint directly. Each one asks for its own parameters.</p>
    <ul class="flows">
        {{if .ClientCredentialsSupported}}
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Client credentials</div>
                <div class="flow-desc">A token for this application itself, with no user involved.</div>
            </div>
            <a href="/grant/client-credentials" class="button">Open</a>
        </li>
        {{end}}
        {{if .RefreshSupported}}
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Refresh</div>
                <div class="flow-desc">Redeems a refresh token for a new set.</div>
            </div>
            <a href="/grant/refresh" class="button">Open</a>
        </li>
        {{end}}
        {{if .TokenExchangeSupported}}
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Token exchange</div>
                <div class="flow-desc">RFC 8693. Trades a token from a connector for one issued by dex.</div>
            </div>
            <a href="/grant/token-exchange" class="button">Open</a>
        </li>
        {{end}}
        {{if .PasswordSupported}}
        <li class="flow">
            <div class="flow-text">
                <div class="flow-name">Password <span class="tag">deprecated</span></div>
                <div class="flow-desc">Sends a username and password to the token endpoint.</div>
            </div>
            <a href="/grant/password" class="button">Open</a>
        </li>
        {{end}}
    </ul>
    {{if not (or .ClientCredentialsSupported .RefreshSupported .TokenExchangeSupported .PasswordSupported)}}
    <p class="hint">The provider advertises none of these grants. oauth2.grantTypes in dex's config decides.</p>
    {{end}}
</div>
{{end}}