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">
-      <legend class="ts-legend">登入</legend>
+    <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">
         <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>