From 6c57ddb563f174135cb044728f295902f3c6fbaf Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Fri, 29 Jul 2022 12:45:37 +1200
Subject: [PATCH] feat(ui): EE-3574 css portainer users (#7295)

* feat(ui): EE-3574 css portainer users

* feat(users): updated UI based on PR feedback

* feat(user): updated admin toggle with <por-switch-field>

* feat(user): fixed alert circle position
---
 .../users-datatable/usersDatatable.html       | 54 +++++-----
 app/portainer/views/users/users.html          | 99 +++++++++++--------
 app/portainer/views/users/usersController.js  |  6 ++
 3 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/app/portainer/components/datatables/users-datatable/usersDatatable.html b/app/portainer/components/datatables/users-datatable/usersDatatable.html
index 16de4f3b9..6b4920d51 100644
--- a/app/portainer/components/datatables/users-datatable/usersDatatable.html
+++ b/app/portainer/components/datatables/users-datatable/usersDatatable.html
@@ -1,31 +1,37 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="actionBar" ng-show="$ctrl.isAdmin">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="user-removeUserButton"
-        >
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          ng-model-options="{ debounce: 300 }"
-        />
+      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
+
+        <div class="actionBar !gap-3" ng-show="$ctrl.isAdmin">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="user-removeUserButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+        </div>
       </div>
+
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells" data-cy="user-userTable">
           <thead>
diff --git a/app/portainer/views/users/users.html b/app/portainer/views/users/users.html
index a7a1b4c5a..d4d0417e8 100644
--- a/app/portainer/views/users/users.html
+++ b/app/portainer/views/users/users.html
@@ -3,12 +3,12 @@
 <div class="row" ng-if="isAdmin">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-plus" title-text="Add a new user"> </rd-widget-header>
+      <rd-widget-header icon="plus" feather-icon="true" title-text="Add a new user"> </rd-widget-header>
       <rd-widget-body>
         <form name="form" class="form-horizontal">
           <!-- name-input -->
           <div class="form-group">
-            <label for="username" class="col-sm-3 col-lg-2 control-label text-left">
+            <label for="username" class="col-sm-3 col-lg-2 control-label text-left required">
               Username
               <portainer-tooltip ng-if="AuthenticationMethod === 2" message="'Username must exactly match username defined in external LDAP source.'"></portainer-tooltip>
             </label>
@@ -24,45 +24,58 @@
                   auto-focus
                   data-cy="user-usernameInput"
                 />
-                <span class="input-group-addon"><i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[state.validUsername]" aria-hidden="true"></i></span>
+                <span class="input-group-addon">
+                  <pr-icon class="fa green-icon" icon="'check'" feather="true" aria-hidden="true" ng-if="state.validUsername"></pr-icon>
+                  <pr-icon class="fa red-icon" icon="'x'" feather="true" aria-hidden="true" ng-if="!state.validUsername"></pr-icon>
+                </span>
               </div>
             </div>
           </div>
           <!-- !name-input -->
           <!-- new-password-input -->
           <div class="form-group" ng-if="AuthenticationMethod === 1">
-            <label for="password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+            <label for="password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
             <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input
-                  type="password"
-                  class="form-control"
-                  ng-model="formValues.Password"
-                  id="password"
-                  name="password"
-                  ng-minlength="requiredPasswordLength"
-                  data-cy="user-passwordInput"
-                />
-              </div>
+              <input
+                type="password"
+                class="form-control"
+                ng-model="formValues.Password"
+                id="password"
+                name="password"
+                ng-minlength="requiredPasswordLength"
+                data-cy="user-passwordInput"
+              />
             </div>
           </div>
           <!-- !new-password-input -->
           <!-- confirm-password-input -->
           <div class="form-group" ng-if="AuthenticationMethod === 1">
-            <label for="confirm_password" class="col-sm-3 col-lg-2 control-label text-left">Confirm password</label>
+            <label for="confirm_password" class="col-sm-3 col-lg-2 control-label text-left required">Confirm password</label>
             <div class="col-sm-8">
               <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" data-cy="user-passwordConfirmInput" />
-                <span class="input-group-addon"
-                  ><i
-                    ng-class="
-                      { true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword]
-                    "
+                <input
+                  type="password"
+                  class="form-control form-control--has-icon"
+                  ng-model="formValues.ConfirmPassword"
+                  id="confirm_password"
+                  data-cy="user-passwordConfirmInput"
+                />
+                <span class="input-group-addon">
+                  <pr-icon
+                    class="fa green-icon"
+                    icon="'check'"
+                    feather="true"
                     aria-hidden="true"
-                  ></i
-                ></span>
+                    ng-if="form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword"
+                  ></pr-icon>
+                  <pr-icon
+                    class="fa red-icon"
+                    icon="'x'"
+                    feather="true"
+                    aria-hidden="true"
+                    ng-if="!(form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword)"
+                  ></pr-icon>
+                </span>
               </div>
             </div>
           </div>
@@ -80,21 +93,21 @@
           <!-- admin-checkbox -->
           <div class="form-group" ng-if="isAdmin">
             <div class="col-sm-12">
-              <label for="permissions" class="control-label text-left">
-                Administrator
-                <portainer-tooltip
-                  message="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'"
-                ></portainer-tooltip>
-              </label>
-              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.Administrator" data-cy="user-adminCheckbox" /><i></i> </label>
+              <por-switch-field
+                label-class="'col-sm-3 col-lg-2 control-label text-left'"
+                checked="formValues.Administrator"
+                label="'Administrator'"
+                tooltip="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'"
+                on-change="(handleAdministratorChange)"
+              ></por-switch-field>
             </div>
           </div>
           <!-- !admin-checkbox -->
           <!-- teams -->
           <div class="form-group" ng-if="!formValues.Administrator">
-            <div class="col-sm-12">
-              <label class="control-label text-left"> Add to team(s) </label>
-              <span class="small text-muted" style="margin-left: 20px" ng-if="teams.length === 0">
+            <label class="col-sm-3 col-lg-2 control-label text-left">Add to team(s)</label>
+            <div class="col-sm-8">
+              <span class="small text-muted" ng-if="teams.length === 0">
                 You don't seem to have any teams to add users into. Head over to the <a ui-sref="portainer.teams">Teams view</a> to create some.
               </span>
               <span
@@ -108,7 +121,6 @@
                 helper-elements="filter"
                 search-property="Name"
                 translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
-                style="margin-left: 20px"
                 data-cy="user-teamSelect"
               >
               </span>
@@ -117,7 +129,8 @@
           <!-- !teams -->
           <div class="form-group" ng-if="isAdmin && !formValues.Administrator && formValues.Teams.length === 0">
             <div class="col-sm-12">
-              <span class="small text-muted">
+              <span class="small text-muted vertical-center">
+                <pr-icon class="vertical-center" icon="'alert-circle'" feather="true" aria-hidden="true" mode="'primary'" size="'md'"></pr-icon>
                 Note: non-administrator users who aren't in a team don't have access to any environments by default. Head over to the
                 <a ui-sref="portainer.endpoints">Environments view</a> to manage their accesses.
               </span>
@@ -133,11 +146,13 @@
                 button-spinner="state.actionInProgress"
                 data-cy="user-createUserButton"
               >
-                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Create user</span>
+                <span ng-hide="state.actionInProgress" class="vertical-center icon-white">
+                  <pr-icon icon="'plus'" feather="true" aria-hidden="true" size="'md'"></pr-icon> Create user</span
+                >
                 <span ng-show="state.actionInProgress">Creating user...</span>
               </button>
-              <span class="text-danger" ng-if="state.userCreationError" style="margin: 5px">
-                <i class="fa fa-exclamation-circle" aria-hidden="true"></i> {{ state.userCreationError }}
+              <span class="text-danger" ng-if="state.userCreationError">
+                <pr-icon icon="'alert-circle'" feather="true" aria-hidden="true" mode="'primary'" size="'md'"></pr-icon> {{ state.userCreationError }}
               </span>
             </div>
           </div>
@@ -151,7 +166,7 @@
   <div class="col-sm-12">
     <users-datatable
       title-text="Users"
-      title-icon="fa-user"
+      title-icon="user"
       dataset="users"
       table-key="users"
       order-by="Username"
diff --git a/app/portainer/views/users/usersController.js b/app/portainer/views/users/usersController.js
index 13ab5f4ef..000c47b7f 100644
--- a/app/portainer/views/users/usersController.js
+++ b/app/portainer/views/users/usersController.js
@@ -26,6 +26,12 @@ angular.module('portainer.app').controller('UsersController', [
       Teams: [],
     };
 
+    $scope.handleAdministratorChange = function (checked) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.Administrator = checked;
+      });
+    };
+
     $scope.checkUsernameValidity = function () {
       var valid = true;
       for (var i = 0; i < $scope.users.length; i++) {