Convert other pages to composition API

web/src/pages/Login.vue

@@ -1,46 +1,48 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
 
-export default defineComponent({
-    data() {
-        return {
-            error: "",
-            login: {
-                user: "",
-                password: ""
-            },
-            showPassword: false
-        }
-    },
-    mounted() {
-        document.title = "Budgeteer - Login";
-    },
-    methods: {
-        formSubmit(e : MouseEvent) {
-            e.preventDefault();
-            useSessionStore().login(this.$data.login)
-                .then(x => {
-                    this.$data.error = "";
-                    this.$router.replace("/dashboard");
-                })
-                .catch(x => this.$data.error = "The entered credentials are invalid!");
+const error = ref("");
+const login = ref({ user: "", password: "" });
 
-            // TODO display invalidCredentials
-            // TODO redirect to dashboard on success
-        }
-    }
-})
+onMounted(() => {
+    document.title = "Budgeteer - Login";
+});
+
+function formSubmit(e: MouseEvent) {
+    e.preventDefault();
+    useSessionStore().login(login)
+        .then(x => {
+            error.value = "";
+            useRouter().replace("/dashboard");
+        })
+        .catch(x => error.value = "The entered credentials are invalid!");
+
+    // TODO display invalidCredentials
+    // TODO redirect to dashboard on success
+}
 </script>
 
 <template>
-        <div>
-            <input type="text"      v-model="login.user"     placeholder="Username" class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-            <input type="password"  v-model="login.password" placeholder="Password" class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        </div>
-        <div>{{ error }}</div>
-        <button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button>
-        <p>
-            New user? <router-link to="/register">Register</router-link> instead!
-        </p>
+    <div>
+        <input
+            type="text"
+            v-model="login.user"
+            placeholder="Username"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+        />
+        <input
+            type="password"
+            v-model="login.password"
+            placeholder="Password"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+        />
+    </div>
+    <div>{{ error }}</div>
+    <button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button>
+    <p>
+        New user?
+        <router-link to="/register">Register</router-link>instead!
+    </p>
 </template>