From 7e67dafe4689ec0fb233763f32d0e2b5589b3e5f Mon Sep 17 00:00:00 2001
From: Jakub Onderka <jakub.onderka@gmail.com>
Date: Sat, 31 Oct 2020 21:31:11 +0100
Subject: [PATCH] chg: [UI] Simplified user edit forms and interface

---
 app/View/Users/admin_add.ctp  | 19 ++++++-------------
 app/View/Users/admin_edit.ctp | 28 +++++++++++-----------------
 app/View/Users/change_pw.ctp  | 12 +-----------
 app/View/Users/edit.ctp       | 22 +++++++---------------
 app/webroot/js/misp.js        |  8 ++++++++
 5 files changed, 33 insertions(+), 56 deletions(-)

diff --git a/app/View/Users/admin_add.ctp b/app/View/Users/admin_add.ctp
index c2e8cc326..135745275 100644
--- a/app/View/Users/admin_add.ctp
+++ b/app/View/Users/admin_add.ctp
@@ -37,7 +37,7 @@
                 $passwordPopover = '<span class="blue bold">' . __('Minimal length') . '</span>: ' . h($length) . '<br>';
                 $passwordPopover .= '<span class="blue bold">' . __('Complexity') . '</span>: ' . h($complexity);
                 echo $this->Form->input('password', array(
-                    'label' => __('Password') . ' <span id="PasswordPopover" class="fas fa-info-circle"></span>'
+                    'label' => __('Password') . ' <span id="PasswordPopover" data-content="' . h($passwordPopover) . '" class="fas fa-info-circle"></span>'
                 ));
                 echo $this->Form->input('confirm_password', array('type' => 'password', 'div' => array('class' => 'input password required')));
             ?>
@@ -59,9 +59,9 @@
         }
         echo $this->Form->input('role_id', $roleOptions);
         echo $this->Form->input('authkey', array('value' => $authkey, 'readonly' => 'readonly', 'div' => 'input clear'));
-        echo $this->Form->input('nids_sid');
+        echo $this->Form->input('nids_sid', ['label' => __('NIDS SID')]);
     ?>
-        <div id = "syncServers" class="hidden">
+        <div id="syncServers" class="hidden">
     <?php
             echo $this->Form->input('server_id', array('label' => __('Sync user for'), 'div' => 'clear', 'options' => $servers));
     ?>
@@ -70,6 +70,7 @@
         echo $this->Form->input('gpgkey', array('label' => __('GnuPG key'), 'div' => 'clear', 'class' => 'input-xxlarge', 'placeholder' => __('Paste the user\'s GnuPG key here or try to retrieve it from the CIRCL key server by clicking on "Fetch GnuPG key" below.')));
     ?>
         <div class="clear"><span  role="button" tabindex="0" aria-label="<?php echo __('Fetch the user\'s GnuPG key');?>" onClick="lookupPGPKey('UserEmail');" class="btn btn-inverse" style="margin-bottom:10px;"><?php echo __('Fetch GnuPG key');?></span></div>
+        <div class="user-edit-checkboxes" style="margin-bottom: 1em">
     <?php
         if (Configure::read('SMIME.enabled')) echo $this->Form->input('certif_public', array('label' => __('S/MIME Public certificate (PEM format)'), 'div' => 'clear', 'class' => 'input-xxlarge', 'placeholder' => __('Paste the user\'s S/MIME public key in PEM format here.')));
         $default_publish_alert = Configure::check('MISP.default_publish_alert') ? Configure::read('MISP.default_publish_alert') : true;
@@ -83,9 +84,6 @@
             'type' => 'checkbox',
             'checked' => isset($this->request->data['User']['contactalert']) ? $this->request->data['User']['contactalert'] : true
         ));
-    ?>
-        <div class="clear"></div>
-    <?php
         echo $this->Form->input('disabled', array('type' => 'checkbox', 'label' => __('Disable this user account')));
         echo $this->Form->input('notify', array(
             'label' => __('Send credentials automatically'),
@@ -93,9 +91,10 @@
             'checked' => isset($this->request->data['User']['notify']) ? $this->request->data['User']['notify'] : true
         ));
     ?>
+        </div>
     </fieldset>
 <?php
-    echo $this->Form->button(__('Submit'), array('class' => 'btn btn-primary'));
+    echo $this->Form->button(__('Create user'), array('class' => 'btn btn-primary'));
     echo $this->Form->end();?>
 </div>
 <?php
@@ -116,11 +115,5 @@ $(function() {
     $('#UserExternalAuthRequired').change(function() {
         checkUserExternalAuth();
     });
-    $('#PasswordPopover').popover("destroy").popover({
-        placement: 'right',
-        html: 'true',
-        trigger: 'hover',
-        content: <?= json_encode($passwordPopover); ?>
-    });
 });
 </script>
