Separate out modal into a re-usable block

Separated both the html block and the sass code into different files.

securedrop/journalist_templates/_confirmation_modal.html

@@ -0,0 +1,10 @@
+<div id="{{ modal_data.modal_id }}" class="modal-dialog">
+  <a href="#close" class="external"></a>
+  <div>
+    <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
+    <h2>{{ modal_data.modal_header }}</h2>
+    <p>{{ modal_data.modal_body }}</p>
+    <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
+    <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" class="sd-button {{ modal_data.submit_btn_type }}">{{ modal_data.submit_btn_text }}</button>
+  </div>
+</div>

securedrop/journalist_templates/col.html

@@ -65,16 +65,19 @@
       </ul>
 
       <!-- Confirmation modal for selected documents -->
-      <div id="delete-selected-confirmation-modal" class="modal-dialog">
-        <a href="#close" class="external"></a>
-        <div>
-          <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
-          <h2>{{ gettext('Delete Confirmation') }}</h2>
-          <p>{{ gettext('Are you sure you want to delete the selected documents?') }}</p>
-          <a href="#close" id="cancel-selected-deletions" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
-          <button type="submit" name="action" value="confirm_delete" id="delete-selected" class="sd-button danger">{{ gettext('Delete') }}</button>
-        </div>
-      </div>
+      {% with %}
+        {% set modal_data = {
+                              "modal_id": "delete-selected-confirmation-modal",
+                              "modal_header": gettext('Delete Confirmation'),
+                              "modal_body": gettext('Are you sure you want to delete the selected documents?'),
+                              "cancel_id": "cancel-selected-deletions",
+                              "submit_id": "delete-selected",
+                              "submit_btn_type": "danger",
+                              "submit_btn_text": gettext('Delete')
+                            }
+        %}
+        {% include '_confirmation_modal.html' %}
+      {% endwith %}
 
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
@@ -120,16 +123,19 @@ <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
     </a>
 
     <!-- Confirmation modal for entire collection deletion -->
-    <div id="delete-collection-confirmation-modal" class="modal-dialog">
-      <a href="#close" class="external"></a>
-      <div>
-        <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
-        <h2>{{ gettext('Delete Confirmation') }}</h2>
-        <p>{{ gettext('Are you sure you want to delete this collection?') }}</p>
-        <a href="#close" id="cancel-collection-deletions" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
-        <button type="submit" id="delete-collection-button" name="action" value="delete" class="sd-button danger">{{ gettext('Delete') }}</button>
-      </div>
-    </div>
+    {% with %}
+      {% set modal_data = {
+                            "modal_id": "delete-collection-confirmation-modal",
+                            "modal_header": gettext('Delete Confirmation'),
+                            "modal_body": gettext('Are you sure you want to delete this collection?'),
+                            "cancel_id": "cancel-collection-deletions",
+                            "submit_id": "delete-collection-button",
+                            "submit_btn_type": "danger",
+                            "submit_btn_text": gettext('Delete')
+                          }
+      %}
+      {% include '_confirmation_modal.html' %}
+    {% endwith %}
   </form>
 
 </div>

securedrop/journalist_templates/index.html

@@ -40,16 +40,19 @@ <h1><span class="headline">{{ gettext('Sources') }}</span></h1>
       {% endif %}
 
       <!-- Delete confirmation modal -->
-      <div id="delete-confirmation-modal" class="modal-dialog">
-        <a href="#close" class="external"></a>
-        <div>
-          <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
-          <h2>{{ gettext('Delete Confirmation') }}</h2>
-          <p>{{ gettext('Are you sure you want to delete the selected collections?') }}</p>
-          <a href="#close" id="cancel-collections-deletions" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
-          <button type="submit" id="delete-collections" name="action" value="delete" class="sd-button danger">{{ gettext('Delete') }}</button>
-        </div>
-      </div>
+      {% with %}
+        {% set modal_data = {
+                              "modal_id": "delete-confirmation-modal",
+                              "modal_header": gettext('Delete Confirmation'),
+                              "modal_body": gettext('Are you sure you want to delete the selected collections?'),
+                              "cancel_id": "cancel-collections-deletions",
+                              "submit_id": "delete-collections",
+                              "submit_btn_type": "danger",
+                              "submit_btn_text": gettext('Delete')
+                            }
+        %}
+        {% include '_confirmation_modal.html' %}
+      {% endwith %}
 
     </form>
   {% else %}

