session modal styling (#3874)

* session modal styling * remove unnecessary span * consolidate spacing classes
ideacrew · Jun 3, 2024 · d09c31f · d09c31f
1 parent 3f62c37
commit d09c31f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/app/controllers/session_timeout_controller.rb b/app/controllers/session_timeout_controller.rb
@@ -11,6 +11,7 @@ def skip_timeout
 
   def check_time_until_logout
     @time_left = Devise.timeout_in - (Time.now - (user_session["last_request_at"] || Time.now)).to_i.round
+    @bs4 = true if params[:bs4] == "true"
     if @time_left <= 0
       sign_out(current_user)
       respond_to do |format|

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
@@ -329,3 +329,16 @@ ul.list-right-section li {
 .full-height {
   height: 70vh;
 }
+
+// modals
+
+.backdrop-modal {
+  background: hsla(0, 0%, 0%, 0.2);
+  .modal-header {
+    border-bottom: 0;
+  }
+
+  .modal-footer {
+    border-top: 0;
+  }
+}
diff --git a/app/views/devise/sessions/_session_expiration_warning.html.erb b/app/views/devise/sessions/_session_expiration_warning.html.erb
@@ -1,3 +1,32 @@
+<% if @bs4 %>
+<div class="modal backdrop-modal" id="sessionExpirationWarningModal" tabindex="-1" role="dialog" role="document" data-backdrop="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="d-flex align-items-center">
+        <div class="pl-2">
+          <div class="warning-icon icon" alt="warning" aria-hidden="true">&nbsp;</div>
+        </div>
+        <div class="my-1 pl-0 pr-2">
+          <h4 class="modal-title">Session Ending Soon</h4>
+        </div>
+        </div>
+      </div>
+      <div class="modal-body">
+        <p>
+          Your session will expire in <strong><%= @time_left %></strong>
+          seconds. If you’d like to continue with your application, select STAY LOGGED IN.
+        </p>
+        <ul class="application-warnings"></ul>
+      </div>
+      <div class="modal-footer">
+        <%= link_to l10n(".logout"), destroy_user_session_path, method: "delete", class: "button outline", tabindex: "0" %>
+        <span tabindex="0", onkeydown="handleButtonKeyDown(event, 'stay-logged-in')", id="stay-logged-in" class="button" data-dismiss="modal"><%= l10n("faa.stay_logged_in") %></span>
+      </div>
+    </div>
+  </div>
+</div>
+<% else %>
 <div class="modal" id="sessionExpirationWarningModal" tabindex="-1" role="dialog" role="document">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -6,10 +35,7 @@
       </div>
       <div class="modal-body">
         <p>
-          Your session will expire in
-          <strong>
-            <%= @time_left %>
-          </strong>
+          Your session will expire in <strong><%= @time_left %></strong>
           seconds. If you’d like to continue with your application, select STAY LOGGED IN.
         </p>
         <ul class="application-warnings"></ul>
@@ -21,3 +47,4 @@
     </div>
   </div>
 </div>
+<% end %>
diff --git a/app/views/ui-components/bs4/v1/navs/_header.html.erb b/app/views/ui-components/bs4/v1/navs/_header.html.erb
@@ -53,6 +53,7 @@
         url: "<%= main_app.check_time_until_logout_path(format: :js) %>",
         method: 'GET',
         dataType: 'script',
+        data:{bs4: <%= @bs4 %>},
         success: function(response){
         },
         error: function(response){