Polish the OTP flows: autocomplete tokens, button dialect, QR sizing, my-account link

5 files changed, 32 insertions, 20 deletions

diff --git a/app/views/admin/index.html.erb b/app/views/admin/index.html.erb
index 319530db..4d67dd77 100644
--- a/app/views/admin/index.html.erb
+++ b/app/views/admin/index.html.erb
@@ -53,6 +53,9 @@
 <div id="dashboard_housekeeping">
   <h3>Housekeeping</h3>
   <div class="button_row">
+    <%= link_to edit_user_path(current_user), class: "action_button" do %>
+      <%= icon("user-cog", library: "tabler", "aria-hidden": true) %> My account
+    <% end %>
     <%= link_to nodes_path, class: "action_button" do %>
       <%= icon("list", library: "tabler", "aria-hidden": true) %> Nodes
     <% end %>
diff --git a/app/views/otp_challenges/new.html.erb b/app/views/otp_challenges/new.html.erb
index a9c7a15c..b0d204fb 100644
--- a/app/views/otp_challenges/new.html.erb
+++ b/app/views/otp_challenges/new.html.erb
@@ -3,7 +3,7 @@
 <div id="page_editor">
   <div class="node_description">Code</div>
   <div class="node_content">
-    <%= form_tag otp_challenge_path, :method => :post do %>
+    <%= form_tag otp_challenge_path, :method => :post, :class => "otp_form" do %>
       <%= text_field_tag :code, nil, :autofocus => true,
             :autocomplete => "one-time-code", :inputmode => "numeric" %>
       <%= submit_tag "Log in" %>
diff --git a/app/views/otp_enrollments/show.html.erb b/app/views/otp_enrollments/show.html.erb
index 9dfa3422..90c42b59 100644
--- a/app/views/otp_enrollments/show.html.erb
+++ b/app/views/otp_enrollments/show.html.erb
@@ -3,19 +3,22 @@
 <div id="page_editor">
   <div class="node_description">Scan</div>
   <div class="node_content">
-    <%= raw RQRCode::QRCode.new(current_user.pending_otp_provisioning_uri)
-              .as_svg(:module_size => 4, :viewbox => true,
-                      :color => "000", :fill => "fff") %>
-    <span class="field_hint">Or enter the secret manually:
-      <code><%= current_user.otp_pending_secret %></code></span>
+    <div class="otp_qr">
+      <%= raw RQRCode::QRCode.new(current_user.pending_otp_provisioning_uri)
+                .as_svg(:module_size => 4, :viewbox => true,
+                        :color => "000", :fill => "fff") %>
+    </div>
+    <span class="field_hint">Or enter the secret manually: <code><%= current_user.otp_pending_secret %></code></span>
   </div>
 
   <div class="node_description">Confirm</div>
   <div class="node_content">
-    <%= form_tag otp_enrollment_path, :method => :put do %>
+    <%= form_tag otp_enrollment_path, :method => :put, :class => "otp_form" do %>
       <%= text_field_tag :code, nil, :autofocus => true,
             :autocomplete => "one-time-code", :inputmode => "numeric" %>
-      <%= submit_tag "Confirm" %>
+      <%= button_tag :type => "submit", :class => "action_button" do %>
+        <%= icon("shield-check", library: "tabler", "aria-hidden": true) %> Confirm
+      <% end %>
     <% end %>
     <span class="field_hint">Enter the six-digit code your app shows
       for “<%= OTP_ISSUER %>”.</span>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 23952b73..b23f6a0c 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -5,10 +5,10 @@
     <% end %>
 
     <div class="node_description">Login</div>
-    <div class="node_content"><%= text_field_tag 'login', @login %></div>
+    <div class="node_content"><%= text_field_tag 'login', @login, :autocomplete => "username" %></div>
 
     <div class="node_description">Password</div>
-    <div class="node_content"><%= password_field_tag 'password', nil %></div>
+    <div class="node_content"><%= password_field_tag 'password', nil, :autocomplete => "current-password" %></div>
 
     <div class="node_content"><%= submit_tag 'log in' %></div>
   <% end -%>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 8d14a058..8adad789 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,4 +1,4 @@
-<h1>Edit existing user</h1>
+<h1><%= @user == current_user ? "My account" : "Edit user “#{@user.login}”" %></h1>
 
 <% if @user.errors.any? %>
   <div class="error_messages">
@@ -10,16 +10,16 @@
   <%= form_for @user do |f| %>
   <div id="content">
     <div class="node_description">Login</div>
-    <div class="node_content"><%= f.text_field :login %></div>
+    <div class="node_content"><%= f.text_field :login, :autocomplete => "username" %></div>
 
     <div class="node_description">E-Mail</div>
     <div class="node_content"><%= f.text_field :email %></div>
 
     <div class="node_description">Password</div>
-    <div class="node_content"><%= f.password_field :password %></div>
+    <div class="node_content"><%= f.password_field :password, :autocomplete => "new-password" %></div>
 
     <div class="node_description">Confirm</div>
-    <div class="node_content"><%= f.password_field :password_confirmation %></div>
+    <div class="node_content"><%= f.password_field :password_confirmation, :autocomplete => "new-password" %></div>
 
     <% if current_user.admin? %>
     <div class="node_description">Admin?</div>
@@ -36,17 +36,23 @@
     <div class="node_content">
       <% if current_user.otp_enrolled? %>
         <p>Enabled.</p>
-        <%= form_tag otp_enrollment_path, :method => :delete do %>
-          <%= password_field_tag :current_password, nil, :placeholder => "Current password" %>
+        <%= form_tag otp_enrollment_path, :method => :delete, :class => "otp_form" do %>
+          <%= text_field_tag :login, current_user.login, :autocomplete => "username", :readonly => true, :tabindex => -1, :class => "visually_hidden" %>
+          <%= password_field_tag :current_password, nil, :placeholder => "Current password", :autocomplete => "current-password" %>
           <%= text_field_tag :code, nil, :placeholder => "Current code",
                 :autocomplete => "one-time-code", :inputmode => "numeric" %>
-          <%= submit_tag "Disable second factor" %>
+          <%= button_tag :type => "submit", :class => "action_button" do %>
+            <%= icon("shield-off", library: "tabler", "aria-hidden": true) %> Disable second factor
+          <% end %>
         <% end %>
       <% else %>
         <p>Not enrolled.</p>
-        <%= form_tag otp_enrollment_path, :method => :post do %>
-          <%= password_field_tag :current_password, nil, :placeholder => "Current password" %>
-          <%= submit_tag "Enable second factor" %>
+        <%= form_tag otp_enrollment_path, :method => :post, :class => "otp_form" do %>
+          <%= text_field_tag :login, current_user.login, :autocomplete => "username", :readonly => true, :tabindex => -1, :class => "visually_hidden" %>
+          <%= password_field_tag :current_password, nil, :placeholder => "Current password", :autocomplete => "current-password"%>
+          <%= button_tag :type => "submit", :class => "action_button" do %>
+            <%= icon("shield-lock", library: "tabler", "aria-hidden": true) %> Enable second factor
+          <% end %>
         <% end %>
       <% end %>
     </div>