Merge pull request #318 from lanedirt/315-fix-account-creation-mobile-interface-for-safari-browser

Fix account creation mobile interface for safari browser
2026-05-19 13:57:18 -04:00 · 2024-10-22 21:27:33 +02:00
parent d3b3281ca4 88e5142049
commit d59757c8fb
15 changed files with 118 additions and 47 deletions
--- a/src/AliasVault.Admin/Main/App.razor
+++ b/src/AliasVault.Admin/Main/App.razor
@@ -4,7 +4,7 @@
 <html lang="en">
 <head>
        <meta charset="utf-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
        <base href="/"/>
        <link rel="stylesheet" href="@VersionService.GetVersionedPath("css/tailwind.css")"/>
        <link rel="stylesheet" href="@VersionService.GetVersionedPath("css/app.css")"/>
--- a/src/AliasVault.Admin/package.json
+++ b/src/AliasVault.Admin/package.json
@@ -5,7 +5,7 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "tailwindcss -i ./tailwind.css -o ./wwwroot/css/tailwind.css --watch"
+    "uild:admin-css": "tailwindcss -i ./tailwind.css -o ./wwwroot/css/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
--- a/src/AliasVault.Api/Properties/launchSettings.json
+++ b/src/AliasVault.Api/Properties/launchSettings.json
@@ -10,7 +10,7 @@
        "DATA_PROTECTION_CERT_PASS": "Development"
      },
      "dotnetRunMessages": true,
-      "applicationUrl": "http://localhost:5092"
+      "applicationUrl": "http://0.0.0.0:5092"
    },
    "https": {
      "commandName": "Project",
@@ -22,7 +22,7 @@
        "DATA_PROTECTION_CERT_PASS": "Development"
      },
      "dotnetRunMessages": true,
-      "applicationUrl": "https://localhost:7223;http://localhost:5092"
+      "applicationUrl": "https://0.0.0.0:7223;http://0.0.0.0:5092"
    },
    "IIS Express": {
      "commandName": "IISExpress",
@@ -38,7 +38,7 @@
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
-      "applicationUrl": "http://localhost:39952",
+      "applicationUrl": "http://0.0.0.0:39952",
      "sslPort": 44368
    }
  }
--- a/src/AliasVault.Client/Auth/Pages/Logout.razor
+++ b/src/AliasVault.Client/Auth/Pages/Logout.razor
@@ -7,8 +7,8 @@
@inject GlobalNotificationService GlobalNotificationService
@inject DbService DbService

-<div class="fixed inset-0 overflow-y-auto h-full w-full flex flex-col items-center justify-center">
-    <div class="relative p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md mx-auto">
+<div class="fixed inset-0 flex flex-col items-center justify-center px-6 pt-8 pb-8 h-full w-full">
+    <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-700 rounded-lg sm:shadow-xl max-w-md w-full mx-auto">
        <div class="text-center">
            <div class="space-y-4">
                <BoldLoadingIndicator />
--- a/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor
+++ b/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor
@@ -4,10 +4,10 @@
@layout Auth.Layout.EmptyLayout
@attribute [AllowAnonymous]

-<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
-    <div class="w-full mx-auto lg:max-w-xl lg:bg-white lg:dark:bg-gray-800 lg:shadow-xl lg:rounded-lg lg:overflow-hidden">
-        <div class="flex flex-col min-h-screen lg:min-h-0">
-            <div class="flex-grow p-8 pb-0">
+<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col lg:items-center lg:justify-center">
+    <div class="w-full mx-auto lg:max-w-xl lg:bg-white lg:dark:bg-gray-800 lg:shadow-xl lg:rounded-lg lg:overflow-hidden flex flex-col">
+        <div class="flex flex-col flex-grow">
+            <div class="flex-grow p-6 pt-4 lg:pt-6 pb-28 lg:pb-4">
                <div class="flex justify-between items-center mb-4">
                    <div>
                        <button @onclick="GoBack" class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 @(_currentStep == SetupStep.Welcome ? "invisible" : "")">
@@ -55,7 +55,7 @@
                        break;
                }
            </div>
