modify login page style

src/locales/en.js

@@ -765,6 +765,8 @@ export default {
     'Zoom out': 'Zoom out',
     'Change Language': 'Change Language',
     'Date is too early': 'Date is too early',
+    'Welcome to ezBookkeeping': 'Welcome to ezBookkeeping',
+    'Please log in with your ezBookkeeping account': 'Please log in with your ezBookkeeping account',
     'Unlock Application': 'Unlock Application',
     'Re-login': 'Re-login',
     'Username': 'Username',

src/locales/zh_Hans.js

@@ -765,6 +765,8 @@ export default {
     'Zoom out': '缩小',
     'Change Language': '修改语言',
     'Date is too early': '日期过早',
+    'Welcome to ezBookkeeping': '欢迎使用 ezBookkeeping',
+    'Please log in with your ezBookkeeping account': '请使用您的 ezBookkeeping 账号登录',
     'Unlock Application': '解锁应用',
     'Re-login': '重新登陆',
     'Username': '用户名',

src/styles/desktop/global.scss

@@ -1,3 +1,4 @@
+/** Common class **/
 .disabled {
     opacity: 0.55 !important;
     pointer-events: none !important;
@@ -10,6 +11,28 @@
     pointer-events: none !important;
 }
 
+/** custom class **/
+.auth-logo {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 2rem;
+    inset-inline-start: 2.3rem;
+}
+
+.auth-logo img {
+    width: 2em;
+    height: 2em;
+}
+
+.auth-wrapper {
+    min-block-size: calc(var(--vh, 1vh) * 100);
+}
+
+.auth-card {
+    background-color: rgb(var(--v-theme-surface));
+}
+
+/** Common class for replacing the default style of vuetify **/
 .v-table {
     th {
         background: rgb(var(--v-table-header-background)) !important;

src/views/desktop/LoginPage.vue

@@ -1,12 +1,19 @@
 <template>
-    <div class="auth-wrapper d-flex align-center justify-center pa-4">
+    <div class="layout-wrapper">
-        <v-card class="auth-card pa-4 pt-7" max-width="448">
+        <div class="auth-logo d-flex align-start gap-x-3">
-            <v-card-item class="justify-center">
+            <v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" />
-                <v-card-title class="d-grid font-weight-semibold text-2xl">
+            <h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
-                    <v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" :width="96" />
+        </div>
-                    <p class="mt-4 font-weight-bold">{{ $t('global.app.title') }}</p>
+        <v-row no-gutters class="auth-wrapper">
-                </v-card-title>
+            <v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
-            </v-card-item>
+
+            </v-col>
+            <v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
+                <v-card variant="flat" class="mt-12 mt-sm-0 pa-4" max-width="500">
+                    <v-card-text>
+                        <h5 class="text-h5 mb-1">{{ $t('Welcome to ezBookkeeping') }}</h5>
+                        <p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
+                    </v-card-text>
 
                     <v-card-text>
                         <v-form>
@@ -15,6 +22,7 @@
                                     <v-text-field
                                         type="text"
                                         autocomplete="username"
+                                        autofocus="autofocus"
                                         clearable
                                         :disabled="show2faInput"
                                         :label="$t('Username')"
@@ -116,6 +124,8 @@
                         </v-form>
                     </v-card-text>
                 </v-card>
+            </v-col>
+        </v-row>
 
         <snack-bar ref="snackbar" />
 
@@ -318,17 +328,3 @@ export default {
     }
 }
 </script>
-
-<style>
-.auth-wrapper {
-    min-block-size: calc(var(--vh, 1vh) * 100);
-}
-
-.auth-card {
-    z-index: 1 !important
-}
-
-.login-page-logo {
-    margin: auto;
-}
-</style>