Implement settings dialog and password changes.

cista/auth.py

@@ -159,3 +159,35 @@ async def logout_post(request):
         res = json({"message": msg})
     session.delete(res)
     return res
+
+
+@bp.post("/password-change")
+async def change_password(request):
+    try:
+        if request.headers.content_type == "application/json":
+            username = request.json["username"]
+            pwchange = request.json["passwordChange"]
+            password = request.json["password"]
+        else:
+            username = request.form["username"][0]
+            pwchange = request.form["passwordChange"][0]
+            password = request.form["password"][0]
+        if not username or not password:
+            raise KeyError
+    except KeyError:
+        raise BadRequest(
+            "Missing username, passwordChange or password",
+        ) from None
+    try:
+        user = login(username, password)
+        set_password(user, pwchange)
+    except ValueError as e:
+        raise Forbidden(str(e), context={"redirect": "/login"}) from e
+
+    if "text/html" in request.headers.accept:
+        res = redirect("/")
+        session.flash(res, "Password updated")
+    else:
+        res = json({"message": "Password updated"})
+    session.create(res, username)
+    return res

cista/util/apphelpers.py

@@ -59,7 +59,7 @@ def websocket_wrapper(handler):
                 code = e.status_code
             message = f"⚠️ {message}" if code < 500 else f"🛑 {message}"
             await asend(ws, ErrorMsg({"code": code, "message": message, **context}))
-            if not getattr(e, "quiet", False):
+            if not getattr(e, "quiet", False) or code == 500:
                 logger.exception(f"{code} {e!r}")
             raise
 

frontend/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <LoginModal />
+  <SettingsModal />
   <header>
     <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
       <HeaderSelected :path="path.pathList" />
@@ -22,6 +23,7 @@ import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 import Router from '@/router/index'
 import type { SortOrder } from './utils/docsort'
