This commit is contained in:
MeysamMoghaddam
2025-10-07 01:03:58 +03:30
parent e357c1802b
commit 7be59c3ec3
5 changed files with 608 additions and 14 deletions

View File

@@ -13,23 +13,24 @@ public partial class App
private async Task HandleNavigationAsync(NavigationContext context)
{
var normalizedPath = NormalizePath(context.Path);
if (IsAuthPath(normalizedPath))
{
return;
}
// Temporarily bypass authentication to test profile page
// var normalizedPath = NormalizePath(context.Path);
// if (IsAuthPath(normalizedPath))
// {
// return;
// }
var token = await LocalStorage.GetItemAsync<string>(TokenStorageKey);
if (!string.IsNullOrWhiteSpace(token))
{
return;
}
// var token = await LocalStorage.GetItemAsync<string>(TokenStorageKey);
// if (!string.IsNullOrWhiteSpace(token))
// {
// return;
// }
var redirect = string.IsNullOrEmpty(normalizedPath) || normalizedPath == "/"
? string.Empty
: $"?redirect={Uri.EscapeDataString(normalizedPath)}";
// var redirect = string.IsNullOrEmpty(normalizedPath) || normalizedPath == "/"
// ? string.Empty
// : $"?redirect={Uri.EscapeDataString(normalizedPath)}";
Navigation.NavigateTo(RouteConstants.Auth.Phone + redirect, forceLoad: true);
// Navigation.NavigateTo(RouteConstants.Auth.Phone + redirect, forceLoad: true);
}
private static bool IsAuthPath(string? path)

View File

