Merge pull request #162 from lanedirt/161-keyboard-shortcuts-stop-working-when-something-else-has-been-typed-before

This commit is contained in:
Leendert de Borst
2024-08-07 22:15:09 -07:00
committed by GitHub
13 changed files with 131 additions and 161 deletions

View File

@@ -1,23 +1,36 @@
@implements IDisposable
@inject NavigationManager NavigationManager
@foreach (var message in Messages)
@if (Messages.Count == 0)
{
if (message.Key == "success")
{
<AlertMessageSuccess Message="@message.Value" />
}
return;
}
@foreach (var message in Messages)
{
if (message.Key == "error")
<div class="messages-container grid px-4 pt-6 lg:gap-4 dark:bg-gray-900">
@foreach (var message in Messages)
{
<AlertMessageError Message="@message.Value" />
if (message.Key == "success")
{
<AlertMessageSuccess Message="@message.Value" />
}
}
}
@foreach (var message in Messages)
{
if (message.Key == "error")
{
<AlertMessageError Message="@message.Value" />
}
}
</div>
<style>
.messages-container > :last-child {
margin-bottom: 0 !important;
}
</style>
@code {
private List<KeyValuePair<string, string>> Messages { get; set; } = new();
private bool _onChangeSubscribed = false;
/// <inheritdoc />
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -26,22 +39,26 @@
if (firstRender)
{
// We subscribe to the OnChange event of the GlobalNotificationService to update the UI when a new message is added
RefreshAddMessages();
GlobalNotificationService.OnChange += RefreshAddMessages;
_onChangeSubscribed = true;
NavigationManager.LocationChanged += HandleLocationChanged;
}
}
/// <inheritdoc />
public void Dispose()
{
// We unsubscribe from the OnChange event of the PortalMessageService when the component is disposed
if (_onChangeSubscribed)
{
GlobalNotificationService.OnChange -= RefreshAddMessages;
_onChangeSubscribed = false;
}
GlobalNotificationService.OnChange -= RefreshAddMessages;
NavigationManager.LocationChanged -= HandleLocationChanged;
}
/// <summary>
/// Refreshes the messages on navigation to another page.
/// </summary>
private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
{
RefreshAddMessages();
InvokeAsync(StateHasChanged);
}
/// <summary>

View File

@@ -31,7 +31,6 @@
}
</ol>
</nav>
<GlobalNotificationDisplay />
@code {
/// <summary>

View File

@@ -8,6 +8,7 @@
<div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">
<div id="main-content" class="relative w-full max-w-screen-2xl mx-auto h-full overflow-y-auto bg-gray-50 dark:bg-gray-900">
<main>
<GlobalNotificationDisplay />
@Body
</main>
<Footer></Footer>

View File

@@ -61,7 +61,7 @@
Logger.LogInformation("User changed their password successfully.");
GlobalNotificationService.AddSuccessMessage("Your password has been changed.", true);
GlobalNotificationService.AddSuccessMessage("Your password has been changed.");
NavigationService.RedirectToCurrentPage();
}

View File

@@ -35,7 +35,7 @@
var userId = await UserManager.GetUserIdAsync(UserService.User());
Logger.LogInformation("User with ID '{UserId}' has reset their authentication app key.", userId);
GlobalNotificationService.AddSuccessMessage("Your authenticator app key has been reset, you will need to re-configure your authenticator app using the new key.", true);
GlobalNotificationService.AddSuccessMessage("Your authenticator app key has been reset, you will need to re-configure your authenticator app using the new key.");
NavigationService.RedirectTo(
"account/manage/2fa");

View File

@@ -4,8 +4,6 @@
<div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
<div class="mb-4 col-span-full xl:mb-2">
<GlobalNotificationDisplay />
<div class="flex items-center justify-between">
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Manage account</h1>
</div>

View File

