Merge pull request 'Expire inactive sessions, optionally allow to stay signed in' (#82) from feature/8-session_timeouts into master

Reviewed-on: #82
Reviewed-by: galfert <garret.alfert@gmail.com>

app/assets/stylesheets/components/links.css

@@ -5,10 +5,4 @@
     &:visited { @apply text-indigo-600; }
     &:active  { @apply text-red-600; }
   }
-
-  .devise-links {
-    a {
-      @apply ks-text-link;
-    }
-  }
 }

app/components/form_elements/toggle_component.html.erb

@@ -1,6 +1,6 @@
 <%= button_tag type: "button", name: "toggle", data: @data,
       role: "switch", aria: { checked: @enabled.to_s },
-      disabled: !@input_enabled,
+      tabindex: @tabindex, disabled: !@input_enabled,
       class: "#{ @enabled ? 'bg-blue-600' : 'bg-gray-200' }
               #{ @class_names.present? ? @class_names : '' }
               relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer

app/components/form_elements/toggle_component.rb

@@ -2,11 +2,12 @@
 
 module FormElements
   class ToggleComponent < ViewComponent::Base
-    def initialize(enabled:, input_enabled: true, data: nil, class_names: nil)
+    def initialize(enabled:, input_enabled: true, data: nil, class_names: nil, tabindex: nil)
       @enabled = !!enabled
       @input_enabled = input_enabled
       @data = data
       @class_names = class_names
+      @tabindex = tabindex
     end
   end
 end

app/javascript/controllers/notification_controller.js

@@ -4,6 +4,10 @@ export default class extends Controller {
   static targets = ["buttons", "countdown"]
 
   connect() {
+    // Devise timeoutable ends up adding a second flash message without content
+    // TODO investigate bug
+    if (this.element.textContent.trim() == "true") return;
+
     const timeoutSeconds = parseInt(this.data.get("timeout"));
 
     setTimeout(() => {

app/models/user.rb

@@ -38,7 +38,9 @@ class User < ApplicationRecord
   devise :ldap_authenticatable,
          :confirmable,
          :recoverable,
-         :validatable
+         :validatable,
+         :timeoutable,
+         :rememberable
 
   def ldap_before_save
     self.email = Devise::LDAP::Adapter.get_ldap_param(self.cn, "mail").first

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

@@ -7,19 +7,43 @@
       <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
       <p class="flex gap-2 items-center">
         <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                              required: true, class: "relative grow"%>
+              required: true, class: "relative grow", tabindex: "1" %>
         <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
       </p>
     </div>
-    <p>
+    <p class="mb-8">
       <%= f.label :password, class: 'block mb-2 font-bold' %>
       <%= f.password_field :password, autocomplete: "current-password",
-                                      required: true, class: "w-full"%>
+            required: true, class: "w-full", tabindex: "2" %>
     </p>
-    <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full' %>
+
+    <%= tag.div class: "flex items-center mb-8 gap-x-3", data: {
+          controller: "settings--toggle",
+          :'settings--toggle-switch-enabled-value' => "false"
+        } do %>
+      <div class="relative inline-flex flex-shrink-0">
+        <%= render FormElements::ToggleComponent.new(
+              enabled: false, input_enabled: true, class_names: "hidden",
+              tabindex: "3", data: {
+                :'settings--toggle-target' => "button",
+                action: "settings--toggle#toggleSwitch"
+              }) %>
+        <%= f.check_box :remember_me, {
+              checked: false,
+              data: { :'settings--toggle-target' => "checkbox" }
+            }, "true", "false" %>
+      </div>
+      <%= f.label :remember_me,
+            class: "text-gray-500 flex flex-col",
+            data: { action: "click->settings--toggle#toggleSwitch" } %>
+      <p class="grow text-sm text-right">
+        <%= link_to "Forgot your password?", new_password_path(resource_name),
+              class: "text-gray-500 underline" %><br />
+      </p>
+    <% end %>
+
+    <p>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full', tabindex: "4" %>
     </p>
   <% end %>
-
-  <%= render "devise/shared/links" %>
 <% end %>

app/views/devise/shared/_links.html.erb

@@ -1,25 +1,29 @@
 <div class="devise-links mt-8 text-sm">
   <%- if controller_name != 'sessions' %>
-    <p class="mb-1.5">
-      <%= link_to "Log in", new_session_path(resource_name) %><br />
+    <p class="mb-2">
+      <%= link_to "Log in", new_session_path(resource_name),
+            class: "text-gray-500 underline" %>
     </p>
   <% end %>
 
   <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-    <p class="mb-1.5">
-      <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
+    <p class="mb-2">
+      <%= link_to "Forgot your password?", new_password_path(resource_name),
+            class: "text-gray-500 underline" %>
     </p>
   <% end %>
 
-  <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-    <p class="mb-1.5">
-      <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
+  <%- if devise_mapping.confirmable? && !controller_name.match(/^(confirmations|sessions)$/) %>
+    <p class="mb-2">
+      <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name),
+            class: "text-gray-500 underline" %>
     </p>
   <% end %>
 
   <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-    <p class="mb-1.5">
-      <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
+    <p class="mb-2">
+      <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name),
+            class: "text-gray-500 underline" %>
     </p>
   <% end %>
 </div>