Refactor browser extension info to shared constants (#628)

2026-03-19 15:18:02 -04:00 · 2025-03-04 17:42:06 +01:00
parent c4738637f1
commit 613fb7db12
5 changed files with 170 additions and 57 deletions
--- a/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor
@@ -2,7 +2,7 @@
@inherits MainBase
@inject IJSRuntime JsRuntime
@inject ILogger<BrowserExtensions> Logger
-
+@using AliasVault.Shared.Core.BrowserExtensions
 <LayoutPageTitle>Install Browser Extension</LayoutPageTitle>

 <PageHeader
@@ -32,21 +32,21 @@
            <div class="p-4 border rounded-lg dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20 border-blue-200">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-center">
-                        <img src="@GetBrowserIcon(CurrentBrowser)" alt="@CurrentBrowser" class="w-8 h-8 mr-3">
-                        <h4 class="text-lg font-medium text-gray-900 dark:text-white">@GetBrowserName(CurrentBrowser)</h4>
+                        <img src="@CurrentBrowserExtension?.IconPath" alt="@CurrentBrowserExtension?.Name" class="w-8 h-8 mr-3">
+                        <h4 class="text-lg font-medium text-gray-900 dark:text-white">@CurrentBrowserExtension?.Name</h4>
                    </div>
-                    @if (CurrentBrowser == BrowserType.Chrome)
+                    @if (CurrentBrowserExtension?.IsAvailable ?? false)
                    {
-                        <a href="https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj"
+                        <a href="@CurrentBrowserExtension?.DownloadUrl"
                           target="_blank"
                           class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
-                            Install for Chrome
+                            Install for @CurrentBrowserExtension?.Name
                        </a>
                    }
                    else
                    {
                        <p class="text-sm text-blue-800 dark:text-blue-400">
-                            Support for @GetBrowserName(CurrentBrowser) is coming soon! For now, you can use our Chrome extension.
+                            Support for @CurrentBrowserExtension?.Name is coming soon!
                        </p>
                    }
                </div>
@@ -57,19 +57,19 @@
    <div class="mb-4">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Other Browsers</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            @foreach (var browser in Enum.GetValues<BrowserType>().Where(b => b != BrowserType.Unknown && b != CurrentBrowser))
+            @foreach (var extension in Constants.Extensions.Where(x => x.Key != BrowserType.Unknown && x.Key != CurrentBrowser))
            {
                <div class="p-4 border rounded-lg dark:border-gray-700">
                    <div class="flex items-center mb-4">
-                        <img src="@GetBrowserIcon(browser)" alt="@GetBrowserName(browser)" class="w-8 h-8 mr-3">
-                        <h4 class="text-lg font-medium text-gray-900 dark:text-white">@GetBrowserName(browser)</h4>
+                        <img src="@extension.Value.IconPath" alt="@extension.Value.Name" class="w-8 h-8 mr-3">
+                        <h4 class="text-lg font-medium text-gray-900 dark:text-white">@extension.Value.Name</h4>
                    </div>
-                    @if (browser == BrowserType.Chrome)
+                    @if (extension.Value.IsAvailable)
                    {
-                        <a href="https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj"
+                        <a href="@extension.Value.DownloadUrl"
                           target="_blank"
                           class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
-                            Install for Chrome
+                            Install for @extension.Value.Name
                        </a>
                    }
                    else
@@ -85,24 +85,16 @@
 </div>

@code {
-    /// <summary>
-    /// The type of browser.
-    /// </summary>
-    private enum BrowserType
-    {
-        Unknown,
-        Firefox,
-        Chrome,
-        Safari,
-        Edge,
-        Brave
-    }
-
    /// <summary>
    /// The current browser of the user.
    /// </summary>
    private BrowserType CurrentBrowser { get; set; }

+    /// <summary>
+    /// Information for extension for the current browser of the user.
+    /// </summary>
+    private BrowserExtensionInfo? CurrentBrowserExtension { get; set; } = null;
+
    /// <inheritdoc />
    protected override async Task OnInitializedAsync()
    {
@@ -112,6 +104,7 @@
        try
        {
            CurrentBrowser = await DetermineBrowser();
+            CurrentBrowserExtension = Constants.Extensions[CurrentBrowser];
        }
        catch (Exception ex)
        {
@@ -149,30 +142,4 @@
            _ => BrowserType.Unknown
        };
    }
-
-    /// <summary>
-    /// Gets the browser icon path.
-    /// </summary>
-    private static string GetBrowserIcon(BrowserType browser) => browser switch
-    {
-        BrowserType.Firefox => "/img/browser-icons/firefox.svg",
-        BrowserType.Chrome => "/img/browser-icons/chrome.svg",
-        BrowserType.Safari => "/img/browser-icons/safari.svg",
-        BrowserType.Edge => "/img/browser-icons/edge.svg",
-        BrowserType.Brave => "/img/browser-icons/brave.svg",
-        _ => string.Empty
-    };
-
-    /// <summary>
-    /// Gets the browser display name.
-    /// </summary>
-    private static string GetBrowserName(BrowserType browser) => browser switch
-    {
-        BrowserType.Firefox => "Firefox",
-        BrowserType.Chrome => "Google Chrome",
-        BrowserType.Safari => "Safari",
-        BrowserType.Edge => "Microsoft Edge",
-        BrowserType.Brave => "Brave",
-        _ => string.Empty
-    };
 }
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1100,6 +1100,10 @@ video {
  grid-template-columns: repeat(1, minmax(0, 1fr));
 }

+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -1148,6 +1152,10 @@ video {
  justify-content: space-between;
 }

+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
  gap: 1rem;
 }
@@ -2479,11 +2487,6 @@ video {
  --tw-gradient-to: #f49541 var(--tw-gradient-to-position);
 }

-.dark\:text-blue-200:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
-}
-
 .dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -2643,6 +2646,11 @@ video {
  color: rgb(229 231 235 / var(--tw-text-opacity));
 }

