From fba8c171b614b428da317aa305b31b245007c106 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Fri, 25 Oct 2024 18:08:40 +0200 Subject: [PATCH 1/2] Show page refresh button if loading takes too long (#314) --- .../Properties/launchSettings.json | 2 +- .../wwwroot/css/tailwind.css | 20 ++------ .../wwwroot/index.template.html | 48 ++++++++++++++----- 3 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/AliasVault.Api/Properties/launchSettings.json b/src/AliasVault.Api/Properties/launchSettings.json index 325a23956..cee60d3d0 100644 --- a/src/AliasVault.Api/Properties/launchSettings.json +++ b/src/AliasVault.Api/Properties/launchSettings.json @@ -22,7 +22,7 @@ "DATA_PROTECTION_CERT_PASS": "Development" }, "dotnetRunMessages": true, - "applicationUrl": "https://0.0.0.0:7223;http://0.0.0.0:5092" + "applicationUrl": "https://0.0.0.0:7223" }, "IIS Express": { "commandName": "IISExpress", diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index e576ae7e1..c837db892 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -2141,6 +2141,11 @@ video { --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } +.focus\:ring-gray-100:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity)); +} + .focus\:ring-gray-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); @@ -2181,11 +2186,6 @@ video { --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); } -.focus\:ring-gray-100:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity)); -} - .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } @@ -2579,22 +2579,12 @@ video { width: auto; } - .sm\:flex-row { - flex-direction: row; - } - .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } - .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - .sm\:rounded-lg { border-radius: 0.5rem; } diff --git a/src/AliasVault.Client/wwwroot/index.template.html b/src/AliasVault.Client/wwwroot/index.template.html index 8f47be9a1..5cb97adc7 100644 --- a/src/AliasVault.Client/wwwroot/index.template.html +++ b/src/AliasVault.Client/wwwroot/index.template.html @@ -37,21 +37,31 @@
-
-
-
- - - - -

AliasVault is loading

-

Initializing secure environment. AliasVault prioritizes your privacy, which may take a few seconds.

-
-
-

+
+
+
+
+ + + + +

AliasVault is loading

+

+ Initializing secure environment. AliasVault prioritizes your privacy by running entirely in your browser. The first load might take a short while. +

+
+
+

+
- +
+ +
@@ -86,12 +96,24 @@ const startTime = new Date().getTime(); const minDisplayTime = 1000; const checkInterval = 500; + const refreshButtonTimeout = 15000; const appElement = document.getElementById('app'); + const refreshButton = document.getElementById('refresh-button'); appElement.style.visibility = 'hidden'; loadingScreen.style.display = 'flex'; + // Show refresh button after 15 seconds + setTimeout(() => { + refreshButton.classList.remove('hidden'); + }, refreshButtonTimeout); + + // Add click event listener to refresh button + refreshButton.addEventListener('click', () => { + window.location.reload(); + }); + const checkContentAndTime = () => { const elapsedTime = new Date().getTime() - startTime; const hasContent = appElement.innerHTML.trim() !== ''; From c860899f8e3f80c4b30b5eda4dccc84cdf768178 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Fri, 25 Oct 2024 23:32:20 +0200 Subject: [PATCH 2/2] Show refresh button after 30 sec (#314) --- src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor | 2 +- src/AliasVault.Client/wwwroot/index.template.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor b/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor index 0c93552e7..d7204481f 100644 --- a/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor +++ b/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor @@ -375,7 +375,7 @@ else } else { - credential.Alias.BirthDate = DateTime.Parse(alias.AliasBirthDate, new CultureInfo("en-US")); + credential.Alias.BirthDate = DateTime.Parse(alias.AliasBirthDate, CultureInfo.InvariantCulture); } return credential; diff --git a/src/AliasVault.Client/wwwroot/index.template.html b/src/AliasVault.Client/wwwroot/index.template.html index 5cb97adc7..d6bda7f2e 100644 --- a/src/AliasVault.Client/wwwroot/index.template.html +++ b/src/AliasVault.Client/wwwroot/index.template.html @@ -96,7 +96,7 @@ const startTime = new Date().getTime(); const minDisplayTime = 1000; const checkInterval = 500; - const refreshButtonTimeout = 15000; + const refreshButtonTimeout = 300000; const appElement = document.getElementById('app'); const refreshButton = document.getElementById('refresh-button'); @@ -104,7 +104,7 @@ appElement.style.visibility = 'hidden'; loadingScreen.style.display = 'flex'; - // Show refresh button after 15 seconds + // Show refresh button after 30 seconds setTimeout(() => { refreshButton.classList.remove('hidden'); }, refreshButtonTimeout);