From df470f1a5e810c29c7266fc85b38b71275df08f7 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 15 Aug 2023 22:47:40 +0800
Subject: [PATCH] modify style

---
 src/views/desktop/LoginPage.vue  | 214 ++++++++++++++++---------------
 src/views/desktop/UnlockPage.vue |  92 +++++++------
 2 files changed, 163 insertions(+), 143 deletions(-)

diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 386c4442..db3162a6 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -18,106 +18,116 @@
                     <v-img max-width="600px" src="img/desktop/people1.svg"/>
                 </div>
             </v-col>
-            <v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
-                <v-card variant="flat" class="mt-0 pa-4" max-width="500">
-                    <v-card-text>
-                        <h5 class="text-h5 mb-3">{{ $t('Welcome to ezBookkeeping') }}</h5>
-                        <p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
-                    </v-card-text>
+            <v-col cols="12" md="4" class="auth-card d-flex flex-column">
+                <div class="d-flex align-center justify-center h-100">
+                    <v-card variant="flat" class="mt-0 px-4 pt-12" max-width="500">
+                        <v-card-text>
+                            <h5 class="text-h5 mb-3">{{ $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>
+                        <v-card-text class="pb-0 mb-6">
+                            <v-form>
+                                <v-row>
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            type="text"
+                                            autocomplete="username"
+                                            autofocus="autofocus"
+                                            clearable
+                                            :disabled="show2faInput || logining || verifying"
+                                            :label="$t('Username')"
+                                            :placeholder="$t('Your username or email')"
+                                            v-model="username"
+                                            @input="tempToken = ''"
+                                            @keyup.enter="$refs.passwordInput.focus()"
+                                        />
+                                    </v-col>
+
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            autocomplete="current-password"
+                                            clearable
+                                            ref="passwordInput"
+                                            :type="isPasswordVisible ? 'text' : 'password'"
+                                            :disabled="show2faInput || logining || verifying"
+                                            :label="$t('Password')"
+                                            :placeholder="$t('Your password')"
+                                            :append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
+                                            v-model="password"
+                                            @input="tempToken = ''"
+                                            @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                                            @keyup.enter="login"
+                                        />
+                                    </v-col>
+
+                                    <v-col cols="12" v-show="show2faInput">
+                                        <v-text-field
+                                            type="number"
+                                            autocomplete="one-time-code"
+                                            clearable
+                                            ref="passcodeInput"
+                                            :disabled="logining || verifying"
+                                            :label="$t('Passcode')"
+                                            :placeholder="$t('Passcode')"
+                                            :append-inner-icon="icons.backupCode"
+                                            v-model="passcode"
+                                            @click:append-inner="twoFAVerifyType = 'backupcode'"
+                                            @keyup.enter="verify"
+                                            v-if="twoFAVerifyType === 'passcode'"
+                                        />
+                                        <v-text-field
+                                            type="text"
+                                            clearable
+                                            :disabled="logining || verifying"
+                                            :label="$t('Backup Code')"
+                                            :placeholder="$t('Backup Code')"
+                                            :append-inner-icon="icons.passcode"
+                                            v-model="backupCode"
+                                            @click:append-inner="twoFAVerifyType = 'passcode'"
+                                            @keyup.enter="verify"
+                                            v-if="twoFAVerifyType === 'backupcode'"
+                                        />
+                                    </v-col>
+
+                                    <v-col cols="12" class="py-0 mt-1 mb-4">
+                                        <div class="d-flex align-center justify-space-between flex-wrap">
+                                            <a href="javascript:void(0);" @click="showMobileQrCode = true">
+                                                <span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
+                                            </a>
+                                        </div>
+                                    </v-col>
+
+                                    <v-col cols="12">
+                                        <v-btn block :disabled="inputIsEmpty || logining || verifying"
+                                               @click="login" v-if="!show2faInput">
+                                            {{ $t('Log In') }}
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="logining"></v-progress-circular>
+                                        </v-btn>
+                                        <v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
+                                               @click="verify" v-else-if="show2faInput">
+                                            {{ $t('Continue') }}
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifying"></v-progress-circular>
+                                        </v-btn>
+                                    </v-col>
+
+                                    <v-col cols="12" class="text-center text-base">
+                                        <span class="me-1">{{ $t('Don\'t have an account?') }}</span>
+                                        <router-link class="text-primary" to="/signup"
+                                                     :class="{'disabled': !isUserRegistrationEnabled}">
+                                            {{ $t('Create an account') }}
+                                        </router-link>
+                                    </v-col>
+                                </v-row>
+                            </v-form>
+                        </v-card-text>
+                    </v-card>
+                </div>
+                <v-spacer/>
+                <div class="d-flex align-center justify-center">
+                    <v-card variant="flat" class="px-4 pb-4" max-width="500">
+                        <v-card-text class="pt-0">
                             <v-row>
-                                <v-col cols="12">
-                                    <v-text-field
-                                        type="text"
-                                        autocomplete="username"
-                                        autofocus="autofocus"
-                                        clearable
-                                        :disabled="show2faInput || logining || verifying"
-                                        :label="$t('Username')"
-                                        :placeholder="$t('Your username or email')"
-                                        v-model="username"
-                                        @input="tempToken = ''"
-                                        @keyup.enter="$refs.passwordInput.focus()"
-                                    />
-                                </v-col>
-
-                                <v-col cols="12">
-                                    <v-text-field
-                                        autocomplete="current-password"
-                                        clearable
-                                        ref="passwordInput"
-                                        :type="isPasswordVisible ? 'text' : 'password'"
-                                        :disabled="show2faInput || logining || verifying"
-                                        :label="$t('Password')"
-                                        :placeholder="$t('Your password')"
-                                        :append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
-                                        v-model="password"
-                                        @input="tempToken = ''"
-                                        @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                                        @keyup.enter="login"
-                                    />
-                                </v-col>
-
-                                <v-col cols="12" v-show="show2faInput">
-                                    <v-text-field
-                                        type="number"
-                                        autocomplete="one-time-code"
-                                        clearable
-                                        ref="passcodeInput"
-                                        :disabled="logining || verifying"
-                                        :label="$t('Passcode')"
-                                        :placeholder="$t('Passcode')"
-                                        :append-inner-icon="icons.backupCode"
-                                        v-model="passcode"
-                                        @click:append-inner="twoFAVerifyType = 'backupcode'"
-                                        @keyup.enter="verify"
-                                        v-if="twoFAVerifyType === 'passcode'"
-                                    />
-                                    <v-text-field
-                                        type="text"
-                                        clearable
-                                        :disabled="logining || verifying"
-                                        :label="$t('Backup Code')"
-                                        :placeholder="$t('Backup Code')"
-                                        :append-inner-icon="icons.passcode"
-                                        v-model="backupCode"
-                                        @click:append-inner="twoFAVerifyType = 'passcode'"
-                                        @keyup.enter="verify"
-                                        v-if="twoFAVerifyType === 'backupcode'"
-                                    />
-                                </v-col>
-
-                                <v-col cols="12" class="py-0 mt-1 mb-4">
-                                    <div class="d-flex align-center justify-space-between flex-wrap">
-                                        <a href="javascript:void(0);" @click="showMobileQrCode = true">
-                                            <span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
-                                        </a>
-                                    </div>
-                                </v-col>
-
-                                <v-col cols="12">
-                                    <v-btn block :disabled="inputIsEmpty || logining || verifying"
-                                           @click="login" v-if="!show2faInput">
-                                        {{ $t('Log In') }}
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="logining"></v-progress-circular>
-                                    </v-btn>
-                                    <v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
-                                           @click="verify" v-else-if="show2faInput">
-                                        {{ $t('Continue') }}
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifying"></v-progress-circular>
-                                    </v-btn>
-                                </v-col>
-
-                                <v-col cols="12" class="text-center text-base">
-                                    <span class="me-1">{{ $t('Don\'t have an account?') }}</span>
-                                    <router-link class="text-primary" to="/signup"
-                                                 :class="{'disabled': !isUserRegistrationEnabled}">
-                                        {{ $t('Create an account') }}
-                                    </router-link>
-                                </v-col>
-
                                 <v-col cols="12" class="text-center">
                                     <v-menu location="bottom">
                                         <template #activator="{ props }">
@@ -137,7 +147,7 @@
                                     </v-menu>
                                 </v-col>
 
-                                <v-col cols="12" class="d-flex align-center">
+                                <v-col cols="12" class="d-flex align-center pt-0">
                                     <v-divider />
                                 </v-col>
 
@@ -146,9 +156,9 @@
                                     <a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a>&nbsp;<span>{{ version }}</span>
                                 </v-col>
                             </v-row>
-                        </v-form>
-                    </v-card-text>
-                </v-card>
+                        </v-card-text>
+                    </v-card>
+                </div>
             </v-col>
         </v-row>
 
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 9a6e576f..7f49b3d1 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -18,45 +18,55 @@
                     <v-img max-width="600px" src="img/desktop/people3.svg"/>
                 </div>
             </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-3">{{ $t('Unlock Application') }}</h5>
-                        <p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
-                        <p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
-                    </v-card-text>
+            <v-col cols="12" md="4" class="auth-card d-flex flex-column">
+                <div class="d-flex align-center justify-center h-100">
+                    <v-card variant="flat" class="mt-0 px-4 pt-12" max-width="500">
+                        <v-card-text>
+                            <h5 class="text-h5 mb-3">{{ $t('Unlock Application') }}</h5>
+                            <p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
+                            <p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
+                        </v-card-text>
 
-                    <v-card-text>
-                        <v-form>
+                        <v-card-text class="pb-0 mb-6">
+                            <v-form>
+                                <v-row>
+                                    <v-col cols="12">
+                                        <pin-code-input :disabled="verifyingByWebAuthn" :autofocus="true"
+                                                        :secure="true" :length="6"
+                                                        v-model="pinCode" @pincode:confirm="unlockByPin" />
+                                    </v-col>
+
+                                    <v-col cols="12">
+                                        <v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
+                                               @click="unlockByPin(pinCode)">
+                                            {{ $t('Unlock By PIN Code') }}
+                                        </v-btn>
+                                    </v-col>
+
+                                    <v-col cols="12" v-if="isWebAuthnAvailable">
+                                        <v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
+                                               @click="unlockByWebAuthn">
+                                            {{ $t('Unlock By WebAuthn') }}
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
+                                        </v-btn>
+                                    </v-col>
+
+                                    <v-col cols="12" class="text-center">
+                                        <span class="me-1">{{ $t('Can\'t Unlock?') }}</span>
+                                        <a class="text-primary" href="javascript:void(0);" @click="relogin">
+                                            {{ $t('Re-login') }}
+                                        </a>
+                                    </v-col>
+                                </v-row>
+                            </v-form>
+                        </v-card-text>
+                    </v-card>
+                </div>
+                <v-spacer/>
+                <div class="d-flex align-center justify-center">
+                    <v-card variant="flat" class="px-4 pb-4" max-width="500">
+                        <v-card-text class="pt-0">
                             <v-row>
-                                <v-col cols="12">
-                                    <pin-code-input :disabled="verifyingByWebAuthn" :autofocus="true"
-                                                    :secure="true" :length="6"
-                                                    v-model="pinCode" @pincode:confirm="unlockByPin" />
-                                </v-col>
-
-                                <v-col cols="12">
-                                    <v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
-                                           @click="unlockByPin(pinCode)">
-                                        {{ $t('Unlock By PIN Code') }}
-                                    </v-btn>
-                                </v-col>
-
-                                <v-col cols="12" v-if="isWebAuthnAvailable">
-                                    <v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
-                                           @click="unlockByWebAuthn">
-                                        {{ $t('Unlock By WebAuthn') }}
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
-                                    </v-btn>
-                                </v-col>
-
-                                <v-col cols="12" class="text-center">
-                                    <span class="me-1">{{ $t('Can\'t Unlock?') }}</span>
-                                    <a class="text-primary" href="javascript:void(0);" @click="relogin">
-                                        {{ $t('Re-login') }}
-                                    </a>
-                                </v-col>
-
                                 <v-col cols="12" class="text-center">
                                     <v-menu location="bottom">
                                         <template #activator="{ props }">
@@ -76,7 +86,7 @@
                                     </v-menu>
                                 </v-col>
 
-                                <v-col cols="12" class="d-flex align-center">
+                                <v-col cols="12" class="d-flex align-center pt-0">
                                     <v-divider />
                                 </v-col>
 
@@ -85,9 +95,9 @@
                                     <a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a>&nbsp;<span>{{ version }}</span>
                                 </v-col>
                             </v-row>
-                        </v-form>
-                    </v-card-text>
-                </v-card>
+                        </v-card-text>
+                    </v-card>
+                </div>
             </v-col>
         </v-row>