Allow deletion of factors (#628)

* Allow deletion of factors

* include enrollment time

* tooltip

* use d-none

* update

* deal with d-none

* fix

* don't hide

* don't show without hide

* construct elements

* confirm prompt

* icon

Author: whaught

cmd/server/assets/login/_loginscripts.html

@@ -40,7 +40,7 @@
 {{end}}
 
 {{define "login/pindiv"}}
-<div class="card shadow-sm" style="display:none;" id="sms-code-div">
+<div class="card shadow-sm d-none" id="sms-code-div">
   <div class="card-header">
     SMS Confirmation Code
     <button type="button" class="close" aria-label="Close" id="sms-code-close">

cmd/server/assets/login/account.html

@@ -47,6 +47,7 @@ <h6 class="card-title  mt-3">System admin</h6>
         </li>
         <li class="list-group-item">
           <div class="card-text" id="phone-registered">loading</div>
+          <a href="/login/register-phone" id='register-link' class="card-link">Register phone</a>
         </li>
         <li class="list-group-item">
           <div class="card-text">Password was last changed <span class="text-info">{{$user.PasswordAgeString}}</span>
@@ -100,18 +101,23 @@ <h6 class="card-title  mt-3">System admin</h6>
 
         if (user.multiFactor.enrolledFactors.length > 0) {
           $phoneReg.html('Two-factor auth is <span class="text-success">enabled</span>');
+          $('#register-link').text('Manage auth factors');
         } else {
           $phoneReg.addClass("text-danger");
           $phoneReg.html('No second auth factor registered');
-          $phoneReg.after('<a href="/login/register-phone" class="card-link">Register phone</a>');
         }
 
         if (user.emailVerified) {
           $emailVer.html('Email address is <span class="text-success">verified</span>');
         } else {
           $emailVer.addClass("text-danger");
           $emailVer.html('Email address is <strong>not</strong> verified');
-          $emailVer.after('<a href="/login/verify-email" class="card-link">Verify email</a>');
+
+          let $link = $('<a/>');
+          $link.addClass('card-link');
+          $link.attr('href','/login/verify-email');
+          $link.text('Verify email');
+          $emailVer.after($link);
         }
       });
     });

cmd/server/assets/login/login.html

@@ -103,7 +103,7 @@
                     setTimeout(function() { $resendPin.removeClass('disabled'); }, 15000);
                     $submitPin.prop('disabled', false);
                     $loginDiv.hide();
