Migrate plain checkboxes to bootstrap's custom-checkbox for consistency5.0/custom-checkbox

12 files changed, 127 insertions, 46 deletions

diff --git a/share/html/Admin/Elements/EditQueueWatchers b/share/html/Admin/Elements/EditQueueWatchers
index e94d8fa470..b560e50677 100644
--- a/share/html/Admin/Elements/EditQueueWatchers
+++ b/share/html/Admin/Elements/EditQueueWatchers
@@ -52,14 +52,19 @@
 <ul>
 % while (my $watcher=$Members->Next) {
 <li>
-<input type="checkbox" class="checkbox" name="Queue-<%$QueueObj->Id%>-DeleteWatcher-Type-<%$Watchers->Name%>-Principal-<%$watcher->MemberId%>" value="1"
-        unchecked />
+% my $name = join '-', 'Queue', $QueueObj->Id, 'DeleteWatcher-Type', $Watchers->Name, 'Principal', $watcher->MemberId;
+  <div class="custom-control custom-checkbox">
+    <input type="checkbox" name="<% $name %>" id="<% $name %>" value="1" class="checkbox custom-control-input" />
+    <label class="custom-control-label" for="<% $name %>">
 % if ($watcher->MemberObj->IsUser) { 
 <& /Elements/ShowUser, User => $watcher->MemberObj->Object &>
 % } else {
 <a href="<%RT->Config->Get('WebPath')%>/Admin/Groups/Modify.html?id=<%$watcher->MemberObj->Id%>">
 <%$watcher->MemberObj->Object->Name%></a>
 % }
+    </label>
+  </div>
+</li>
 % }
 % }
 </ul>
diff --git a/share/html/Admin/Lifecycles/Actions.html b/share/html/Admin/Lifecycles/Actions.html
index cbae3ee9fd..8c7de16a8d 100644
--- a/share/html/Admin/Lifecycles/Actions.html
+++ b/share/html/Admin/Lifecycles/Actions.html
@@ -70,8 +70,10 @@
       <th class="collection-as-table"><&|/l&>Label</&></th>
       <th class="collection-as-table"><&|/l&>Update Type</&></th>
       <th class="collection-as-table text-left">
-        <input type="checkbox" name="DeleteAll" value="1" onclick="setCheckbox(this, /^Delete-\d+$/)" />
-        <&|/l&>Delete</&>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="DeleteAll" value="1" id="DeleteAll" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Delete-\d+$/)" />
+          <label class="custom-control-label" for="DeleteAll"><&|/l&>Delete</&></label>
+        </div>
       </th>
     </tr>
 % my $i = 1;
@@ -94,7 +96,10 @@
         </select>
       </td>
       <td class="collection-as-table">
-        <input type="checkbox" name="Delete-<% $i %>" id="Delete-<% $i %>" value="1" />
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="Delete-<% $i %>" id="Delete-<% $i %>" class="checkbox custom-control-input" value="1" />
+          <label class="custom-control-label" for="Delete-<% $i %>"></label>
+        </div>
       </td>
     </tr>
 % ++$i;
diff --git a/share/html/Admin/Lifecycles/Rights.html b/share/html/Admin/Lifecycles/Rights.html
index d13c8eb857..bf1672c9be 100644
--- a/share/html/Admin/Lifecycles/Rights.html
+++ b/share/html/Admin/Lifecycles/Rights.html
@@ -64,8 +64,10 @@
       <th class="collection-as-table"><&|/l&>To</&></th>
       <th class="collection-as-table"><&|/l&>Right Name</&></th>
       <th class="collection-as-table text-left">
-        <input type="checkbox" name="DeleteAll" value="1" onclick="setCheckbox(this, /^Delete-\d+$/)" />
-        <&|/l&>Delete</&>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="DeleteAll" value="1" id="DeleteAll" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Delete-\d+$/)" />
+          <label class="custom-control-label" for="DeleteAll"><&|/l&>Delete</&></label>
+        </div>
       </th>
     </tr>
 % my $i = 1;
