145 lines
4.9 KiB
Plaintext
145 lines
4.9 KiB
Plaintext
@page "/account/reset-password"
|
|
@layout AuthenticationLayout
|
|
@using Indotalent.Shared.Consts
|
|
@using Microsoft.JSInterop
|
|
@inject IJSRuntime JSRuntime
|
|
@inject ISnackbar Snackbar
|
|
@inject NavigationManager Navigation
|
|
|
|
<PageTitle>Reset Password - @GlobalConsts.AppInitial</PageTitle>
|
|
|
|
<div class="page-header">
|
|
<h2>Create New Password</h2>
|
|
<p>Please enter your new password below.</p>
|
|
</div>
|
|
|
|
<MudForm @ref="form" @bind-IsValid="@success">
|
|
<div style="display:flex;flex-direction:column;gap:1rem;">
|
|
<div>
|
|
<label class="form-label">New Password</label>
|
|
<MudTextField T="string"
|
|
@bind-Value="model.NewPassword"
|
|
Variant="Variant.Outlined"
|
|
Placeholder="Enter new password"
|
|
Margin="Margin.Dense"
|
|
InputType="@(showPassword ? InputType.Text : InputType.Password)"
|
|
Adornment="Adornment.Start"
|
|
AdornmentIcon="@Icons.Material.Filled.Lock"
|
|
AdornmentEndIcon="@(showPassword? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
|
|
OnAdornmentEndClick="() => showPassword = !showPassword"
|
|
Required="true" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">Confirm New Password</label>
|
|
<MudTextField T="string"
|
|
@bind-Value="model.ConfirmPassword"
|
|
Variant="Variant.Outlined"
|
|
Placeholder="Repeat new password"
|
|
Margin="Margin.Dense"
|
|
InputType="@(showPassword ? InputType.Text : InputType.Password)"
|
|
Adornment="Adornment.Start"
|
|
AdornmentIcon="@Icons.Material.Filled.Lock"
|
|
Required="true"
|
|
Validation="@(new Func<string, string?>(PasswordMatch))" />
|
|
</div>
|
|
|
|
<button type="button"
|
|
class="btn-primary-custom"
|
|
disabled="@(!success || isProcessing)"
|
|
@onclick="HandleResetPassword">
|
|
@if (isProcessing)
|
|
{
|
|
<MudProgressCircular Size="Size.Small" Indeterminate="true" Color="Color.Inherit" />
|
|
<span>Resetting...</span>
|
|
}
|
|
else
|
|
{
|
|
<span>Reset Password</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
</MudForm>
|
|
|
|
@code {
|
|
[SupplyParameterFromQuery] public string? userId { get; set; }
|
|
[SupplyParameterFromQuery] public string? code { get; set; }
|
|
|
|
private MudForm form = default!;
|
|
private bool success;
|
|
private bool isProcessing;
|
|
private bool showPassword;
|
|
private ResetModel model = new();
|
|
|
|
private class ResetModel
|
|
{
|
|
public string NewPassword { get; set; } = "";
|
|
public string ConfirmPassword { get; set; } = "";
|
|
}
|
|
|
|
private string? PasswordMatch(string arg)
|
|
{
|
|
if (model.NewPassword != arg) return "Passwords do not match";
|
|
return null;
|
|
}
|
|
|
|
private async Task HandleResetPassword()
|
|
{
|
|
await form.Validate();
|
|
if (!success) return;
|
|
|
|
if (string.IsNullOrEmpty(userId) || string.IsNullOrEmpty(code))
|
|
{
|
|
Snackbar.Add("Invalid reset token or user ID.", Severity.Error);
|
|
return;
|
|
}
|
|
|
|
isProcessing = true;
|
|
StateHasChanged();
|
|
|
|
var result = await JSRuntime.InvokeAsync<ApiResponse>("apiResetPassword", userId, code, model.NewPassword);
|
|
|
|
if (result.Status == 200)
|
|
{
|
|
Snackbar.Add("Password reset successful! You can now sign in.", Severity.Success);
|
|
await Task.Delay(500);
|
|
Navigation.NavigateTo("/account/login");
|
|
}
|
|
else
|
|
{
|
|
Snackbar.Add(result.Title ?? "Failed to reset password", Severity.Error);
|
|
}
|
|
|
|
isProcessing = false;
|
|
StateHasChanged();
|
|
}
|
|
|
|
private class ApiResponse
|
|
{
|
|
public int Status { get; set; }
|
|
public string? Title { get; set; }
|
|
}
|
|
}
|
|
|
|
<script>
|
|
window.apiResetPassword = async (userId, code, newPassword) => {
|
|
try {
|
|
const response = await fetch('/api/account/reset-password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ userId, code, newPassword })
|
|
});
|
|
|
|
if (response.ok) {
|
|
return { status: 200, title: 'Success' };
|
|
} else {
|
|
const data = await response.json();
|
|
let msg = 'Failed to reset password';
|
|
if (data.errors && data.errors.length > 0) msg = data.errors[0];
|
|
return { status: response.status, title: msg };
|
|
}
|
|
} catch (error) {
|
|
return { status: 500, title: 'Network error' };
|
|
}
|
|
};
|
|
</script> |