From 467069c89887f64cbc6cb44b3766746265fa1db0 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Mon, 11 Sep 2023 15:48:48 +0200
Subject: [PATCH] fix(frontend): make fediverse login modals forms (fixes #97)

---
 frontend/src/routes/auth/login/+page.svelte   | 46 ++++++++++---------
 .../src/routes/settings/auth/+page.svelte     | 32 +++++++------
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
index 528f7c0..f66112f 100644
--- a/frontend/src/routes/auth/login/+page.svelte
+++ b/frontend/src/routes/auth/login/+page.svelte
@@ -34,7 +34,9 @@
     }
   });
 
-  const fediLogin = async () => {
+  const fediLogin = async (e: Event) => {
+    e.preventDefault();
+
     fediDisabled = true;
     try {
       const resp = await apiFetch<{ url: string }>(
@@ -71,26 +73,28 @@
         {/if}
       </ListGroup>
       <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
-        <ModalBody>
-          <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
-          <p class="text-muted mt-2">
-            <Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to access
-            posts. For example, if your username is <code>@timmie@mastodon.example</code>, but your
-            user <em>page</em> is at
-            <code>social.mastodon.example/timmie</code>, you should fill in
-            <code>social.mastodon.example</code>.
-          </p>
-          {#if error}
-            <div class="mt-2">
-              <ErrorAlert {error} />
-            </div>
-          {/if}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin}
-            >Log in</Button
-          >
-        </ModalFooter>
+        <form on:submit={(e) => fediLogin(e)}>
+          <ModalBody>
+            <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
+            <p class="text-muted mt-2">
+              <Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to
+              access posts. For example, if your username is <code>@timmie@mastodon.example</code>,
+              but your user <em>page</em> is at
+              <code>social.mastodon.example/timmie</code>, you should fill in
+              <code>social.mastodon.example</code>.
+            </p>
+            {#if error}
+              <div class="mt-2">
+                <ErrorAlert {error} />
+              </div>
+            {/if}
+          </ModalBody>
+          <ModalFooter>
+            <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
+              >Log in</Button
+            >
+          </ModalFooter>
+        </form>
       </Modal>
       <p class="text-muted mt-2 mx-1">
         <Icon name="info-circle-fill" aria-hidden /> By signing in, you consent to pronouns.cc storing
diff --git a/frontend/src/routes/settings/auth/+page.svelte b/frontend/src/routes/settings/auth/+page.svelte
index 7c10704..2d03bb5 100644
--- a/frontend/src/routes/settings/auth/+page.svelte
+++ b/frontend/src/routes/settings/auth/+page.svelte
@@ -44,7 +44,9 @@
   let googleUnlinkModalOpen = false;
   let toggleGoogleUnlinkModal = () => (googleUnlinkModalOpen = !googleUnlinkModalOpen);
 
-  const fediLogin = async () => {
+  const fediLogin = async (e: Event) => {
+    e.preventDefault();
+
     fediDisabled = true;
     try {
       const resp = await apiFetch<{ url: string }>(
@@ -205,19 +207,21 @@
       </div>
     {/if}
     <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
-      <ModalBody>
-        <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
-        {#if error}
-          <div class="mt-2">
-            <ErrorAlert {error} />
-          </div>
-        {/if}
-      </ModalBody>
-      <ModalFooter>
-        <Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin}
-          >Log in</Button
-        >
-      </ModalFooter>
+      <form on:submit={(e) => fediLogin(e)}>
+        <ModalBody>
+          <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
+          {#if error}
+            <div class="mt-2">
+              <ErrorAlert {error} />
+            </div>
+          {/if}
+        </ModalBody>
+        <ModalFooter>
+          <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
+            >Log in</Button
+          >
+        </ModalFooter>
+      </form>
     </Modal>
 
     <Modal