diff --git a/app/View/Users/admin_edit.ctp b/app/View/Users/admin_edit.ctp
index f34a31f2d..d687707ae 100644
--- a/app/View/Users/admin_edit.ctp
+++ b/app/View/Users/admin_edit.ctp
@@ -1,5 +1,5 @@
 <div class="users form">
-<?php echo $this->Form->create('User', array('novalidate'=>true));?>
+<?php echo $this->Form->create('User', array('novalidate' => true));?>
     <fieldset>
         <legend><?php echo __('Admin Edit User'); ?></legend>
     <?php
@@ -42,10 +42,10 @@
         <div id="PasswordDiv">
             <div class="clear"></div>
             <?php
-                $passwordPopover = '<span class=\"blue bold\">' . __('Length') .'</span>: ' . h($length) . '<br />';
-                $passwordPopover .= '<span class=\"blue bold\">' . __('Complexity') .'</span>: ' . h($complexity);
+                $passwordPopover = '<span class="blue bold">' . __('Length') .'</span>: ' . h($length) . '<br>';
+                $passwordPopover .= '<span class="blue bold">' . __('Complexity') .'</span>: ' . h($complexity);
                 echo $this->Form->input('password', array(
-                    'label' => __('Password') . ' <span id="PasswordPopover" class="fas fa-info-circle"></span>'
+                    'label' => __('Password') . ' <span id="PasswordPopover" data-content="' . h($passwordPopover) .'" class="fas fa-info-circle"></span>'
                 ));
                 echo $this->Form->input('confirm_password', array('type' => 'password', 'div' => array('class' => 'input password required')));
             ?>
@@ -74,7 +74,10 @@
     ?>
         <div class="clear"><span role="button" tabindex="0" aria-label="<?php echo __('Fetch the user\'s GnuPG key');?>" onClick="lookupPGPKey('UserEmail');" class="btn btn-inverse" style="margin-bottom:10px;"><?php echo __('Fetch GnuPG key');?></span></div>
     <?php
-        if (Configure::read('SMIME.enabled')) echo $this->Form->input('certif_public', array('label' => __('S/MIME Public certificate (PEM format)'), 'div' => 'clear', 'class' => 'input-xxlarge', 'placeholder' => __('Paste the user\'s S/MIME public key in PEM format here.')));
+        if (Configure::read('SMIME.enabled')) {
+            echo $this->Form->input('certif_public', array('label' => __('S/MIME Public certificate (PEM format)'), 'div' => 'clear', 'class' => 'input-xxlarge', 'placeholder' => __('Paste the user\'s S/MIME public key in PEM format here.')));
+        }
+        echo '<div class="user-edit-checkboxes">';
         echo $this->Form->input('termsaccepted', array('type' => 'checkbox', 'label' => __('Terms accepted')));
         echo $this->Form->input('change_pw', [
             'type' => 'checkbox',
@@ -84,11 +87,8 @@
         ]);
         echo $this->Form->input('autoalert', array('label' => __('Receive alerts when events are published'), 'type' => 'checkbox'));
         echo $this->Form->input('contactalert', array('label' => __('Receive alerts from "contact reporter" requests'), 'type' => 'checkbox'));
-    ?>
-        <div class="clear"></div>
-    <?php
         echo $this->Form->input('disabled', array('type' => 'checkbox', 'label' => __('Disable this user account')));
-
+        echo '</div>';
     ?>
     </fieldset>
     <div style="border-bottom: 1px solid #e5e5e5;width:100%;">&nbsp;</div>
@@ -100,7 +100,7 @@
 ?>
     </div>
 <?php