securedrop/journalist_templates/js-strings.html

@@ -4,9 +4,6 @@
   <div id="select-all-string" hidden>{{ gettext('Select All') }}</div>
   <div id="select-unread-string" hidden>{{ gettext('Select Unread') }}</div>
   <div id="select-none-string" hidden>{{ gettext('Select None') }}</div>
-  <div id="collection-delete-confirm-string" hidden>{{ gettext('Are you sure you want to delete this collection?') }}</div>
-  <div id="collection-multi-delete-confirm-string" hidden>{{ gettext('Are you sure you want to delete the {size} selected collections?') }}</div>
-  <div id="submission-multi-delete-confirm-string" hidden>{{ gettext('Are you sure you want to delete the {size} selected submissions?') }}</div>
   <div id="delete-user-confirm-string" hidden>{{ gettext('Are you sure you want to delete the user {username}?') }}</div>
   <div id="reset-user-mfa-confirm-string" hidden>{{ gettext('Are you sure you want to reset two-factor authentication for {username}?') }}</div>
 </div>

securedrop/sass/journalist.sass

@@ -1,6 +1,7 @@
 @import base
 @import modules/visually-hidden
 @import modules/menu
+@import modules/confirm-modal
 
 +base_rules
 
@@ -55,58 +56,6 @@ p.breadcrumbs
   &:dir(rtl)
     text-align: right
 
-.modal-dialog
-  position: fixed
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  background: rgba(0, 0, 0, 0.8)
-  z-index: 99999
-  opacity: 0
-  -moz-transition: opacity 100ms ease-in
-  transition: opacity 100ms ease-in
-  pointer-events: none
-
-  &:target
-    opacity: 1
-    pointer-events: auto
-
-  .external
-    position: fixed
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-
-  div
-    width: 400px
-    position: relative
-    margin: 10% auto
-    padding: 5px 20px 13px 20px
-    border-radius: 10px
-    background: white
-
-  .close
-    background: $color_grey_medium
-    color: white
-    line-height: 25px
-    position: absolute
-    right: -12px
-    text-align: center
-    top: -10px
-    width: 24px
-    text-decoration: none
-    font-weight: bold
-    -moz-border-radius: 12px
-    border-radius: 12px
-    -moz-box-shadow: 1px 1px 3px #000
-    box-shadow: 1px 1px 3px #000
-
-    &:hover
-      background: $color_purple_medium
-
-
 #regenerate-code .confirm-prompt
   font-size: 14px
   font-style: italic

securedrop/sass/modules/_confirm-modal.sass

@@ -0,0 +1,50 @@
+.modal-dialog
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  background: rgba(0, 0, 0, 0.8)
+  z-index: 99999
+  opacity: 0
+  -moz-transition: opacity 100ms ease-in
+  transition: opacity 100ms ease-in
+  pointer-events: none
+
+  &:target
+    opacity: 1
+    pointer-events: auto
+
+  .external
+    position: fixed
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+
+  div
+    width: 400px
+    position: relative
+    margin: 10% auto
+    padding: 5px 20px 13px 20px
+    border-radius: 10px
+    background: white
+
+  .close
+    background: $color_grey_medium
+    color: white
+    line-height: 25px
+    position: absolute
+    right: -12px
+    text-align: center
+    top: -10px
+    width: 24px
+    text-decoration: none
+    font-weight: bold
+    -moz-border-radius: 12px
+    border-radius: 12px
+    -moz-box-shadow: 1px 1px 3px #000
+    box-shadow: 1px 1px 3px #000
+
+    &:hover
+      background: $color_purple_medium