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

Add OtpDialogService for mobile-friendly OTP authentication dialog

Browse Source
This commit is contained in:
masoodafar-web
2025-11-17 02:53:51 +03:30
parent a0c1452a84
commit 52b8298a18
34 changed files with 1495 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
src/FrontOffice.Main/Pages/Profile/Index.razor
View File

@@ -62,263 +62,101 @@
</MudPaper>
</MudItem>
<!-- Profile Content -->
<!-- Wallet Highlight Row -->
<MudItem xs="12">
<MudPaper Elevation="4" Class=" ">
<MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Class="px-4 pt-4">
<!-- Personal Information Tab -->
<MudTabPanel Text="اطلاعات شخصی" Icon="@Icons.Material.Filled.Person">
<div class="pa-4">
<MudForm @ref="_personalForm" Model="_updateUserRequest" Validation="@(_personalValidator.ValidateValue)">
<MudGrid Spacing="3">
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_updateUserRequest.FirstName"
For="@(() => _updateUserRequest.FirstName)"
Label="نام"
Variant="Variant.Outlined" />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_updateUserRequest.LastName"
For="@(() => _updateUserRequest.LastName)"
Label="نام خانوادگی"
Variant="Variant.Outlined" />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_updateUserRequest.NationalCode"
For="@(() => _updateUserRequest.NationalCode)"
Label="کد ملی"
Variant="Variant.Outlined"
InputType="InputType.Text" />
</MudItem>
<MudItem xs="12" md="6">
<MudDatePicker Label="تاریخ تولد"
@bind-Date="_date"
OpenTo="OpenTo.Year"
Variant="Variant.Outlined"
Culture="@Extensions.GetPersianCulture()"
TitleDateFormat="dddd, dd MMMM" />
</MudItem>
</MudGrid>
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SavePersonalInfo" Disabled="_isPersonalSaving">
ذخیره تغییرات
</MudButton>
</MudStack>
</MudForm>
</div>
</MudTabPanel>
<!-- Address Management Tab -->
<MudTabPanel Text="آدرس‌ها" Icon="@Icons.Material.Filled.LocationOn">
<div class="pa-4">
<MudStack Spacing="4">
<!-- Add New Address Button -->
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<MudText Typo="Typo.subtitle1" >آدرس‌های شما</MudText>
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
StartIcon="@Icons.Material.Filled.Add"
OnClick="OpenAddAddressDialog">
افزودن آدرس جدید
</MudButton>
</MudStack>
<!-- Address List -->
@if (_isLoadingAddresses)
{
<MudStack AlignItems="AlignItems.Center" Class="py-8">
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری آدرس‌ها...</MudText>
</MudStack>
}
else if (_addresses.Any())
{
<MudStack Spacing="3">
@foreach (var address in _addresses)
{
<MudPaper Elevation="2" Class="pa-4 rounded-xl " Outlined="true">
<MudStack Spacing="3">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Start">
<MudStack Spacing="1">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudText Typo="Typo.h6" >@address.Title</MudText>
@if (address.IsDefault)
{
<MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">پیش‌فرض</MudChip>
}
</MudStack>
<MudText Typo="Typo.body2" Class="mud-text-secondary">@(address.Address)</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @(address.PostalCode)</MudText>
</MudStack>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Size="Size.Small" AnchorOrigin="Origin.TopRight">
<MudMenuItem OnClick="@(() => OpenEditAddressDialog(address))">ویرایش</MudMenuItem>
@if (!address.IsDefault)
{
<MudMenuItem OnClick="@(() => SetAsDefaultAddress(address.Id))">تنظیم به عنوان پیش‌فرض</MudMenuItem>
}
<MudDivider />
<MudMenuItem OnClick="@(() => DeleteAddress(address.Id))" Class="mud-text-error">حذف</MudMenuItem>
</MudMenu>
</MudStack>
</MudStack>
</MudPaper>
}
</MudStack>
}
else
{
<MudStack AlignItems="AlignItems.Center" Class="py-8">
<MudIcon Icon="@Icons.Material.Filled.LocationOff" Size="Size.Large" Color="Color.Default" />
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">هنوز آدرسی ثبت نکرده‌اید.</MudText>
<MudButton Variant="Variant.Outlined"
Color="Color.Primary"
StartIcon="@Icons.Material.Filled.Add"
OnClick="OpenAddAddressDialog"
Class="mt-2">
افزودن اولین آدرس
</MudButton>
</MudStack>
}
</MudStack>
</div>
</MudTabPanel>
<!-- Organization Chart Tab -->
<MudTabPanel Text="شجره‌نامه" Icon="@Icons.Material.Filled.AccountTree">
<div class="pa-4">
<OrganizationChart />
</div>
</MudTabPanel>
<!-- Account Settings Tab -->
<MudTabPanel Text="تنظیمات حساب" Icon="@Icons.Material.Filled.Settings">
<div class="pa-4">
<MudStack Spacing="4">
<!-- Notification Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3">اعلان‌ها</MudText>
<MudStack Spacing="2">
<MudSwitch T="bool"
@bind-Value="_updateUserRequest.EmailNotifications"
Color="Color.Primary"
Label="اعلان‌های ایمیلی" />
<MudSwitch T="bool"
@bind-Value="_updateUserRequest.SmsNotifications"
Color="Color.Primary"
Label="اعلان‌های پیامکی" />
<MudSwitch T="bool"
@bind-Value="_updateUserRequest.PushNotifications"
Color="Color.Primary"
Label="اعلان‌های پوش" />
</MudStack>
</MudPaper>
@*
<!-- Privacy Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3">حریم خصوصی</MudText>
<MudStack Spacing="2">
<MudSwitch T="bool" @bind-Checked="_settings.ProfileVisibility" Label="نمایش پروفایل عمومی" />
<MudSwitch T="bool" @bind-Checked="_settings.ShowOnlineStatus" Label="نمایش وضعیت آنلاین" />
</MudStack>
</MudPaper>
<!-- Language & Theme -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3">زبان و تم</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" md="6">
<MudSelect @bind-Value="_settings.Language" Label="زبان" Variant="Variant.Outlined">
<MudSelectItem Value="@("fa")">فارسی</MudSelectItem>
<MudSelectItem Value="@("en")">English</MudSelectItem>
</MudSelect>
</MudItem>
<MudItem xs="12" md="6">
<MudSelect @bind-Value="_settings.Theme" Label="تم" Variant="Variant.Outlined">
<MudSelectItem Value="@("light")">روشن</MudSelectItem>
<MudSelectItem Value="@("dark")">تیره</MudSelectItem>
<MudSelectItem Value="@("auto")">خودکار</MudSelectItem>
</MudSelect>
</MudItem>
</MudGrid>
</MudPaper> *@
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd">
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveSettings" Disabled="_isSettingsSaving">
ذخیره تنظیمات
</MudButton>
</MudStack>
</MudStack>
</div>
</MudTabPanel>
<!-- Statistics Tab -->
@* <MudTabPanel Text="آمار و اطلاعات" Icon="@Icons.Material.Filled.BarChart">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4">آمار حساب کاربری</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
<MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Large" Color="Color.Primary" Class="mb-2" />
<MudText Typo="Typo.h4">@_userProfile.JoinDate</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">تاریخ عضویت</MudText>
</MudPaper>
<MudPaper Elevation="3" Class="pa-4 rounded-lg gradient-border">
<MudGrid Spacing="2" AlignItems="AlignItems.Center">
<MudItem xs="12" sm="6" md="4">
<MudStack>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">موجودی اعتباری</MudText>
<MudText Typo="Typo.h5" Color="Color.Primary">@_walletCredit</MudText>
</MudStack>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
<MudIcon Icon="@Icons.Material.Filled.Login" Size="Size.Large" Color="Color.Success" Class="mb-2" />
<MudText Typo="Typo.h4">@_userProfile.LastLogin</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">آخرین ورود</MudText>
</MudPaper>
<MudItem xs="12" sm="6" md="4">
<MudStack>
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">موجودی شبکه</MudText>
<MudText Typo="Typo.h5" Color="Color.Primary">@_walletNetwork</MudText>
</MudStack>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
<MudIcon Icon="@Icons.Material.Filled.Group" Size="Size.Large" Color="Color.Info" Class="mb-2" />
<MudText Typo="Typo.h4">@_userProfile.TotalReferrals</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">معرف‌ها</MudText>
</MudPaper>
<MudItem xs="12" md="4" Class="d-flex justify-end">
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AccountBalanceWallet" Href="@RouteConstants.Profile.Wallet">جزئیات کیف پول</MudButton>
</MudItem>
</MudGrid>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
<MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Large" Color="Color.Warning" Class="mb-2" />
<MudText Typo="Typo.h4">@_userProfile.Level</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">سطح کاربری</MudText>
</MudPaper>
<!-- Profile Content as tiles -->
<MudItem xs="12">
<MudPaper Elevation="4" Class="pa-4">
<MudGrid Spacing="3">
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Profile.Personal" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">اطلاعات شخصی</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">نمایش و ویرایش اطلاعات</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
</MudGrid>
<!-- Account Status -->
<MudPaper Elevation="2" Class="pa-4 mt-4 rounded-xl ">
<MudText Typo="Typo.subtitle1" Class="mb-3">وضعیت حساب</MudText>
<MudStack Spacing="2">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">حساب تأیید شده</MudText>
</MudStack>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">ایمیل تأیید شده</MudText>
</MudStack>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">شماره موبایل تأیید شده</MudText>
</MudStack>
</MudStack>
</MudPaper>
</div>
</MudTabPanel>
*@
</MudTabs>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Profile.Addresses" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.LocationOn" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">آدرس‌ها</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">مدیریت آدرس‌های شما</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Profile.Tree" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.AccountTree" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">شجره‌نامه</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">ساختار شبکه</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Profile.Settings" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.Settings" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">تنظیمات حساب</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">اعلان‌ها و تنظیمات</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Store.Products" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.Storefront" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">فروشگاه</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">مشاهده و خرید محصولات</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Profile.Wallet" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.AccountBalanceWallet" Size="Size.Large" Color="Color.Primary" />
<MudText Typo="Typo.subtitle1" Class="mt-2">کیف پول</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">مدیریت و تاریخچه</MudText>
</MudCardContent>
</MudCard>
</MudLink>
</MudItem>
</MudGrid>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>
</MudContainer>