+.dark\:hover\:text-primary-300:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 185 99 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:text-primary-500:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(244 149 65 / var(--tw-text-opacity));
@@ -2765,6 +2773,10 @@ video {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
  .sm\:flex-row {
    flex-direction: row;
  }
@@ -2851,6 +2863,10 @@ video {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
  .md\:gap-4 {
    gap: 1rem;
  }
--- a/src/Shared/AliasVault.Shared.Core/BrowserExtensions/BrowserExtensionInfo.cs
+++ b/src/Shared/AliasVault.Shared.Core/BrowserExtensions/BrowserExtensionInfo.cs
@@ -0,0 +1,34 @@
+//-----------------------------------------------------------------------
+// <copyright file="BrowserExtensionInfo.cs" company="lanedirt">
+// Copyright (c) lanedirt. All rights reserved.
+// Licensed under the MIT license. See LICENSE.md file in the project root for full license information.
+// </copyright>
+//-----------------------------------------------------------------------
+
+namespace AliasVault.Shared.Core.BrowserExtensions;
+
+/// <summary>
+/// Provides information about a browser extension that is available for AliasVault.
+/// </summary>
+public class BrowserExtensionInfo
+{
+    /// <summary>
+    /// Gets or sets the name of the browser extension.
+    /// </summary>
+    public string Name { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the path to the icon of the browser extension.
+    /// </summary>
+    public string IconPath { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the URL to download the browser extension.
+    /// </summary>
+    public string? DownloadUrl { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the browser extension is available.
+    /// </summary>
+    public bool IsAvailable { get; set; }
+}
--- a/src/Shared/AliasVault.Shared.Core/BrowserExtensions/BrowserType.cs
+++ b/src/Shared/AliasVault.Shared.Core/BrowserExtensions/BrowserType.cs
@@ -0,0 +1,44 @@
+//-----------------------------------------------------------------------
+// <copyright file="BrowserType.cs" company="lanedirt">
+// Copyright (c) lanedirt. All rights reserved.
+// Licensed under the MIT license. See LICENSE.md file in the project root for full license information.
+// </copyright>
+//-----------------------------------------------------------------------
+
+namespace AliasVault.Shared.Core.BrowserExtensions;
+
+/// <summary>
+/// The type of browser.
+/// </summary>
+public enum BrowserType
+{
+    /// <summary>
+    /// Unknown browser type.
+    /// </summary>
+    Unknown,
+
+    /// <summary>
+    /// Firefox browser type.
+    /// </summary>
+    Firefox,
+
+    /// <summary>
+    /// Chrome browser type.
+    /// </summary>
+    Chrome,
+
+    /// <summary>
+    /// Safari browser type.
+    /// </summary>
+    Safari,
+
+    /// <summary>
+    /// Edge browser type.
+    /// </summary>
+    Edge,
+
+    /// <summary>
+    /// Brave browser type.
+    /// </summary>
+    Brave,
+}
--- a/src/Shared/AliasVault.Shared.Core/BrowserExtensions/Constants.cs
+++ b/src/Shared/AliasVault.Shared.Core/BrowserExtensions/Constants.cs
@@ -0,0 +1,52 @@
+//-----------------------------------------------------------------------
+// <copyright file="Constants.cs" company="lanedirt">
+// Copyright (c) lanedirt. All rights reserved.
+// Licensed under the MIT license. See LICENSE.md file in the project root for full license information.
+// </copyright>
+//-----------------------------------------------------------------------
+
+namespace AliasVault.Shared.Core.BrowserExtensions;
+
+/// <summary>
+/// Provides constants for browser extension information.
+/// </summary>
+public static class Constants
+{
+    /// <summary>
+    /// Gets the browser extensions available for AliasVault. This is used to render download links in the client.
+    /// </summary>
+    public static readonly Dictionary<BrowserType, BrowserExtensionInfo> Extensions = new()
+    {
+        [BrowserType.Chrome] = new BrowserExtensionInfo
+        {
+            Name = "Google Chrome",
+            IconPath = "/img/browser-icons/chrome.svg",
+            DownloadUrl = "https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj",
+            IsAvailable = true,
+        },
+        [BrowserType.Firefox] = new BrowserExtensionInfo
+        {
+            Name = "Firefox",
+            IconPath = "/img/browser-icons/firefox.svg",
+            IsAvailable = false,
+        },
+        [BrowserType.Safari] = new BrowserExtensionInfo
+        {
+            Name = "Safari",
+            IconPath = "/img/browser-icons/safari.svg",
+            IsAvailable = false,
+        },
+        [BrowserType.Edge] = new BrowserExtensionInfo
+        {
+            Name = "Microsoft Edge",
+            IconPath = "/img/browser-icons/edge.svg",
+            IsAvailable = false,
+        },
+        [BrowserType.Brave] = new BrowserExtensionInfo
+        {
+            Name = "Brave",
+            IconPath = "/img/browser-icons/brave.svg",
+            IsAvailable = false,
+        },
+    };
+}