Skip to content

Commit

Permalink
[AdminTL#83] Profile: show status when add or update password
Browse files Browse the repository at this point in the history 
- show server error when http error
- show timeout error
- show validation error from client and server side
- show loading when send request
- disable button when send request
- remove request update profile when add password
  • Loading branch information
@mathben
mathben committed Apr 1, 2018
1 parent cf75db8 commit 126c7cb
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 33 deletions.
26 changes: 17 additions & 9 deletions src/web/partials/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,26 @@ <h2>Information personnel</h2>
<p>ID: {{! model_profile.info.user_id }}</p>
<p>Code Postale: {{! model_profile.info.postal_code }}</p>
<div>
<div ng-show="model_profile.info && model_profile.info.password">
<h3>Modifier son mot de passe</h3>
<input type="password" ng-model="model_profile.add_password.old_password" placeholder="Vieux password" required>
<input type="password" ng-model="model_profile.add_password.new_password" placeholder="Nouveau password" required>
<a ng-click="save_password()" class="btn btn-lg btn-default" role="button">Sauvegarder</a>
</div>
<!-- Add new password -->
<div ng-show="model_profile.info && !model_profile.info.password">
<h3>Ajouter un mot de passe</h3>
<input type="password" ng-model="model_profile.update_password.password" placeholder="Mot de passe" required>
<input type="password" ng-model="model_profile.update_password.check_password" placeholder="Confirmation du mot de passe" required>
<a ng-click="add_new_password()" class="btn btn-lg btn-default" role="button">Ajouter le mot de passe</a>
<input type="password" ng-model="model_profile.add_password.password" placeholder="Mot de passe" required>
<input type="password" ng-model="model_profile.add_password.check_password" placeholder="Confirmation du mot de passe" required>
<a ng-click="add_new_password()" class="btn btn-lg btn-default" role="button" ng-class="model_profile.add_password.loading ? 'disabled' : ''"><span class="fa fa-spinner fa-spin"
ng-show="model_profile.add_password.loading"></span>
Ajouter le mot de passe</a>
</div>

<!-- Update password -->
<div ng-show="model_profile.info && model_profile.info.password">
<h3>Modifier son mot de passe</h3>
<input type="password" ng-model="model_profile.update_password.old_password" placeholder="Vieux password" required>
<input type="password" ng-model="model_profile.update_password.new_password" placeholder="Nouveau password" required>
<a ng-click="update_password()" class="btn btn-lg btn-default" ng-class="model_profile.update_password.loading ? 'disabled' : ''" role="button"><span class="fa fa-spinner fa-spin" ng-show="model_profile.update_password.loading"></span>
Sauvegarder</a>
</div>

<!-- Status of password -->
<a ng-show="model_profile.status_password.enabled" ng-style="model_profile.status_password.is_error ? {'color': 'red'} : {'color': 'green'}">{{! model_profile.status_password.text }}</a>
</div>
</div>
Expand Down
116 changes: 92 additions & 24 deletions src/web/resources/js/tl_module/profile_ctrl/profile_ctrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@
characterApp.controller("profile_ctrl", ["$scope", "$q", "$http", "$window", /*"$timeout",*/ function ($scope, $q, $http, $window) {
$scope.model_profile = {
info: {},

add_password: {
old_password: "",
new_password: ""
password: "",
check_password: "",
loading: false
},
update_password: {
password: "",
check_password: ""
old_password: "",
new_password: "",
loading: false
},
status_password: {
text: "",
Expand All @@ -33,58 +36,112 @@ characterApp.controller("profile_ctrl", ["$scope", "$q", "$http", "$window", /*"
};
$scope.update_profile();

$scope.save_password = function (e) {
if ($scope.model_profile.add_password.old_password != "" && $scope.model_profile.add_password.new_password) {
$scope.add_new_password = function (e) {
// Validate request is not pending
if ($scope.model_profile.add_password.loading) {
return;
}

// Validate model field
if ($scope.model_profile.add_password.password == "") {
$scope.model_profile.status_password.enabled = true;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "The password is empty.";
} else if ($scope.model_profile.add_password.password != $scope.model_profile.add_password.check_password) {
$scope.model_profile.status_password.enabled = true;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "The password is not identical to the check password.";
} else {
var data = {
"old_password": hashSha256($scope.model_profile.add_password.old_password),
"new_password": hashSha256($scope.model_profile.add_password.new_password)
"password": hashSha256($scope.model_profile.add_password.password)
};
// send command to server

// Send command to server
$scope.model_profile.add_password.loading = true;
$http({
method: "post",
url: "/cmd/profile/update_password",
url: "/cmd/profile/add_new_password",
headers: {"Content-Type": "application/json; charset=UTF-8"},
data: data,
timeout: 5000
}).then(function (response/*, status, headers, config*/) {
console.info(response.data);
$scope.model_profile.add_password.old_password = "";
$scope.model_profile.add_password.new_password = "";
console.debug(response.data);

// Reset the loading
$scope.model_profile.add_password.loading = false;
$scope.model_profile.add_password.password = "";
$scope.model_profile.add_password.check_password = "";

// Show message from server
$scope.model_profile.status_password.enabled = true;
if ("error" in response.data) {
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = response.data.error;
} else if ("status" in response.data) {
$scope.model_profile.status_password.is_error = false;
$scope.model_profile.status_password.text = response.data.status;
// Add password in info
$scope.model_profile.info.password = true;
} else {
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Unknown error";
}
}, function errorCallback(response) {
console.error(response);

if (response.status == -1) {
// Timeout
$scope.model_profile.update_password.loading = false;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Timeout resquest.";
} else {
// Error from server
$scope.model_profile.update_password.loading = false;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Error from server : " + response.status;
}
});
}
};

$scope.add_new_password = function (e) {
if ($scope.model_profile.update_password.password != "" &&
$scope.model_profile.update_password.password == $scope.model_profile.update_password.check_password) {
$scope.update_password = function (e) {
// Validate request is not pending
if ($scope.model_profile.update_password.loading) {
return;
}

// Validate model field
if ($scope.model_profile.update_password.old_password == "" || $scope.model_profile.update_password.new_password == "") {
$scope.model_profile.status_password.enabled = true;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "The password is empty.";
} else if ($scope.model_profile.update_password.old_password == $scope.model_profile.update_password.new_password) {
$scope.model_profile.status_password.enabled = true;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "The old password is the same of the new password.";
} else {
var data = {
"password": hashSha256($scope.model_profile.update_password.password)
"old_password": hashSha256($scope.model_profile.update_password.old_password),
"new_password": hashSha256($scope.model_profile.update_password.new_password)
};
// send command to server

// Send command to server
$scope.model_profile.update_password.loading = true;
$http({
method: "post",
url: "/cmd/profile/add_new_password",
url: "/cmd/profile/update_password",
headers: {"Content-Type": "application/json; charset=UTF-8"},
data: data,
timeout: 5000
}).then(function (response/*, status, headers, config*/) {
console.info(response.data);
$scope.model_profile.update_password.password = "";
$scope.model_profile.update_password.check_password = "";
console.debug(response.data);

// Reset the loading
$scope.model_profile.update_password.loading = false;
$scope.model_profile.update_password.old_password = "";
$scope.model_profile.update_password.new_password = "";

// Show message from server
$scope.model_profile.status_password.enabled = true;
if ("error" in response.data) {
$scope.model_profile.status_password.is_error = true;
Expand All @@ -96,9 +153,20 @@ characterApp.controller("profile_ctrl", ["$scope", "$q", "$http", "$window", /*"
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Unknown error";
}
}, function errorCallback(response) {
console.error(response);

// Update profile to change view
$scope.update_profile();
if (response.status == -1) {
// Timeout
$scope.model_profile.update_password.loading = false;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Timeout resquest.";
} else {
// Error from server
$scope.model_profile.update_password.loading = false;
$scope.model_profile.status_password.is_error = true;
$scope.model_profile.status_password.text = "Error from server : " + response.status;
}
});
}
};
Expand Down

0 comments on commit 126c7cb

Please sign in to comment.