Rework login page CSS.

src/schema.rs

@@ -61,7 +61,7 @@ pub struct User {
 
 make_index!(!UserIndex, User::Realm, User::Username);
 
-#[derive(Clone, Copy, Debug, PartialEq, Modelable, Serialize, Deserialize)]
+#[derive(Clone, Copy, Debug, PartialEq, PartialOrd, Modelable, Serialize, Deserialize)]
 pub enum AuthChallengeType {
     Username,
     Password,

src/server/session.rs

@@ -156,9 +156,11 @@ impl<'l> SessionHelper<'l> {
                         {
                             "challenge":
                                 format!(r#"
-                            <input type="hidden" name="challenge_type" value="{:?}" />
-                            <div class="challenge-type">{}</div>
-                            <div class="challenge-content">{}</div>
+                            <td class="challenge-type">
+                                <input type="hidden" name="challenge_type" value="{:?}" />
+                                {}
+                            </td>
+                            <td class="challenge-content">{}</td>
                             "#,
                                     to_present, ty, ch),
                             "redirect": redirect,
@@ -184,6 +186,12 @@ impl<'l> SessionHelper<'l> {
                     r#"<input name="challenge" type="password" autofocus />"#,
                 ));
             }
+            schema::AuthChallengeType::TOTP => {
+                response.set_body(do_challenge(
+                    "Authenticator code",
+                    r#"<input name="challenge" type="text" autofocus />"#,
+                ));
+            }
             _ => todo!(),
         }
 
@@ -252,6 +260,7 @@ async fn v1_login_post(mut req: Request) -> tide::Result<tide::Response> {
     let challenge: schema::AuthChallengeType = match body.challenge_type.as_str() {
         "Username" => ChallengeType::Username,
         "Password" => ChallengeType::Password,
+        "TOTP" => ChallengeType::TOTP,
         _ => Err(tide::Error::from_str(400, "Unknown challenge type"))?,
     };
 
@@ -283,12 +292,18 @@ async fn v1_login_post(mut req: Request) -> tide::Result<tide::Response> {
             } else {
                 let user = user.unwrap();
 
-                // TODO: set list of challenges to be whatever else this user has set up
+                let enabled = qi.get().by(schema::AuthChallenge::User, &user.id()).all()?;
+                let has_totp = enabled.iter().filter(|ac| ac.challenge_type == schema::AuthChallengeType::TOTP).count() > 0;
+
+                // TODO: support more flows than just username,password[,totp]
                 let sa = schema::SessionAuthentication {
                     session: session_id,
                     realm: realm,
                     user: user.id(),
-                    challenges_left: vec![schema::AuthChallengeType::Password],
+                    challenges_left: if has_totp {
+                        vec![schema::AuthChallengeType::Password, schema::AuthChallengeType::TOTP]
+                    } else {
+                        vec![schema::AuthChallengeType::Password] },
                 };
                 let id = qi.add(&sa).unwrap();
                 auth = Some(microrm::WithID::new(sa, id));

static/style.css

@@ -2,7 +2,7 @@ body {
     font-family: sans-serif;
 }
 
-div.login-box {
+div.content-box {
     margin-left: auto;
     margin-right: auto;
     display: block;
@@ -15,37 +15,30 @@ div.login-box {
     padding-right: 2em;
 }
 
-div.login-box h1 {
+div.content-box h1 {
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
 }
 
-div.login-content {
-    display: table;
+table.content-table {
     height: 15em;
     width: 100%;
+    text-align: left;
 }
 
-div.login-box div.spacer {
-    display: table-row;
-    min-height: 3em;
+table.content-table td {
+    padding: 0em;
 }
 
-div.login-box div.login-challenge {
+table.content-table td input {
     width: 100%;
-    display: table-row;
+    padding: 0em;
 }
 
-div.login-challenge div.challenge-type {
-    padding-right: 1em;
-    display: inline-block;
-}
-
-div.login-challenge div.challenge-content {
-    margin-left: auto;
-    margin-right: auto;
-    display: inline-block;
+table.content-table td input[type=submit] {
+    width: auto;
+    padding: .5em;
 }
 
 div.error-msg {

tmpl/id_v1_login.tmpl

@@ -7,28 +7,35 @@
     </head>
     <body>
         <div>
-            <div class="login-box">
+            <div class="content-box">
                 <h1>Login</h1>
                 
                 <form action="login" method="POST">
-                    <div class="login-content">
-                        <div class="spacer">&nbsp;
-                            {{ #each error_msg }}
-                                <div class="error-msg">{{ this }}</div>
-                            {{ /each }}
-                        </div>
-                        <div class="login-challenge">
+                    <table class="content-table">
+                        {{ #each error_msg }}
+                            <tr>
+                                <td colspan="3">
+                                        <div class="error-msg">{{ this }}</div>
+                                </td>
+                            </tr>
+                        {{ /each }}
+                        <tr>
                             {{{ challenge }}}
-                            <input type="submit" value=">" />
-                        </div>
-                        <div class="spacer">&nbsp;</div>
-                        <input type="hidden" name="redirect" value="{{ redirect }}" />
-                        <input type="submit" name="reset" value="Start over" />
-                    </div>
+                            <td>
+                                <input type="submit" value=">" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="3">
+                                <input type="hidden" name="redirect" value="{{ redirect }}" />
+                                <input type="submit" name="reset" value="Start over" />
+                            </td>
+                        </tr>
+                    </table>
                 </form>
             </div>
             <div class="footer">
-                Copyright &copy; Kestrel 2022. Released under the terms of the 4-clause BSD license.
+                Copyright &copy; Kestrel 2023. Released under the terms of the 4-clause BSD license.
             </div>
         </div>
     </body>