[frontend/components] Update login page styling

This commit is contained in:
Jeder 2024-10-24 22:09:57 +02:00 committed by Lilian
parent d3dd095a3a
commit 8bee412401
No known key found for this signature in database
2 changed files with 26 additions and 9 deletions

View file

@ -3,19 +3,24 @@
@using Iceshrimp.Frontend.Core.Miscellaneous @using Iceshrimp.Frontend.Core.Miscellaneous
@using Iceshrimp.Frontend.Core.Schemas @using Iceshrimp.Frontend.Core.Schemas
@using Iceshrimp.Frontend.Core.Services @using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Frontend.Localization
@using Iceshrimp.Shared.Schemas.Web @using Iceshrimp.Shared.Schemas.Web
@using Microsoft.Extensions.Localization
@inject ApiService Api @inject ApiService Api
@inject SessionService SessionService @inject SessionService SessionService
@inject NavigationManager Navigation @inject NavigationManager Navigation
@inject IStringLocalizer<Localization> Loc;
@layout LoginLayout @layout LoginLayout
<h3>Login</h3> <div class="body">
<div> <span><h3>Login</h3></span>
<input <div class="login-form">
@bind="@Username"/> <input placeholder="@Loc["Username"]" required="required"
<input type="password" required="required" @bind="@Username"/>
@bind="@Password"/> <input type="password" placeholder="@Loc["Password"]" required="required"
<button @onclick="Submit" disabled="@Loading">Login</button> @bind="@Password"/>
</div> <button class="button" @onclick="Submit" disabled="@Loading">@Loc["Login"]</button>
</div>
@if (Loading) @if (Loading)
{ {
<span>Loading!</span> <span>Loading!</span>
@ -25,8 +30,9 @@
<span>Authentication Failed</span> <span>Authentication Failed</span>
} }
<p>A login page is being constructed here.</p> <span><p>A login page is being constructed here.</p></span>
</div>
@code { @code {
[SupplyParameterFromQuery(Name = "rd")] [SupplyParameterFromQuery(Name = "rd")]
[SuppressMessage("ReSharper", "UnusedAutoPropertyAccessor.Local")] [SuppressMessage("ReSharper", "UnusedAutoPropertyAccessor.Local")]

View file

@ -0,0 +1,11 @@
.body {
display: flex;
flex-direction: column;
align-items: center;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
}