-                    $pinDiv.show();
+                    $pinDiv.removeClass('d-none');
                   }).catch(function(error) {
                     flash.clear();
                     flash.error(error.message);
@@ -142,7 +142,7 @@
       $pinClose.on('click', function(event) {
         $submit.prop('disabled', false);
         $loginDiv.show();
-        $pinDiv.hide();
+        $pinDiv.addClass('d-none');
       });
 
       $resendPin.on('click', function(event) {

cmd/server/assets/login/register-phone.html

@@ -19,6 +19,13 @@
     <div class="d-flex vh-100">
       <div class="d-flex w-100 justify-content-center">
         <div class="col-sm-6">
+          <div class="card shadow-sm mb-3 d-none" id="registered-div">
+            <div class="card-header">Registered factors</div>
+            <div class="card-body">
+              <ul id="factors" class="list-group list-group-flush">
+              </ul>
+            </div>
+          </div>
 
           <div class="card shadow-sm" id="register-div">
             <div class="card-header">Multi-factor authentication</div>
@@ -34,7 +41,7 @@
                 <strong>{{$currentRealm.Name}}</strong>
                 {{if eq .currentRealm.MFAMode.String "required"}}requires{{else}}recommends{{end}}
                 enhanced security via SMS-based 2-factor authentication. Please
-                provide your information below.
+                provide your information below to enroll.
               </p>
 
               <form id="register-form" class="floating-form" action="/" method="POST">
@@ -100,8 +107,81 @@
       let $submitPin = $('#sms-code-submit');
       let $resendPin = $('#sms-code-resend');
 
+      let $registeredDiv = $('#registered-div');
+      let $factors = $('#factors');
+
       let verId = ""
 
+      firebase.auth().onAuthStateChanged(function(user) {
+        if (!user) {
+          return
+        }
+
+        if (user.multiFactor.enrolledFactors.length > 0) {
+          $skip.text('Account settings');
+          $skip.attr('href','/account');
+
+          for (i = 0; i < user.multiFactor.enrolledFactors.length; i++) {
+            let factor = user.multiFactor.enrolledFactors[i];
+            let $li = $('<li/>');
+            $li.addClass('list-group-item');
+            $li.attr('id', 'factor'+factor.uid);
+
+            let $row = $('<div/>').text(factor.displayName);
+            $li.append($row);
+
+            let $icon = $('<span/>');
+            $icon.addClass('oi oi-phone mr-1');
+            $icon.attr('aria-hidden','true');
+            $row.prepend($icon);
+
+            let $unenroll = $('<a/>');
+            $unenroll.addClass('text-danger float-right');
+            $unenroll.attr('href', '#')
+            $unenroll.attr('title', 'Delete this factor');
+            $unenroll.tooltip();
+
+            $icon = $('<span/>');
+            $icon.addClass('oi oi-delete mr-1');
+            $icon.attr('aria-hidden','true');
+            $unenroll.append($icon);
+            $row.append($unenroll);
+
+            let $time = $('<small/>');
+            $time.addClass('row text-muted ml-1')
+            $time.text('Enrolled at: ' + factor.enrollmentTime);
+            $row.append($time);
+
+            $unenroll.on('click', function(event) {
+              unenrollFactor(factor);
+            });
+
+            $factors.append($li);
+          }
+          $registeredDiv.removeClass('d-none');
+        }
+      });
+
+      function unenrollFactor(factor) {
+        if (window.confirm('Are you sure you want to delete ' + factor.displayName) !== true) {
+          return;
+        }
+
+        firebase.auth().currentUser.multiFactor.unenroll(factor)
+          .then(function() {
+            $('#factor'+factor.uid).remove();
+            flash.clear();
+            flash.alert('Successfully unenrolled ${factor.displayName}');
+
+            if (firebase.auth().currentUser.multiFactor.enrolledFactors.length == 0) {
+              $registeredDiv.addClass('d-none');
+            }
+          }).catch(function(error) {
+            flash.clear();
+            flash.error(error.message);
+          });
+      }
+
       $registerForm.on('submit', function(event) {
         event.preventDefault();
 
@@ -123,7 +203,7 @@
           verId = verificationId
           setTimeout(function() { $resendPin.removeClass('disabled'); }, 15000);
           $registerDiv.hide();
-          $pinDiv.show();
+          $pinDiv.removeClass('d-none');
         }).catch(function(err) {
           flash.clear();
           flash.error(err.message);
@@ -145,7 +225,9 @@
         user.multiFactor.enroll(multiFactorAssertion, $displayName.val()).then(function() {
           flash.clear();
           flash.alert('SMS authentication enrolled successfully.');
-          $skip.text("Continue")
+          $skip.text('Continue');
+          $registerDiv.show();
+          $pinDiv.addClass('d-none');
         }).catch(function(err) {
           flash.clear();
           flash.error(err.message);
@@ -156,7 +238,7 @@
       $pinClose.on('click', function(event) {
         $submit.prop('disabled', false);
         $registerDiv.show();
-        $pinDiv.hide();
+        $pinDiv.addClass('d-none');
       });
 
       $resendPin.on('click', function(event) {

cmd/server/assets/users/import.html

@@ -48,11 +48,11 @@ <h1>Import users</h1>
       </div>
 
       <div class="card-body">
-        <div class="progress" id="progress-div" style="display:none;">
+        <div class="progress d-none" id="progress-div" style="display:none;>
           <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
             aria-valuemax="100"></div>
         </div>
-        <table class="table table-bordered" id="csv-table" style="display:none;">
+        <table class="table table-bordered d-none" id="csv-table">
           <thead>
             <tr>
               <th>Email</th>
@@ -105,7 +105,7 @@ <h1>Import users</h1>
         $cancel.prop('disabled', false);
 
         $table.show(100);
-        $progressDiv.show();
+        $progressDiv.removeClass('d-none');
 
         var reader = new FileReader();
         reader.onload = upload.start;