mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-05-24 08:17:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #325 from lanedirt/314-improve-ux-for-slow-clients

Browse Source 
Show page refresh button if loading takes too long
This commit is contained in:
Leendert de Borst
2024-10-26 18:02:04 +02:00
committed by GitHub
parent 557deee352 c860899f8e
commit bca0d3ee6b
4 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/AliasVault.Api/Properties/launchSettings.json
View File

@@ -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",

2
src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor
View File

@@ -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;

20
src/AliasVault.Client/wwwroot/css/tailwind.css
View File

@@ -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;
}

48
src/AliasVault.Client/wwwroot/index.template.html
View File

@@ -37,21 +37,31 @@
<body class="bg-gray-50 dark:bg-gray-900">
<div id="loading-screen">
<div class="fixed inset-0 flex items-center justify-center px-6 pt-8 pb-8">
<div class="w-full max-w-md 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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<h2 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">AliasVault is loading</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Initializing secure environment. AliasVault prioritizes your privacy, which may take a few seconds.</p>
<div class="loading-progress-text text-sm font-medium text-gray-700 dark:text-gray-300 mt-4"></div>
<div class="mt-4 text-center">
<p id="security-quote" class="text-sm text-primary-600 italic"></p>
<div class="w-full max-w-md space-y-4">
<div class="p-6 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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<h2 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">AliasVault is loading</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Initializing secure environment. AliasVault prioritizes your privacy by running entirely in your browser. The first load might take a short while.
</p>
<div class="loading-progress-text text-sm font-medium text-gray-700 dark:text-gray-300 mt-4"></div>
<div class="mt-4 text-center">
<p id="security-quote" class="text-sm text-primary-600 italic"></p>
</div>
</div>
</div>
<div id="error-message" class="mt-4 text-red-600 dark:text-red-400 hidden"></div>
</div>
<div id="refresh-button" class="text-center w-full mt-4 p-6 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800 hidden">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">If loading seems stuck, you can click the button below to refresh the page.</p>
<a href="javascript:window.location.reload(true)" class="inline-block px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition duration-150 ease-in-out">
Refresh Page
</a>
</div>
</div>
</div>
@@ -86,12 +96,24 @@
const startTime = new Date().getTime();
const minDisplayTime = 1000;
const checkInterval = 500;
const refreshButtonTimeout = 300000;
const appElement = document.getElementById('app');
const refreshButton = document.getElementById('refresh-button');
appElement.style.visibility = 'hidden';
loadingScreen.style.display = 'flex';
// Show refresh button after 30 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() !== '';