feat: add toggleable SFTP panel

Reviewed-on: http://git.jdbnet.co.uk/jamie/ssh/pulls/16

.gitignore

@@ -1,4 +1,5 @@
 __pycache__/
 .env
 frontend/node_modules/
-static/dist/
+static/dist/
+venv/

app.py

@@ -1743,13 +1743,12 @@ def update_api_key(kid: int):
 
 @app.route("/api/api-keys/<int:kid>", methods=["DELETE"])
 @require_login
-def revoke_api_key(kid: int):
+def delete_api_key(kid: int):
     with db_cursor() as (_, cur):
         cur.execute(
             """
-            UPDATE api_keys
-            SET revoked_at = CURRENT_TIMESTAMP
-            WHERE id = %s AND revoked_at IS NULL
+            DELETE FROM api_keys
+            WHERE id = %s
             """,
             (kid,),
         )

frontend/src/App.vue

@@ -49,6 +49,10 @@ const showFolderForm = ref(false);
 const showEditHost = ref(false);
 const showAuditLog = ref(false);
 const showApiKeys = ref(false);
+const showSftpPanel = ref(false);
+function toggleSftp() {
+  showSftpPanel.value = !showSftpPanel.value;
+}
 const auditLoading = ref(false);
 const auditErr = ref("");
 const auditRows = ref<ConnectionAuditRow[]>([]);
@@ -366,14 +370,14 @@ async function submitApiKey() {
   }
 }
 
-async function revokeApiKey(id: number, label: string) {
-  if (!confirm(`Revoke API key "${label}"? This cannot be undone.`)) return;
+async function deleteApiKey(id: number, label: string) {
+  if (!confirm(`Delete API key "${label}"? This cannot be undone.`)) return;
   apiKeysErr.value = "";
   try {
-    await api.revokeApiKey(id);
+    await api.deleteApiKey(id);
     await refreshApiKeys();
   } catch (e) {
-    apiKeysErr.value = e instanceof Error ? e.message : "Failed to revoke API key";
+    apiKeysErr.value = e instanceof Error ? e.message : "Failed to delete API key";
   }
 }
 
@@ -692,27 +696,37 @@ async function deleteIdentityRow(id: number) {
             />
           </svg>
         </button>
-        <a 
-          href="https://git.jdbnet.co.uk/jamie/ssh" 
-          target="_blank" 
-          rel="noopener noreferrer"
-          class="flex items-center gap-2 truncate"
-        >
+        <div class="flex items-center gap-2 truncate">
           <span class="truncate text-sm font-semibold text-white">JDB-NET SSH</span>
-          <span class="truncate text-xs text-slate-400 hover:text-slate-300">{{ appVersion }}</span>
-        </a>
+          <a
+            href="https://git.jdbnet.co.uk/jamie/ssh"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="truncate text-xs text-slate-400 hover:text-slate-300"
+          >
+            {{ appVersion }}
+          </a>
+        </div>
       </div>
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+          class="hidden rounded-lg px-3 py-1.5 text-xs md:inline-flex"
+          :class="showSftpPanel ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white'"
+          @click="toggleSftp"
+        >
+          SFTP
+        </button>
+        <button
+          type="button"
+          class="hidden rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white md:inline-flex"
           @click="openApiKeys"
         >
           API keys
         </button>
         <button
           type="button"
-          class="rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+          class="hidden rounded-lg px-3 py-1.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-white md:inline-flex"
           @click="openAuditLog"
         >
           Connection audit
@@ -1014,6 +1028,7 @@ async function deleteIdentityRow(id: number) {
               <TabContent
                 :host-id="t.hostId"
                 :visible="t.id === activeTabId"
+                :show-sftp="showSftpPanel"
               />
             </div>
           </div>
@@ -1139,12 +1154,11 @@ async function deleteIdentityRow(id: number) {
                 <td class="px-2 py-2">{{ apiKeyStatus(row) }}</td>
                 <td class="px-2 py-2 text-right">
                   <button
-                    v-if="row.active"
                     type="button"
                     class="rounded px-2 py-1 text-red-400 hover:bg-slate-800"
-                    @click="revokeApiKey(row.id, row.label)"
+                    @click="deleteApiKey(row.id, row.label)"
                   >
-                    Revoke
+                    Delete
                   </button>
                 </td>
               </tr>

frontend/src/api.ts

@@ -226,7 +226,7 @@ export const api = {
     return handle(res);
   },
 
-  async revokeApiKey(id: number): Promise<void> {
+  async deleteApiKey(id: number): Promise<void> {
     const res = await fetch(`/api/api-keys/${id}`, {
       method: "DELETE",
       credentials: "include",

frontend/src/components/TabContent.vue

@@ -14,6 +14,7 @@ import SftpPanel from "./SftpPanel.vue";
 const props = defineProps<{
   hostId: number;
   visible: boolean;
+  showSftp: boolean;
 }>();
 
 const termEl = ref<HTMLElement | null>(null);
@@ -187,17 +188,19 @@ watch(
         class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1"
       />
     </div>
-    <div
-      v-if="connId"
-      class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
-    >
-      <SftpPanel :conn-id="connId" />
-    </div>
-    <div
-      v-else
-      class="hidden w-72 shrink-0 items-center justify-center border-l border-slate-800 bg-surface-raised text-xs text-slate-500 md:flex"
-    >
-      SFTP unlocks when the shell session is ready.
-    </div>
+    <template v-if="showSftp">
+      <div
+        v-if="connId"
+        class="hidden w-80 shrink-0 flex-col border-l border-slate-800 md:flex"
+      >
+        <SftpPanel :conn-id="connId" />
+      </div>
+      <div
+        v-else
+        class="hidden w-72 shrink-0 items-center justify-center border-l border-slate-800 bg-surface-raised text-xs text-slate-500 md:flex"
+      >
+        SFTP unlocks when the shell session is ready.
+      </div>
+    </template>
   </div>
 </template>

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "ssh",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

run.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+if [ ! -d "venv" ]; then
+    echo "Creating virtual environment in 'venv'..."
+    python3 -m venv venv
+    source venv/bin/activate
+    if [ -f "requirements.txt" ]; then
+        echo "Installing requirements..."
+        pip install -r requirements.txt
+    fi
+else
+    source venv/bin/activate
+fi
+
+echo "Building frontend..."
+(
+    cd frontend
+    if [ ! -d "node_modules" ]; then
+        echo "Installing frontend dependencies..."
+        npm install
+    fi
+    npm run build
+)
+
+exec gunicorn --bind 0.0.0.0:5000 --workers 1 --worker-class geventwebsocket.gunicorn.workers.GeventWebSocketWorker app:app --log-level info