update: separate login logic to loginview

src/components/Login/LoginForm.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, watch } from 'vue';
-import { login } from '../../lib/api';
 import { useRouter } from 'vue-router';
-import { useAuthStore } from '../../stores/auth';
+
+const emit = defineEmits(['login-submit']);
 
 const username = ref('');
 const password = ref('');
@@ -11,8 +11,6 @@ const router = useRouter();
 const usernameError = ref('');
 const passwordError = ref('');
 
-const authStore = useAuthStore();
-
 function validateUsername() {
   if (!username.value) {
     usernameError.value = '使用者名稱為必填。';
@@ -47,7 +45,7 @@ watch(
   }
 );
 
-const onSubmit = async () => {
+const submit = () => {
   validateUsername();
   validatePassword();
 
@@ -55,20 +53,12 @@ const onSubmit = async () => {
     return;
   }
 
-  try {
-    const response = await login(username.value, password.value);
-    const { jwt } = response;
-    authStore.setJwt(jwt);
-    alert('Login successful!');
-    router.push('/profile');
-  } catch (error) {
-    alert("Login failed: " + error.message);
-  }
-};
+  emit('login-submit', { username: username.value, password: password.value });
+}
 </script>
 
 <template>
-  <form @submit.prevent="onSubmit">
+  <form @submit.prevent="submit">
     <div class="ts-box ts-content">
       <div class="ts-header is-large is-center-aligned has-bottom-spaced">登入</div>
       <div class="ts-wrap is-vertical">

src/views/LoginView.vue

@@ -1,10 +1,27 @@
 <script setup>
-  import LoginForm from '../components/Login/LoginForm.vue';
+import LoginForm from '../components/Login/LoginForm.vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '../stores/auth';
+import { login } from '../lib/api';
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const onSubmit = async ({ username, password }) => {
+  try {
+    const response = await login(username, password);
+    const { jwt } = response;
+    authStore.setJwt(jwt);
+    alert('Login successful!');
+    router.push('/profile');
+  } catch (error) {
+    alert("Login failed: " + error.message);
+  }
+};
 </script>
 
 <template>
   <div class="ts-app-center">
-    <LoginForm />
+    <LoginForm @login-submit="onSubmit" />
   </div>
 </template>
-