admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor AuthDialog to remove captcha handling and improve dialog display options

Browse Source
This commit is contained in:
masoodafar-web
2025-11-14 10:49:46 +03:30
parent 07ea8f0f47
commit e86cb7aa47
6 changed files with 133 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/FrontOffice.Main/Pages/RegisterWizard.razor
View File

@@ -5,7 +5,7 @@
<section class="py-12 wizard-section"> <section class="py-12 wizard-section">
<MudContainer MaxWidth="MaxWidth.Large"> <MudContainer MaxWidth="MaxWidth.Large">
<MudGrid Spacing="4" Justify="Justify.Center"> <MudGrid Spacing="4" Justify="Justify.Center">
<MudItem xs="12" md="5"> <MudItem xs="12" md="5" Class="d-none d-sm-block">
<MudStack Spacing="2" Class="mb-6"> <MudStack Spacing="2" Class="mb-6">
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">ثبت‌نام سه <MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">ثبت‌نام سه
مرحله‌ای</MudChip> مرحله‌ای</MudChip>
@@ -56,7 +56,7 @@
} }
else else
{ {
<MudStack Spacing="3"> <MudStack Spacing="3" >
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<MudText Typo="Typo.h4">ویزارد ثبت‌نام</MudText> <MudText Typo="Typo.h4">ویزارد ثبت‌نام</MudText>
<MudChip T="string" Color="Color.Info" Variant="Variant.Outlined" Size="Size.Small">۳ مرحله <MudChip T="string" Color="Color.Info" Variant="Variant.Outlined" Size="Size.Small">۳ مرحله
@@ -68,11 +68,11 @@
<MudProgressLinear Color="Color.Primary" Indeterminate="true" /> <MudProgressLinear Color="Color.Primary" Indeterminate="true" />
} }
<MudStepper @bind-ActiveIndex="_activeStep" Elevation="0" DisableClick="true" Class="mb-4"> <MudStepper @bind-ActiveIndex="_activeStep" Elevation="0" DisableClick="true" Class="mb-4 " id="registration-stepper">
<ChildContent> <ChildContent>
<MudStep Label="تأیید موبایل" Icon="@Icons.Material.Filled.Smartphone"> <MudStep Label="تأیید موبایل" Icon="@Icons.Material.Filled.Smartphone">
@* Inline AuthDialog with captcha enabled *@ @* Inline AuthDialog with captcha enabled *@
<AuthDialog @ref="_authDialog" InlineMode="true" EnableCaptcha="true" HideCancelButton="true" OnLoginSuccess="@(async () => { OnPhoneVerified(); })" /> <AuthDialog @ref="_authDialog" InlineMode="true" HideCancelButton="true" OnLoginSuccess="@(async () => { OnPhoneVerified(); })" />
</MudStep> </MudStep>
<MudStep Label="اطلاعات هویتی" Icon="@Icons.Material.Filled.Badge"> <MudStep Label="اطلاعات هویتی" Icon="@Icons.Material.Filled.Badge">

4
src/FrontOffice.Main/Pages/RegisterWizard.razor.cs
View File

@@ -142,6 +142,10 @@ public partial class RegisterWizard
_updateUserRequest.FirstName = _model.FirstName; _updateUserRequest.FirstName = _model.FirstName;
_updateUserRequest.LastName = _model.LastName; _updateUserRequest.LastName = _model.LastName;
_updateUserRequest.NationalCode = _model.NationalCode.PersianToEnglish(); _updateUserRequest.NationalCode = _model.NationalCode.PersianToEnglish();
Console.WriteLine(_updateUserRequest.FirstName);
Console.WriteLine(_updateUserRequest.LastName);
Console.WriteLine(_updateUserRequest.NationalCode);
await UserContract.UpdateUserAsync(request: _updateUserRequest); await UserContract.UpdateUserAsync(request: _updateUserRequest);
Snackbar.Add("اطلاعات شخصی با موفقیت ذخیره شد.", Severity.Success); Snackbar.Add("اطلاعات شخصی با موفقیت ذخیره شد.", Severity.Success);
return true; return true;

