Merge recover password/resend confirmation forms into sign in/register

Closes #65, #66

app/assets/stylesheets/application.css

@@ -113,6 +113,12 @@ textarea {
   border: solid 1px var(--color-gray);
   border-radius: 0.25em;
 }
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
 input[type=checkbox],
 svg,
 textarea {
@@ -131,6 +137,7 @@ input[type=checkbox]:checked {
   -webkit-appearance: checkbox;
 }
 /* Hide spin buttons in input number fields */
+/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
 input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
@@ -340,6 +347,7 @@ header {
   opacity: 1;
 }
 
+
 /* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
   align-items: center;
@@ -371,9 +379,17 @@ header {
 }
 .labeled-form input[type=submit] {
   font-size: 1rem;
-  margin: 1.5em auto 0 auto;
+  margin: 1em auto 0 auto;
   padding: 0.75em;
 }
+.labeled-form .auxiliary {
+  grid-column: 3;
+  /* If more buttons are needed, `grid-row` can be replaced with
+   * `reading-flow: grid-columns` to ensure proper tabindex order */
+  grid-row: 1;
+  height: 100%;
+  padding-block: 0;
+}
 
 
 /* TODO: remove .items class (?) and make 'form table' work properly */
@@ -532,11 +548,6 @@ table.items select:focus-within,
 table.items select:focus-visible {
   color: black;
 }
-form a[name=cancel] {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
 form table.items {
   border: none;
 }

app/controllers/application_controller.rb

@@ -25,6 +25,18 @@ class ApplicationController < ActionController::Base
   #   Turbo will reload 2nd time with HTML format and flashes will be lost.
   rescue_from *ActionDispatch::ExceptionWrapper.rescue_responses.keys, with: :rescue_turbo
 
+  # Required by #respond_with (gem `responders`) used by Devise controllers.
+  respond_to :html, :turbo_stream
+
+  def after_sign_in_path_for(resource)
+    # TODO: allow setting path per-user or save last path in session and restore
+    units_path
+  end
+
+  def after_sign_out_path_for(resource)
+    new_user_session_path
+  end
+
   protected
 
   def current_user_disguised?

app/controllers/user/profiles_controller.rb

@@ -1,6 +1,4 @@
-class RegistrationsController < Devise::RegistrationsController
-  before_action :authenticate_user!, only: [:edit, :update, :destroy]
-
+class User::ProfilesController < Devise::RegistrationsController
   def destroy
     # TODO: Disallow/disable deletion for last admin account; update :edit view
     super

app/controllers/users_controller.rb

@@ -37,7 +37,7 @@ class UsersController < ApplicationController
   end
 
   # NOTE: limited actions availabe to :admin by design. Users are meant to
-  # manage their accounts by themselves through registrations. :admin
+  # manage their accounts by themselves through profiles. :admin
   # is allowed to sign-in (disguise) as user and make changes from there.
 
   protected

app/helpers/application_helper.rb

@@ -72,13 +72,8 @@ module ApplicationHelper
   end
 
   def labeled_form_for(record, options = {}, &block)
-    extra_options = {builder: LabeledFormBuilder,
-                     data: {turbo: false},
-                     html: {class: 'labeled-form'}}
-    options = options.deep_merge(extra_options) do |key, left, right|
-      key == :class ? class_names(left, right) : right
-    end
-    form_for(record, **options, &block)
+    extra_options = {builder: LabeledFormBuilder, html: {class: 'labeled-form'}}
+    form_for(record, **merge_attributes(options, extra_options), &block)
   end
 
   class TabularFormBuilder < ActionView::Helpers::FormBuilder
@@ -135,16 +130,16 @@ module ApplicationHelper
     # [autofocus].  Otherwise IDs are not unique when multiple forms are open
     # and the first input gets focus.
     record_object, options = nil, record_object if record_object.is_a?(Hash)
-    options.merge!(builder: TabularFormBuilder, skip_default_ids: true)
+    extra_options = {builder: TabularFormBuilder, skip_default_ids: true}
+    options = merge_attributes(options, extra_options)
     # TODO: set error message with setCustomValidity instead of rendering to flash?
     render_errors(record_object || record_name)
     fields_for(record_name, record_object, **options, &block)
   end
 
   def tabular_form_with(**options, &block)
-    options = options.deep_merge(builder: TabularFormBuilder,
-                                 html: {autocomplete: 'off'})
-    form_with(**options, &block)
+    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
+    form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
@@ -159,6 +154,7 @@ module ApplicationHelper
       ['measurements', 'scale-bathroom', :restricted],
       ['quantities', 'axis-arrow', :restricted, 'right'],
       ['units', 'weight-gram', :restricted],
+      # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
       ['users', 'account-multiple-outline', :admin],
     ]
 
@@ -206,6 +202,7 @@ module ApplicationHelper
 
   def render_errors(records)
     # Conversion of flash to Array only required because of Devise
