edit: redirect to login with message on password change

components/FormField.vue

@@ -68,7 +68,7 @@ provide(formGroupExtras, {
         </label>
       </slot>
 
-      <div>
+      <div class="w-full">
         <slot name="default" />
 
         <div

components/UserPasswordForm.vue

@@ -47,7 +47,7 @@ watch(
 const onSubmit = handleSubmit(async (form) => {
   loading.value = true
 
-  const { error, data } = await useApi('/update', {
+  const { error } = await useApi('/update', {
     method: 'PUT',
     body: exclude(form, 'confirmpassword'),
   })
@@ -71,11 +71,13 @@ const onSubmit = handleSubmit(async (form) => {
       icon: 'alert',
       message,
     }
-  } else if (data.value) {
+  } else {
     // reset loggedin state and redirect to login
-    // FIXME toast ok message
     useIsLoggedIn().value = false
-    return navigateTo('/login')
+    return navigateTo({
+      path: '/login',
+      query: { msg: 'password_changed_reconnect' },
+    })
   }
 
   loading.value = false

locales/en.json

@@ -39,6 +39,7 @@
     "new_password": "New password",
     "no_apps": "There is no app to list here, either because no web app yet is installed on the server, or because you don't have access to any. Please check with the admins of the server for more infos!",
     "password": "Password",
+    "password_changed_reconnect": "Your password has been changed, please reconnect.",
     "possibly_invalid_password": "Password is possibly invalid",
     "possibly_invalid_username": "Username is possibly invalid",
     "primary_mail_adress": "Primary mail adress",

middleware/auth.global.ts

@@ -21,7 +21,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
   const queryMsg = useQueryMsg()
   if (to.query.msg) {
-    queryMsg.value = from.query.msg as string
+    queryMsg.value = to.query.msg as string
   } else {
     queryMsg.value = null
   }

pages/login.vue

@@ -16,6 +16,7 @@ useHead({
 
 const isLoggedIn = useIsLoggedIn()
 const redirectUrl = useRedirectUrl()
+const queryMsg = useQueryMsg()
 
 const { handleSubmit, setErrors } = useForm({
   validationSchema: toTypedSchema(
@@ -49,7 +50,7 @@ const login = handleSubmit(async (form) => {
 </script>
 
 <template>
-  <main class="w-50 m-auto max-w-[250px]">
+  <main class="w-50 m-auto max-w-[300px]">
     <CustomLogo class="flex-none mx-auto w-1/2 mb-10" />
 
     <BaseAlert
@@ -61,6 +62,15 @@ const login = handleSubmit(async (form) => {
       assertive
     />
 
+    <BaseAlert
+      v-if="queryMsg"
+      variant="info"
+      icon="login"
+      :message="t(queryMsg)"
+      class="mb-4"
+      assertive
+    />
+
     <form novalidate @submit="login">
       <FormField
         name="username"
@@ -74,6 +84,7 @@ const login = handleSubmit(async (form) => {
           type="text"
           :placeholder="t('username')"
           autocomplete="username"
+          class="w-full"
         />
       </FormField>
 
@@ -89,6 +100,7 @@ const login = handleSubmit(async (form) => {
           type="password"
           :placeholder="t('password')"
           autocomplete="current-password"
+          class="w-full"
         />
       </FormField>