From fa7852113bddb3014a78ad6427523a41e40a8198 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 10 Oct 2024 17:49:42 -0700
Subject: [PATCH] Confirm when joining a public relay

---
 src/app/commands.ts                         |  6 ++--
 src/app/components/MenuSpaces.svelte        |  8 +++---
 src/app/components/SpaceAdd.svelte          | 14 +++++-----
 src/app/components/SpaceCheck.svelte        | 18 ++++++++++--
 src/app/components/SpaceInviteAccept.svelte | 28 +++++++++++++++----
 src/lib/components/Confirm.svelte           | 31 +++++++++++++++++++++
 6 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/Confirm.svelte

diff --git a/src/app/commands.ts b/src/app/commands.ts
index dc63d342..f2e267a5 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -214,20 +214,22 @@ export const checkRelayProfile = async (url: string) => {
 
 export const checkRelayConnection = async (url: string) => {
   const connection = ctx.net.pool.get(url)
+  const okStatuses = [ConnectionStatus.Ok, ConnectionStatus.Slow, ConnectionStatus.Unauthorized]
 
   await connection.ensureConnected()
 
-  if (![ConnectionStatus.Ok, ConnectionStatus.Slow].includes(connection.meta.getStatus())) {
+  if (!okStatuses.includes(connection.meta.getStatus())) {
     return `Failed to connect: "${connection.meta.getDescription()}"`
   }
 }
 
 export const checkRelayAuth = async (url: string) => {
   const connection = ctx.net.pool.get(url)
+  const okStatuses = [AuthStatus.Ok, AuthStatus.Pending]
 
   await connection.ensureAuth()
 
-  if (![AuthStatus.Ok, AuthStatus.Pending].includes(connection.meta.authStatus)) {
+  if (!okStatuses.includes(connection.meta.authStatus)) {
     return `Failed to authenticate: "${connection.meta.authStatus}"`
   }
 }
diff --git a/src/app/components/MenuSpaces.svelte b/src/app/components/MenuSpaces.svelte
index 96701707..2c079c05 100644
--- a/src/app/components/MenuSpaces.svelte
+++ b/src/app/components/MenuSpaces.svelte
@@ -9,7 +9,7 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
@@ -43,7 +43,7 @@
     showSettings = false
   }
 
-  const createSpace = () => pushModal(SpaceCreateExternal)
+  const addSpace = () => pushModal(SpaceAdd)
 
   const browseSpaces = () => goto("/discover")
 
@@ -125,10 +125,10 @@
     {#if getMembershipUrls($userMembership).length > 0}
       <Divider />
     {/if}
-    <Button on:click={createSpace}>
+    <Button on:click={addSpace}>
       <CardButton>
         <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-        <div slot="title">Create a space</div>
+        <div slot="title">Add a space</div>
         <div slot="info">Invite all your friends, do life together.</div>
       </CardButton>
     </Button>
diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte
index 08078ce4..558981c9 100644
--- a/src/app/components/SpaceAdd.svelte
+++ b/src/app/components/SpaceAdd.svelte
@@ -19,13 +19,6 @@
       Spaces are places where communities come together to work, play, and hang out.
     </div>
   </ModalHeader>
-  <Button on:click={startCreate}>
-    <CardButton>
-      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-      <div slot="title">Create a space</div>
-      <div slot="info">Just a few questions and you'll be on your way.</div>
-    </CardButton>
-  </Button>
   <Button on:click={startJoin}>
     <CardButton>
       <div slot="icon"><Icon icon="login-2" size={7} /></div>
@@ -33,4 +26,11 @@
       <div slot="info">Enter an invite code or url to join an existing space.</div>
     </CardButton>
   </Button>
+  <Button on:click={startCreate}>
+    <CardButton>
+      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+      <div slot="title">Create a space</div>
+      <div slot="info">Just a few questions and you'll be on your way.</div>
+    </CardButton>
+  </Button>
 </div>
diff --git a/src/app/components/SpaceCheck.svelte b/src/app/components/SpaceCheck.svelte
index 08692f9d..3eab9777 100644
--- a/src/app/components/SpaceCheck.svelte
+++ b/src/app/components/SpaceCheck.svelte
@@ -1,21 +1,35 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
-  import {sleep} from "@welshman/lib"
+  import {ctx, sleep} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {attemptRelayAccess} from "@app/commands"
   import {makeSpacePath} from "@app/routes"
+  import {pushModal} from "@app/modal"
 
   export let url
 
   const back = () => history.back()
 
-  const next = () => goto(makeSpacePath(url), {replaceState: true})
+  const confirm = () => goto(makeSpacePath(url), {replaceState: true})
+
+  const next = () => {
+    if (!error && ctx.net.pool.get(url).meta.lastAuth === 0) {
+      pushModal(Confirm, {
+        confirm,
+        message: `This space does not appear to limit who can post to it. This can result
+                  in a large amount of spam or other objectionable content. Continue?`,
+      })
+    } else {
+      confirm()
+    }
+  }
 
   let error: string | undefined
   let loading = true
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte
index 8eb714de..06866c27 100644
--- a/src/app/components/SpaceInviteAccept.svelte
+++ b/src/app/components/SpaceInviteAccept.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
-  import {tryCatch} from "@welshman/lib"
+  import {ctx, tryCatch} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import CardButton from "@lib/components/CardButton.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import InfoRelay from "@app/components/InfoRelay.svelte"
@@ -19,6 +20,16 @@
 
   const browse = () => goto("/discover")
 
+  const confirm = async (url: string) => {
+    await addSpaceMembership(url)
+
+    goto(makeSpacePath(url), {replaceState: true})
+
+    pushToast({
+      message: "Welcome to the space!",
+    })
+  }
+
   const joinRelay = async (invite: string) => {
     const [raw, claim] = invite.split("'")
     const url = normalizeRelayUrl(raw)
@@ -28,12 +39,17 @@
       return pushToast({theme: "error", message: error})
     }
 
-    await addSpaceMembership(url)
+    const connection = ctx.net.pool.get(url)
 
-    goto(makeSpacePath(url))
-    pushToast({
-      message: "Welcome to the space!",
-    })
+    if (connection.meta.lastAuth === 0) {
+      pushModal(Confirm, {
+        confirm: () => confirm(url),
+        message: `This space does not appear to limit who can post to it. This can result
+                  in a large amount of spam or other objectionable content. Continue?`,
+      })
+    } else {
+      confirm(url)
+    }
   }
 
   const join = async () => {
diff --git a/src/lib/components/Confirm.svelte b/src/lib/components/Confirm.svelte
new file mode 100644
index 00000000..57732ef6
--- /dev/null
+++ b/src/lib/components/Confirm.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+
+  export let title = "Are you sure?"
+  export let subtitle = ""
+  export let message
+  export let confirm
+
+  const back = () => history.back()
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={confirm}>
+  <ModalHeader>
+    <div slot="title">{title}</div>
+    <div slot="info">{subtitle}</div>
+  </ModalHeader>
+  <p>{message}</p>
+  <ModalFooter>
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">
+      Confirm
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>