-    echo $this->Form->button(__('Submit'), array('class' => 'btn btn-primary'));
+    echo $this->Form->button(__('Edit user'), array('class' => 'btn btn-primary'));
     echo $this->Form->end();
     echo $this->Form->create('User', array(
         'url' => array('controller' => 'users', 'action' => 'resetauthkey', $id),
@@ -115,7 +115,7 @@
 
 <script type="text/javascript">
     var syncRoles = <?php echo json_encode($syncRoles); ?>;
-    $(document).ready(function() {
+    $(function() {
         syncUserSelected();
         $('#UserRoleId').change(function() {
             syncUserSelected();
@@ -128,11 +128,5 @@
         $('#UserExternalAuthRequired').change(function() {
             checkUserExternalAuth();
         });
-        $('#PasswordPopover').popover("destroy").popover({
-            placement: 'right',
-            html: 'true',
-            trigger: 'hover',
-            content: '<?php echo $passwordPopover; ?>'
-        });
     });
 </script>
diff --git a/app/View/Users/change_pw.ctp b/app/View/Users/change_pw.ctp
index c5a2d9674..e9bdecb39 100644
--- a/app/View/Users/change_pw.ctp
+++ b/app/View/Users/change_pw.ctp
@@ -6,7 +6,7 @@
         $passwordPopover = '<span class="blue bold">' . __('Minimal length') . '</span>: ' . h($length) . '<br>';
         $passwordPopover .= '<span class="blue bold">' . __('Complexity') . '</span>: ' . h($complexity);
         echo $this->Form->input('password', array(
-            'label' => __('Password') . ' <span id="PasswordPopover" class="fas fa-info-circle"></span>', 'autofocus'
+            'label' => __('Password') . ' <span id="PasswordPopover" data-content="' . h($passwordPopover) . '" class="fas fa-info-circle"></span>', 'autofocus'
         ));
         echo $this->Form->input('confirm_password', array('type' => 'password', 'div' => array('class' => 'input password required')));
     ?>
@@ -24,16 +24,6 @@ echo $this->Form->button(__('Submit'), array('class' => 'btn btn-primary'));
 echo $this->Form->end();
 ?>
 </div>
-<script type="text/javascript">
-    $(function() {
-        $('#PasswordPopover').popover("destroy").popover({
-            placement: 'right',
-            html: 'true',
-            trigger: 'hover',
-            content: <?= json_encode($passwordPopover) ?>
-        });
-    });
-</script>
 <?php
     echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'globalActions', 'menuItem' => 'change_pw'));
 ?>
diff --git a/app/View/Users/edit.ctp b/app/View/Users/edit.ctp
index 931acbbd9..77d25f1c1 100755
--- a/app/View/Users/edit.ctp
+++ b/app/View/Users/edit.ctp
@@ -11,7 +11,7 @@
         $passwordPopover = '<span class="blue bold">' . __('Minimal length') . '</span>: ' . h($length) . '<br>';
         $passwordPopover .= '<span class="blue bold">' . __('Complexity') . '</span>: ' . h($complexity);
         echo $this->Form->input('password', array(
-            'label' => __('Password') . ' <span id="PasswordPopover" class="fas fa-info-circle"></span>'
+            'label' => __('Password') . ' <span id="PasswordPopover" data-content="' . h($passwordPopover) . '" class="fas fa-info-circle"></span>'
         ));
         echo $this->Form->input('confirm_password', array('type' => 'password', 'div' => array('class' => 'input password required')));
     }
@@ -26,9 +26,13 @@
         ?>
             <div class="clear"><span role="button" tabindex="0" aria-label="<?php echo __('Fetch GnuPG key');?>" onClick="lookupPGPKey('UserEmail');" class="btn btn-inverse" style="margin-bottom:10px;"><?php echo __('Fetch GnuPG key');?></span></div>
         <?php
-        if (Configure::read('SMIME.enabled')) echo $this->Form->input('certif_public', array('label' => __('S/MIME Public certificate (PEM format)'), 'div' => 'clear', 'class' => 'input-xxlarge'));
+        if (Configure::read('SMIME.enabled')) {
+            echo $this->Form->input('certif_public', array('label' => __('S/MIME Public certificate (PEM format)'), 'div' => 'clear', 'class' => 'input-xxlarge'));
+        }
+        echo '<div class="user-edit-checkboxes">';
         echo $this->Form->input('autoalert', array('label' => __('Receive alerts when events are published'), 'type' => 'checkbox'));
         echo $this->Form->input('contactalert', array('label' => __('Receive alerts from "contact reporter" requests'), 'type' => 'checkbox'));
+        echo '</div>';
     ?>
     </fieldset>
     <div style="border-bottom: 1px solid #e5e5e5;width:100%;">&nbsp;</div>
@@ -40,7 +44,7 @@
 ?>
     </div>
 <?php
-    echo $this->Form->button(__('Submit'), array('class' => 'btn btn-primary'));
+    echo $this->Form->button(__('Edit'), array('class' => 'btn btn-primary'));
     echo $this->Form->end();
 ?>
 </div>
@@ -48,16 +52,4 @@
     $user['User']['id'] = $id;
     echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'globalActions', 'menuItem' => 'edit', 'user' => $user));
 ?>
-<?php if ($canChangePassword): ?>
-<script type="text/javascript">
-    $(function() {
-        $('#PasswordPopover').popover("destroy").popover({
-            placement: 'right',
-            html: 'true',
-            trigger: 'hover',
-            content: <?= json_encode($passwordPopover) ?>
-        });
-    });
-</script>
-<?php endif; ?>
 <?php echo $this->Js->writeBuffer();
diff --git a/app/webroot/js/misp.js b/app/webroot/js/misp.js
index f35f91dca..25d96e419 100644
--- a/app/webroot/js/misp.js
+++ b/app/webroot/js/misp.js
@@ -4684,6 +4684,14 @@ $(document).ready(function() {
             return $(this).data('disabled-reason');
         }
     });
+    $('#PasswordPopover').popover("destroy").popover({
+        placement: 'right',
+        html: 'true',
+        trigger: 'hover',
+        content: function () {
+            return $(this).data('content');
+        }
+    });
     $(".queryPopover").click(function() {
         url = $(this).data('url');
         id = $(this).data('id');