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> <InputLabelComponent LabelText="@Localizer["Email_Label"]" For="() => Input.Email">
<hr /> <InputText @bind-Value="Input.Email" class="input input-bordered w-full" autocomplete="username"
<ValidationSummary class="text-danger" role="alert" /> required aria-required="true" placeholder="@Localizer["Email_Placeholder"]" />
<div class="form-floating mb-3"> </InputLabelComponent>
<InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" /> <InputLabelComponent LabelText="@Localizer["Password_Label"]" For="() => Input.Password">
<label for="email" class="form-label">Email</label> <InputText @bind-Value="Input.Password" class="input input-bordered w-full" autocomplete="current-password" type="password"
<ValidationMessage For="() => Input.Email" class="text-danger" /> required aria-required="true" placeholder="@Localizer["Password_Placeholder"]" />
</div> </InputLabelComponent>
<div class="form-floating mb-3"> <div class="form-control">
<InputText type="password" @bind-Value="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" /> <label class="label cursor-pointer">
<label for="password" class="form-label">Password</label> <span class="label-text">@Localizer["RememberMe_Label"]</span>
<ValidationMessage For="() => Input.Password" class="text-danger" /> <InputCheckbox @bind-Value="Input.RememberMe" class="checkbox" />
</div> </label>
<div class="checkbox mb-3"> </div>
<label class="form-label">
<InputCheckbox @bind-Value="Input.RememberMe" class="darker-border-checkbox form-check-input" /> <button type="submit" class="btn btn-primary w-full">
Remember me @Localizer["Submit"]
</label> </button>
</div> </EditForm>
<div> <ul class="mt-3 flex flex-col gap-1 text-center">
<button type="submit" class="w-100 btn btn-lg btn-primary">Log in</button> <li>
</div> <a class="hover:link" href="Account/ForgotPassword">
<div> @Localizer["ResetPassword_Label"]
<p> </a>
<a href="Account/ForgotPassword">Forgot your password?</a> </li>
</p> <li>
<p> <a class="hover:link" href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">
<a href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a> @Localizer["Register_Label"]
</p> </a>
<p> </li>
<a href="Account/ResendEmailConfirmation">Resend email confirmation</a> <li>
</p> <a class="hover:link" href="Account/ResendEmailConfirmation">
</div> @Localizer["ResendMailConfirmation_Label"]
</EditForm> </a>
</section> </li>
</div> </ul>
<div class="col-md-6 col-md-offset-2"> </section>
<section>
<h3>Use another service to log in.</h3> <!--
<hr /> <section class="w-80 max-w-xs">
<ExternalLoginPicker /> <h2 class="text-2xl lg:text-4xl mb-3">Use another service to log in.</h2>
</section> <hr />
</div> <ExternalLoginPicker />
</section>
-->
</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