From 2c783b710eeeedda24c2756014cf66e1677b12cf Mon Sep 17 00:00:00 2001
From: Guillermo <Funk66@users.noreply.github.com>
Date: Sat, 20 Jan 2024 19:49:16 +0100
Subject: [PATCH] feat(web) dismiss user management modals on escape (#6530)

Other modals throughout the web app close when the user
presses the escape key, clicks outside the modal, or on
the close button. Modals from the user management page
missed the escape key functionality. This change makes
the behavior more consistent across all views.
---
 web/src/routes/admin/user-management/+page.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index 0d44730bd0..792838b6d4 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -110,13 +110,19 @@
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-[850px]">
       {#if shouldShowCreateUserForm}
-        <FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
+        <FullScreenModal
+          on:clickOutside={() => (shouldShowCreateUserForm = false)}
+          on:escape={() => (shouldShowCreateUserForm = false)}
+        >
           <CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
         </FullScreenModal>
       {/if}
 
       {#if shouldShowEditUserForm}
-        <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
+        <FullScreenModal
+          on:clickOutside={() => (shouldShowEditUserForm = false)}
+          on:escape={() => (shouldShowEditUserForm = false)}
+        >
           <EditUserForm
             user={selectedUser}
             canResetPassword={selectedUser?.id !== $user.id}
@@ -146,7 +152,10 @@
       {/if}
 
       {#if shouldShowInfoPanel}
-        <FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
+        <FullScreenModal
+          on:clickOutside={() => (shouldShowInfoPanel = false)}
+          on:escape={() => (shouldShowInfoPanel = false)}
+        >
           <div class="w-[500px] max-w-[95vw] rounded-3xl border bg-white p-8 text-sm shadow-sm">
             <h1 class="mb-4 text-lg font-medium text-immich-primary">Password reset success</h1>