zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add switch to mobile/desktop device in login/unlock page

Browse Source
This commit is contained in:
MaysWind
2023-07-09 11:48:53 +08:00
parent c5c9ed24c3
commit 4ccb75818c
7 changed files with 111 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/SwitchToMobileDialog.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<v-dialog width="400" v-model="showState">
<v-card>
<v-toolbar color="primary">
<v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-4">
<p>{{ $t('You can scan the below QR code on your mobile device.') }}</p>
</v-card-text>
<v-card-text class="pa-4 w-100 d-flex justify-center">
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
</v-card-text>
<v-card-actions>
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-spacer></v-spacer>
<v-btn @click="showState = false">{{ $t('Close') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { getMobileUrlQrCodePath } from '@/lib/qrcode.js';
import { getMobileVersionPath } from '@/lib/version.js';
export default {
props: [
'show'
],
emits: [
'update:show'
],
data() {
return {
mobileUrlQrCodePath: getMobileUrlQrCodePath(),
mobileVersionPath: getMobileVersionPath(),
}
},
computed: {
showState: {
get: function () {
return this.show;
},
set: function (value) {
this.$emit('update:show', value);
}
}
}
}
</script>
src/desktop-main.js
+2
View File
@@ -66,6 +66,7 @@ import AmountInput from '@/components/desktop/AmountInput.vue';
import StepsBar from '@/components/desktop/StepsBar.vue';
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import SwitchToMobileDialog from '@/components/desktop/SwitchToMobileDialog.vue';
import '@/styles/desktop/template/base/libs/vuetify/_index.scss';
import '@/styles/desktop/template/template/index.scss';
@@ -352,6 +353,7 @@ app.component('AmountInput', AmountInput);
app.component('StepsBar', StepsBar);
app.component('ConfirmDialog', ConfirmDialog);
app.component('SnackBar', SnackBar);
app.component('SwitchToMobileDialog', SwitchToMobileDialog);
app.config.globalProperties.$version = getVersion();
app.config.globalProperties.$buildTime = getBuildTime();
src/views/desktop/LoginPage.vue
+10
View File
@@ -89,6 +89,14 @@
/>
</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">
@@ -143,6 +151,7 @@
</v-col>
</v-row>
<switch-to-mobile-dialog v-model:show="showMobileQrCode" />
<snack-bar ref="snackbar" />
</div>
</template>
@@ -177,6 +186,7 @@ export default {
verifying: false,
show2faInput: false,
twoFAVerifyType: 'passcode',
showMobileQrCode: false,
icons: {
eye: mdiEyeOutline,
eyeSlash: mdiEyeOffOutline,
src/views/desktop/MainLayout.vue
+2 -27
View File
@@ -161,26 +161,9 @@
</div>
</div>
<div class="layout-overlay" :class="{ 'visible': showVerticalOverlayMenu }" @click="showVerticalOverlayMenu = false"></div>
<switch-to-mobile-dialog v-model:show="showMobileQrCode" />
<v-dialog width="400" v-model="showMobileQrCode">
<v-card>
<v-toolbar color="primary">
<v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-4">
<p>{{ $t('You can scan the below QR code on your mobile device.') }}</p>
</v-card-text>
<v-card-text class="pa-4 w-100 d-flex justify-center">
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
</v-card-text>
<v-card-actions>
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-spacer></v-spacer>
<v-btn @click="showMobileQrCode = false">{{ $t('Close') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<div class="layout-overlay" :class="{ 'visible': showVerticalOverlayMenu }" @click="showVerticalOverlayMenu = false"></div>
<v-overlay class="justify-center align-center" :persistent="true" v-model="showLoading">
<v-progress-circular indeterminate></v-progress-circular>
@@ -200,8 +183,6 @@ import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
import { getSystemTheme } from '@/lib/ui.js';
import { getMobileUrlQrCodePath } from '@/lib/qrcode.js';
import { getMobileVersionPath } from '@/lib/version.js';
import {
mdiMenu,
@@ -258,12 +239,6 @@ export default {
const { mdAndDown } = useDisplay();
return mdAndDown.value;
},
mobileUrlQrCodePath() {
return getMobileUrlQrCodePath();
},
mobileVersionPath() {
return getMobileVersionPath();
},
currentNickName() {
return this.userStore.currentUserNickname || this.$t('User');
},
src/views/desktop/UnlockPage.vue
+11 -1
View File
@@ -35,6 +35,14 @@
v-model="pinCode" @pincode:confirm="unlockByPin" />
</v-col>
<v-col cols="12" class="py-0 mt-4 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="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
@click="unlockByPin(pinCode)">
@@ -91,6 +99,7 @@
</v-col>
</v-row>
<switch-to-mobile-dialog v-model:show="showMobileQrCode" />
<confirm-dialog ref="confirmDialog"/>
<snack-bar ref="snackbar" />
</div>
@@ -113,7 +122,8 @@ export default {
data() {
return {
pinCode: '',
verifyingByWebAuthn: false
verifyingByWebAuthn: false,
showMobileQrCode: false
};
},
computed: {
src/views/mobile/LoginPage.vue
+18 -2
View File
@@ -5,7 +5,7 @@
<f7-block class="login-page-tile margin-vertical-half">{{ $t('global.app.title') }}</f7-block>
</f7-login-screen-title>
<f7-list form dividers>
<f7-list form dividers class="margin-bottom-half">
<f7-list-input
type="text"
autocomplete="username"
@@ -27,7 +27,19 @@
></f7-list-input>
</f7-list>
<f7-list>
<f7-list class="no-margin-vertical">
<f7-list-item>
<template #title>
<small>
<f7-link external :href="desktopVersionPath">{{ $t('Switch to Desktop Version') }}</f7-link>
</small>
</template>
<template #after>
</template>
</f7-list-item>
</f7-list>
<f7-list class="margin-top-half">
<f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="$t('Log In')" @click="login"></f7-list-button>
<f7-block-footer>
<span>{{ $t('Don\'t have an account?') }}</span>&nbsp;
@@ -116,6 +128,7 @@ import { useSettingsStore } from '@/stores/setting.js';
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
import { isUserRegistrationEnabled } from '@/lib/server_settings.js';
import { getDesktopVersionPath } from '@/lib/version.js';
import { isModalShowing } from '@/lib/ui.mobile.js';
export default {
@@ -140,6 +153,9 @@ export default {
version() {
return 'v' + this.$version;
},
desktopVersionPath() {
return getDesktopVersionPath();
},
allLanguages() {
return this.$locale.getAllLanguageInfos();
},
src/views/mobile/UnlockPage.vue
+18 -2
View File
@@ -5,7 +5,7 @@
<f7-block class="login-page-tile margin-vertical-half">{{ $t('global.app.title') }}</f7-block>
</f7-login-screen-title>
<f7-list form>
<f7-list form class="margin-bottom-half">
<f7-list-item class="no-padding no-margin">
<template #inner>
<div class="display-flex justify-content-center full-line">{{ $t('Unlock Application') }}</div>
@@ -16,7 +16,19 @@
</f7-list-item>
</f7-list>
<f7-list>
<f7-list class="no-margin-vertical">
<f7-list-item>
<template #title>
<small>
<f7-link external :href="desktopVersionPath">{{ $t('Switch to Desktop Version') }}</f7-link>
</small>
</template>
<template #after>
</template>
</f7-list-item>
</f7-list>
<f7-list class="margin-top-half">
<f7-list-button :class="{ 'disabled': !isPinCodeValid(pinCode) }" :text="$t('Unlock By PIN Code')" @click="unlockByPin"></f7-list-button>
<f7-list-button v-if="isWebAuthnAvailable" :text="$t('Unlock By WebAuthn')" @click="unlockByWebAuthn"></f7-list-button>
<f7-block-footer>
@@ -66,6 +78,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
import logger from '@/lib/logger.js';
import webauthn from '@/lib/webauthn.js';
import { getDesktopVersionPath } from '@/lib/version.js';
import { isModalShowing } from '@/lib/ui.mobile.js';
export default {
@@ -82,6 +95,9 @@ export default {
version() {
return 'v' + this.$version;
},
desktopVersionPath() {
return getDesktopVersionPath();
},
allLanguages() {
return this.$locale.getAllLanguageInfos();
},