Seeking assistance with implementing a change password feature for a user in AngularJS and Django REST framework as the backend API.
The form includes two password input fields - one for the current password and another for the new password - along with a submit button.
Upon submitting, a browser window prompts me to "Change password for which user" displaying a list of saved users and their passwords only when the input field type is set to "password" rather than "text."
If anyone can provide guidance on this issue, it would be greatly appreciated.
Below are snippets of my HTML View:
<form name="change_pass" ng-submit="changePass(user)">
<md-input-container class="md-accent md-hue-2">
<md-icon class="material-icon">lock</md-icon>
<input ng-model="user.currentPass" type="password" placeholder="Current Password">
</md-input-container>
<md-input-container class="md-accent md-hue-2">
<md-icon class="material-icon">lock</md-icon>
<input ng-model="user.newPass" type="password" placeholder="New Password">
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
</form>This is my JS(Controller):
$scope.changePass = function(user){
AuthService.changePassword(user);
}This is my AuthService:
Authorization.changePassword = function(user){
var id = $cookies.get('user');
var postData = {
"newpassword": user.newPass,
"username": id,
"currentpassword": user.currentPass
}
$activityIndicator.startAnimating();
$http({
method: 'PUT',
url: CHANGE_PASSWORD+id+'/',
data: postData,
headers: {'Authorization': 'Token ' + $cookies.get('token')}
})
.success(function(data, status, header, config){
$activityIndicator.stopAnimating();
toastr.success("Password Sucessfully changed!", " Security");
})
.error(function(data, status, header, config){
$activityIndicator.stopAnimating();
toastr.error("Your Password could not be changed", " Security");
});
}Any help or suggestions would be highly valued. Thank you!