-            <div class="p-8 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 lg:bg-transparent lg:dark:bg-transparent lg:border-0">
+            <div class="fixed lg:relative bottom-0 left-0 right-0 p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 lg:bg-transparent lg:dark:bg-transparent lg:border-0">
                @if (_currentStep == SetupStep.Password && !string.IsNullOrWhiteSpace(_setupData.Password))
                {
                    <button @onclick="GoNext"
@@ -135,7 +135,7 @@
    /// <summary>
    /// Navigates to the next step in the setup process.
    /// </summary>
-    private void GoNext()
+    private async Task GoNext()
    {
        _currentStep = _currentStep switch
        {
@@ -145,6 +145,9 @@
            SetupStep.Password => SetupStep.Creating,
            _ => _currentStep
        };
+
+        await JsInteropService.ScrollToTop();
+        StateHasChanged();
    }

    /// <summary>
--- a/src/AliasVault.Client/Auth/Pages/Start.razor
+++ b/src/AliasVault.Client/Auth/Pages/Start.razor
@@ -12,8 +12,8 @@
            </div>
        </div>

-        <div class="w-full lg:w-1/2 flex items-center justify-center px-8 py-12">
-            <div class="w-full max-w-xl p-6 space-y-4 sm:p-8">
+        <div class="w-full lg:w-1/2 flex items-center justify-center lg:px-8 lg:py-12">
+            <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">
                    Password & Identity manager
--- a/src/AliasVault.Client/Main/Pages/Sync/Sync.razor
+++ b/src/AliasVault.Client/Main/Pages/Sync/Sync.razor
@@ -10,7 +10,7 @@

 <LayoutPageTitle>Sync</LayoutPageTitle>

-<div class="fixed inset-0 overflow-y-auto h-full w-full flex flex-col items-center justify-center">
+<div class="fixed inset-0 flex flex-col items-center justify-center px-6 pt-8 pb-8 h-full w-full">
    @if (CurrentDbState.Status == DbServiceState.DatabaseStatus.DecryptionFailed)
    {
        <ErrorVaultDecrypt />
--- a/src/AliasVault.Client/Properties/launchSettings.json
+++ b/src/AliasVault.Client/Properties/launchSettings.json
@@ -1,13 +1,13 @@
 {
-  "$schema": "http://json.schemastore.org/launchsettings.json",
-  "iisSettings": {
-    "windowsAuthentication": false,
-    "anonymousAuthentication": true,
-    "iisExpress": {
-      "applicationUrl": "http://localhost:17474",
-      "sslPort": 44330
-    }
-  },
+    "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+        "windowsAuthentication": false,
+        "anonymousAuthentication": true,
+        "iisExpress": {
+            "applicationUrl": "http://localhost:17474",
+            "sslPort": 44330
+        }
+    },
    "profiles": {
        "http": {
            "commandName": "Project",
@@ -24,7 +24,7 @@
            "dotnetRunMessages": true,
            "launchBrowser": true,
            "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-            "applicationUrl": "http://localhost:5067",
+            "applicationUrl": "http://0.0.0.0:5067",
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Release"
            }
@@ -34,7 +34,7 @@
            "dotnetRunMessages": true,
            "launchBrowser": true,
            "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-            "applicationUrl": "https://localhost:7103;http://localhost:5067",
+            "applicationUrl": "https://0.0.0.0:7103",
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            }
--- a/src/AliasVault.Client/Services/Auth/AliasVaultApiHandlerService.cs
+++ b/src/AliasVault.Client/Services/Auth/AliasVaultApiHandlerService.cs
@@ -15,6 +15,7 @@ using Microsoft.AspNetCore.Components;
 /// This services handles all API requests to the AliasVault API and will add the access token to the request headers.
 /// If a 401 unauthorized is returned by the API it will intercept this response and attempt to automatically refresh the access token.
 /// </summary>
+/// <param name="serviceProvider">IServiceProvider instance.</param>
 public sealed class AliasVaultApiHandlerService(IServiceProvider serviceProvider) : DelegatingHandler
 {
    /// <summary>
--- a/src/AliasVault.Client/Services/JsInteropService.cs
+++ b/src/AliasVault.Client/Services/JsInteropService.cs
@@ -228,6 +228,15 @@ public sealed class JsInteropService(IJSRuntime jsRuntime)
        }
    }

+    /// <summary>
+    /// Scrolls to the top of the page.
+    /// </summary>
+    /// <returns>Task.</returns>
+    public async Task ScrollToTop()
+    {
+        await jsRuntime.InvokeVoidAsync("window.scrollTo", 0, 0);
+    }
+
    /// <summary>
    /// Represents the result of a WebAuthn get credential operation.
    /// </summary>
--- a/src/AliasVault.Client/package.json
+++ b/src/AliasVault.Client/package.json
@@ -5,7 +5,7 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "tailwindcss -i ./tailwind.css -o ./wwwroot/css/tailwind.css --watch"
+    "build:client-css": "tailwindcss -i ./tailwind.css -o ./wwwroot/css/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
--- a/src/AliasVault.Client/wwwroot/css/app.css
+++ b/src/AliasVault.Client/wwwroot/css/app.css
@@ -34,3 +34,7 @@
 .validation-message {
    color: red;
 }
+
+.pb-safe {
+    padding-bottom: env(safe-area-inset-bottom);
+}
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -686,6 +686,10 @@ video {
  z-index: 50;
 }

+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
 .col-span-2 {
  grid-column: span 2 / span 2;
 }
@@ -698,10 +702,6 @@ video {
  grid-column: 1 / -1;
 }

-.col-span-1 {
-  grid-column: span 1 / span 1;
-}
-
 .\!m-0 {
  margin: 0px !important;
 }
@@ -1088,10 +1088,6 @@ video {
  grid-template-columns: repeat(7, minmax(0, 1fr));
 }

-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .flex-col {
  flex-direction: column;
 }
@@ -1648,6 +1644,18 @@ video {
  padding-top: 2rem;
 }

+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
+.pb-28 {
+  padding-bottom: 7rem;
+}
+
 .text-left {
  text-align: left;
 }
@@ -2642,6 +2650,10 @@ video {
 }

@media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
@@ -2690,6 +2702,10 @@ video {
    position: fixed;
  }

+  .lg\:relative {
+    position: relative;
+  }
+
  .lg\:order-1 {
    order: 1;
  }
@@ -2726,6 +2742,14 @@ video {
    margin-top: 0px;
  }

+  .lg\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .lg\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
  .lg\:block {
    display: block;
  }
@@ -2738,10 +2762,6 @@ video {
    display: none;
  }

-  .lg\:min-h-0 {
-    min-height: 0px;
-  }
-
  .lg\:min-h-screen {
    min-height: 100vh;
  }
@@ -2766,6 +2786,14 @@ video {
    flex-direction: row;
  }

+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:justify-center {
+    justify-content: center;
+  }
+
  .lg\:gap-4 {
    gap: 1rem;
  }
@@ -2791,10 +2819,36 @@ video {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
  .lg\:pb-16 {
    padding-bottom: 4rem;
  }

+  .lg\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .lg\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .lg\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .lg\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
  .lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
--- a/src/AliasVault.Client/wwwroot/index.template.html
+++ b/src/AliasVault.Client/wwwroot/index.template.html
@@ -22,7 +22,7 @@
    License: MIT
    -->
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
    <title>AliasVault</title>
    <base href="/" />
    <link rel="stylesheet" href="css/app.css?v=@CacheBuster" />
@@ -36,8 +36,8 @@

 <body class="bg-gray-50 dark:bg-gray-900">
    <div id="loading-screen">
-        <div class="fixed inset-0 flex items-center justify-center">
-            <div class="relative p-8 bg-white dark:bg-gray-700 rounded-lg shadow-xl max-w-md mx-auto">
+        <div class="fixed inset-0 flex items-center justify-center px-6 pt-8 pb-8">
+            <div class="w-full max-w-xl p-6 space-y-4 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="text-center">
                    <div class="inner">
                        <svg class="mx-auto animate-spin h-12 w-12 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
--- a/uninstall.sh
+++ b/uninstall.sh
@@ -48,9 +48,9 @@ print_logo() {
 stop_and_remove_containers() {
  printf "${CYAN}> Stopping and removing Docker containers...${NC}\n"
  if [ "$VERBOSE" = true ]; then
-    docker-compose down -v
+    docker compose down -v
  else
-    docker-compose down -v > /dev/null 2>&1
+    docker compose down -v > /dev/null 2>&1
  fi
  printf "${GREEN}> Docker containers stopped and removed.${NC}\n"
 }
@@ -59,9 +59,9 @@ stop_and_remove_containers() {
 remove_docker_images() {
  printf "${CYAN}> Removing Docker images...${NC}\n"
  if [ "$VERBOSE" = true ]; then
-    docker-compose down --rmi all
+    docker compose down --rmi all
  else
-    docker-compose down --rmi all > /dev/null 2>&1
+    docker compose down --rmi all > /dev/null 2>&1
  fi
  printf "${GREEN}> Docker images removed.${NC}\n"
 }