@@ -0,0 +1,281 @@
@attribute [Route(RouteConstants.Profile.Index)]
@inject ISnackbar Snackbar
<PageTitle>پروفایل کاربری</PageTitle>
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
<MudGrid Spacing="4">
<!-- Profile Header -->
<MudItem xs="12">
<MudPaper Elevation="2" Class="pa-4 rounded-2xl">
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
<MudAvatar Size="Size.Large" Color="Color.Primary">
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
</MudAvatar>
<div>
<MudText Typo="Typo.h5" Class="fw-700">@_userProfile.FirstName @_userProfile.LastName</MudText>
<MudText Typo="Typo.body2" Class="muted">@_userProfile.Email</MudText>
<MudText Typo="Typo.caption" Class="muted">عضو از @_userProfile.JoinDate</MudText>
</div>
</MudStack>
</MudPaper>
</MudItem>
<!-- Profile Content -->
<MudItem xs="12">
<MudPaper Elevation="2" Class="rounded-2xl">
<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">
<MudText Typo="Typo.h6" Class="mb-4 fw-700">اطلاعات شخصی</MudText>
<MudForm @ref="_personalForm" Model="_userProfile" Validation="@((Func<object, IEnumerable<FluentValidation.Results.ValidationFailure>>)((model) => _personalValidator.Validate((UserProfile)model).Errors))">
<MudGrid Spacing="3">
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.FirstName"
For="@(() => _userProfile.FirstName)"
Label="نام"
Variant="Variant.Outlined"
Required="true"
RequiredError="وارد کردن نام الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.LastName"
For="@(() => _userProfile.LastName)"
Label="نام خانوادگی"
Variant="Variant.Outlined"
Required="true"
RequiredError="وارد کردن نام خانوادگی الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.Email"
For="@(() => _userProfile.Email)"
Label="ایمیل"
Variant="Variant.Outlined"
InputType="InputType.Email"
Required="true"
RequiredError="وارد کردن ایمیل الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.PhoneNumber"
For="@(() => _userProfile.PhoneNumber)"
Label="شماره موبایل"
Variant="Variant.Outlined"
InputType="InputType.Text"
Required="true"
RequiredError="وارد کردن شماره موبایل الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.NationalCode"
For="@(() => _userProfile.NationalCode)"
Label="کد ملی"
Variant="Variant.Outlined"
InputType="InputType.Text" />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.BirthDate"
For="@(() => _userProfile.BirthDate)"
Label="تاریخ تولد"
Variant="Variant.Outlined"
InputType="InputType.Date" />
</MudItem>
<MudItem xs="12">
<MudTextField @bind-Value="_userProfile.Address"
For="@(() => _userProfile.Address)"
Label="آدرس"
Variant="Variant.Outlined"
Lines="3"
InputType="InputType.Text" />
</MudItem>
</MudGrid>
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="CancelPersonalChanges">
لغو
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SavePersonalInfo" Disabled="_isPersonalSaving">
ذخیره تغییرات
</MudButton>
</MudStack>
</MudForm>
</div>
</MudTabPanel>
<!-- Password Change Tab -->
<MudTabPanel Text="تغییر رمز عبور" Icon="@Icons.Material.Filled.Lock">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4 fw-700">تغییر رمز عبور</MudText>
<MudForm @ref="_passwordForm" Model="_passwordModel" Validation="@((Func<object, IEnumerable<FluentValidation.Results.ValidationFailure>>)((model) => _passwordValidator.Validate((PasswordChangeModel)model).Errors))">
<MudGrid Spacing="3">
<MudItem xs="12">
<MudTextField @bind-Value="_passwordModel.CurrentPassword"
For="@(() => _passwordModel.CurrentPassword)"
Label="رمز عبور فعلی"
Variant="Variant.Outlined"
InputType="InputType.Password"
Required="true"
RequiredError="وارد کردن رمز عبور فعلی الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_passwordModel.NewPassword"
For="@(() => _passwordModel.NewPassword)"
Label="رمز عبور جدید"
Variant="Variant.Outlined"
InputType="InputType.Password"
Required="true"
RequiredError="وارد کردن رمز عبور جدید الزامی است." />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_passwordModel.ConfirmPassword"
For="@(() => _passwordModel.ConfirmPassword)"
Label="تکرار رمز عبور جدید"
Variant="Variant.Outlined"
InputType="InputType.Password"
Required="true"
RequiredError="تکرار رمز عبور جدید الزامی است." />
</MudItem>
</MudGrid>
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="CancelPasswordChange">
لغو
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ChangePassword" Disabled="_isPasswordChanging">
تغییر رمز عبور
</MudButton>
</MudStack>
</MudForm>
</div>
</MudTabPanel>
<!-- Account Settings Tab -->
<MudTabPanel Text="تنظیمات حساب" Icon="@Icons.Material.Filled.Settings">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4 fw-700">تنظیمات حساب</MudText>
<MudStack Spacing="4">
<!-- Notification Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">اعلان‌ها</MudText>
<MudStack Spacing="2">
<MudSwitch T="bool" @bind-Checked="_settings.EmailNotifications" Label="اعلان‌های ایمیلی" />
<MudSwitch T="bool" @bind-Checked="_settings.SmsNotifications" Label="اعلان‌های پیامکی" />
<MudSwitch T="bool" @bind-Checked="_settings.PushNotifications" Label="اعلان‌های پوش" />
</MudStack>
</MudPaper>
<!-- Privacy Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">حریم خصوصی</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 fw-600">زبان و تم</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.Outlined" Color="Color.Secondary" OnClick="CancelSettingsChanges">
لغو
</MudButton>
<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 fw-700">آمار حساب کاربری</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="1" Class="pa-4 text-center rounded-lg">
<MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Large" Color="Color.Primary" Class="mb-2" />
<MudText Typo="Typo.h4" Class="fw-700">@_userProfile.JoinDate</MudText>
<MudText Typo="Typo.caption" Class="muted">تاریخ عضویت</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="1" Class="pa-4 text-center rounded-lg">
<MudIcon Icon="@Icons.Material.Filled.Login" Size="Size.Large" Color="Color.Success" Class="mb-2" />
<MudText Typo="Typo.h4" Class="fw-700">@_userProfile.LastLogin</MudText>
<MudText Typo="Typo.caption" Class="muted">آخرین ورود</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="1" Class="pa-4 text-center rounded-lg">
<MudIcon Icon="@Icons.Material.Filled.Group" Size="Size.Large" Color="Color.Info" Class="mb-2" />
<MudText Typo="Typo.h4" Class="fw-700">@_userProfile.TotalReferrals</MudText>
<MudText Typo="Typo.caption" Class="muted">معرف‌ها</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="1" Class="pa-4 text-center rounded-lg">
<MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Large" Color="Color.Warning" Class="mb-2" />
<MudText Typo="Typo.h4" Class="fw-700">@_userProfile.Level</MudText>
<MudText Typo="Typo.caption" Class="muted">سطح کاربری</MudText>
</MudPaper>
</MudItem>
</MudGrid>
<!-- Account Status -->
<MudPaper Outlined="true" Class="pa-4 mt-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">وضعیت حساب</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>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>

