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

src/components/desktop/SwitchToMobileDialog.vue

@@ -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

@@ -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

@@ -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

@@ -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">
+        <div class="layout-overlay" :class="{ 'visible': showVerticalOverlayMenu }" @click="showVerticalOverlayMenu = false"></div>
-            <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>
 
         <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

@@ -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

@@ -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

@@ -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();
         },