Improved Login Page

This commit is contained in:
Mia Rose Winter 2024-01-17 20:37:04 +01:00
parent ad1601b3d1
commit 19a0acbf35
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
5 changed files with 433 additions and 84 deletions

View file

@ -9,120 +9,109 @@
@inject ILogger<Login> Logger @inject ILogger<Login> Logger
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@inject IdentityRedirectManager RedirectManager @inject IdentityRedirectManager RedirectManager
@inject IStringLocalizer<Login> Localizer
<PageTitle>Log in</PageTitle> <PageTitle>@Localizer["Title"]</PageTitle>
<h1>Log in</h1> <StatusMessage Message="@_errorMessage" />
<div class="row"> <div class="flex gap-y-4 gap-x-8 flex-wrap h-full place-content-center">
<div class="col-md-4"> <section class="w-80 max-w-xs">
<section> <h2 class="text-2xl lg:text-4xl mb-3">@Localizer["Title"]</h2>
<StatusMessage Message="@errorMessage" /> <EditForm Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login" class="w-full">
<EditForm Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
<h2>Use a local account to log in.</h2>
<hr /> <InputLabelComponent LabelText="@Localizer["Email_Label"]" For="() => Input.Email">
<ValidationSummary class="text-danger" role="alert" /> <InputText @bind-Value="Input.Email" class="input input-bordered w-full" autocomplete="username"
<div class="form-floating mb-3"> required aria-required="true" placeholder="@Localizer["Email_Placeholder"]" />
<InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" /> </InputLabelComponent>
<label for="email" class="form-label">Email</label> <InputLabelComponent LabelText="@Localizer["Password_Label"]" For="() => Input.Password">
<ValidationMessage For="() => Input.Email" class="text-danger" /> <InputText @bind-Value="Input.Password" class="input input-bordered w-full" autocomplete="current-password" type="password"
</div> required aria-required="true" placeholder="@Localizer["Password_Placeholder"]" />
<div class="form-floating mb-3"> </InputLabelComponent>
<InputText type="password" @bind-Value="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" /> <div class="form-control">
<label for="password" class="form-label">Password</label> <label class="label cursor-pointer">
<ValidationMessage For="() => Input.Password" class="text-danger" /> <span class="label-text">@Localizer["RememberMe_Label"]</span>
</div> <InputCheckbox @bind-Value="Input.RememberMe" class="checkbox" />
<div class="checkbox mb-3">
<label class="form-label">
<InputCheckbox @bind-Value="Input.RememberMe" class="darker-border-checkbox form-check-input" />
Remember me
</label> </label>
</div> </div>
<div>
<button type="submit" class="w-100 btn btn-lg btn-primary">Log in</button> <button type="submit" class="btn btn-primary w-full">
</div> @Localizer["Submit"]
<div> </button>
<p>
<a href="Account/ForgotPassword">Forgot your password?</a>
</p>
<p>
<a href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a>
</p>
<p>
<a href="Account/ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</EditForm> </EditForm>
<ul class="mt-3 flex flex-col gap-1 text-center">
<li>
<a class="hover:link" href="Account/ForgotPassword">
@Localizer["ResetPassword_Label"]
</a>
</li>
<li>
<a class="hover:link" href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">
@Localizer["Register_Label"]
</a>
</li>
<li>
<a class="hover:link" href="Account/ResendEmailConfirmation">
@Localizer["ResendMailConfirmation_Label"]
</a>
</li>
</ul>
</section> </section>
</div>
<div class="col-md-6 col-md-offset-2"> <!--
<section> <section class="w-80 max-w-xs">
<h3>Use another service to log in.</h3> <h2 class="text-2xl lg:text-4xl mb-3">Use another service to log in.</h2>
<hr /> <hr />
<ExternalLoginPicker /> <ExternalLoginPicker />
</section> </section>
</div> -->
</div> </div>
@code { @code {
private string? errorMessage; private string? _errorMessage;
[CascadingParameter] [CascadingParameter]
private HttpContext HttpContext { get; set; } = default!; private HttpContext HttpContext { get; set; } = default!;
[SupplyParameterFromForm] [SupplyParameterFromForm]
private InputModel Input { get; set; } = new(); private InputModel Input { get; set; } = new();
[SupplyParameterFromQuery] [SupplyParameterFromQuery]
private string? ReturnUrl { get; set; } private string? ReturnUrl { get; set; }
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync() {
{ if (HttpMethods.IsGet(HttpContext.Request.Method)) {
if (HttpMethods.IsGet(HttpContext.Request.Method))
{
// Clear the existing external cookie to ensure a clean login process // Clear the existing external cookie to ensure a clean login process
await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme); await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
} }
} }
public async Task LoginUser() public async Task LoginUser() {
{
// This doesn't count login failures towards account lockout // This doesn't count login failures towards account lockout
// To enable password failures to trigger account lockout, set lockoutOnFailure: true // To enable password failures to trigger account lockout, set lockoutOnFailure: true
var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false); var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
if (result.Succeeded)
{ if (result.Succeeded) {
Logger.LogInformation("User logged in."); Logger.LogInformation("User logged in.");
RedirectManager.RedirectTo(ReturnUrl); RedirectManager.RedirectTo(ReturnUrl);
} } else if (result.RequiresTwoFactor) {
else if (result.RequiresTwoFactor) RedirectManager.RedirectTo("Account/LoginWith2fa",
{
RedirectManager.RedirectTo(
"Account/LoginWith2fa",
new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe }); new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
} } else if (result.IsLockedOut) {
else if (result.IsLockedOut)
{
Logger.LogWarning("User account locked out."); Logger.LogWarning("User account locked out.");
RedirectManager.RedirectTo("Account/Lockout"); RedirectManager.RedirectTo("Account/Lockout");
} } else {
else _errorMessage = "Error: Invalid login attempt.";
{
errorMessage = "Error: Invalid login attempt.";
} }
} }
private sealed class InputModel private sealed class InputModel {
{ [Required] [EmailAddress] public string Email { get; set; } = "";
[Required]
[EmailAddress]
public string Email { get; set; } = "";
[Required] [Required]
[DataType(DataType.Password)] [DataType(DataType.Password)]
public string Password { get; set; } = ""; public string Password { get; set; } = "";
[Display(Name = "Remember me?")] [Display(Name = "Remember me?")] public bool RememberMe { get; set; }
public bool RememberMe { get; set; }
} }
} }

