update: login & register form

src/components/Login/LoginForm.vue

@@ -27,7 +27,7 @@ function validatePassword() {
   if (!password.value) {
     passwordError.value = '密碼為必填。';
   } else if (password.value.length < 8) {
-    passwordError.value = '使用者名稱長度必須至少八個字元。';
+    passwordError.value = '密碼長度必須至少八個字元。';
   } else {
     passwordError.value = '';
   }
@@ -69,8 +69,8 @@ const onSubmit = async () => {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <fieldset class="ts-fieldset">
+    <div class="ts-box ts-content">
-      <legend class="ts-legend">登入</legend>
+      <div class="ts-header is-large is-center-aligned has-bottom-spaced">登入</div>
       <div class="ts-wrap is-vertical">
         <div class="ts-control is-wide">
           <div class="label">使用者名稱</div>
@@ -92,11 +92,11 @@ const onSubmit = async () => {
         </div>
       </div>
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" type="submit" :class="{
+        <button class="ts-button is-fluid" type="submit" :class="{
           'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== ''
-        }">送出</button>
+        }">登入</button>
       </div>
-    </fieldset>
+    </div>
   </form>
 </template>
 
@@ -105,4 +105,12 @@ const onSubmit = async () => {
   color: red;
   font-size: 0.8em;
 }
+
+.ts-control {
+  --label-width: 100px;
+}
+
+.ts-control .content.is-fluid {
+  max-width: 100%;
+}
 </style>

src/components/Register/RegisterForm.vue

@@ -23,7 +23,7 @@ function validatePassword() {
   if (!password.value) {
     passwordError.value = '密碼為必填。';
   } else if (password.value.length < 8) {
-    passwordError.value = '使用者名稱長度必須至少八個字元。';
+    passwordError.value = '密碼長度必須至少八個字元。';
   } else {
     passwordError.value = '';
   }
@@ -57,8 +57,8 @@ const submit = () => {
 
 <template>
   <form @submit.prevent="submit">
-    <fieldset class="ts-fieldset">
+    <div class="ts-box ts-content">
-      <legend class="ts-legend">註冊</legend>
+      <div class="ts-header is-large is-center-aligned has-bottom-spaced">註冊</div>
       <div class="ts-wrap is-vertical">
         <div class="ts-control is-wide">
           <div class="label ts-text is-required">使用者名稱</div>
@@ -84,7 +84,7 @@ const submit = () => {
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' }">送出</button>
       </div>
-    </fieldset>
+    </div>
   </form>
 </template>
 
@@ -93,4 +93,12 @@ const submit = () => {
   color: red;
   font-size: 0.8em;
 }
+
+.ts-control {
+  --label-width: 100px;
+}
+
+.ts-control .content.is-fluid {
+  max-width: 100%;
+}
 </style>

src/views/LoginView.vue

@@ -1,24 +1,10 @@
+<script setup>
+  import LoginForm from '../components/Login/LoginForm.vue';
+</script>
+
 <template>
-  <div class="ts-container">
+  <div class="ts-app-center">
     <LoginForm />
   </div>
 </template>
 
-<script setup>
-import LoginForm from '../components/Login/LoginForm.vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const onSubmit = async () => {
-  try {
-    const response = await login(username.value, password.value);
-    const { jwt } = response;
-    localStorage.setItem('jwt', jwt);
-    alert('Login successful!');
-    router.push('/');
-  } catch (error) {
-    alert("Login failed: " + error.message);
-  }
-};
-</script>

src/views/RegisterView.vue

@@ -20,7 +20,7 @@ const handleNewUser = async ({ username, password }) => {
 </script>
 
 <template>
-  <div class="ts-container">
+  <div class="ts-app-center">
     <RegisterForm @new-user="handleNewUser" />
   </div>
 </template>