jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add account ui to change displayName

Browse Source
This commit is contained in:
Johannes Zellner
2016-02-25 15:09:52 +01:00
parent d8def61f67
commit 261a0a1728
3 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
webadmin/src/views/account.html
View File

@@ -71,6 +71,34 @@
</div>
</div>
<!-- Modal change displayName -->
<div class="modal fade" id="displayNameChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change Your Display Name</h4>
</div>
<div class="modal-body">
<form name="displayNameChangeForm" role="form" novalidate ng-submit="displayNameChange.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid) }">
<label class="control-label">Display Name</label>
<div class="control-label" ng-show="(!displayNameChangeForm.displayName.$dirty && displayNameChange.error.displayName) || (displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid)">
<small ng-show="displayNameChangeForm.displayName.$error.required">A valid display name is required</small>
<small ng-show="(displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid) && !displayNameChangeForm.displayName.$error.required">This display name is not valid</small>
</div>
<input type="text" class="form-control" ng-model="displayNameChange.displayName" name="displayName" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="displayNameChangeForm.$invalid"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" ng-click="displayNameChange.submit()" ng-disabled="displayNameChangeForm.$invalid || displayNameChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="displayNameChange.busy"></i> Change</button>
</div>
</div>
</div>
</div>
<br/>
<div style="max-width: 600px; margin: 0 auto;">
@@ -89,7 +117,11 @@
<table width="100%">
<tr>
<td class="text-muted" style="vertical-align: top;">Username</td>
<td class="text-right" style="vertical-align: top;">{{ user.username }} &nbsp;&nbsp;</td>
<td class="text-right" style="vertical-align: top;">{{ user.username }} &nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Display Name</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.displayName }} <a href="" ng-click="displayNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Email</td>

48
webadmin/src/views/account.js
View File

@@ -110,6 +110,52 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
}
};
$scope.displayNameChange = {
busy: false,
error: {},
displayName: '',
reset: function () {
$scope.displayNameChange.busy = false;
$scope.displayNameChange.error.displayName = null;
$scope.displayNameChange.displayName = '';
$scope.displayNameChangeForm.$setUntouched();
$scope.displayNameChangeForm.$setPristine();
},
show: function () {
$scope.displayNameChange.reset();
$scope.displayNameChange.displayName = $scope.user.displayName;
$('#displayNameChangeModal').modal('show');
},
submit: function () {
$scope.displayNameChange.error.displayName = null;
$scope.displayNameChange.busy = true;
var user = {
id: $scope.user.id,
displayName: $scope.displayNameChange.displayName
};
Client.updateUser(user, function (error) {
$scope.displayNameChange.busy = false;
if (error) {
console.error('Unable to change displayName.', error);
return;
}
// update user info in the background
Client.refreshUserInfo();
$scope.displayNameChange.reset();
$('#displayNameChangeModal').modal('hide');
});
}
};
$scope.removeAccessTokens = function (client) {
client.busy = true;
@@ -138,7 +184,7 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
});
// setup all the dialog focus handling
['passwordChangeModal', 'emailChangeModal'].forEach(function (id) {
['passwordChangeModal', 'emailChangeModal', 'displayNameChangeModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});