I am having trouble updating passwords for users through the API. It works fine when done directly, but not through Angular UI in my project that utilizes ASP.NET Core 6 Web API and Angular 13.
Here is the code for the ASP.NET Core Web API:
[HttpPut]
[Route("Change-password")]
public async Task<IActionResult> ChangePassword([FromBody] ChangePassword model)
{
var user = await userManager.FindByEmailAsync(model.Email);
if (user == null)
{
return StatusCode(StatusCodes.Status404NotFound, new Response { Status = "Error", Message = "User does not exist" });
}
if (string.Compare(model.NewPassword, model.ConfirmNewPassword) != 0)
{
return StatusCode(StatusCodes.Status404NotFound, new Response { Status = "Error", Message = "The new password and confirm new password do not match" });
}
var result = await userManager.ChangePasswordAsync(user, model.CurrentPassword, model.NewPassword);
if (result.Succeeded)
{
var errors = new List<string>();
foreach (var error in result.Errors)
{
errors.Add(error.Description);
}
return StatusCode(StatusCodes.Status500InternalServerError, new Response { Status = "Success", Message = "Password changed successfully" });
}
return Ok(new Response { Status = "Error", Message = "Current password is incorrect" });
}
This is the HTML markup:
<form #passwordUpdateForm="ngForm" (ngSubmit)="updatePassword(passwordUpdateForm)" class="col-md-4 mt-3">
<div *ngIf="!!password_update_msg" [ngClass]="has_error ? 'alert alert-danger': 'alert alert-info'">{{password_update_msg}}</div>
<div class="row">
<mat-form-field class="col-sm-12">
<input matInput name="oldPassword" ngModel placeholder="Old Password" [type]="ohide ? 'password' : 'text'" required>
<mat-icon matSuffix (click)="ohide = !ohide">{{ohide ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-sm-12">
<input matInput name="newPassword" ngModel placeholder="New Password" [type]="nhide ? 'password' : 'text'" required>
<mat-icon matSuffix (click)="nhide = !nhide">{{nhide ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-sm-12">
<input matInput name="reNewPassword" ngModel placeholder="Confirm New Password" [type]="rnhide ? 'password' : 'text'" required validateEqual="newPassword" #reNewPassword="ngModel">
<mat-icon matSuffix (click)="rnhide = !rnhide">{{rnhide ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
</div>
<button class="mt-4 btn-block" type="submit" mat-raised-button color="primary" [disabled]="passwordUpdateForm.invalid">Change Password</button>
</form>
The corresponding service code in Service.ts file:
UpdatePassword(oldPassword: string, newPassword: string): Observable<any> {
const body = new FormData();
body.append('oldPassword', oldPassword);
body.append('newPassword', newPassword);
return this.http.put<any>(this.baseUrl+'/Change-password', body )
.pipe(catchError(this.errorHandler));
}
And here is the TypeScript (Ts) code:
updatePassword(form: any) {
const oldPassword = form.value.oldPassword;
const newPassword = form.value.newPassword;
const reNewPassword = form.value.reNewPassword;
if (newPassword !== reNewPassword) {
this.has_error = true;
this.password_update_msg = 'New Password and Confirm Password must be same';
return;
}
this.userService.UpdatePassword(oldPassword, newPassword)
.subscribe(() => {
this.has_error = false;
this.password_update_msg = 'Password Update Successful, Please Logout and Re Login !!!';
form.reset();
},
() => {
this.has_error = true;
this.password_update_msg = 'Password Update Failed !!!';
});
}
However, I encounter an error:
Unsupported Media Type 415
Any assistance on resolving this issue would be greatly appreciated.