From c8604515d65902934a6c5e011898943deba3a769 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 6 May 2022 03:19:52 +0300
Subject: [PATCH] frontend: perform primary action in most modals by pressing
 enter

---
 frontend/src/components/overlays/CreateAccount.svelte | 8 +++++++-
 frontend/src/components/overlays/CreateChannel.svelte | 8 +++++++-
 frontend/src/components/overlays/EditChannel.svelte   | 8 +++++++-
 frontend/src/components/overlays/EditMessage.svelte   | 8 +++++++-
 frontend/src/components/overlays/Login.svelte         | 8 +++++++-
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index 0dd7e65..c902a83 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/frontend/src/components/overlays/CreateAccount.svelte
@@ -40,6 +40,12 @@ import { maybeFly } from "../../animations";
             overlayStore.open("login", {});
         }
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await create();
+    };
 </script>
 
 <style>
@@ -52,7 +58,7 @@ import { maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop modal-backdrop-opaque">
+<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Create an Account</span>
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index 11b0b14..e20bbd5 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/frontend/src/components/overlays/CreateChannel.svelte
@@ -22,6 +22,12 @@ import { maybeFade, maybeFly } from "../../animations";
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await create();
+    };
 </script>
 
 <style>
@@ -30,7 +36,7 @@ import { maybeFade, maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Create Channel</span>
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index d32dce9..d739cb4 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/frontend/src/components/overlays/EditChannel.svelte
@@ -34,6 +34,12 @@
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await save();
+    };
 </script>
 
 <style>
@@ -46,7 +52,7 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Channel</span>
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
index f6c5a8d..9b24aa4 100644
--- a/frontend/src/components/overlays/EditMessage.svelte
+++ b/frontend/src/components/overlays/EditMessage.svelte
@@ -34,6 +34,12 @@ import { maybeFade, maybeFly } from "../../animations";
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await save();
+    };
 </script>
 
 <style>
@@ -46,7 +52,7 @@ import { maybeFade, maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Message</span>
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index 06504f0..0862bd1 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/frontend/src/components/overlays/Login.svelte
@@ -44,6 +44,12 @@ import { maybeFly } from "../../animations";
             overlayStore.open("createAccount", {});
         }
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await login();
+    };
 </script>
 
 <style>
@@ -56,7 +62,7 @@ import { maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop modal-backdrop-opaque">
+<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Welcome back!</span>