8
src/FrontOffice.Main/Shared/AuthDialog.razor
View File

@@ -8,7 +8,7 @@
} }
else else
{ {
<MudDialog> <MudDialog >
<TitleContent> <TitleContent>
<MudText Typo="Typo.h4" Align="Align.Center">@GetDialogTitle()</MudText> <MudText Typo="Typo.h4" Align="Align.Center">@GetDialogTitle()</MudText>
</TitleContent> </TitleContent>
@@ -72,8 +72,8 @@ else
HelperText="مثال: 09121234567" HelperText="مثال: 09121234567"
Class="mb-2" /> Class="mb-2" />
@if (EnableCaptcha) @* @if (EnableCaptcha) *@
{ @* { *@
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mt-2 mb-2"> <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mt-2 mb-2">
<MudPaper Elevation="1" Class="captcha-box d-flex align-center justify-center" Style="min-width:100px;min-height:48px;"> <MudPaper Elevation="1" Class="captcha-box d-flex align-center justify-center" Style="min-width:100px;min-height:48px;">
<MudText Typo="Typo.h5">@_captchaCode</MudText> <MudText Typo="Typo.h5">@_captchaCode</MudText>
@@ -85,7 +85,7 @@ else
<MudTextField Label="کد کپچا" Placeholder="کد نمایش داده شده" Immediate="true" <MudTextField Label="کد کپچا" Placeholder="کد نمایش داده شده" Immediate="true"
Variant="Variant.Outlined" @bind-Value="_captchaInput" Required="true" Variant="Variant.Outlined" @bind-Value="_captchaInput" Required="true"
RequiredError="لطفاً کد کپچا را وارد کنید." /> RequiredError="لطفاً کد کپچا را وارد کنید." />
} @* } *@
<MudCheckBox T="bool" <MudCheckBox T="bool"
Label="شرایط و قوانین را می‌پذیرم" Label="شرایط و قوانین را می‌پذیرم"

22
src/FrontOffice.Main/Shared/AuthDialog.razor.cs
View File

@@ -11,7 +11,7 @@ namespace FrontOffice.Main.Shared;
public partial class AuthDialog : IDisposable public partial class AuthDialog : IDisposable
{ {
[Parameter] public bool HideCancelButton { get; set; } [Parameter] public bool HideCancelButton { get; set; }
[Parameter] public bool EnableCaptcha { get; set; } // [Parameter] public bool EnableCaptcha { get; set; }
[Parameter] public bool InlineMode { get; set; } [Parameter] public bool InlineMode { get; set; }
public enum AuthStep { Phone, Verify } public enum AuthStep { Phone, Verify }
@@ -48,7 +48,8 @@ public partial class AuthDialog : IDisposable
[Inject] private ILocalStorageService LocalStorage { get; set; } = default!; [Inject] private ILocalStorageService LocalStorage { get; set; } = default!;
[Inject] private UserContract.UserContractClient UserClient { get; set; } = default!; [Inject] private UserContract.UserContractClient UserClient { get; set; } = default!;
[CascadingParameter] private IDialogReference? MudDialog { get; set; } [CascadingParameter]
private IMudDialogInstance MudDialog { get; set; }
[Parameter] public EventCallback OnLoginSuccess { get; set; } [Parameter] public EventCallback OnLoginSuccess { get; set; }
@@ -59,16 +60,17 @@ public partial class AuthDialog : IDisposable
_phoneRequest.Purpose = OtpPurpose; _phoneRequest.Purpose = OtpPurpose;
_verifyRequest.Purpose = OtpPurpose; _verifyRequest.Purpose = OtpPurpose;
if (EnableCaptcha) // if (EnableCaptcha)
{ // {
GenerateCaptcha(); GenerateCaptcha();
} // }
var storedPhone = await LocalStorage.GetItemAsync<string>(PhoneStorageKey); var storedPhone = await LocalStorage.GetItemAsync<string>(PhoneStorageKey);
if (!string.IsNullOrWhiteSpace(storedPhone)) if (!string.IsNullOrWhiteSpace(storedPhone))
{ {
_phoneRequest.Mobile = storedPhone; _phoneRequest.Mobile = storedPhone;
} }
await LocalStorage.RemoveItemAsync(TokenStorageKey);
} }
private void GenerateCaptcha() private void GenerateCaptcha()
@@ -87,14 +89,14 @@ public partial class AuthDialog : IDisposable
if (!_phoneForm.IsValid) if (!_phoneForm.IsValid)
return; return;
if (EnableCaptcha) // if (EnableCaptcha)
{ // {
if (string.IsNullOrWhiteSpace(_captchaInput) || !string.Equals(_captchaInput.Trim(), _captchaCode, StringComparison.OrdinalIgnoreCase)) if (string.IsNullOrWhiteSpace(_captchaInput) || !string.Equals(_captchaInput.Trim(), _captchaCode, StringComparison.OrdinalIgnoreCase))
{ {
_errorMessage = "کد کپچا صحیح نیست."; _errorMessage = "کد کپچا صحیح نیست.";
return; return;
} }
} // }
_isBusy = true; _isBusy = true;
_operationCts?.Cancel(); _operationCts?.Cancel();
@@ -368,7 +370,7 @@ public partial class AuthDialog : IDisposable
_resendTimer?.Dispose(); _resendTimer?.Dispose();
_resendTimer = null; _resendTimer = null;
_resendRemaining = 0; _resendRemaining = 0;
if (EnableCaptcha) // if (EnableCaptcha)
GenerateCaptcha(); GenerateCaptcha();
} }
@@ -420,7 +422,7 @@ public partial class AuthDialog : IDisposable
private void Cancel() private void Cancel()
{ {
if (!InlineMode) if (!InlineMode)
MudDialog?.Close(DialogResult.Cancel()); MudDialog?.Close();
} }
public void Dispose() public void Dispose()