+import type SettingsModalVue from './components/SettingsModal.vue'
 
 interface Path {
   path: string
@@ -49,6 +51,13 @@ const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
+  if (store.dialog) {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    return
+  }
   const fileExplorer = store.fileExplorer as any
   if (!fileExplorer) return
   const c = fileExplorer.isCursor()

frontend/src/components/HeaderMain.vue

@@ -74,6 +74,7 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
+  items.push({ label: 'Settings', onClick: () => { store.dialog = 'settings' }})
   if (store.user.isLoggedIn) {
     items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
   } else {

frontend/src/components/LoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
+  <ModalDialog name="login" title="Authentication required">
     <form @submit.prevent="login">
       <div class="login-container">
         <label for="username">Username:</label>
@@ -99,4 +99,3 @@ const login = async () => {
   height: 1em;
 }
 </style>
-@/stores/main

frontend/src/components/ModalDialog.vue

@@ -1,32 +1,46 @@
 <template>
-  <dialog ref="dialog">
+  <dialog v-if="store.dialog === name" ref="dialog" :id=props.name @keydown.escape=close>
     <h1 v-if="props.title">{{ props.title }}</h1>
     <div>
       <slot>
         Dialog with no content
-        <button onclick="dialog.close()">OK</button>
+        <button @click=close>OK</button>
       </slot>
     </div>
   </dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watchEffect, nextTick } from 'vue'
+import { useMainStore } from '@/stores/main'
 
 const dialog = ref<HTMLDialogElement | null>(null)
+const store = useMainStore()
 
-const props = withDefaults(
-  defineProps<{
-    title: string
-  }>(),
-  {
-    title: ''
+const close = () => {
+  dialog.value!.close()
+  store.dialog = ''
 }
-)
+
+const props = defineProps<{
+    title: string,
+    name: typeof store.dialog,
+  }>()
+
 const show = () => {
+  store.dialog = props.name
+  setTimeout(() => {
     dialog.value!.showModal()
+    nextTick(() => {
+      const input = dialog.value!.querySelector('input')
+      if (input) input.focus()
+    })
+  }, 0)
 }
-defineExpose({ show })
+defineExpose({ show, close })
+watchEffect(() => {
+  if (dialog.value) show()
+})
 onMounted(() => {
   show()
 })

frontend/src/components/SettingsModal.vue

@@ -0,0 +1,127 @@
+<template>
+  <ModalDialog name=settings title="Settings">
+    <form>
+      <template v-if="store.user.isLoggedIn">
+        <h3>Update your authentication</h3>
+        <div class="login-container">
+          <label for="username">New password:</label>
+          <input
+            ref="passwordChange"
+            id="passwordChange"
+            type="password"
+            autocomplete="new-password"
+            spellcheck="false"
+            autocorrect="off"
+            v-model="form.passwordChange"
+          />
+          <label for="password">Current password:</label>
+          <input
+            ref="password"
+            id="password"
+            name="password"
+            type="password"
+            autocomplete="current-password"
+            spellcheck="false"
+            autocorrect="off"
+            v-model="form.password"
+          />
+        </div>
+        <h3 class="error-text">
+          {{ form.error || '\u00A0' }}
+        </h3>
+        <div class="dialog-buttons">
+          <input id="close" type="reset" value="Close" class="button" @click=close />
+          <div class="spacer"></div>
+          <input id="submit" type="submit" value="Submit" class="button" @click.prevent="submit" />
+        </div>
+      </template>
+      <template v-else>
+        <p>No settings are available because you have not logged in.</p>
+        <div class="dialog-buttons">
+          <div class="spacer"></div>
+          <input id="close" type="reset" value="Close" class="button" @click=close />
+        </div>
+      </template>
+    </form>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { changePassword } from '@/repositories/User'
+import type { ISimpleError } from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
+
+const confirmLoading = ref<boolean>(false)
+const store = useMainStore()
+const passwordChange = ref()
+const password = ref()
+
+const form = reactive({
+  passwordChange: '',
+  password: '',
+  error: ''
+})
+
+const close = () => {
+  form.passwordChange = ''
+  form.password = ''
+  form.error = ''
+  store.dialog = ''
+}
+const submit = async (ev: Event) => {
+  ev.preventDefault()
+  try {
+    form.error = ''
+    if (form.passwordChange) {
+      if (!form.password) {
+        form.error = '⚠️ Current password is required'
+        password.value!.focus()
+        return
+      }
+      await changePassword(store.user.username, form.passwordChange, form.password)
+    }
+    close()
+  } catch (error) {
+    const httpError = error as ISimpleError
+    form.error = httpError.message || '🛑 Unknown error'
+  } finally {
+    confirmLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem 0;
+}
+.dialog-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.button-login {
+  color: #fff;
+  background: var(--soft-color);
+  cursor: pointer;
+  font-weight: bold;
+  border: 0;
+  border-radius: .5rem;
+  padding: .5rem 2rem;
+  margin-left: auto;
+  transition: all var(--transition-time) linear;
+}
+.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>

frontend/src/repositories/User.ts

@@ -1,6 +1,8 @@
 import Client from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
 export const url_login = '/login'
 export const url_logout = '/logout'
+export const url_password = '/password-change'
 
 export async function loginUser(username: string, password: string) {
   const user = await Client.post(url_login, {
@@ -13,3 +15,12 @@ export async function logoutUser() {
   const data = await Client.post(url_logout)
   return data
 }
+
+export async function changePassword(username: string, passwordChange: string, password: string) {
+  const data = await Client.post(url_password, {
+    username,
+    passwordChange,
+    password
+  })
+  return data
+}

frontend/src/repositories/WS.ts

@@ -53,7 +53,7 @@ export const watchConnect = () => {
     if ('error' in msg) {
       if (msg.error.code === 401) {
         store.user.isLoggedIn = false
-        store.user.isOpenLoginModal = true
+        store.dialog = 'login'
       } else {
         store.error = msg.error.message
       }
@@ -67,7 +67,7 @@ export const watchConnect = () => {
       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
+      if (!msg.server.public && !msg.user) store.dialog = 'login'
     }
   })
 }
@@ -87,9 +87,14 @@ const watchReconnect = (event: MessageEvent) => {
     store.connected = false
     store.error = 'Reconnecting...'
   }
+  if (watchTimeout !== null) clearTimeout(watchTimeout)
+  // Don't hammer the server while on login dialog
+  if (store.dialog === 'login') {
+    watchTimeout = setTimeout(watchReconnect, 100)
+    return
+  }
   reconnDelay = Math.min(5000, reconnDelay + 500)
   // The server closes the websocket after errors, so we need to reopen it
-  if (watchTimeout !== null) clearTimeout(watchTimeout)
   watchTimeout = setTimeout(watchConnect, reconnDelay)
 }
 
@@ -148,7 +153,7 @@ function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
 function handleError(msg: errorEvent) {
   const store = useMainStore()
   if (msg.error.code === 401) {
-    store.user.isOpenLoginModal = true
+    store.user.dialog = 'login'
     store.user.isLoggedIn = false
     return
   }

frontend/src/stores/main.ts

@@ -7,13 +7,6 @@ import { watchConnect } from '@/repositories/WS'
 import { shallowRef } from 'vue'
 import { sorted, type SortOrder } from '@/utils/docsort'
 
-type User = {
-  username: string
-  privileged: boolean
-  isOpenLoginModal: boolean
-  isLoggedIn: boolean
-}
-
 export const useMainStore = defineStore({
   id: 'main',
   state: () => ({
@@ -25,17 +18,17 @@ export const useMainStore = defineStore({
     connected: false,
     cursor: '' as string,
     server: {} as Record<string, any>,
+    dialog: '' as '' | 'login' | 'settings',
     prefs: {
       gallery: false,
       sortListing: '' as SortOrder,
       sortFiltered: '' as SortOrder,
     },
     user: {
-      username: '',
-      privileged: false,
-      isLoggedIn: false,
-      isOpenLoginModal: false
-    } as User
+      username: '' as string,
+      privileged: false as boolean,
+      isLoggedIn: false as boolean,
+    }
   }),
   persist: {
     paths: ['prefs'],
@@ -62,11 +55,11 @@ export const useMainStore = defineStore({
       this.user.username = username
       this.user.privileged = privileged
       this.user.isLoggedIn = true
-      this.user.isOpenLoginModal = false
+      this.dialog = ''
       if (!this.connected) watchConnect()
     },
     loginDialog() {
-      this.user.isOpenLoginModal = true
+      this.dialog = 'login'
     },
     async logout() {
       console.log("Logout")

frontend/vite.config.ts

@@ -44,6 +44,7 @@ export default defineConfig({
       "/files": dev_backend,
       "/login": dev_backend,
       "/logout": dev_backend,
+      "/password-change": dev_backend,
       "/zip": dev_backend,
       "/preview": dev_backend,
     }