+    # TODO: override Devise message setting to Array()?
     flash[:alert] = Array(flash[:alert])
     Array(records).each { |record| flash[:alert] += record.errors.full_messages }
   end
@@ -215,6 +212,7 @@ module ApplicationHelper
       # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
+          # TODO: change button text to svg to make it aligned vertically
           tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
                                                   onclick: "this.parentElement.remove();")
         end
@@ -252,4 +250,11 @@ module ApplicationHelper
 
     [name, html_options]
   end
+
+  # Like Hash#deep_merge, but aware of HTML attributes.
+  def merge_attributes(left, right)
+    left.deep_merge(right) do |key, lvalue, rvalue|
+      key == :class ? class_names(lvalue, rvalue) : rvalue
+    end
+  end
 end

app/javascript/application.js

@@ -37,6 +37,18 @@ window.detailsObserver = new MutationObserver((mutations) => {
   mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
 });
 
+function formValidate(event) {
+  var id = event.submitter.getAttribute("data-validate")
+  if (!id) return;
+
+  var input = document.getElementById(id)
+  if (!input.checkValidity()) {
+    input.reportValidity()
+    event.preventDefault()
+  }
+}
+window.formValidate = formValidate
+
 
 /* Turbo stream actions */
 Turbo.StreamElement.prototype.disableElement = function(element) {

app/views/users/confirmations/create.turbo_stream.erb

@@ -0,0 +1 @@
+<% flash.discard %>

app/views/users/confirmations/new.html.erb

@@ -1,9 +0,0 @@
-<%= labeled_form_for resource, url: user_confirmation_path,
-  html: {class: 'main-area'} do |f| %>
-
-  <%= f.email_field :email, required: true, size: 30, autofocus: true,
-    autocomplete: 'email', value:
-    resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email %>
-
-  <%= f.submit t(:resend_confirmation) %>
-<% end %>

app/views/users/passwords/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%# For some reason flash messages are duplicated in bot flash and flash.now %>
+<% flash.discard %>

app/views/users/passwords/edit.html.erb

@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_password_path,
-  html: {method: :put, class: 'main-area'} do |f| %>
+  html: {method: :put, class: 'main-area', data: {turbo: false}} do |f| %>
 
   <%= f.hidden_field :reset_password_token %>
 

app/views/users/passwords/new.html.erb

@@ -1,8 +0,0 @@
-<%= labeled_form_for resource, url: user_password_path,
-  html: {class: 'main-area'} do |f| %>
-
-  <%= f.email_field :email, required: true, size: 30, autofocus: true,
-    autocomplete: 'email' %>
-
-  <%= f.submit t(:recover_password) %>
-<% end %>

app/views/users/profiles/new.html.erb

@@ -0,0 +1,17 @@
+<%= labeled_form_for resource, url: user_registration_path,
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
+
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'new-password' %>
+  <%= f.password_field :password_confirmation, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'off' %>
+
+  <%= f.submit t(:register), data: {turbo: false} %>
+
+  <%# TODO: fix button text color after change link -> button %>
+  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
+    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>

app/views/users/registrations/new.html.erb

@@ -1,16 +0,0 @@
-<div class="main-area">
-  <%= labeled_form_for resource, url: user_registration_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true,
-      autocomplete: 'email' %>
-    <%= f.password_field :password, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'new-password' %>
-    <%= f.password_field :password_confirmation, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'off' %>
-
-    <%= f.submit t(:register) %>
-  <% end %>
-
-  <%= content_tag :p, t(:or), style: 'text-align: center;' %>
-  <%= image_link_to t(:resend_confirmation), 'email-sync-outline',
-    new_user_confirmation_path, class: 'centered' %>
-</div>

app/views/users/sessions/new.html.erb

@@ -1,18 +1,19 @@
-<div class="main-area">
-  <%= labeled_form_for resource, url: user_session_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true,
-      autocomplete: 'email' %>
-    <%= f.password_field :password, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'current-password' %>
+<%= labeled_form_for resource, url: user_session_path,
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
 
-    <% if devise_mapping.rememberable? %>
-      <%= f.check_box :remember_me %>
-    <% end %>
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    autocomplete: 'current-password' %>
 
-    <%= f.submit t(:sign_in) %>
+  <% if devise_mapping.rememberable? %>
+    <%= f.check_box :remember_me %>
   <% end %>
 
-  <%= content_tag :p, t(:or), style: 'text-align: center;' %>
-  <%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path,
-    class: 'centered' %>
-</div>
+  <%# /sign_in as HTML; /password as TURBO_STREAM %>
+  <%= f.submit t(:sign_in), data: {turbo: false} %>
+
+  <%= image_button_tag t(:recover_password), 'lock-reset', class: 'auxiliary',
+    formaction: user_password_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>