Connection status/error messages

cista-front/src/assets/main.css

@@ -3,9 +3,10 @@
 :root {
   --primary-color: #000;
   --primary-background: #ddd;
-  --header-background: #246;
+  --header-background: var(--soft-color);
   --header-color: #ccc;
   --primary-color: #000;
+  --soft-color: #146;
   --accent-color: #f80;
   --transition-time: 0.2s;
   /* The following are overridden by responsive layouts */
@@ -16,7 +17,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --primary-color: #ddd;
-    --primary-background: #003;
+    --primary-background: var(--soft-color);
     --header-background: #000;
     --header-color: #ccc;
   }
@@ -235,3 +236,9 @@ main {
     opacity: 0;
   }
 }
+.error-message {
+  padding: .5em;
+  font-weight: bold;
+  background: var(--accent-color);
+  color: #000;
+}

cista-front/src/components/FileExplorer.vue

@@ -129,8 +129,8 @@
           </td>
         </tr>
       </template>
-      <tr class="summary">
-        <td colspan="3" class="right">{{props.documents.length}} items shown:</td>
+      <tr class="summary" v-if="props.documents.length > 1">
+        <td colspan="3" class="right">{{props.documents.length}} items</td>
         <td class="size right">{{ formatSize(props.documents.reduce((a, b) => a + b.size, 0)) }}</td>
         <td class="menu"></td>
       </tr>
