mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-19 01:04:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

support Nextcloud OAuth 2.0 authentication

Browse Source
This commit is contained in:
MaysWind
2025-10-21 01:52:28 +08:00
parent 600ae2bd58
commit 53a8ad71c6
74 changed files with 2046 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/LoginPageBase.ts
+10 -4
View File
@@ -8,12 +8,12 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import type { AuthResponse } from '@/models/auth_response.ts';
import { getLoginPageTips } from '@/lib/server_settings.ts';
import { getOAuth2Provider, getOIDCCustomDisplayNames, getLoginPageTips } from '@/lib/server_settings.ts';
import { getClientDisplayVersion } from '@/lib/version.ts';
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
export function useLoginPageBase() {
const { getServerTipContent, setLanguage } = useI18n();
export function useLoginPageBase(platform: 'mobile' | 'desktop') {
const { getServerMultiLanguageConfigContent, getLocalizedOAuth2LoginText, setLanguage } = useI18n();
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
@@ -27,6 +27,7 @@ export function useLoginPageBase() {
const backupCode = ref<string>('');
const tempToken = ref<string>('');
const twoFAVerifyType = ref<string>('passcode');
const oauth2ClientSessionId = ref<string>('');
const logining = ref<boolean>(false);
const verifying = ref<boolean>(false);
@@ -40,7 +41,9 @@ export function useLoginPageBase() {
}
});
const tips = computed<string>(() => getServerTipContent(getLoginPageTips()));
const oauth2LoginUrl = computed<string>(() => rootStore.generateOAuth2LoginUrl(platform, oauth2ClientSessionId.value));
const oauth2LoginDisplayName = computed<string>(() => getLocalizedOAuth2LoginText(getOAuth2Provider(), getOIDCCustomDisplayNames()));
const tips = computed<string>(() => getServerMultiLanguageConfigContent(getLoginPageTips()));
function doAfterLogin(authResponse: AuthResponse): void {
if (authResponse.user) {
@@ -69,11 +72,14 @@ export function useLoginPageBase() {
backupCode,
tempToken,
twoFAVerifyType,
oauth2ClientSessionId,
logining,
verifying,
// computed states
inputIsEmpty,
twoFAInputIsEmpty,
oauth2LoginUrl,
oauth2LoginDisplayName,
tips,
// functions
doAfterLogin
src/views/desktop/LoginPage.vue
+29 -7
View File
@@ -24,14 +24,14 @@
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text>
<h4 class="text-h4 mb-2">{{ tt('Welcome to ezBookkeeping') }}</h4>
<p class="mb-0">{{ tt('Please log in with your ezBookkeeping account') }}</p>
<p class="mb-0" v-if="isInternalAuthEnabled()">{{ tt('Please log in with your ezBookkeeping account') }}</p>
<p class="mt-1 mb-0" v-if="tips">{{ tips }}</p>
</v-card-text>
<v-card-text class="pb-0 mb-6">
<v-form>
<v-row>
<v-col cols="12">
<v-col cols="12" v-if="isInternalAuthEnabled()">
<v-text-field
type="text"
autocomplete="username"
@@ -45,7 +45,7 @@
/>
</v-col>
<v-col cols="12">
<v-col cols="12" v-if="isInternalAuthEnabled()">
<v-text-field
autocomplete="current-password"
ref="passwordInput"
@@ -101,10 +101,20 @@
<v-col cols="12">
<v-btn block :disabled="inputIsEmpty || logining || verifying"
@click="login" v-if="!show2faInput">
@click="login" v-if="isInternalAuthEnabled() && !show2faInput">
{{ tt('Log In') }}
<v-progress-circular indeterminate size="22" class="ms-2" v-if="logining"></v-progress-circular>
</v-btn>
<v-col cols="12" class="d-flex align-center px-0" v-if="isInternalAuthEnabled() && isOAuth2Enabled()">
<v-divider class="me-3" />
{{ tt('or') }}
<v-divider class="ms-3" />
</v-col>
<v-btn block :disabled="logining || verifying" :href="oauth2LoginUrl" v-if="isOAuth2Enabled()">
{{ oauth2LoginDisplayName }}
</v-btn>
<v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
@click="verify" v-else-if="show2faInput">
{{ tt('Continue') }}
@@ -112,7 +122,7 @@
</v-btn>
</v-col>
<v-col cols="12" class="text-center text-base">
<v-col cols="12" class="text-center text-base" v-if="isInternalAuthEnabled()">
<span class="me-1">{{ tt('Don\'t have an account?') }}</span>
<router-link class="text-primary" to="/signup"
:class="{'disabled': !isUserRegistrationEnabled()}">
@@ -170,7 +180,14 @@ import { ThemeType } from '@/core/theme.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { KnownErrorCode } from '@/consts/api.ts';
import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import {
isUserRegistrationEnabled,
isUserForgetPasswordEnabled,
isUserVerifyEmailEnabled,
isInternalAuthEnabled,
isOAuth2Enabled
} from '@/lib/server_settings.ts';
import {
mdiOnepassword,
@@ -194,13 +211,16 @@ const {
backupCode,
tempToken,
twoFAVerifyType,
oauth2ClientSessionId,
logining,
verifying,
inputIsEmpty,
twoFAInputIsEmpty,
oauth2LoginUrl,
oauth2LoginDisplayName,
tips,
doAfterLogin
} = useLoginPageBase();
} = useLoginPageBase('desktop');
const passwordInput = useTemplateRef<VTextField>('passwordInput');
const passcodeInput = useTemplateRef<VTextField>('passcodeInput');
@@ -301,4 +321,6 @@ function verify(): void {
}
});
}
oauth2ClientSessionId.value = generateRandomUUID();
</script>
src/views/desktop/OAuth2CallbackPage.vue
+215
View File
@@ -0,0 +1,215 @@
<template>
<div class="layout-wrapper">
<router-link to="/">
<div class="auth-logo d-flex align-start gap-x-3">
<img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
<h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
<div class="d-flex auth-img-footer" v-if="isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="300px" src="img/desktop/people2.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="300px" src="img/desktop/people2-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<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="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text>
<h4 class="text-h4 mb-2">{{ oauth2LoginDisplayName }}</h4>
<p class="mb-0" v-if="!error && platform && token && !userName">{{ tt('Logging in...') }}</p>
<p class="mb-0" v-else-if="!error && userName">{{ tt('format.misc.oauth2bindTip', { providerName: oauth2ProviderDisplayName, userName: userName }) }}</p>
<p class="mb-0" v-else-if="error">{{ tt(error) }}</p>
<p class="mb-0" v-else>{{ tt('An error occurred') }}</p>
</v-card-text>
<v-card-text class="pb-0 mb-6" v-if="!error && userName">
<v-form>
<v-row>
<v-col cols="12">
<v-text-field
type="password"
autocomplete="password"
:autofocus="true"
:disabled="logining"
:label="tt('Password')"
:placeholder="tt('Your password')"
v-model="password"
@keyup.enter="verify"
/>
</v-col>
<v-col cols="12">
<v-btn block type="submit" :disabled="!password || logining" @click="verify">
{{ tt('Continue') }}
<v-progress-circular indeterminate size="22" class="ms-2" v-if="logining"></v-progress-circular>
</v-btn>
</v-col>
<v-col cols="12">
<router-link class="d-flex align-center justify-center" to="/login"
:class="{ 'disabled': logining }">
<v-icon class="icon-with-direction" :icon="mdiChevronLeft"/>
<span>{{ tt('Back to login page') }}</span>
</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="w-100 px-4 pb-4" max-width="500">
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<language-select-button :disabled="logining" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
<v-divider />
</v-col>
<v-col cols="12" class="text-center text-sm">
<span>Powered by </span>
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a>&nbsp;<span>{{ version }}</span>
</v-col>
</v-row>
</v-card-text>
</v-card>
</div>
</v-col>
</v-row>
<snack-bar ref="snackbar" />
</div>
</template>
<script setup lang="ts">
import SnackBar from '@/components/desktop/SnackBar.vue';
import { computed, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
import { useRootStore } from '@/stores/index.ts';
import { ThemeType } from '@/core/theme.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { KnownErrorCode } from '@/consts/api.ts';
import {
isUserVerifyEmailEnabled,
getOAuth2Provider,
getOIDCCustomDisplayNames
} from '@/lib/server_settings.ts';
import {
mdiChevronLeft
} from '@mdi/js';
type SnackBarType = InstanceType<typeof SnackBar>;
const props = defineProps<{
token?: string;
provider?: string;
platform?: string;
userName?: string;
error?: string;
}>();
const router = useRouter();
const theme = useTheme();
const { tt, getLocalizedOAuth2ProviderName, getLocalizedOAuth2LoginText } = useI18n();
const rootStore = useRootStore();
const {
version,
password,
logining,
doAfterLogin
} = useLoginPageBase('desktop');
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const oauth2ProviderDisplayName = computed<string>(() => getLocalizedOAuth2ProviderName(getOAuth2Provider(), getOIDCCustomDisplayNames()));
const oauth2LoginDisplayName = computed<string>(() => getLocalizedOAuth2LoginText(getOAuth2Provider(), getOIDCCustomDisplayNames()));
const inputProblemMessage = computed<string | null>(() => {
if (!password.value) {
return 'Password cannot be blank';
} else {
return null;
}
});
function verify(): void {
const problemMessage = inputProblemMessage.value;
if (problemMessage) {
snackbar.value?.showMessage(problemMessage);
return;
}
logining.value = true;
rootStore.authorizeOAuth2({
provider: props.provider || '',
password: password.value,
token: props.token || ''
}).then(authResponse => {
logining.value = false;
doAfterLogin(authResponse);
router.replace('/');
}).catch(error => {
logining.value = false;
if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
return;
}
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
if (!props.error && props.platform && props.token && !props.userName) {
logining.value = true;
rootStore.authorizeOAuth2({
provider: props.provider || '',
token: props.token || ''
}).then(authResponse => {
logining.value = false;
doAfterLogin(authResponse);
router.replace('/');
}).catch(error => {
logining.value = false;
if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
return;
}
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
</script>
src/views/mobile/LoginPage.vue
+51 -5
View File
@@ -9,7 +9,7 @@
<f7-block-footer>{{ tips }}</f7-block-footer>
</f7-list>
<f7-list form dividers class="margin-bottom-half">
<f7-list form dividers class="margin-bottom-half" v-if="isInternalAuthEnabled()">
<f7-list-input
type="text"
autocomplete="username"
@@ -47,8 +47,14 @@
</f7-list>
<f7-list class="margin-vertical-half">
<f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="tt('Log In')" @click="login"></f7-list-button>
<f7-block-footer>
<f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="tt('Log In')" @click="login" v-if="isInternalAuthEnabled()"></f7-list-button>
<f7-list-item class="login-divider display-flex align-items-center" v-if="isInternalAuthEnabled() && isOAuth2Enabled()">
<hr class="margin-inline-end-half" />
<small>{{ tt('or') }}</small>
<hr class="margin-inline-start-half" />
</f7-list-item>
<f7-list-button external :class="{ 'disabled': logining }" :href="oauth2LoginUrl" :text="oauth2LoginDisplayName" v-if="isOAuth2Enabled()"></f7-list-button>
<f7-block-footer v-if="isInternalAuthEnabled()">
<span>{{ tt('Don\'t have an account?') }}</span>&nbsp;
<f7-link :class="{'disabled': !isUserRegistrationEnabled()}" href="/signup" :text="tt('Create an account')"></f7-link>
</f7-block-footer>
@@ -176,7 +182,15 @@ import { useRootStore } from '@/stores/index.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { KnownErrorCode } from '@/consts/api.ts';
import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import {
isUserRegistrationEnabled,
isUserForgetPasswordEnabled,
isUserVerifyEmailEnabled,
isInternalAuthEnabled,
isOAuth2Enabled
} from '@/lib/server_settings.ts';
import { getDesktopVersionPath } from '@/lib/version.ts';
import { useI18nUIComponents, showLoading, hideLoading, isModalShowing } from '@/lib/ui/mobile.ts';
@@ -197,13 +211,16 @@ const {
backupCode,
tempToken,
twoFAVerifyType,
oauth2ClientSessionId,
logining,
verifying,
inputIsEmpty,
twoFAInputIsEmpty,
oauth2LoginUrl,
oauth2LoginDisplayName,
tips,
doAfterLogin
} = useLoginPageBase();
} = useLoginPageBase('mobile');
const forgetPasswordEmail = ref<string>('');
const resendVerifyEmail = ref<string>('');
@@ -389,4 +406,33 @@ function switch2FAVerifyType(): void {
twoFAVerifyType.value = 'passcode';
}
}
oauth2ClientSessionId.value = generateRandomUUID();
</script>
<style>
.login-divider > .item-content {
width: 100%;
min-height: 0;
> .item-inner {
padding-top: 0;
padding-bottom: 0;
min-height: 0;
> small {
opacity: 0.7;
}
> hr {display: block;
flex: 1 1 100%;
height: 0;
max-height: 0;
border-style: solid;
border-width: thin 0 0 0;
opacity: 0.12;
transition: inherit;
}
}
}
</style>