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

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