4
src/FrontOffice.Main/Utilities/AuthDialogService.cs
View File

@@ -6,6 +6,7 @@ namespace FrontOffice.Main.Utilities;
public class AuthDialogService public class AuthDialogService
{ {
private readonly IDialogService _dialogService; private readonly IDialogService _dialogService;
private readonly DialogOptions _maxWidth = new() { MaxWidth = MaxWidth.Medium, FullWidth = true, };
public AuthDialogService(IDialogService dialogService) public AuthDialogService(IDialogService dialogService)
{ {
@@ -14,7 +15,8 @@ public class AuthDialogService
public async Task ShowAuthDialogAsync() public async Task ShowAuthDialogAsync()
{ {
var dialog = await _dialogService.ShowAsync<Shared.AuthDialog>("ورود به حساب کاربری");
var dialog = await _dialogService.ShowAsync<Shared.AuthDialog>("ورود به حساب کاربری",_maxWidth);
var result = await dialog.Result; var result = await dialog.Result;
if (!result.Canceled) if (!result.Canceled)

117
src/FrontOffice.Main/wwwroot/css/site.css
View File

@@ -72,23 +72,106 @@ html, body {
} }
/* Typography variants override to match previous settings */ /* Typography variants override to match previous settings */
.mud-typography-h1 { font-family: var(--app-font-family); font-size: 2rem; font-weight: 700; line-height: 1.70; letter-spacing: normal; } .mud-typography-h1 {
.mud-typography-h2 { font-family: var(--app-font-family); font-size: 1.875rem; font-weight: 700; line-height: 1.65; letter-spacing: normal; } font-family: var(--app-font-family);
.mud-typography-h3 { font-family: var(--app-font-family); font-size: 1.5rem; font-weight: 700; line-height: 1.60; letter-spacing: normal; } font-size: 2rem;
.mud-typography-h4 { font-family: var(--app-font-family); font-size: 1.25rem; font-weight: 700; line-height: 1.55; letter-spacing: normal; } font-weight: 700;
.mud-typography-h5 { font-family: var(--app-font-family); font-size: 1.125rem; font-weight: 700; line-height: 1.50; letter-spacing: normal; } line-height: 1.70;
.mud-typography-h6 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 700; line-height: 1.45; letter-spacing: normal; } letter-spacing: normal;
}
.mud-typography-subtitle1 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 500; line-height: 1.62; letter-spacing: normal; } .mud-typography-h2 {
.mud-typography-subtitle2 { font-family: var(--app-font-family); font-size: 0.875rem; font-weight: 500; line-height: 1.60; letter-spacing: normal; } font-family: var(--app-font-family);
font-size: 1.875rem;
font-weight: 700;
line-height: 1.65;
letter-spacing: normal;
}
.mud-typography-body1 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 400; line-height: 1.85; letter-spacing: normal; } .mud-typography-h3 {
.mud-typography-body2 { font-family: var(--app-font-family); font-size: 0.875rem; font-weight: 400; line-height: 1.80; letter-spacing: normal; } font-family: var(--app-font-family);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.60;
letter-spacing: normal;
}
.mud-typography-caption { font-family: var(--app-font-family); font-size: 0.75rem; font-weight: 400; line-height: 1.60; letter-spacing: normal; } .mud-typography-h4 {
.mud-typography-overline { font-family: var(--app-font-family); font-size: 0.75rem; font-weight: 500; line-height: 1.60; letter-spacing: normal; } font-family: var(--app-font-family);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.55;
letter-spacing: normal;
}
.mud-typography-h5 {
font-family: var(--app-font-family);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.50;
letter-spacing: normal;
}
.mud-typography-h6 {
font-family: var(--app-font-family);
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: normal;
}
.mud-typography-subtitle1 {
font-family: var(--app-font-family);
font-size: 1rem;
font-weight: 500;
line-height: 1.62;
letter-spacing: normal;
}
.mud-typography-subtitle2 {
font-family: var(--app-font-family);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.60;
letter-spacing: normal;
}
.mud-typography-body1 {
font-family: var(--app-font-family);
font-size: 1rem;
font-weight: 400;
line-height: 1.85;
letter-spacing: normal;
}
.mud-typography-body2 {
font-family: var(--app-font-family);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.80;
letter-spacing: normal;
}
.mud-typography-caption {
font-family: var(--app-font-family);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.60;
letter-spacing: normal;
}
.mud-typography-overline {
font-family: var(--app-font-family);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.60;
letter-spacing: normal;
}
.mud-button-label {
text-transform: none;
}
.mud-button-label { text-transform: none; }
/*#endregion*/ /*#endregion*/
/*#region Layout Styles*/ /*#region Layout Styles*/
@@ -111,6 +194,7 @@ html, body {
.mud-main-content > div:first-child { .mud-main-content > div:first-child {
flex: 1; flex: 1;
} }
/*#endregion*/ /*#endregion*/
/*#region Footer Styles*/ /*#region Footer Styles*/
@@ -244,6 +328,7 @@ html, body {
.mud-theme-dark .stats-grid .mud-paper { .mud-theme-dark .stats-grid .mud-paper {
background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-surface-variant) 100%); background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-surface-variant) 100%);
} }
/*#endregion*/ /*#endregion*/
/*#region Registration Wizard*/ /*#region Registration Wizard*/
.wizard-section { .wizard-section {
@@ -282,5 +367,11 @@ html, body {
padding: 1.5rem !important; padding: 1.5rem !important;
} }
} }
/*#endregion*/ /*#endregion*/
/*#endregion*/ /*#endregion*/
@media (max-width: 768px) {
#registration-stepper .mud-stepper-content {
padding: 0 10px !important;
}
}