Add header for game list (#3)
Co-authored-by: Maxime Adler <madler@sqli.com> Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
@using GameIdeas.Resources
|
||||
@using Blazored.FluentValidation;
|
||||
|
||||
<div class="account-setting-container" tabindex="1001">
|
||||
<div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
|
||||
@if (!AuthentificationService.IsLogin)
|
||||
{
|
||||
<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
|
||||
<FluentValidationValidator />
|
||||
<div class="login-form">
|
||||
<div class="login-field">
|
||||
<div class="input-title">@ResourcesKey.EnterUsername</div>
|
||||
<InputText class="input-text"
|
||||
@bind-Value="LoginDto.Username" />
|
||||
</div>
|
||||
<div class="login-field">
|
||||
<div class="input-title">@ResourcesKey.EnterPassword</div>
|
||||
<InputText class="input-text"
|
||||
@bind-Value="LoginDto.Password" />
|
||||
</div>
|
||||
<div class="login-field">
|
||||
<button class="login-button" type="submit" disabled="@IsLoading">
|
||||
@if (IsLoading)
|
||||
{
|
||||
<div class="loading"></div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@ResourcesKey.Login
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="settings-list">
|
||||
<div class="settings-element" @onclick="HandleLogoutClicked">
|
||||
@ResourcesKey.Logout
|
||||
</div>
|
||||
@* <span class="line"></span> *@
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
using GameIdeas.BlazorApp.Services;
|
||||
using GameIdeas.Shared.Dto;
|
||||
using Microsoft.AspNetCore.Components.Forms;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Headers;
|
||||
|
||||
public partial class AccountSettings (
|
||||
AuthentificationService AuthentificationService)
|
||||
{
|
||||
private bool ContentVisile = false;
|
||||
private EditContext? EditContext;
|
||||
private LoginDto LoginDto = new();
|
||||
private bool IsLoading = false;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
EditContext = new EditContext(LoginDto);
|
||||
}
|
||||
|
||||
public void Open()
|
||||
{
|
||||
ContentVisile = true;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public void Close()
|
||||
{
|
||||
ContentVisile = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public void Toggle()
|
||||
{
|
||||
ContentVisile = !ContentVisile;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task HandleLoginSubmit()
|
||||
{
|
||||
if (EditContext?.Validate() == false)
|
||||
{
|
||||
LoginDto.Password = string.Empty;
|
||||
return;
|
||||
}
|
||||
|
||||
IsLoading = true;
|
||||
await Task.Delay(TimeSpan.FromSeconds(5));
|
||||
IsLoading = false;
|
||||
|
||||
LoginDto = new();
|
||||
Close();
|
||||
AuthentificationService.Login();
|
||||
}
|
||||
private void HandleLogoutClicked()
|
||||
{
|
||||
Close();
|
||||
AuthentificationService.Logout();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
.account-setting-content {
|
||||
overflow: hidden;
|
||||
border-radius: var(--big-radius);
|
||||
position: fixed;
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.4s;
|
||||
border: 2px solid var(--light-grey);
|
||||
background: var(--black);
|
||||
right: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 6px;
|
||||
gap: 20px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
::deep .input-text {
|
||||
background: var(--light-grey);
|
||||
border: 2px solid rgb(255, 255, 255, 0.3);
|
||||
border-radius: var(--small-radius);
|
||||
padding: 6px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
::deep .input-text:focus-visible {
|
||||
border: 2px solid var(--violet) !important;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: var(--violet);
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
height: 32px;
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
background: var(--violet-selected);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
background: var(--violet-selected);
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--line-black);
|
||||
border-top-color: var(--white);
|
||||
animation: loading 1s linear infinite;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 6px;
|
||||
border-bottom: 2px solid var(--light-grey);
|
||||
}
|
||||
|
||||
.settings-element {
|
||||
max-width: 140px;
|
||||
height: 40px;
|
||||
padding: 0 26px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.settings-element:hover {
|
||||
background: var(--light-grey)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
@using GameIdeas.BlazorApp.Pages.Games
|
||||
@using GameIdeas.BlazorApp.Pages.Games.Models
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Dropdown
|
||||
@using GameIdeas.Resources
|
||||
|
||||
<div class="header-tab">
|
||||
<div class="icon-container" @onclick="HandleIconClicked">
|
||||
<img src="icon.png" alt="Game Ideas">
|
||||
</div>
|
||||
|
||||
@Body
|
||||
|
||||
<div class="account-add-container">
|
||||
<div class="add-container">
|
||||
<div class="add-buttons">
|
||||
<div class="first-button button">
|
||||
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="second-button button" @onclick=HandleMoreButton>
|
||||
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M1 3H23L12 22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownContent @ref="DropdownAdd"
|
||||
TItem="AddTypeParams"
|
||||
ValueChanged=HandleAddTypeClickedAsync
|
||||
Items="AddTypes"
|
||||
LabelSelector="(addtype => addtype.Label)"
|
||||
Theme="DropdownTheme.Navigation" />
|
||||
</div>
|
||||
<div class="account-container">
|
||||
<div class="icon-container">
|
||||
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<AccountSettings @ref="AccountSettings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
using GameIdeas.BlazorApp.Pages.Games.Models;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Dropdown;
|
||||
using GameIdeas.Resources;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Headers;
|
||||
|
||||
public partial class HeaderBase
|
||||
{
|
||||
[Parameter] public RenderFragment? Body { get; set; }
|
||||
[Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
|
||||
|
||||
private DropdownContent<AddTypeParams>? DropdownAdd;
|
||||
private readonly IEnumerable<AddTypeParams> AddTypes =
|
||||
[
|
||||
new AddTypeParams(AddType.Manual, ResourcesKey.ManualAdd),
|
||||
new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
|
||||
];
|
||||
|
||||
private AccountSettings? AccountSettings;
|
||||
|
||||
private void HandleIconClicked()
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
|
||||
private async Task HandleMoreButton()
|
||||
{
|
||||
if (DropdownAdd != null)
|
||||
{
|
||||
await DropdownAdd.OpenAsync();
|
||||
}
|
||||
|
||||
AccountSettings?.Close();
|
||||
}
|
||||
|
||||
private async Task HandleAddTypeClickedAsync(AddTypeParams value)
|
||||
{
|
||||
await AddTypeChanged.InvokeAsync(value.AddType);
|
||||
}
|
||||
|
||||
private void HandleAccountClicked()
|
||||
{
|
||||
AccountSettings?.Toggle();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.header-tab {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 0px 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-container img {
|
||||
max-height: 85%;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.icon-container:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.account-add-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.add-container {
|
||||
overflow: visible;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.add-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: var(--violet);
|
||||
border-radius: var(--small-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.first-button {
|
||||
border-right: 2px solid var(--line-black);
|
||||
}
|
||||
|
||||
.second-button .button-icon {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.button-icon:hover {
|
||||
background: var(--line-black);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.account-icon {
|
||||
fill: var(--light-grey);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
using FluentValidation;
|
||||
using GameIdeas.Shared.Dto;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Headers;
|
||||
|
||||
public class LoginValidator : AbstractValidator<LoginDto>
|
||||
{
|
||||
public LoginValidator()
|
||||
{
|
||||
RuleFor(dto => dto.Username)
|
||||
.NotNull()
|
||||
.NotEmpty();
|
||||
|
||||
RuleFor(dto => dto.Password)
|
||||
.NotNull()
|
||||
.NotEmpty();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user