-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #34 from kannansuresh/dev
Dev
- Loading branch information
Showing
17 changed files
with
684 additions
and
310 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,15 @@ | ||
| { | ||
| "words": [ | ||
| "Aleks", | ||
| "aspnetcorerazor", | ||
| "biomejs", | ||
| "csdevkit", | ||
| "dbaeumer", | ||
| "dexie", | ||
| "dotnettools" | ||
| "dotnettools", | ||
| "flaticon", | ||
| "Freepik", | ||
| "getbootstrap", | ||
| "Reshot" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
175 changes: 175 additions & 0 deletions
175
src/Aneejian.Games.ClickMatch.Client/Components/UserProfile/_EditProfile.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| @inject IndexedDbService indexedDbService | ||
|
|
||
|
|
||
| <div class="d-grid align-items-center justify-items-center justify-contents-center mb-4"> | ||
|
|
||
| <div class="m-auto mb-4"> | ||
| <_UserProfileCard Profile=EditProfileRequest ShowProfileInfo=true ShowHoverEffect=false /> | ||
| </div> | ||
|
|
||
| <div class="text-start"> | ||
| <EditForm EditContext="EditProfileRequestContext" class="mb-4" OnValidSubmit="SaveProfile"> | ||
| <DataAnnotationsValidator /> | ||
| <ValidationSummary class="list-unstyled" /> | ||
| <AntiforgeryToken /> | ||
| <div class="form-floating mb-3"> | ||
| <InputText class="form-control" id="displayName" type="text" placeholder="Display Name" | ||
| @bind-Value="EditProfileRequest!.Name" autocomplete="off" maxlength="20" @oninput=@SetDisplayName /> | ||
| <label for="displayName">Display Name</label> | ||
| <ValidationMessage For="() => EditProfileRequest!.Name" /> | ||
| </div> | ||
| <div class="form-floating mb-3"> | ||
| <InputText class="form-control" id="avatar" type="avatar" placeholder="Select an Avatar" | ||
| @bind-Value=EditProfileRequest!.Avatar autocomplete="off" /> | ||
| <label for="avatar">Avatar</label> | ||
| <div id="avatarHelpBlock" class="form-text"> | ||
| Select an avatar from below or enter a URL to use your own avatar. | ||
| </div> | ||
| <ValidationMessage For="() => EditProfileRequest!.Avatar" /> | ||
| <_AvatarSelector SelectedAvatar="@EditProfileRequest!.Avatar" OnAvatarSelected="OnAvatarSelected" /> | ||
| </div> | ||
| <div class="form-check mb-3 text-start"> | ||
| <InputCheckbox class="form-check-input" type="checkbox" @bind-Value=@ChangePassword | ||
| id="changePassword" /> | ||
| <label class="form-check-label" for="changePassword"> | ||
| Change profile password | ||
| </label> | ||
| </div> | ||
|
|
||
| @if (ChangePassword) | ||
| { | ||
| <section> | ||
| <div class="form-floating mb-3"> | ||
| <InputText class="form-control" id="currentPassword" type="password" placeholder="Current Password" | ||
| Value=@EditProfileRequest!.CurrentPassword ValueChanged="ValidateCurrentPassword" ValueExpression="() => EditProfileRequest!.CurrentPassword" /> | ||
| <label for="currentPassword">Current Password</label> | ||
| <ValidationMessage For="() => EditProfileRequest!.CurrentPassword" /> | ||
| </div> | ||
| <div class="form-floating mb-3"> | ||
| <InputText class="form-control" id="password" type="password" placeholder="New Password" | ||
| @bind-Value=EditProfileRequest!.InputPassword /> | ||
| <label for="password">New Password</label> | ||
| <ValidationMessage For="() => EditProfileRequest!.InputPassword" /> | ||
| </div> | ||
| <div class="form-floating mb-3"> | ||
| <InputText class="form-control" id="confirmPassword" type="password" | ||
| placeholder="Confirm New Password" @bind-Value="EditProfileRequest!.ConfirmPassword" /> | ||
| <label for="confirmPassword">Confirm New Password</label> | ||
| <ValidationMessage For="() => EditProfileRequest!.ConfirmPassword" /> | ||
| </div> | ||
| </section> | ||
| } | ||
| <div class="d-flex justify-content-center gap-2 mb-4 mt-4"> | ||
| <button class="btn btn-primary w-50" id="submitButton" type="submit"> | ||
| Save Profile | ||
| </button> | ||
| <button class="btn btn-secondary w-50" id="cancelButton" type="button" @onclick=OnCancel> | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </EditForm> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| @code { | ||
| [Parameter, EditorRequired] | ||
| public UserDto? Profile { get; set; } | ||
|
|
||
| [Parameter] | ||
| public EventCallback<UserDto> OnProfileUpdated { get; set; } | ||
|
|
||
| [Parameter] | ||
| public EventCallback OnCancel { get; set; } | ||
|
|
||
| private EditRequest? EditProfileRequest { get; set; } | ||
| private EditContext? EditProfileRequestContext { get; set; } | ||
| private ValidationMessageStore? MessageStore { get; set; } | ||
|
|
||
| private bool _changePassword; | ||
| const string dummyPassword = "dummyPassword"; | ||
|
|
||
| private bool ChangePassword | ||
| { | ||
| get | ||
| { | ||
| return _changePassword; | ||
| } | ||
| set | ||
| { | ||
| _changePassword = value; | ||
| if (value) | ||
| { | ||
| EditProfileRequest!.CurrentPassword = ""; | ||
| EditProfileRequest!.InputPassword = ""; | ||
| EditProfileRequest!.ConfirmPassword = ""; | ||
| } | ||
| else | ||
| { | ||
| EditProfileRequest!.CurrentPassword = dummyPassword; | ||
| EditProfileRequest!.InputPassword = dummyPassword; | ||
| EditProfileRequest!.ConfirmPassword = dummyPassword; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| if (Profile is not null) | ||
| { | ||
| EditProfileRequest = new EditRequest(Profile); | ||
| SharedMethods.Log($"Profile pic: {EditProfileRequest.Avatar}"); | ||
| EditProfileRequestContext = new EditContext(EditProfileRequest); | ||
| MessageStore = new ValidationMessageStore(EditProfileRequestContext); | ||
| ChangePassword = false; | ||
| } | ||
| base.OnInitialized(); | ||
| } | ||
|
|
||
| private void SetDisplayName(ChangeEventArgs e) | ||
| { | ||
| var displayName = e.Value?.ToString()?.Trim() ?? ""; | ||
| if (string.IsNullOrEmpty(displayName)) return; | ||
| e.Value = displayName; | ||
| EditProfileRequest!.Name = displayName; | ||
| } | ||
|
|
||
| private void OnAvatarSelected(string avatar) | ||
| { | ||
| EditProfileRequest!.Avatar = avatar; | ||
| } | ||
|
|
||
| private async void SaveProfile() | ||
| { | ||
| SharedMethods.Log("Saving profile..."); | ||
| if (ChangePassword) | ||
| EditProfileRequest!.Password = EditProfileRequest!.InputPassword; | ||
| await indexedDbService.UpdateUser(EditProfileRequest!, ChangePassword); | ||
| Profile = await indexedDbService.GetUserById(EditProfileRequest!.Id); | ||
| await OnProfileUpdated.InvokeAsync(); | ||
| } | ||
|
|
||
| private bool CheckCurrentPassword() | ||
| { | ||
| if (!ChangePassword) return true; | ||
| var profilePasswordHash = Profile?.Password ?? ""; | ||
| return Security.PasswordManager.ValidatePassword(EditProfileRequest!.CurrentPassword, profilePasswordHash); | ||
| } | ||
|
|
||
| private void ValidateCurrentPassword(string value) | ||
| { | ||
| EditProfileRequest!.CurrentPassword = value; | ||
| if (!CheckCurrentPassword()) | ||
| { | ||
| SharedMethods.Log("I was here to add message to the store."); | ||
| MessageStore!.Clear(); | ||
| MessageStore!.Add(() => EditProfileRequest!.CurrentPassword, "Invalid current password."); | ||
| } | ||
| else | ||
| { | ||
| MessageStore!.Clear(); | ||
| } | ||
| EditProfileRequestContext!.NotifyValidationStateChanged(); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
src/Aneejian.Games.ClickMatch.Client/Components/UserProfile/_ViewOrEditUserProfile.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| @inject AuthenticationService authenticationService | ||
| @inject IndexedDbService indexedDbService | ||
| @inject NavigationManager navigationManager | ||
| @inject IJSRuntime jsRuntime | ||
|
|
||
|
|
||
|
|
||
| <_AccessBased> | ||
| <Authorized> | ||
| @if (User is not null) | ||
| { | ||
| <div> | ||
| @if (!EditMode) | ||
| { | ||
| <_SubHeading> | ||
| @(User.Name)'s Profile | ||
| </_SubHeading> | ||
| <div class="d-grid align-items-center justify-content-center mb-4"> | ||
| <_UserProfileCard Profile="User" ShowHoverEffect=false /> | ||
| </div> | ||
|
|
||
| @if (User.UserName != AppStrings.GuestUser.UserName) | ||
| { | ||
| <div class="mb-4 d-flex gap-2 justify-content-center"> | ||
| <button class="btn btn-primary btn-sm" @onclick=InitiateEditProfile>Edit Profile</button> | ||
| <button class="btn btn-danger btn-sm" @onclick=OpenDeleteModal>Delete Profile</button> | ||
| </div> | ||
| } | ||
| <_SubHeading class="fw-light mb-4 fs-4"> | ||
| Game Stats | ||
| </_SubHeading> | ||
| <_UserStats /> | ||
| } | ||
| else | ||
| { | ||
| <_SubHeading> | ||
| Editing @(User.Name)'s Profile | ||
| </_SubHeading> | ||
| <_EditProfile Profile="User" OnCancel="CancelEditMode" OnProfileUpdated="ProfileUpdated" /> | ||
| } | ||
| </div> | ||
| <_DeleteUser Profile=User OnUserDeleted=DeleteUser /> | ||
|
|
||
| } | ||
| </Authorized> | ||
| <UnAuthorized> | ||
| <div> | ||
| <_SubHeading> | ||
| Please login to view your profile. | ||
| </_SubHeading> | ||
| </div> | ||
| </UnAuthorized> | ||
| </_AccessBased> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| @code { | ||
| [Parameter] | ||
| public UserDto? User { get; set; } | ||
|
|
||
| public bool EditMode { get; set; } = false; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| await authenticationService.IsSessionAuthenticated(); | ||
| User = authenticationService.AuthenticatedUser; | ||
| } | ||
|
|
||
| private void InitiateEditProfile() | ||
| { | ||
| EditMode = true; | ||
| } | ||
|
|
||
| private void CancelEditMode() | ||
| { | ||
| EditMode = false; | ||
| } | ||
|
|
||
| private async Task ProfileUpdated() | ||
| { | ||
| User = await indexedDbService.GetUserById(User!.Id); | ||
| EditMode = false; | ||
| StateHasChanged(); | ||
| } | ||
|
|
||
|
|
||
| private async Task OpenDeleteModal(MouseEventArgs e) | ||
| { | ||
| await jsRuntime.InvokeVoidAsync("openModal", "delete-profile-modal" + User!.Id); | ||
| } | ||
|
|
||
| private void DeleteUser() | ||
| { | ||
| navigationManager.NavigateTo(AppStrings.Pages.Logout); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.