View file

@ -0,0 +1,128 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema
Version 1.3
The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.
Example:
... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">1.3</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1">this is my long string</data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
[base64 mime encoded serialized .NET Framework object]
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
[base64 mime encoded string representing a byte array form of the .NET Framework object]
</data>
There are any number of "resheader" rows that contain simple
name/value pairs.
Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.
The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:
Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.
mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>1.3</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="Title" xml:space="preserve">
<value>Anmelden</value>
</data>
<data name="Email_Label" xml:space="preserve">
<value>E-Mail</value>
</data>
<data name="Password_Label" xml:space="preserve">
<value>Passwort</value>
</data>
<data name="Password_Placeholder" xml:space="preserve">
<value>Passwort</value>
</data>
<data name="Register_Label" xml:space="preserve">
<value>Als neuer Benutzer registrieren</value>
</data>
<data name="Submit" xml:space="preserve">
<value>Anmelden</value>
</data>
<data name="ResetPassword_Label" xml:space="preserve">
<value>Passwort vergessen?</value>
</data>
<data name="ResendMailConfirmation_Label" xml:space="preserve">
<value>Bestätigungsmail erneut senden</value>
</data>
<data name="RememberMe_Label" xml:space="preserve">
<value>Angemeldet bleiben</value>
</data>
</root>

View file

@ -0,0 +1,101 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema
Version 1.3
The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.
Example:
... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">1.3</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1">this is my long string</data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
[base64 mime encoded serialized .NET Framework object]
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
[base64 mime encoded string representing a byte array form of the .NET Framework object]
</data>
There are any number of "resheader" rows that contain simple
name/value pairs.
Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.
The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:
Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.
mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>1.3</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
</root>

View file

@ -0,0 +1,131 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema
Version 1.3
The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.
Example:
... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">1.3</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1">this is my long string</data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
[base64 mime encoded serialized .NET Framework object]
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
[base64 mime encoded string representing a byte array form of the .NET Framework object]
</data>
There are any number of "resheader" rows that contain simple
name/value pairs.
Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.
The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:
Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.
mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>1.3</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.3500.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="Title" xml:space="preserve">
<value>Log In</value>
</data>
<data name="Email_Label" xml:space="preserve">
<value>Email</value>
</data>
<data name="Email_Placeholder" xml:space="preserve">
<value>name@example.com</value>
</data>
<data name="Password_Label" xml:space="preserve">
<value>Password</value>
</data>
<data name="Password_Placeholder" xml:space="preserve">
<value>Password</value>
</data>
<data name="RememberMe_Label" xml:space="preserve">
<value>Remember me</value>
</data>
<data name="Submit" xml:space="preserve">
<value>Log In</value>
</data>
<data name="ResetPassword_Label" xml:space="preserve">
<value>Forgot your password?</value>
</data>
<data name="Register_Label" xml:space="preserve">
<value>Register as a new User</value>
</data>
<data name="ResendMailConfirmation_Label" xml:space="preserve">
<value>Resend email confirmation</value>
</data>
</root>

File diff suppressed because one or more lines are too long