comparison mod_http_oauth2/html/login.html @ 5625:e86a1018cdb3

mod_http_oauth2: Present errors in HTML <dialog> Nice semantic things that don't require JavaScript
author Kim Alvefur <zash@zash.se>
date Mon, 31 Jul 2023 02:07:24 +0200
parents 6109496a7ccc
children 2a31ee81e816
comparison
equal deleted inserted replaced
5624:6109496a7ccc 5625:e86a1018cdb3
5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>{site_name} - Sign in</title> 6 <title>{site_name} - Sign in</title>
7 <link rel="stylesheet" href="style.css" /> 7 <link rel="stylesheet" href="style.css" />
8 </head> 8 </head>
9 <body> 9 <body>
10 {state.error&
11 <dialog open="" class="error">
12 <p>{state.error}</p>
13 <form method="dialog"><button>dismiss</button></form>
14 </dialog>}
10 <header> 15 <header>
11 <h1>{site_name}</h1> 16 <h1>{site_name}</h1>
12 </header> 17 </header>
13 <main> 18 <main>
14 <fieldset> 19 <fieldset>
15 <legend>Sign in</legend> 20 <legend>Sign in</legend>
16 <p>Sign in to your account to continue.</p> 21 <p>Sign in to your account to continue.</p>
17 {state.error&<div class="error">
18 <p>{state.error}</p>
19 </div>}
20 <form method="post"> 22 <form method="post">
21 <input type="text" name="username" placeholder="Username" aria-label="Username" required {extra.username_hint~autofocus}{extra.username_hint& value="{extra.username_hint?}"} /><br/> 23 <input type="text" name="username" placeholder="Username" aria-label="Username" required {extra.username_hint~autofocus}{extra.username_hint& value="{extra.username_hint?}"} /><br/>
22 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required {extra.username_hint&autofocus} /><br /> 24 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required {extra.username_hint&autofocus} /><br />
23 <input type="submit" value="Sign in" /> 25 <input type="submit" value="Sign in" />
24 </form> 26 </form>