leon.hoppe/HopFrame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Redesigned admin login page

Browse Source
This commit is contained in:
Leon Hoppe
2024-11-14 16:20:09 +01:00
parent 94e7a41e59
commit 61323f089d
2 changed files with 53 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/HopFrame.Web/Pages/Administration/AdminLogin.razor
View File

@@ -12,7 +12,7 @@
<PageTitle>Login</PageTitle> <PageTitle>Login</PageTitle>
<div class="login-wrapper"> <div class="login-wrapper">
<EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form"> @*<EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form">
<div class="field-wrapper"> <div class="field-wrapper">
<h3>Login</h3> <h3>Login</h3>
<div class="mb-3"> <div class="mb-3">
@@ -29,7 +29,29 @@
<BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert> <BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert>
} }
</div> </div>
</EditForm>*@
<div id="login-card">
<span id="login-title">HopFrame Administration</span>
<span id="login-subtitle">Login to proceed</span>
<EditForm Model="UserLogin" OnInvalidSubmit="Login" FormName="login-form" style="display: flex; flex-grow: 1; flex-direction: column">
<div class="mb-3">
<BSLabel>E-Mail address</BSLabel>
<InputText type="email" class="form-control" required @bind-Value="UserLogin.Email"/>
</div>
<div class="mb-3">
<BSLabel>Password</BSLabel>
<InputText type="password" class="form-control" required @bind-Value="UserLogin.Password"/>
</div>
@if (_hasError) {
<BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert>
}
<BSButton Color="BSColor.Primary" IsSubmit="true" MarginTop="Margins.Auto" MarginLeftAndRight="Margins.Auto" style="width: 100px">Login</BSButton>
</EditForm> </EditForm>
</div>
</div> </div>
@inject IAuthService Auth @inject IAuthService Auth
@@ -44,7 +66,7 @@
private const string DefaultRedirect = "/administration"; private const string DefaultRedirect = "/administration";
private bool _hasError = false; private bool _hasError;
protected override async Task OnInitializedAsync() { protected override async Task OnInitializedAsync() {
UserLogin ??= new(); UserLogin ??= new();
@@ -54,7 +76,7 @@
} }
} }
private async Task Login() { private async Task Login() { //TODO: Login does not work
var result = await Auth.Login(UserLogin); var result = await Auth.Login(UserLogin);
if (!result) { if (!result) {

35
src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css
View File

@@ -2,14 +2,33 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #2c3034;
height: 100vh;
} }
.field-wrapper { #login-card {
margin-top: 25vh; min-width: 700px;
min-width: 500px; min-height: 500px;
background-color: #212529;
padding: 30px; border-radius: 20px;
border: 2px solid #ced4da; color: white;
border-radius: 10px; padding: 20px;
position: relative; display: flex;
flex-direction: column;
}
#login-card span {
display: block;
text-align: center;
}
#login-title {
font-size: 35px;
line-height: 1.5;
}
#login-subtitle {
font-size: 24px;
opacity: .3;
margin-bottom: 30px;
} }