annotate mod_http_oauth2/html/login.html @ 5627:3a5cf8d80089

mod_http_oauth2: Tweak method of centering the UI The percentage here was relative to the viewport width, which on some very wide screens may put the UI slightly outside of the view, requiring scrolling to see. By using a unit relative to the height of the viewport, this is avoided and should work better. But no guarantees, it's still possible to resize the browser or adjust font sizes so that the UI goes out of view.
author Kim Alvefur <zash@zash.se>
date Mon, 31 Jul 2023 07:28:09 +0200
parents e86a1018cdb3
children 2a31ee81e816
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
2 <html>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
3 <head>
5623
8de02381e80a mod_http_oauth2: Conform to XHTML in templates
Kim Alvefur <zash@zash.se>
parents: 5526
diff changeset
4 <meta charset="utf-8" />
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
6 <title>{site_name} - Sign in</title>
5623
8de02381e80a mod_http_oauth2: Conform to XHTML in templates
Kim Alvefur <zash@zash.se>
parents: 5526
diff changeset
7 <link rel="stylesheet" href="style.css" />
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
8 </head>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
9 <body>
5625
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
10 {state.error&
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
11 <dialog open="" class="error">
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
12 <p>{state.error}</p>
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
13 <form method="dialog"><button>dismiss</button></form>
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
14 </dialog>}
5624
6109496a7ccc mod_http_oauth2: Move site name into <header>
Kim Alvefur <zash@zash.se>
parents: 5623
diff changeset
15 <header>
6109496a7ccc mod_http_oauth2: Move site name into <header>
Kim Alvefur <zash@zash.se>
parents: 5623
diff changeset
16 <h1>{site_name}</h1>
6109496a7ccc mod_http_oauth2: Move site name into <header>
Kim Alvefur <zash@zash.se>
parents: 5623
diff changeset
17 </header>
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
18 <main>
5270
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5227
diff changeset
19 <fieldset>
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5227
diff changeset
20 <legend>Sign in</legend>
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
21 <p>Sign in to your account to continue.</p>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
22 <form method="post">
5623
8de02381e80a mod_http_oauth2: Conform to XHTML in templates
Kim Alvefur <zash@zash.se>
parents: 5526
diff changeset
23 <input type="text" name="username" placeholder="Username" aria-label="Username" required {extra.username_hint~autofocus}{extra.username_hint& value="{extra.username_hint?}"} /><br/>
8de02381e80a mod_http_oauth2: Conform to XHTML in templates
Kim Alvefur <zash@zash.se>
parents: 5526
diff changeset
24 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required {extra.username_hint&autofocus} /><br />
8de02381e80a mod_http_oauth2: Conform to XHTML in templates
Kim Alvefur <zash@zash.se>
parents: 5526
diff changeset
25 <input type="submit" value="Sign in" />
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
26 </form>
5270
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5227
diff changeset
27 </fieldset>
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
28 </main>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
29 </body>
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
30 </html>