@@ -644,14 +644,6 @@ video {
grid-column: 1 / -1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
@@ -667,6 +659,10 @@ video {
margin-bottom: 1rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@@ -743,10 +739,6 @@ video {
margin-top: 2rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
@@ -822,10 +814,18 @@ video {
width: 50%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-10 {
width: 2.5rem;
}
.w-2\/3 {
width: 66.666667%;
}
.w-4 {
width: 1rem;
}
@@ -858,14 +858,6 @@ video {
width: 100%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-2\/3 {
width: 66.666667%;
}
.max-w-2xl {
max-width: 42rem;
}
@@ -882,10 +874,6 @@ video {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-shrink-0 {
flex-shrink: 0;
}
@@ -924,6 +912,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));
}
@@ -932,14 +924,6 @@ video {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@@ -972,10 +956,6 @@ video {
justify-content: space-between;
}
.gap-6 {
gap: 1.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1140,11 +1120,6 @@ video {
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1344,6 +1319,14 @@ video {
padding-bottom: 2rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.ps-2 {
padding-inline-start: 0.5rem;
}
@@ -1360,14 +1343,6 @@ video {
padding-top: 2rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.text-left {
text-align: left;
}
@@ -1518,11 +1493,6 @@ video {
color: rgb(133 77 14 / var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@@ -1595,11 +1565,6 @@ video {
transition-duration: 300ms;
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1625,16 +1590,16 @@ video {
background-color: rgb(154 93 38 / var(--tw-bg-opacity));
}
.hover\:bg-red-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.hover\:bg-red-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1750,11 +1715,6 @@ video {
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:bg-blue-500:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.dark\:bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1785,6 +1745,11 @@ video {
background-color: rgb(214 131 56 / var(--tw-bg-opacity));
}
.dark\:bg-red-500:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.dark\:bg-red-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(127 29 29 / var(--tw-bg-opacity));
@@ -1795,11 +1760,6 @@ video {
background-color: rgb(113 63 18 / var(--tw-bg-opacity));
}
.dark\:bg-red-500:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.dark\:bg-opacity-80:is(.dark *) {
--tw-bg-opacity: 0.8;
}
@@ -1893,11 +1853,6 @@ video {
--tw-ring-offset-color: #1f2937;
}
.dark\:hover\:bg-blue-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1948,11 +1903,6 @@ video {
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-blue-800:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-gray-600:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
@@ -1978,21 +1928,17 @@ video {
--tw-ring-color: rgb(154 93 38 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-red-900:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-red-800:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:col-span-3 {
grid-column: span 3 / span 3;
}
.dark\:focus\:ring-red-900:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:flex {
display: flex;
}
@@ -2011,18 +1957,18 @@ video {
margin-left: calc(0.5rem * 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\: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\:p-6 {
padding: 1.5rem;
}
@@ -2116,10 +2062,6 @@ video {
order: 2;
}
.lg\:col-auto {
grid-column: auto;
}
.lg\:mb-10 {
margin-bottom: 2.5rem;
}
@@ -2180,17 +2122,17 @@ video {
gap: 1rem;
}
.xl\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.xl\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.xl\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
}
@media (min-width: 1536px) {
@@ -2198,10 +2140,6 @@ video {
grid-column: span 2 / span 2;
}
.\32xl\:flex {
display: flex;
}
.\32xl\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));

View File

@@ -1,24 +1,37 @@
@inject GlobalNotificationService GlobalNotificationService
@inject NavigationManager NavigationManager
@implements IDisposable
@foreach (var message in Messages)
@if (Messages.Count == 0)
{
if (message.Key == "success")
{
<AlertMessageSuccess Message="@message.Value" />
}
return;
}
@foreach (var message in Messages)
{
if (message.Key == "error")
<div class="messages-container grid px-4 pt-6 lg:gap-4 dark:bg-gray-900">
@foreach (var message in Messages)
{
<AlertMessageError Message="@message.Value" />
if (message.Key == "success")
{
<AlertMessageSuccess Message="@message.Value" />
}
}
}
@foreach (var message in Messages)
{
if (message.Key == "error")
{
<AlertMessageError Message="@message.Value" />
}
}
</div>
<style>
.messages-container > :last-child {
margin-bottom: 0 !important;
}
</style>
@code {
private List<KeyValuePair<string, string>> Messages { get; set; } = new();
private bool _onChangeSubscribed = false;
/// <inheritdoc />
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -27,22 +40,26 @@
if (firstRender)
{
// We subscribe to the OnChange event of the PortalMessageService to update the UI when a new message is added
RefreshAddMessages();
GlobalNotificationService.OnChange += RefreshAddMessages;
_onChangeSubscribed = true;
NavigationManager.LocationChanged += HandleLocationChanged;
}
}
/// <inheritdoc />
public void Dispose()
{
// We unsubscribe from the OnChange event of the PortalMessageService when the component is disposed
if (_onChangeSubscribed)
{
GlobalNotificationService.OnChange -= RefreshAddMessages;
_onChangeSubscribed = false;
}
GlobalNotificationService.OnChange -= RefreshAddMessages;
NavigationManager.LocationChanged -= HandleLocationChanged;
}
/// <summary>
/// Refreshes the messages on navigation to another page.
/// </summary>
private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
{
RefreshAddMessages();
InvokeAsync(StateHasChanged);
}
/// <summary>

View File

@@ -15,7 +15,7 @@
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="@item.Url" class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-primary-500">@item.DisplayName</a>
<a href="@item.Url" class="text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-500">@item.DisplayName</a>
</div>
</li>
}
@@ -31,7 +31,6 @@
}
</ol>
</nav>
<GlobalNotificationDisplay />
@code {
/// <summary>

View File

@@ -10,6 +10,7 @@
<div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">
<div id="main-content" class="relative w-full max-w-screen-2xl mx-auto h-full overflow-y-auto bg-gray-50 dark:bg-gray-900">
<main>
<GlobalNotificationDisplay />
@Body
</main>
<Footer />

View File

@@ -167,7 +167,7 @@ else
if (EditMode)
{
BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "View credential", Url = $"/credentials/{Id}" });
BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "View credentials entry", Url = $"/credentials/{Id}" });
BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "Edit credential" });
}
else

View File

@@ -12,7 +12,7 @@ export function handleKeyPress(event) {
const currentTime = new Date().getTime();
const key = event.key.toLowerCase();
if (currentTime - this.lastKeyPressTime > 500) {
if (currentTime - lastKeyPressTime > 1000) {
lastKeyPressed = '';
}

View File

@@ -113,7 +113,7 @@ public class CredentialTest : ClientPlaywrightTest
var submitButton = Page.Locator("text=Save Credentials").First;
await submitButton.ClickAsync();
await WaitForUrlAsync("credentials/**", "View credentials entry");
await WaitForUrlAsync("credentials/**", "Delete credentials entry");
pageContent = await Page.TextContentAsync("body");
Assert.That(pageContent, Does.Contain("Credentials updated"), "Credential update confirmation message not shown.");