ContainerImage.Pinniped/internal/oidc/login/loginhtml/login_form.gohtml

<!--
Copyright 2022 the Pinniped contributors. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0

Notes:
- favicon data is from `base64 -i site/themes/pinniped/static/img/favicon.png`
- "role", "aria-*", and "alert" attributes are hints to screen readers
- Some structure and attributes used here are hints to password managers,
  see https://support.1password.com/compatible-website-design/
- Please take care when changing the HTML of this form,
  and test with a screen reader and password manager after changes

--><!DOCTYPE html>
<html lang="en">
<head>
    <title>Pinniped Login</title>
    <meta charset="UTF-8">
    <style>{{minifiedCSS}}</style>
    <link href="data:image/x-icon;base64,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
          rel="icon" type="image/x-icon"/>
</head>
<body>
<div class="box" aria-label="login form" role="main">
    <div class="form-field">
        <h1>Log in to {{.IDPName}}</h1>
    </div>
    {{if .HasAlertError}}
    <div class="form-field">
        <span class="alert" role="alert" aria-label="login error message" id="alert">{{.AlertMessage}}</span>
    </div>
    {{end}}
    <form action="{{.PostPath}}" method="post">
        <input type="hidden" name="state" id="state" value="{{.State}}">
        <div class="form-field">
            <label for="username"><span class="hidden" aria-hidden="true">Username</span></label>
            <input type="text" name="username" id="username"
                   autocomplete="username" placeholder="Username" required>
        </div>
        <div class="form-field">
            <label for="password"><span class="hidden" aria-hidden="true">Password</span></label>
            <input type="password" name="password" id="password"
                   autocomplete="current-password" placeholder="Password" required>
        </div>
        <div class="form-field">
            <input type="submit" name="submit" id="submit" value="Log in"/>
        </div>
    </form>
</div>
</body>
</html>
Login page styling/structure for users, screen readers, passwd managers Also: - Add CSS to login page - Refactor login page HTML and CSS into a new package - New custom CSP headers for the login page, because the requirements are different from the form_post page 2022-05-05 20:12:06 +00:00			`<!--`
			`Copyright 2022 the Pinniped contributors. All Rights Reserved.`
			`SPDX-License-Identifier: Apache-2.0`
Add Pinniped favicon to login UI page 🦭 2022-05-05 21:46:07 +00:00
			`Notes:`
			- favicon data is from `base64 -i site/themes/pinniped/static/img/favicon.png`
			`- "role", "aria-*", and "alert" attributes are hints to screen readers`
			`- Some structure and attributes used here are hints to password managers,`
			`see https://support.1password.com/compatible-website-design/`
			`- Please take care when changing the HTML of this form,`
			`and test with a screen reader and password manager after changes`

Login page styling/structure for users, screen readers, passwd managers Also: - Add CSS to login page - Refactor login page HTML and CSS into a new package - New custom CSP headers for the login page, because the requirements are different from the form_post page 2022-05-05 20:12:06 +00:00			`--><!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
Add Pinniped favicon to login UI page 🦭 2022-05-05 21:46:07 +00:00			`<title>Pinniped Login</title>`
Login page styling/structure for users, screen readers, passwd managers Also: - Add CSS to login page - Refactor login page HTML and CSS into a new package - New custom CSP headers for the login page, because the requirements are different from the form_post page 2022-05-05 20:12:06 +00:00			`<meta charset="UTF-8">`
			`<style>{{minifiedCSS}}</style>`
Add Pinniped favicon to login UI page 🦭 2022-05-05 21:46:07 +00:00			<link href="data:image/x-icon;base64,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
			`rel="icon" type="image/x-icon"/>`
Login page styling/structure for users, screen readers, passwd managers Also: - Add CSS to login page - Refactor login page HTML and CSS into a new package - New custom CSP headers for the login page, because the requirements are different from the form_post page 2022-05-05 20:12:06 +00:00			`</head>`
			`<body>`
			`<div class="box" aria-label="login form" role="main">`
			`<div class="form-field">`
			`<h1>Log in to {{.IDPName}}</h1>`
			`</div>`
			`{{if .HasAlertError}}`
			`<div class="form-field">`
Add LDAP browser flow login failure tests to supervisor_login_test.go Also do some refactoring to share more common test setup code in supervisor_login_test.go. 2022-05-10 23:22:07 +00:00			`<span class="alert" role="alert" aria-label="login error message" id="alert">{{.AlertMessage}}</span>`
Login page styling/structure for users, screen readers, passwd managers Also: - Add CSS to login page - Refactor login page HTML and CSS into a new package - New custom CSP headers for the login page, because the requirements are different from the form_post page 2022-05-05 20:12:06 +00:00			`</div>`
			`{{end}}`
			`<form action="{{.PostPath}}" method="post">`
			`<input type="hidden" name="state" id="state" value="{{.State}}">`
			`<div class="form-field">`
			`<label for="username"><span class="hidden" aria-hidden="true">Username</span></label>`
			`<input type="text" name="username" id="username"`
			`autocomplete="username" placeholder="Username" required>`
			`</div>`
			`<div class="form-field">`
			`<label for="password"><span class="hidden" aria-hidden="true">Password</span></label>`
			`<input type="password" name="password" id="password"`
			`autocomplete="current-password" placeholder="Password" required>`
			`</div>`
			`<div class="form-field">`
			`<input type="submit" name="submit" id="submit" value="Log in"/>`
			`</div>`
			`</form>`
			`</div>`
			`</body>`
			`</html>`