add login

src/middleware/auth.ts

@@ -3,6 +3,6 @@ import { Context } from '@/middleware/Context';
 
 export default function auth({ next, router }: Context) {
   console.log('auth');
-  if (!useWebdavStorage().currentClient) return router.push({ name: 'Login' });
+  if (!useWebdavStorage().currentSession?.isActive) return router.push({ name: 'Login' });
   return next();
 }

src/store/webdav.ts

@@ -6,22 +6,36 @@ type Auth = {
   pass: string;
 };
 
+export type Session = {
+  client: WebDAVClient;
+  isActive: boolean;
+};
+
 export const useWebdavStorage = defineStore('auth', {
   state: () => ({
-    clientList: [] as Array<WebDAVClient>,
-    currentClient: null as null | WebDAVClient,
+    sessions: [] as Array<Session>,
+    currentSession: null as null | Session,
   }),
   actions: {
-    login({ user, pass }: Auth) {
-      console.log(user, pass);
-      const client = createClient(process.env.VUE_APP_ROOT_WEBDAV as string, {
-        authType: AuthType.Digest,
-        username: user as string,
-        password: pass as string,
-      }) as WebDAVClient;
-      this.clientList.push(client);
-      this.currentClient = client;
-      return client;
+    login({ user, pass }: Auth): Promise<Session> {
+      return new Promise((resolve, reject) => {
+        try {
+          const client = createClient(
+            process.env.VUE_APP_ROOT_WEBDAV as string,
+            {
+              authType: AuthType.Digest,
+              username: user as string,
+              password: pass as string,
+            }
+          ) as WebDAVClient;
+          const session = { client, isActive: true } as Session;
+          this.sessions.push(session);
+          this.currentSession = session;
+          resolve(session);
+        } catch (e) {
+          reject(e);
+        }
+      });
     },
   },
 });

src/views/Login.vue

@@ -1,10 +1,23 @@
 <template>
   <h1>Login</h1>
+  user: <input type="text" v-model="user" /><br />
+  pass: <input type="password" v-model="pass" /><br />
+  <button @click="login">Login</button>
 </template>
 
-<script>
-export default {
-  name: 'Login',
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useWebdavStorage } from '@/store/webdav';
+
+const user = ref('');
+const pass = ref('');
+
+const login = async () => {
+  await useWebdavStorage()
+    .login({ user, pass })
+    .then(async session => {
+      console.log(await session.client.getDirectoryContents('/'));
+    });
 };
 </script>