Update login page UI to show footer with app version (#1193)

This commit is contained in:
Leendert de Borst
2025-09-11 10:53:55 +02:00
committed by Leendert de Borst
parent af4ca2e018
commit b649bdeb2e
7 changed files with 30 additions and 18 deletions

View File

@@ -3,7 +3,7 @@
@using AliasVault.Client.Shared.Components
@inject NavigationManager NavigationManager
<div class="flex flex-col items-center justify-center px-6 pt-8 pb-8 mx-auto md:h-screen pt:mt-0 dark:bg-gray-900 relative">
<div class="flex flex-col items-center justify-center px-6 pt-8 pb-8 mx-auto md:h-screen pt:mt-0 relative">
@if (ShowLanguageSwitcher)
{
<div class="absolute top-4 right-4 z-10">

View File

@@ -122,6 +122,8 @@ else
</EditForm>
}
<FooterLogin />
@code {
private readonly LoginFormModel _loginModel = new();
private readonly LoginModel2Fa _loginModel2Fa = new();

View File

@@ -13,15 +13,15 @@
</div>
</div>
<div class="flex lg:min-h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-7xl mx-auto flex flex-col lg:flex-row">
<div class="flex flex-col items-center justify-center px-6 pt-8 pb-8 mx-auto md:h-screen pt:mt-0 relative">
<div class="w-full max-w-7xl mx-auto flex flex-col lg:flex-row bg-gray-100 dark:bg-gray-900">
<div class="hidden lg:flex lg:w-1/2 items-center justify-center p-8">
<div class="text-white text-4xl font-bold">
<img src="img/logo.svg" alt="AliasVault" class="w-64 h-64" />
</div>
</div>
<div class="w-full lg:w-1/2 flex items-center justify-center lg:px-8 lg:py-12">
<div class="w-full lg:w-1/2 flex items-center justify-center lg:px-8 lg:py-12 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-xl p-6 space-y-4">
<Logo />
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
@@ -43,11 +43,11 @@
</div>
</div>
</div>
<FooterLogin />
</div>
</div>
<Footer ShowBorder="false"></Footer>
@code {
private IStringLocalizer Localizer => LocalizerFactory.Create("Pages.Auth.Start", "AliasVault.Client");

View File

@@ -83,6 +83,8 @@ else
</div>
}
<FooterLogin />
@code {
/// <summary>
/// Skip automatic WebAuthn unlock during page load if set to true.

View File

@@ -4,29 +4,18 @@
@using Microsoft.Extensions.Localization
@implements IDisposable
<footer class="relative -z-10 lg:fixed bottom-0 left-0 right-0 dark:bg-gray-900 @(ShowBorder ? "border-t border-gray-200 dark:border-gray-700" : "")">
<footer class="fixed -z-10 bottom-0 left-0 right-0 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4 py-4">
<div class="flex flex-col lg:flex-row justify-between items-center">
<p class="text-sm text-center text-gray-500 mb-4 lg:mb-0">
© 2024 <span>@AppInfo.ApplicationName v@(AppInfo.GetFullVersion())</span>. @Localizer["CopyrightText"]
</p>
<div class="hidden lg:block text-center text-gray-400 text-sm">@_randomQuote</div>
<ul class="flex flex-wrap items-center justify-center">
<li>
<a href="https://github.com/aliasvault/aliasvault" target="_blank" class="text-sm font-normal text-gray-500 hover:underline dark:text-gray-400">GitHub</a>
</li>
</ul>
</div>
</div>
</footer>
@code {
/// <summary>
/// Gets or sets a value indicating whether the footer should have a border.
/// </summary>
[Parameter]
public bool ShowBorder { get; set; } = true;
private IStringLocalizer Localizer => LocalizerFactory.Create("Layout.Footer", "AliasVault.Client");
private string[] Quotes =>

View File

@@ -0,0 +1,15 @@
@inject IStringLocalizerFactory LocalizerFactory
@using AliasVault.Shared.Core
@using Microsoft.Extensions.Localization
<footer class="fixed -z-10 bottom-0 left-0 right-0 dark:bg-gray-900">
<div class="container mx-auto px-4 py-4">
<p class="text-sm text-center text-gray-400 dark:text-gray-500 mb-4 lg:mb-0">
© @(DateTime.Now.Year) <span>@AppInfo.ApplicationName v@(AppInfo.GetFullVersion())</span>. @Localizer["CopyrightText"]
</p>
</div>
</footer>
@code {
private IStringLocalizer Localizer => LocalizerFactory.Create("Layout.Footer", "AliasVault.Client");
}

View File

@@ -3407,6 +3407,10 @@ video {
height: 100vh;
}
.md\:min-h-screen {
min-height: 100vh;
}
.md\:w-64 {
width: 16rem;
}