✨ An entire complete sign in user flow

pkg/views/layouts/auth.gohtml

@@ -55,8 +55,6 @@
     }
 
     .alert {
-        width: 100%;
-        max-width: 800px;
         padding: 16px;
         border-radius: 16px;
         background-color: var(--md-sys-color-secondary-container);

pkg/views/mfa-apply.gohtml

@@ -0,0 +1,47 @@
+<div class="left-part">
+    <img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
+
+    <h1 class="title">{{.i18n.title}}</h1>
+    <p class="caption">{{.i18n.caption}}</p>
+</div>
+
+<div class="right-part">
+    <div class="responsive-title-gap"></div>
+
+    <form class="action-form" action="/mfa/apply" method="POST">
+        <label>
+            <input name="ticket_id" value="{{.ticket_id}}" hidden>
+        </label>
+        <label>
+            <input name="factor_id" value="{{.factor_id}}" hidden>
+        </label>
+
+        <div class="factor-label">{{.label}}</div>
+
+        <md-outlined-text-field
+                class="block-field"
+                name="code"
+                type="password"
+                autocomplete="off"
+                label={{.i18n.password}}
+        >
+        </md-outlined-text-field>
+
+        <div class="action-form-buttons">
+            <md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
+        </div>
+    </form>
+</div>
+
+<style>
+    .factor-label {
+        font-size: 14px;
+        text-align: left;
+    }
+
+    @media (min-width: 768px) {
+        .factor-label {
+            text-align: center;
+        }
+    }
+</style>

pkg/views/mfa.gohtml

@@ -0,0 +1,61 @@
+<div class="left-part">
+    <img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
+
+    <h1 class="title">{{.i18n.title}}</h1>
+    <p class="caption">{{.i18n.caption}}</p>
+</div>
+
+<div class="right-part">
+    <div class="responsive-title-gap"></div>
+
+    <form class="action-form" action="/mfa" method="POST">
+        <label>
+            <input name="ticket_id" value="{{.ticket_id}}" hidden>
+        </label>
+        {{if ne .redirect_uri nil}}
+            <label>
+                <input name="redirect_uri" value="{{.redirect_uri}}" hidden>
+            </label>
+        {{end}}
+
+        <div class="block-field factor-list" role="radiogroup">
+            {{range $_, $element := .factors}}
+                <div class="factor-label">
+                    <md-radio
+                            aria-label="{{$element.name}}"
+                            id="factor-{{$element.id}}"
+                            value="{{$element.id}}"
+                            touch-target="wrapper"
+                            name="factor_id"
+                    >
+                    </md-radio>
+                    <label for="factor-{{$element.id}}">{{$element.name}}</label>
+                </div>
+            {{end}}
+        </div>
+
+        <div class="action-form-buttons">
+            <md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
+        </div>
+    </form>
+</div>
+
+<style>
+    .factor-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .factor-label {
+        display: flex;
+        align-items: center;
+    }
+
+    .factor-label label {
+        display: inline-flex;
+        place-items: center;
+        gap: 8px;
+        font-family: Roboto, system-ui;
+        color: var(--md-sys-color-on-background);
+    }
+</style>

pkg/views/signin.gohtml

@@ -1,5 +1,5 @@
 <div class="left-part">
-    <img class="logo" src="/favicon.png" width="64" height="64"/>
+    <img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
 
     <h1 class="title">{{.i18n.title}}</h1>
     <p class="caption">{{.i18n.caption}}</p>

pkg/views/signup.gohtml

@@ -1,5 +1,5 @@
 <div class="left-part">
-    <img class="logo" src="/favicon.png" width="64" height="64"/>
+    <img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
 
     <h1 class="title">{{.i18n.title}}</h1>
     <p class="caption">{{.i18n.caption}}</p>

pkg/views/users/me/index.gohtml

@@ -0,0 +1,3 @@
+<h1>
+    You are accepted!
+</h1>