github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui): EE-3574 css portainer users (#7295)

Browse Source 
* 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
pull/7347/head
fhanportainer 2 years ago committed by GitHub
parent a2e1570162
commit 6c57ddb563
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 66 deletions
Show Stats Download Patch File Download Diff File

54
app/portainer/components/datatables/users-datatable/usersDatatable.html
Unescape View File

@ -1,31 +1,37 @@
<div class="datatable"> <div class="datatable">
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="toolBar"> <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <div class="toolBarTitle vertical-center">
</div> <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="actionBar" ng-show="$ctrl.isAdmin"> {{ $ctrl.titleText }}
<button </div>
type="button"
class="btn btn-sm btn-danger" <div class="searchBar vertical-center">
ng-disabled="$ctrl.state.selectedItemCount === 0" <pr-icon icon="'search'" feather="true"></pr-icon>
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)" <input
data-cy="user-removeUserButton" type="text"
> class="searchInput"
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove ng-model="$ctrl.state.textFilter"
</button> ng-change="$ctrl.onTextFilterChange()"
</div> placeholder="Search..."
<div class="searchBar"> ng-model-options="{ debounce: 300 }"
<i class="fa fa-search searchIcon" aria-hidden="true"></i> />
<input </div>
type="text"
class="searchInput" <div class="actionBar !gap-3" ng-show="$ctrl.isAdmin">
ng-model="$ctrl.state.textFilter" <button
ng-change="$ctrl.onTextFilterChange()" type="button"
placeholder="Search..." class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
ng-model-options="{ debounce: 300 }" 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>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="user-userTable"> <table class="table table-hover nowrap-cells" data-cy="user-userTable">
<thead> <thead>

99
app/portainer/views/users/users.html
Unescape View File

@ -3,12 +3,12 @@
<div class="row" ng-if="isAdmin"> <div class="row" ng-if="isAdmin">
<div class="col-lg-12 col-md-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget> <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> <rd-widget-body>
<form name="form" class="form-horizontal"> <form name="form" class="form-horizontal">
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <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 Username
<portainer-tooltip ng-if="AuthenticationMethod === 2" message="'Username must exactly match username defined in external LDAP source.'"></portainer-tooltip> <portainer-tooltip ng-if="AuthenticationMethod === 2" message="'Username must exactly match username defined in external LDAP source.'"></portainer-tooltip>
</label> </label>
@ -24,45 +24,58 @@
auto-focus auto-focus
data-cy="user-usernameInput" 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> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<!-- new-password-input --> <!-- new-password-input -->
<div class="form-group" ng-if="AuthenticationMethod === 1"> <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="col-sm-8">
<div class="input-group"> <input
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span> type="password"
<input class="form-control"
type="password" ng-model="formValues.Password"
class="form-control" id="password"
ng-model="formValues.Password" name="password"
id="password" ng-minlength="requiredPasswordLength"
name="password" data-cy="user-passwordInput"
ng-minlength="requiredPasswordLength" />
data-cy="user-passwordInput"
/>
</div>
</div> </div>
</div> </div>
<!-- !new-password-input --> <!-- !new-password-input -->
<!-- confirm-password-input --> <!-- confirm-password-input -->
<div class="form-group" ng-if="AuthenticationMethod === 1"> <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="col-sm-8">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span> <input
<input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" data-cy="user-passwordConfirmInput" /> type="password"
<span class="input-group-addon" class="form-control form-control--has-icon"
><i ng-model="formValues.ConfirmPassword"
ng-class=" id="confirm_password"
{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword] data-cy="user-passwordConfirmInput"
" />
<span class="input-group-addon">
<pr-icon
class="fa green-icon"
icon="'check'"
feather="true"
aria-hidden="true" aria-hidden="true"
></i ng-if="form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword"
></span> ></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> </div>
</div> </div>
@ -80,21 +93,21 @@
<!-- admin-checkbox --> <!-- admin-checkbox -->
<div class="form-group" ng-if="isAdmin"> <div class="form-group" ng-if="isAdmin">
<div class="col-sm-12"> <div class="col-sm-12">
<label for="permissions" class="control-label text-left"> <por-switch-field
Administrator label-class="'col-sm-3 col-lg-2 control-label text-left'"
<portainer-tooltip checked="formValues.Administrator"
message="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'" label="'Administrator'"
></portainer-tooltip> tooltip="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'"
</label> on-change="(handleAdministratorChange)"
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.Administrator" data-cy="user-adminCheckbox" /><i></i> </label> ></por-switch-field>
</div> </div>
</div> </div>
<!-- !admin-checkbox --> <!-- !admin-checkbox -->
<!-- teams --> <!-- teams -->
<div class="form-group" ng-if="!formValues.Administrator"> <div class="form-group" ng-if="!formValues.Administrator">
<div class="col-sm-12"> <label class="col-sm-3 col-lg-2 control-label text-left">Add to team(s)</label>
<label class="control-label text-left"> Add to team(s) </label> <div class="col-sm-8">
<span class="small text-muted" style="margin-left: 20px" ng-if="teams.length === 0"> <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. 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>
<span <span
@ -108,7 +121,6 @@
helper-elements="filter" helper-elements="filter"
search-property="Name" search-property="Name"
translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}" translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
style="margin-left: 20px"
data-cy="user-teamSelect" data-cy="user-teamSelect"
> >
</span> </span>
@ -117,7 +129,8 @@
<!-- !teams --> <!-- !teams -->
<div class="form-group" ng-if="isAdmin && !formValues.Administrator && formValues.Teams.length === 0"> <div class="form-group" ng-if="isAdmin && !formValues.Administrator && formValues.Teams.length === 0">
<div class="col-sm-12"> <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 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. <a ui-sref="portainer.endpoints">Environments view</a> to manage their accesses.
</span> </span>
@ -133,11 +146,13 @@
button-spinner="state.actionInProgress" button-spinner="state.actionInProgress"
data-cy="user-createUserButton" 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> <span ng-show="state.actionInProgress">Creating user...</span>
</button> </button>
<span class="text-danger" ng-if="state.userCreationError" style="margin: 5px"> <span class="text-danger" ng-if="state.userCreationError">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i> {{ state.userCreationError }} <pr-icon icon="'alert-circle'" feather="true" aria-hidden="true" mode="'primary'" size="'md'"></pr-icon> {{ state.userCreationError }}
</span> </span>
</div> </div>
</div> </div>
@ -151,7 +166,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<users-datatable <users-datatable
title-text="Users" title-text="Users"
title-icon="fa-user" title-icon="user"
dataset="users" dataset="users"
table-key="users" table-key="users"
order-by="Username" order-by="Username"

6
app/portainer/views/users/usersController.js
Unescape View File

@ -26,6 +26,12 @@ angular.module('portainer.app').controller('UsersController', [
Teams: [], Teams: [],
}; };
$scope.handleAdministratorChange = function (checked) {
return $scope.$evalAsync(() => {
$scope.formValues.Administrator = checked;
});
};
$scope.checkUsernameValidity = function () { $scope.checkUsernameValidity = function () {
var valid = true; var valid = true;
for (var i = 0; i < $scope.users.length; i++) { for (var i = 0; i < $scope.users.length; i++) {

Write Preview
Loading…
Cancel
Save