View File

@@ -0,0 +1,238 @@
using FluentValidation;
using FrontOffice.Main.Utilities;
using Microsoft.AspNetCore.Components;
using MudBlazor;
using System.ComponentModel.DataAnnotations;
using Severity = MudBlazor.Severity;
namespace FrontOffice.Main.Pages.Profile;
public partial class Index
{
private UserProfile _userProfile = new();
private PasswordChangeModel _passwordModel = new();
private AccountSettings _settings = new();
private MudForm? _personalForm;
private MudForm? _passwordForm;
private bool _isPersonalSaving;
private bool _isPasswordChanging;
private bool _isSettingsSaving;
private readonly UserProfileValidator _personalValidator = new();
private readonly PasswordChangeValidator _passwordValidator = new();
protected override async Task OnInitializedAsync()
{
await LoadUserProfile();
await LoadAccountSettings();
}
private async Task LoadUserProfile()
{
// TODO: Load user profile from API
_userProfile = new UserProfile
{
FirstName = "علی",
LastName = "احمدی",
Email = "ali.ahmad@example.com",
PhoneNumber = "09123456789",
NationalCode = "0123456789",
BirthDate = "1370/01/01",
Address = "تهران، خیابان ولیعصر",
JoinDate = "۱۴۰۲/۰۱/۱۵",
LastLogin = "۱۴۰۲/۱۰/۰۶",
TotalReferrals = 25,
Level = "طلایی"
};
}
private async Task LoadAccountSettings()
{
// TODO: Load settings from API
_settings = new AccountSettings
{
EmailNotifications = true,
SmsNotifications = true,
PushNotifications = false,
ProfileVisibility = true,
ShowOnlineStatus = true,
Language = "fa",
Theme = "light"
};
}
private async Task SavePersonalInfo()
{
if (_personalForm is null) return;
await _personalForm.Validate();
if (!_personalForm.IsValid) return;
_isPersonalSaving = true;
try
{
// TODO: Save to API
await Task.Delay(1000); // Simulate API call
Snackbar.Add("اطلاعات شخصی با موفقیت ذخیره شد.", Severity.Success);
}
catch (Exception ex)
{
Snackbar.Add($"خطا در ذخیره اطلاعات: {ex.Message}", Severity.Error);
}
finally
{
_isPersonalSaving = false;
await InvokeAsync(StateHasChanged);
}
}
private void CancelPersonalChanges()
{
// TODO: Reset form to original values
Snackbar.Add("تغییرات لغو شد.", Severity.Info);
}
private async Task ChangePassword()
{
if (_passwordForm is null) return;
await _passwordForm.Validate();
if (!_passwordForm.IsValid) return;
if (_passwordModel.NewPassword != _passwordModel.ConfirmPassword)
{
Snackbar.Add("رمز عبور جدید و تکرار آن مطابقت ندارند.", Severity.Warning);
return;
}
_isPasswordChanging = true;
try
{
// TODO: Change password via API
await Task.Delay(1000); // Simulate API call
Snackbar.Add("رمز عبور با موفقیت تغییر یافت.", Severity.Success);
_passwordModel = new PasswordChangeModel();
}
catch (Exception ex)
{
Snackbar.Add($"خطا در تغییر رمز عبور: {ex.Message}", Severity.Error);
}
finally
{
_isPasswordChanging = false;
await InvokeAsync(StateHasChanged);
}
}
private void CancelPasswordChange()
{
_passwordModel = new PasswordChangeModel();
Snackbar.Add("تغییر رمز عبور لغو شد.", Severity.Info);
}
private async Task SaveSettings()
{
_isSettingsSaving = true;
try
{
// TODO: Save settings to API
await Task.Delay(1000); // Simulate API call
Snackbar.Add("تنظیمات با موفقیت ذخیره شد.", Severity.Success);
}
catch (Exception ex)
{
Snackbar.Add($"خطا در ذخیره تنظیمات: {ex.Message}", Severity.Error);
}
finally
{
_isSettingsSaving = false;
await InvokeAsync(StateHasChanged);
}
}
private void CancelSettingsChanges()
{
// TODO: Reset settings to original values
Snackbar.Add("تغییرات تنظیمات لغو شد.", Severity.Info);
}
public class UserProfile
{
[Required(ErrorMessage = "نام الزامی است")]
public string? FirstName { get; set; }
[Required(ErrorMessage = "نام خانوادگی الزامی است")]
public string? LastName { get; set; }
[Required(ErrorMessage = "ایمیل الزامی است")]
[EmailAddress(ErrorMessage = "فرمت ایمیل صحیح نیست")]
public string? Email { get; set; }
[Required(ErrorMessage = "شماره موبایل الزامی است")]
public string? PhoneNumber { get; set; }
public string? NationalCode { get; set; }
public string? BirthDate { get; set; }
public string? Address { get; set; }
// Read-only fields
public string? JoinDate { get; set; }
public string? LastLogin { get; set; }
public int TotalReferrals { get; set; }
public string? Level { get; set; }
}
public class PasswordChangeModel
{
[Required(ErrorMessage = "رمز عبور فعلی الزامی است")]
public string? CurrentPassword { get; set; }
[Required(ErrorMessage = "رمز عبور جدید الزامی است")]
[MinLength(8, ErrorMessage = "رمز عبور باید حداقل ۸ کاراکتر باشد")]
public string? NewPassword { get; set; }
[Required(ErrorMessage = "تکرار رمز عبور الزامی است")]
[Compare(nameof(NewPassword), ErrorMessage = "رمز عبور و تکرار آن مطابقت ندارند")]
public string? ConfirmPassword { get; set; }
}
public class AccountSettings
{
public bool EmailNotifications { get; set; }
public bool SmsNotifications { get; set; }
public bool PushNotifications { get; set; }
public bool ProfileVisibility { get; set; }
public bool ShowOnlineStatus { get; set; }
public string? Language { get; set; }
public string? Theme { get; set; }
}
public class UserProfileValidator : AbstractValidator<UserProfile>
{
public UserProfileValidator()
{
RuleFor(x => x.FirstName).NotEmpty().WithMessage("نام الزامی است");
RuleFor(x => x.LastName).NotEmpty().WithMessage("نام خانوادگی الزامی است");
RuleFor(x => x.Email).NotEmpty().EmailAddress().WithMessage("ایمیل معتبر نیست");
RuleFor(x => x.PhoneNumber).NotEmpty().WithMessage("شماره موبایل الزامی است");
}
}
public class PasswordChangeValidator : AbstractValidator<PasswordChangeModel>
{
public PasswordChangeValidator()
{
RuleFor(x => x.CurrentPassword).NotEmpty().WithMessage("رمز عبور فعلی الزامی است");
RuleFor(x => x.NewPassword).NotEmpty().MinimumLength(8).WithMessage("رمز عبور جدید باید حداقل ۸ کاراکتر باشد");
RuleFor(x => x.ConfirmPassword).NotEmpty().WithMessage("تکرار رمز عبور الزامی است");
}
}
}

