From b649bdeb2e867e6506a054b11aad76cc119e48e7 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 11 Sep 2025 10:53:55 +0200
Subject: [PATCH] Update login page UI to show footer with app version (#1193)

---
 .../Auth/Layout/MainLayout.razor                  |  2 +-
 .../AliasVault.Client/Auth/Pages/Login.razor      |  2 ++
 .../AliasVault.Client/Auth/Pages/Start.razor      | 10 +++++-----
 .../AliasVault.Client/Auth/Pages/Unlock.razor     |  2 ++
 .../AliasVault.Client/Main/Layout/Footer.razor    | 13 +------------
 .../Main/Layout/FooterLogin.razor                 | 15 +++++++++++++++
 .../AliasVault.Client/wwwroot/css/tailwind.css    |  4 ++++
 7 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 apps/server/AliasVault.Client/Main/Layout/FooterLogin.razor

diff --git a/apps/server/AliasVault.Client/Auth/Layout/MainLayout.razor b/apps/server/AliasVault.Client/Auth/Layout/MainLayout.razor
index f65a63af8..ca9fa2508 100644
--- a/apps/server/AliasVault.Client/Auth/Layout/MainLayout.razor
+++ b/apps/server/AliasVault.Client/Auth/Layout/MainLayout.razor
@@ -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">
diff --git a/apps/server/AliasVault.Client/Auth/Pages/Login.razor b/apps/server/AliasVault.Client/Auth/Pages/Login.razor
index bd1fd735f..31d17cc0c 100644
--- a/apps/server/AliasVault.Client/Auth/Pages/Login.razor
+++ b/apps/server/AliasVault.Client/Auth/Pages/Login.razor
@@ -122,6 +122,8 @@ else
     </EditForm>
 }
 
+<FooterLogin />
+
 @code {
     private readonly LoginFormModel _loginModel = new();
     private readonly LoginModel2Fa _loginModel2Fa = new();
diff --git a/apps/server/AliasVault.Client/Auth/Pages/Start.razor b/apps/server/AliasVault.Client/Auth/Pages/Start.razor
index 36af992cb..316e98b6d 100644
--- a/apps/server/AliasVault.Client/Auth/Pages/Start.razor
+++ b/apps/server/AliasVault.Client/Auth/Pages/Start.razor
@@ -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");
 
diff --git a/apps/server/AliasVault.Client/Auth/Pages/Unlock.razor b/apps/server/AliasVault.Client/Auth/Pages/Unlock.razor
index 985db2671..bd11ba0a7 100644
--- a/apps/server/AliasVault.Client/Auth/Pages/Unlock.razor
+++ b/apps/server/AliasVault.Client/Auth/Pages/Unlock.razor
@@ -83,6 +83,8 @@ else
     </div>
 }
 
+<FooterLogin />
+
 @code {
     /// <summary>
     /// Skip automatic WebAuthn unlock during page load if set to true.
diff --git a/apps/server/AliasVault.Client/Main/Layout/Footer.razor b/apps/server/AliasVault.Client/Main/Layout/Footer.razor
index d9f925eb4..a7078037d 100644
--- a/apps/server/AliasVault.Client/Main/Layout/Footer.razor
+++ b/apps/server/AliasVault.Client/Main/Layout/Footer.razor
@@ -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 =>
diff --git a/apps/server/AliasVault.Client/Main/Layout/FooterLogin.razor b/apps/server/AliasVault.Client/Main/Layout/FooterLogin.razor
new file mode 100644
index 000000000..cbabcde4c
--- /dev/null
+++ b/apps/server/AliasVault.Client/Main/Layout/FooterLogin.razor
@@ -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");
+}
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index c2b176192..fae7a3149 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -3407,6 +3407,10 @@ video {
     height: 100vh;
   }
 
+  .md\:min-h-screen {
+    min-height: 100vh;
+  }
+
   .md\:w-64 {
     width: 16rem;
   }