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) 

* 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 2022-07-29 12:45:37 +12:00 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 Expand all files Collapse all files

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

@ -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>

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

@ -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"

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

@ -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++) {