From 12b7817bc9b65551ca10c386c4b48d88c37c6fb4 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 30 Dec 2022 22:40:17 -0800
Subject: [PATCH] Frontend FTP info page

---
 .../app/instances/[instanceId]/+page.svelte   |  2 +
 .../app/instances/[instanceId]/Ftpx.svelte    | 44 +++++++++++++++++++
 readme.md                                     |  3 +-
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/pockethost.io/src/routes/app/instances/[instanceId]/Ftpx.svelte

diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
index cbca027e..afdd307e 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
@@ -4,6 +4,7 @@
   import { assertExists } from '@pockethost/common'
   import Backup from './Backup.svelte'
   import Code from './Code.svelte'
+  import Ftp from './Ftpx.svelte'
   import Overview from './Overview.svelte'
   import Restore from './Restore.svelte'
   import { instance } from './store'
@@ -19,6 +20,7 @@
 </svelte:head>
 {#if $instance}
   <Overview instance={$instance} />
+  <Ftp instance={$instance} />
   <Code instance={$instance} />
   <Backup instance={$instance} />
   <Restore instance={$instance} />
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Ftpx.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Ftpx.svelte
new file mode 100644
index 00000000..dfe46eab
--- /dev/null
+++ b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Ftpx.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { PUBLIC_APP_DOMAIN } from '$src/env'
+  import type { InstanceFields } from '@pockethost/common'
+
+  export let instance: InstanceFields
+
+  const { subdomain } = instance
+  const ftpUrl = `ftp://${subdomain}.${PUBLIC_APP_DOMAIN}`
+</script>
+
+<div class="py-4">
+  <h2>FTP Access</h2>
+  <div>
+    Securely access your instance files via <a href={ftpUrl}>{ftpUrl}</a>. Use your PocketHost
+    account login and password.
+    <table>
+      <thead><tr><th>Directory</th><th>Description</th></tr></thead>
+      <tr>
+        <th>pb_data</th><td>The PocketBase data directory</td>
+      </tr>
+      <tr>
+        <th>pb_static</th><td>Static files, such as a web frontend</td>
+      </tr>
+      <tr>
+        <th>backups</th><td>Location of tgz backups made using this UI</td>
+      </tr>
+      <tr>
+        <th>workers</th><td>Deno workers (cloud TS/JS functions)</td>
+      </tr>
+    </table>
+  </div>
+</div>
+
+<style lang="scss">
+  table {
+    margin: 10px;
+    td,
+    tr,
+    th {
+      border: 2px solid rgb(92, 92, 157);
+      padding: 5px;
+    }
+  }
+</style>
diff --git a/readme.md b/readme.md
index 1d3c3eec..3aeac41a 100644
--- a/readme.md
+++ b/readme.md
@@ -132,10 +132,9 @@ If all goes well:
 
 **soon**
 
-- Proxy localhost paths to avoid local DNS setup
-
 **next**
 
+- FTP support
 - Cache pocketbase releases
 - Enhance instance uptime