@@ -140,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, onBeforeUpdate } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import type { Document } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -510,4 +510,7 @@ tbody .selection input {
 .loc {
   color: #888;
 }
+.summary {
+  color: #888;
+}
 </style>

cista-front/src/components/HeaderMain.vue

@@ -1,6 +1,10 @@
 <template>
   <nav class="headermain">
     <div class="buttons">
+      <template v-if="documentStore.error">
+        <div class="error-message" @click="documentStore.error = ''">{{ documentStore.error }}</div>
+        <div class="smallgap"></div>
+      </template>
       <UploadButton />
       <SvgButton
         name="create-folder"
@@ -23,17 +27,6 @@
       <SvgButton name="cog" @click="settingsMenu" />
     </div>
   </nav>
-  <context-menu v-model:show="showMenu">
-    <context-menu-item label="Simple item" @click="onMenuClick(1)" />
-    <context-menu-sperator /><!--use this to add sperator-->
-    <context-menu-group label="Menu with child">
-      <context-menu-item label="Item1" @click="onMenuClick(2)" />
-      <context-menu-item label="Item2" @click="onMenuClick(3)" />
-      <context-menu-group label="Child with v-for 50">
-        <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="onLoopMenuClick(index)" />
-      </context-menu-group>
-    </context-menu-group>
-  </context-menu>
 </template>
 
 <script setup lang="ts">
@@ -64,12 +57,16 @@ const toggleSearchInput = () => {
 
 const settingsMenu = (e: Event) => {
   // show the context menu
+  const items = []
+  if (documentStore.user.isLoggedIn) {
+    items.push({ label: `Logout ${documentStore.user.username ?? ''}`, onClick: () => documentStore.logout() })
+  } else {
+    items.push({ label: 'Login', onClick: () => documentStore.loginDialog() })
+  }
   ContextMenu.showContextMenu({
     // @ts-ignore
     x: e.target.getBoundingClientRect().right, y: e.target.getBoundingClientRect().bottom,
-    items: [
-      { label: "Logout", onClick: () => { documentStore.logout() } },
-    ]
+    items,
   })
 }
 

cista-front/src/components/LoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required">
+  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
     <form @submit.prevent="login">
       <div class="login-container">
         <label for="username">Username:</label>
@@ -7,6 +7,8 @@
           id="username"
           name="username"
           autocomplete="username"
+          spellcheck="false"
+          autocorrect="off"
           required
           v-model="loginForm.username"
         />
@@ -16,12 +18,14 @@
           name="password"
           type="password"
           autocomplete="current-password"
+          spellcheck="false"
+          autocorrect="off"
           required
           v-model="loginForm.password"
         />
       </div>
-      <h3 v-if="loginForm.error.length > 0" class="error-text">
-        {{ loginForm.error }}
+      <h3 class="error-text">
+        {{ loginForm.error || '\u00A0' }}
       </h3>
       <div class="dialog-buttons">
         <div class="spacer"></div>
@@ -33,21 +37,13 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
-import { loginUser, logoutUser } from '@/repositories/User'
+import { loginUser } from '@/repositories/User'
 import type { ISimpleError } from '@/repositories/Client'
 import { useDocumentStore } from '@/stores/documents'
 
 const confirmLoading = ref<boolean>(false)
 const store = useDocumentStore()
 
-const logout = async () => {
-  try {
-    await logoutUser()
-  } finally {
-    location.reload()
-  }
-}
-
 const loginForm = reactive({
   username: '',
   password: '',
@@ -59,13 +55,10 @@ const login = async () => {
     loginForm.error = ''
     confirmLoading.value = true
     const msg = await loginUser(loginForm.username, loginForm.password)
-    console.log('Logged in', msg)
-    store.login(msg.username, !!msg.privileged)
+    store.login(msg.data.username, !!msg.data.privileged)
   } catch (error) {
     const httpError = error as ISimpleError
-    if (httpError.name) {
-      loginForm.error = httpError.message
-    }
+    loginForm.error = httpError.message || '🛑 Unknown error'
   } finally {
     confirmLoading.value = false
   }
@@ -87,18 +80,22 @@ const login = async () => {
   align-items: center;
 }
 .button-login {
+  color: #fff;
+  background: var(--soft-color);
   cursor: pointer;
+  font-weight: bold;
   border: 0;
   border-radius: .5rem;
-  padding: .5rem;
+  padding: .5rem 2rem;
   margin-left: auto;
-  background-color: var(--accent-color);
-  color: var(--primary-color);
+  transition: all var(--transition-time) linear;
 }
-.ant-btn-primary:not(:disabled):hover {
-  background-color: var(--blue-color);
+.button-login:hover, .button-login:focus {
+  background: var(--accent-color);
+  box-shadow: 0 0 .3rem #000;
 }
 .error-text {
   color: var(--red-color);
+  height: 1em;
 }
 </style>

cista-front/src/components/ModalDialog.vue

@@ -23,15 +23,18 @@ const props = withDefaults(
     title: ''
   }
 )
-
-onMounted(() => {
+const show = () => {
   dialog.value!.showModal()
+}
+defineExpose({ show })
+onMounted(() => {
+  show()
 })
 </script>
 
 <style>
 /* Style for the background */
-body:has(dialog[open])::before {
+dialog::backdrop {
   content: '';
   display: block;
   position: fixed;
@@ -40,7 +43,7 @@ body:has(dialog[open])::before {
   width: 100%;
   height: 100%;
   background: #0008;
-  backdrop-filter: blur(0.2em);
+  backdrop-filter: blur(0.4em);
   z-index: 1000;
 }
 
@@ -50,6 +53,7 @@ dialog[open] {
   color: black;
   display: block;
   border: none;
+  font-size: 1.2rem;
   border-radius: 0.5rem;
   box-shadow: 0.2rem 0.2rem 1rem #000;
   padding: 1rem;
@@ -58,11 +62,13 @@ dialog[open] {
   left: 0;
   z-index: 1001;
 }
-
+input {
+  font: inherit;
+}
 dialog[open] > h1 {
-  background: var(--accent-color);
-  color: black;
-  font-size: 1rem;
+  background: var(--soft-color);
+  color: #fff;
+  font-size: 1.2rem;
   margin: -1rem -1rem 0 -1rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
 }

cista-front/src/repositories/Client.ts

@@ -12,7 +12,7 @@ class ClientClass {
     try {
       msg = await res.json()
     } catch (e) {
-      throw new SimpleError(res.status, `HTTP ${res.status} ${res.statusText}`)
+      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
     }
     if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
     return msg

cista-front/src/repositories/WS.ts

@@ -15,13 +15,41 @@ export const connect = (path: string, handlers: Partial<Record<keyof WebSocketEv
   return webSocket
 }
 
-export const watchConnect = async () => {
+export const watchConnect = () => {
+  if (watchTimeout !== null) {
+    clearTimeout(watchTimeout)
+    watchTimeout = null
+  }
+  const store = useDocumentStore()
+  if (store.error !== 'Reconnecting...') store.error = 'Connecting...'
+  console.log(store.error)
+
   wsWatch = connect(watchUrl, {
-    open() { console.log("Connected to", watchUrl)},
     message: handleWatchMessage,
     close: watchReconnect,
   })
-  await wsWatch
+  wsWatch.addEventListener("message", event => {
+    if (store.connected) return
+    const msg = JSON.parse(event.data)
+    if ('error' in msg) {
+      if (msg.error.code === 401) {
+        store.user.isLoggedIn = false
+        store.user.isOpenLoginModal = true
+      } else {
+        store.error = msg.error.message
+      }
+      return
+    }
+    if ("server" in msg) {
+      console.log('Connected to backend', msg)
+      store.connected = true
+      reconnectDuration = 500
+      store.error = ''
+      if (msg.user) store.login(msg.user.username, msg.user.privileged)
+      else if (store.isUserLogged) store.logout()
+      if (!msg.server.public && !msg.user) store.user.isOpenLoginModal = true
+    }
+  })
 }
 
 export const watchDisconnect = () => {
@@ -30,35 +58,24 @@ export const watchDisconnect = () => {
   wsWatch = null
 }
 
+let watchTimeout: any = null
+
 const watchReconnect = (event: MessageEvent) => {
   const store = useDocumentStore()
   if (store.connected) {
     console.warn("Disconnected from server", event)
     store.connected = false
+    store.error = 'Reconnecting...'
   }
   reconnectDuration = Math.min(5000, reconnectDuration + 500)
   // The server closes the websocket after errors, so we need to reopen it
-  setTimeout(() => {
-    wsWatch = connect(watchUrl, {
-      message: handleWatchMessage,
-      close: watchReconnect,
-    })
-    console.log("Attempting to reconnect...")
-  }, reconnectDuration)
+  if (watchTimeout !== null) clearTimeout(watchTimeout)
+  watchTimeout = setTimeout(watchConnect, reconnectDuration)
 }
 
 
 const handleWatchMessage = (event: MessageEvent) => {
-  const store = useDocumentStore()
   const msg = JSON.parse(event.data)
-  if ('error' in msg) {
-    if (msg.error.code === 401) {
-      store.user.isLoggedIn = false
-      store.user.isOpenLoginModal = true
-    } else {
-      store.error = msg.error.message
-    }
-  }
   switch (true) {
     case !!msg.root:
       handleRootMessage(msg)
@@ -79,9 +96,6 @@ const handleWatchMessage = (event: MessageEvent) => {
 function handleRootMessage({ root }: { root: DirEntry }) {
   const store = useDocumentStore()
   console.log('Watch root', root)
-  reconnectDuration = 500
-  store.connected = true
-  store.user.isLoggedIn = true
   store.updateRoot(root)
   tree = root
 }

cista-front/src/stores/documents.ts

@@ -8,6 +8,8 @@ import type {
 import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
 import { defineStore } from 'pinia'
 import { collator } from '@/utils'
+import { logoutUser } from '@/repositories/User'
+import { watchConnect } from '@/repositories/WS'
 
 type FileData = { id: string; mtime: number; size: number; dir: DirectoryData }
 type DirectoryData = {
@@ -108,10 +110,14 @@ export const useDocumentStore = defineStore({
       this.user.privileged = privileged
       this.user.isLoggedIn = true
       this.user.isOpenLoginModal = false
+      if (!this.connected) watchConnect()
+    },
+    loginDialog() {
+      this.user.isOpenLoginModal = true
     },
     async logout() {
-      const res = await fetch('/logout', { method: 'POST' })
-      if (!res.ok) throw Error(`Logout failed: ${res.statusText}`)
+      console.log("Logout")
+      await logoutUser()
       this.$reset()
       history.go() // Reload page
     }

cista/api.py

@@ -4,7 +4,7 @@ import typing
 import msgspec
 from sanic import Blueprint
 
-from cista import watching
+from cista import __version__, config, watching
 from cista.fileio import FileServer
 from cista.protocol import ControlTypes, FileRange, StatusMsg
 from cista.util.apphelpers import asend, websocket_wrapper
@@ -83,6 +83,23 @@ async def control(req, ws):
 @bp.websocket("watch")
 @websocket_wrapper
 async def watch(req, ws):
+    await ws.send(
+        msgspec.json.encode(
+            {
+                "server": {
+                    "name": "Cista",  # Should be configurable
+                    "version": __version__,
+                    "public": config.config.public,
+                },
+                "user": {
+                    "username": req.ctx.username,
+                    "privileged": req.ctx.user.privileged,
+                }
+                if req.ctx.user
+                else None,
+            }
+        ).decode()
+    )
     try:
         with watching.tree_lock:
             q = watching.pubsub[ws] = asyncio.Queue()

cista/app.py

@@ -38,8 +38,10 @@ async def main_stop(app, loop):
 async def use_session(req):
     req.ctx.session = session.get(req)
     try:
+        req.ctx.username = req.ctx.session["username"]
         req.ctx.user = config.config.users[req.ctx.session["username"]]  # type: ignore
     except (AttributeError, KeyError, TypeError):
+        req.ctx.username = None
         req.ctx.user = None
     # CSRF protection
     if req.method == "GET" and req.headers.upgrade != "websocket":