Add remember-me function for sign-in

When checked, remember user for 2 weeks. Otherwise expire session after
30 minutes.

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/models/user.rb

@@ -39,7 +39,8 @@ class User < ApplicationRecord
          :confirmable,
          :recoverable,
          :validatable,
-         :timeoutable
+         :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 %>