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

feat(user): updated user edit view css UI (#7373)

pull/7407/head
fhanportainer 2022-08-03 13:24:42 +12:00 committed by GitHub
parent 5d1ea8ceb2
commit 0014e39b61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/portainer/views/users/edit/user.html
View File

@ -3,34 +3,34 @@
<div class="row"> <div class="row">
<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-user" title-text="User details"></rd-widget-header> <rd-widget-header icon="user" feather-icon="true" title-text="User details"></rd-widget-header>
<rd-widget-body> <rd-widget-body>
<form class="form-horizontal" style="margin-top: 15px"> <form class="form-horizontal" style="margin-top: 15px">
<div class="form-group"> <div class="form-group">
<label for="username_field" class="col-sm-2 control-label text-left">Username</label> <label for="username_field" class="col-sm-2 control-label text-left required">Username</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input class="form-control" ng-model="formValues.username" id="username_field" /> <input class="form-control" ng-model="formValues.username" id="username_field" />
</div> </div>
</div> </div>
<div class="form-group" ng-if="isAdmin"> <div class="form-group" ng-if="isAdmin">
<div class="col-sm-4"> <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" /><i></i> </label> ></por-switch-field>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-4"> <div class="col-sm-4">
<button class="btn btn-primary btn-sm" ng-disabled="!isSubmitEnabled()" ng-click="updateUser()">Save</button> <button class="btn btn-primary btn-sm" ng-disabled="!isSubmitEnabled()" ng-click="updateUser()">Save</button>
<button class="btn btn-danger btn-sm" ng-disabled="isDeleteDisabled()" ng-click="deleteUser()" <button class="btn btn-danger btn-sm vertical-center" ng-disabled="isDeleteDisabled()" ng-click="deleteUser()">
><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this user</button <pr-icon icon="'trash-2'" feather="true" size="'sm'" class="vertical-center"></pr-icon>Delete this user
> </button>
</div> </div>
</div> </div>
</form> </form>
@ -42,37 +42,37 @@
<div class="row" ng-if="AuthenticationMethod === 1"> <div class="row" ng-if="AuthenticationMethod === 1">
<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-lock" title-text="Change user password"></rd-widget-header> <rd-widget-header icon="lock" feather-icon="true" title-text="Change user password"></rd-widget-header>
<rd-widget-body> <rd-widget-body>
<form name="form" class="form-horizontal" style="margin-top: 15px"> <form name="form" class="form-horizontal" style="margin-top: 15px">
<!-- new-password-input --> <!-- new-password-input -->
<div class="form-group"> <div class="form-group">
<label for="new_password" class="col-sm-2 control-label text-left">New password</label> <label for="new_password" class="col-sm-2 control-label text-left required">New password</label>
<div class="col-sm-8"> <div class="col-sm-8">
<div class="input-group"> <input type="password" class="form-control" ng-model="formValues.newPassword" id="new_password" name="new_password" ng-minlength="requiredPasswordLength" />
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control" ng-model="formValues.newPassword" id="new_password" name="new_password" ng-minlength="requiredPasswordLength" />
</div>
</div> </div>
</div> </div>
<!-- !new-password-input --> <!-- !new-password-input -->
<!-- confirm-password-input --> <!-- confirm-password-input -->
<div class="form-group"> <div class="form-group">
<label for="confirm_password" class="col-sm-2 control-label text-left">Confirm password</label> <label for="confirm_password" class="col-sm-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 type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password" /> <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password" />
<span class="input-group-addon" <span class="input-group-addon">
><i <pr-icon
ng-class=" icon="'check'"
{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[ feather="true"
form.new_password.$viewValue !== '' && form.new_password.$viewValue === formValues.confirmPassword class="icon-success"
] ng-if="form.new_password.$viewValue !== '' && form.new_password.$viewValue === formValues.confirmPassword"
" ></pr-icon>
aria-hidden="true" <pr-icon
></i icon="'x'"
></span> feather="true"
class="icon-danger"
ng-if="!(form.new_password.$viewValue !== '' && form.new_password.$viewValue === formValues.confirmPassword)"
></pr-icon>
</span>
</div> </div>
</div> </div>
</div> </div>

6
app/portainer/views/users/edit/userController.js
View File

@ -20,6 +20,12 @@ angular.module('portainer.app').controller('UserController', [
Administrator: false, Administrator: false,
}; };
$scope.handleAdministratorChange = function (checked) {
return $scope.$evalAsync(() => {
$scope.formValues.Administrator = checked;
});
};
$scope.deleteUser = function () { $scope.deleteUser = function () {
ModalService.confirmDeletion('Do you want to remove this user? This user will not be able to login into Portainer anymore.', function onConfirm(confirmed) { ModalService.confirmDeletion('Do you want to remove this user? This user will not be able to login into Portainer anymore.', function onConfirm(confirmed) {
if (!confirmed) { if (!confirmed) {