7 files changed, 63 insertions, 21 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>
diff --git a/config/initializers/filter_parameter_logging.rb b/config/initializers/filter_parameter_logging.rb
index c0b717f7..bf72b0f3 100644
--- a/config/initializers/filter_parameter_logging.rb
+++ b/config/initializers/filter_parameter_logging.rb
@@ -4,5 +4,5 @@
 # Use this to limit dissemination of sensitive information.
 # See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors.
 Rails.application.config.filter_parameters += [
-  :passw, :email, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn, :cvv, :cvc
+  :passw, :email, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn, :cvv, :cvc, :code, :current_password
 ]
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index fe702b09..23a9a581 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1619,3 +1619,33 @@ div#draft_list table td.actions a {
   max-height: 20em;
   overflow-y: auto;
 }
+
+/* ============================================================
+   User section
+   ============================================================ */
+
+form.otp_form {
+  margin-top: 0.75rem;
+}
+
+form.otp_form input[type=password],
+form.otp_form input[type=text] {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.visually_hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.otp_qr svg {
+  width: 220px;
+  height: auto;
+  display: block;
+  margin-bottom: 0.5rem;
+}