View File

@@ -12,4 +12,9 @@ public static class RouteConstants
public const string Phone = "/auth/phone";
public const string Verify = "/auth/verify";
}
public static class Profile
{
public const string Index = "/profile";
}
}

View File

@@ -126,4 +126,73 @@ html, body {
background: var(--mud-palette-dark-background);
border-top-color: var(--mud-palette-dark-divider);
}
/*#region Profile Page Styles*/
.profile-avatar {
width: 80px;
height: 80px;
}
.profile-header {
background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
color: white;
}
.profile-stats-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profile-stats-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.settings-section {
border: 1px solid var(--mud-palette-divider);
border-radius: 8px;
}
.tab-content {
padding: 24px;
}
.form-section {
background: var(--mud-palette-surface);
border-radius: 12px;
padding: 24px;
}
.stats-grid .mud-paper {
background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-surface-variant) 100%);
border: 1px solid var(--mud-palette-divider);
}
@media (max-width: 768px) {
.tab-content {
padding: 16px;
}
.form-section {
padding: 16px;
}
.profile-avatar {
width: 60px;
height: 60px;
}
}
/* Dark mode adjustments for profile */
.mud-theme-dark .profile-stats-card {
background: var(--mud-palette-dark-surface);
}
.mud-theme-dark .settings-section {
border-color: var(--mud-palette-dark-divider);
}
.mud-theme-dark .stats-grid .mud-paper {
background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-surface-variant) 100%);
}
/*#endregion*/
/*#endregion*/