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

Add ui components for fallbackEmail property

Browse Source
This commit is contained in:
Johannes Zellner
2018-01-22 16:06:35 +01:00
parent 9f29438b34
commit 14dcd71429
2 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webadmin/src/views/account.html
+31 -4
View File
@@ -48,12 +48,11 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change your email</h4>
<h4 class="modal-title">Change main email address</h4>
</div>
<div class="modal-body">
<form name="emailChangeForm" role="form" novalidate ng-submit="emailchange.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (emailChangeForm.email.$dirty && emailChangeForm.email.$invalid) || (!emailChangeForm.email.$dirty && emailchange.error.email)}">
<label class="control-label" for="inputEmailChangeEmail">New email address</label>
<div class="control-label" ng-show="(!emailChangeForm.email.$dirty && emailchange.error.email) || (emailChangeForm.email.$dirty && emailChangeForm.email.$invalid)">
<small ng-show="emailChangeForm.email.$error.required">A valid email address is required</small>
<small ng-show="(emailChangeForm.email.$dirty && emailChangeForm.email.$invalid) && !emailChangeForm.email.$error.required">The Email address is not valid</small>
@@ -72,6 +71,34 @@
</div>
</div>
<!-- Modal change fallback email -->
<div class="modal fade" id="fallbackEmailChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change password recovery email address</h4>
</div>
<div class="modal-body">
<form name="fallbackEmailChangeForm" role="form" novalidate ng-submit="fallbackEmailChange.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (fallbackEmailChangeForm.email.$dirty && fallbackEmailChangeForm.email.$invalid) || (!fallbackEmailChangeForm.email.$dirty && fallbackEmailChange.error.email)}">
<div class="control-label" ng-show="(!fallbackEmailChangeForm.email.$dirty && fallbackEmailChange.error.email) || (fallbackEmailChangeForm.email.$dirty && fallbackEmailChangeForm.email.$invalid)">
<small ng-show="fallbackEmailChangeForm.email.$error.required">A valid email address is required</small>
<small ng-show="(fallbackEmailChangeForm.email.$dirty && fallbackEmailChangeForm.email.$invalid) && !fallbackEmailChangeForm.email.$error.required">The Email address is not valid</small>
<small ng-show="!fallbackEmailChangeForm.email.$dirty && fallbackEmailChange.error.email">{{ fallbackEmailChange.error.email }}</small>
</div>
<input type="email" class="form-control" ng-model="fallbackEmailChange.email" id="inputfallbackEmailChangeEmail" name="email" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="fallbackEmailChangeForm.$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="fallbackEmailChange.submit()" ng-disabled="fallbackEmailChangeForm.$invalid || fallbackEmailChange.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="fallbackEmailChange.busy"></i> Change</button>
</div>
</div>
</div>
</div>
<!-- Modal change displayName -->
<div class="modal fade" id="displayNameChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -124,12 +151,12 @@
<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;">Default email</td>
<td class="text-muted" style="vertical-align: top;">Email</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.email }} <a href="" ng-click="emailchange.show()"><i class="fa fa-pencil text-small"></i></a></td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Password recovery email</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.fallbackEmail }} <a href="" ng-click="emailchange.show()"><i class="fa fa-pencil text-small"></i></a></td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.fallbackEmail }} <a href="" ng-click="fallbackEmailChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
</tr>
<tr>
<td class="text-right" colspan="2" style="vertical-align: top;">
webadmin/src/views/account.js
+42 -1
View File
@@ -116,6 +116,47 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
}
};
$scope.fallbackEmailChange = {
busy: false,
error: {},
email: '',
reset: function () {
$scope.fallbackEmailChange.busy = false;
$scope.fallbackEmailChange.error.email = null;
$scope.fallbackEmailChange.email = '';
$scope.fallbackEmailChangeForm.$setUntouched();
$scope.fallbackEmailChangeForm.$setPristine();
},
show: function () {
$scope.fallbackEmailChange.reset();
$('#fallbackEmailChangeModal').modal('show');
},
submit: function () {
$scope.fallbackEmailChange.error.email = null;
$scope.fallbackEmailChange.busy = true;
var data = {
fallbackEmail: $scope.fallbackEmailChange.email
};
Client.updateProfile(data, function (error) {
$scope.fallbackEmailChange.busy = false;
if (error) return console.error('Unable to change fallback email.', error);
// update user info in the background
Client.refreshUserInfo();
$scope.fallbackEmailChange.reset();
$('#fallbackEmailChangeModal').modal('hide');
});
}
};
$scope.displayNameChange = {
busy: false,
error: {},
@@ -229,7 +270,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
});
// setup all the dialog focus handling
['passwordChangeModal', 'emailChangeModal', 'displayNameChangeModal'].forEach(function (id) {
['passwordChangeModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});