@@ -82,7 +84,10 @@
       </td>
 
       <td class="collection-as-table">
-        <input type="checkbox" name="Delete-<% $i %>" id="Delete-<% $i %>" value="1" />
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="Delete-<% $i %>" id="Delete-<% $i %>" class="checkbox custom-control-input" value="1" />
+          <label class="custom-control-label" for="Delete-<% $i %>"></label>
+        </div>
       </td>
     </tr>
 % ++$i;
diff --git a/share/html/Admin/Tools/GnuPG.html b/share/html/Admin/Tools/GnuPG.html
index 4d194cfea8..adc14ab5b3 100644
--- a/share/html/Admin/Tools/GnuPG.html
+++ b/share/html/Admin/Tools/GnuPG.html
@@ -112,13 +112,23 @@
 <form action="<% RT->Config->Get('WebPath')%>/Admin/Tools/GnuPG.html" name="PublicKeys" method="POST" enctype="multipart/form-data">
     <table class="table collection-as-table">
         <tr>
-            <th><input type="checkbox" name="PublicKeyAll" value="1" onclick="setCheckbox(this, 'PublicKey')"></th>
+            <th>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" name="PublicKeyAll" value="1" id="PublicKeyAll" class="checkbox custom-control-input" onclick="setCheckbox(this, 'PublicKey')" />
+                <label class="custom-control-label" for="PublicKeyAll"></label>
+              </div>
+            </th>
             <th><% loc('Summary') %></th>
             <th><% loc('Trust Level') %></th>
         </tr>
 % for my $item ( @{$public{info}} ) {
         <tr>
-            <td><input type="checkbox" name="PublicKey" value="<% $item->{Fingerprint} %>" <% $delete{$item->{Fingerprint}} ? 'checked="checked"' : '' |n %> /></td>
+            <td>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" name="PublicKey" id="PublicKey-<% $item->{Fingerprint} %>" value="<% $item->{Fingerprint} %>" class="checkbox custom-control-input" <% $delete{$item->{Fingerprint}} ? 'checked="checked"' : '' |n %> />
+                <label class="custom-control-label" for="PublicKey-<% $item->{Fingerprint} %>"></label>
+              </div>
+            </td>
             <td><% $item->{Formatted} %></td>
             <td><% $owner_trust_level{$item->{OwnerTrustChar}} || loc('Not set') %></td>
         </tr>
@@ -161,12 +171,21 @@
 <form action="<% RT->Config->Get('WebPath')%>/Admin/Tools/GnuPG.html" name="PrivateKeys" method="POST" enctype="multipart/form-data">
     <table class="table collection-as-table">
         <tr>
-            <th><input type="checkbox" name="PrivateKeyAll" value="1" onclick="setCheckbox(this, 'DeletePrivateKey')"></th>
+            <th>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" name="PrivateKeyAll" value="1" id="PrivateKeyAll" class="checkbox custom-control-input" onclick="setCheckbox(this, 'PrivateKey')" />
+                <label class="custom-control-label" for="PrivateKeyAll"></label>
+              </div>
             <th><% loc('Summary') %></th>
         </tr>
 % for my $item ( @{$private{info}} ) {
         <tr>
-            <td><input type="checkbox" name="PrivateKey" value="<% $item->{Fingerprint} %>" <% $delete{$item->{Fingerprint}} ? 'checked="checked"' : '' |n %> /></td>
+            <td>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" name="PrivateKey" id="PrivateKey-<% $item->{Fingerprint} %>" value="<% $item->{Fingerprint} %>" class="checkbox custom-control-input" <% $delete{$item->{Fingerprint}} ? 'checked="checked"' : '' |n %> />
+                <label class="custom-control-label" for="PrivateKey-<% $item->{Fingerprint} %>"></label>
+              </div>
+            </td>
             <td><% $item->{Formatted} %></td>
         </tr>
 % }
diff --git a/share/html/Elements/Checkbox b/share/html/Elements/Checkbox
index 44b3eccb53..7ad4bdc2de 100644
--- a/share/html/Elements/Checkbox
+++ b/share/html/Elements/Checkbox
@@ -45,8 +45,10 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<input type="checkbox" class="checkbox" name="<%$Name%>" value="1" <%$IsChecked%> />
-
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="<% $Name %>" id="<% $Name %>" value="1" class="checkbox custom-control-input" <%$IsChecked%> />
+  <label class="custom-control-label" for="<% $Name %>"></label>
+</div>
 <%ARGS>
 $Name => undef
 $Default => undef
diff --git a/share/html/Elements/ColumnMap b/share/html/Elements/ColumnMap
index 17422c2261..73b538e379 100644
--- a/share/html/Elements/ColumnMap
+++ b/share/html/Elements/ColumnMap
@@ -323,27 +323,40 @@ $WCOLUMN_MAP = $COLUMN_MAP = {
             my $name = $_[1] || 'SelectedTickets';
             my $checked = $DECODED_ARGS->{ $name .'All' }? 'checked="checked"': '';
 
-            return \qq{<input type="checkbox" name="}, $name, \qq{All" value="1" $checked
-                              onclick="setCheckbox(this, },
-                              $m->interp->apply_escapes($name,'j'),
-                              \qq{)" />};
+            my $escape_h_name = $m->interp->apply_escapes($name,'h');
+            my $escape_j_name = $m->interp->apply_escapes($name,'j');
+
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="${escape_h_name}All" id="${escape_h_name}All" value="1" class="checkbox custom-control-input" $checked onclick="setCheckbox(this, $escape_j_name)" />
+  <label class="custom-control-label" for="${escape_h_name}All"></label>
+</div>};
         },
         value => sub {
             my $id = $_[0]->id;
 
             my $name = $_[2] || 'SelectedTickets';
-            return \qq{<input type="checkbox" name="}, $name, \qq{" value="$id" checked="checked" />}
-                if $DECODED_ARGS->{ $name . 'All'};
 
-            my $arg = $DECODED_ARGS->{ $name };
             my $checked = '';
-            if ( $arg && ref $arg ) {
-                $checked = 'checked="checked"' if grep $_ == $id, grep { defined and length } @$arg;
+            if ( $DECODED_ARGS->{ $name . 'All'} ) {
+                $checked = 'checked="checked"';
             }
-            elsif ( $arg ) {
-                $checked = 'checked="checked"' if $arg == $id;
+            else {
+                my $arg = $DECODED_ARGS->{ $name };
+                if ( $arg && ref $arg ) {
+                    $checked = 'checked="checked"' if grep $_ == $id, grep { defined and length } @$arg;
+                }
+                elsif ( $arg ) {
+                    $checked = 'checked="checked"' if $arg == $id;
+                }
             }
-            return \qq{<input type="checkbox" name="}, $name, \qq{" value="$id" $checked />}
+
+            my $escape_h_name = $m->interp->apply_escapes($name,'h');
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="$escape_h_name" id="$escape_h_name-$id" value="$id" class="checkbox custom-control-input" $checked />
+  <label class="custom-control-label" for="$escape_h_name-$id"></label>
+</div>};
         },
     },
     RadioButton => {
diff --git a/share/html/Elements/EditCustomDateRanges b/share/html/Elements/EditCustomDateRanges
index c4860e175d..427d401339 100644
--- a/share/html/Elements/EditCustomDateRanges
+++ b/share/html/Elements/EditCustomDateRanges
@@ -57,8 +57,10 @@
       <th class="collection-as-table"><&|/l&>To Value<br>if Unset</&></th>
       <th class="collection-as-table"><&|/l&>Business<br>Hours?</&></th>
       <th class="collection-as-table text-left">
-        <input type="checkbox" name="DeleteAll" value="1" onclick="setCheckbox(this, /^\d+-Delete$/)" />
-        <&|/l&>Delete</&>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="DeleteAll" value="1" id="custom-date-ranges-delete-all" class="checkbox custom-control-input" onclick="setCheckbox(this, /^\d+-Delete$/)" />
+          <label class="custom-control-label" for="custom-date-ranges-delete-all"><&|/l&>Delete</&></label>
+        </div>
       </th>
     </tr>
 % my $i = 0;
@@ -79,7 +81,12 @@
           <option value="0" <% $date_range_spec{business_time} ? '': 'selected="selected"' |n%>><&|/l&>No</&></option>
         </select>
       </td>
-      <td class="collection-as-table"><input type="checkbox" name="<% $id %>-Delete" value="1" /></td>
+      <td class="collection-as-table">
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" name="<% $id %>-Delete" id="custom-date-ranges-delete-<% $id %>" value="1" class="checkbox custom-control-input" />
+          <label class="custom-control-label" for="custom-date-ranges-delete-<% $id %>"></label>
+        </div>
+      </td>
     </tr>
 %     $id++;
 %   }
diff --git a/share/html/Elements/EditCustomFieldCombobox b/share/html/Elements/EditCustomFieldCombobox
index 34030a1968..fa51214d0b 100644
--- a/share/html/Elements/EditCustomFieldCombobox
+++ b/share/html/Elements/EditCustomFieldCombobox
@@ -46,9 +46,10 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 % while ($Values and my $value = $Values->Next and $Multiple) {
-<input type="checkbox" id="<%$delete_name%>" class="checkbox CF-<%$CustomField->id%>-Edit" name="<%$delete_name%>" class="CF-<%$CustomField->id%>-Edit" value="<% $value->Id %>" />
-<label for="<%$delete_name%>"><% $value->Content %></label>
-<br />
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="<% $delete_name %>" id="<% $delete_name %>-<% $value->Id %>" value="<% $value->Id %>" class="CF-<%$CustomField->id%>-Edit checkbox custom-control-input" />
+  <label class="custom-control-label" for="<% $delete_name %>-<% $value->Id %>"><% $value->Content %></label>
+</div>
 % }
 % (!$Multiple or !$MaxValues or !$Values or $Values->Count < $MaxValues) or return;
 <& /Widgets/ComboBox,
diff --git a/share/html/Elements/RT__CustomField/ColumnMap b/share/html/Elements/RT__CustomField/ColumnMap
index 4d4706725b..3ff9898e06 100644
--- a/share/html/Elements/RT__CustomField/ColumnMap
+++ b/share/html/Elements/RT__CustomField/ColumnMap
@@ -125,10 +125,11 @@ my $COLUMN_MAP = {
             my $name = 'RemoveCustomField';
             my $checked = $DECODED_ARGS->{ $name .'All' }? 'checked="checked"': '';
 
-            return \qq{<input type="checkbox" name="}, $name, \qq{All" value="1" $checked
-                              onclick="setCheckbox(this, },
-                              $m->interp->apply_escapes($name,'j'),
-                              \qq{)" />};
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="${name}All" id="${name}All" value="1" class="checkbox custom-control-input" $checked onclick="setCheckbox(this, '$name')" />
+  <label class="custom-control-label" for="${name}All"></label>
+</div>};
         },
         value => sub {
             my $id = $_[0]->id;
@@ -144,7 +145,11 @@ my $COLUMN_MAP = {
             elsif ( $arg ) {
                 $checked = 'checked="checked"' if $arg == $id;
             }
-            return \qq{<input type="checkbox" name="}, $name, \qq{" value="$id" $checked />}
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="$name" id="$name-$id" value="$id" class="checkbox custom-control-input" $checked />
+  <label class="custom-control-label" for="$name-$id"></label>
+</div>};
         },
     },
     MoveCF => {
diff --git a/share/html/Elements/RT__CustomRole/ColumnMap b/share/html/Elements/RT__CustomRole/ColumnMap
index 0f3a1be313..77596a264c 100644
--- a/share/html/Elements/RT__CustomRole/ColumnMap
+++ b/share/html/Elements/RT__CustomRole/ColumnMap
@@ -105,10 +105,11 @@ my $COLUMN_MAP = {
             my $name = 'RemoveCustomRole';
             my $checked = $DECODED_ARGS->{ $name .'All' }? 'checked="checked"': '';
 
-            return \qq{<input type="checkbox" name="}, $name, \qq{All" value="1" $checked
-                              onclick="setCheckbox(this, },
-                              $m->interp->apply_escapes($name,'j'),
-                              \qq{)" />};
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="${name}All" id="${name}All" value="1" class="checkbox custom-control-input" $checked onclick="setCheckbox(this, '$name')" />
+  <label class="custom-control-label" for="${name}All"></label>
+</div>};
         },
         value => sub {
             my $id   = $_[0]->id;
@@ -122,7 +123,11 @@ my $COLUMN_MAP = {
             elsif ( $arg ) {
                 $checked = 'checked="checked"' if $arg == $id;
             }
-            return \qq{<input type="checkbox" name="}, $name, \qq{" value="$id" $checked />}
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="$name" id="$name-$id" value="$id" class="checkbox custom-control-input" $checked />
+  <label class="custom-control-label" for="$name-$id"></label>
+</div>};
         },
     },
     MoveCR => {
diff --git a/share/html/Elements/RT__Scrip/ColumnMap b/share/html/Elements/RT__Scrip/ColumnMap
index 0c38fd309c..ddaea620b2 100644
--- a/share/html/Elements/RT__Scrip/ColumnMap
+++ b/share/html/Elements/RT__Scrip/ColumnMap
@@ -116,8 +116,11 @@ my $COLUMN_MAP = {
             my $name = 'RemoveScrip';
             my $checked = $m->request_args->{ $name .'All' }? 'checked="checked"': '';
 
-            return \qq{<input type="checkbox" name="${name}All" value="1" $checked
-                              onclick="setCheckbox(this, '$name')" />};
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="${name}All" id="${name}All" value="1" class="checkbox custom-control-input" $checked onclick="setCheckbox(this, '$name')" />
+  <label class="custom-control-label" for="${name}All"></label>
+</div>};
         },
         value => sub {
             my $id = $_[0]->id;
@@ -133,7 +136,11 @@ my $COLUMN_MAP = {
             elsif ( $arg ) {
                 $checked = 'checked="checked"' if $arg == $id;
             }
-            return \qq{<input type="checkbox" name="$name" value="$id" $checked />}
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="$name" id="$name-$id" value="$id" class="checkbox custom-control-input" $checked />
+  <label class="custom-control-label" for="$name-$id"></label>
+</div>};
         },
     },
     Move => {
diff --git a/share/html/Elements/RT__Ticket/ColumnMap b/share/html/Elements/RT__Ticket/ColumnMap
index 78391c4079..a22d41b6e7 100644
--- a/share/html/Elements/RT__Ticket/ColumnMap
+++ b/share/html/Elements/RT__Ticket/ColumnMap
@@ -345,7 +345,14 @@ $COLUMN_MAP = {
         attribute => 'checkbox',
         title => 'Update', # loc
         align     => 'right',
-        value     => sub { return \('<input type="checkbox" class="checkbox" name="UpdateTicket'.$_[0]->id.'" value="1" checked="checked" />') }
+        value     => sub {
+            my $name = 'UpdateTicket' . $_[0]->id;
+            return \qq{
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name="$name" id="$name" value="1" class="checkbox custom-control-input" checked="checked" />
+  <label class="custom-control-label" for="$name"></label>
+</div>};
+        }
     },
 
     Bookmark => {