From 0e946a4b3b96aeb7aad9ab385f0229beadd3a889 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Mon, 5 Aug 2024 23:59:57 +0800 Subject: [PATCH] show notification in frontend --- src/DesktopApp.vue | 41 +++++++++++++++++++++++++++++--- src/MobileApp.vue | 41 ++++++++++++++++++++++++++++++-- src/desktop-main.js | 4 ++++ src/mobile-main.js | 3 +++ src/stores/index.js | 8 +++++++ src/styles/mobile/global.css | 1 + src/views/desktop/LoginPage.vue | 8 +++++++ src/views/desktop/SignupPage.vue | 4 ++++ src/views/desktop/UnlockPage.vue | 8 +++++++ src/views/mobile/LoginPage.vue | 8 +++++++ src/views/mobile/SignupPage.vue | 4 ++++ src/views/mobile/UnlockPage.vue | 8 +++++++ 12 files changed, 133 insertions(+), 5 deletions(-) diff --git a/src/DesktopApp.vue b/src/DesktopApp.vue index 59bb68a0..1d59adcf 100644 --- a/src/DesktopApp.vue +++ b/src/DesktopApp.vue @@ -3,6 +3,16 @@ + +
+ + {{ $t('global.app.title') }} +
+
+ {{ currentNotificationContent }} +
+ + + diff --git a/src/MobileApp.vue b/src/MobileApp.vue index d959366f..eed463ce 100644 --- a/src/MobileApp.vue +++ b/src/MobileApp.vue @@ -10,11 +10,13 @@ import { f7ready } from 'framework7-vue'; import routes from './router/mobile.js'; import { mapStores } from 'pinia'; +import { useRootStore } from '@/stores/index.js'; import { useSettingsStore } from '@/stores/setting.js'; import { useUserStore } from '@/stores/user.js'; import { useTokensStore } from '@/stores/token.js'; import { useExchangeRatesStore } from '@/stores/exchangeRates.js'; +import assetConstants from '@/consts/asset.js'; import { isProduction } from '@/lib/version.js'; import { getTheme, isEnableAnimate } from '@/lib/settings.js'; import { loadMapAssets } from '@/lib/map/index.js'; @@ -35,6 +37,7 @@ export default { return { isProduction: isProduction(), devCookiePath: isProduction() ? '' : '/dev/cookies', + notification: null, f7params: { name: 'ezBookkeeping', theme: 'ios', @@ -94,7 +97,37 @@ export default { } }, computed: { - ...mapStores(useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore), + ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore), + currentNotificationContent() { + return this.rootStore.currentNotification; + } + }, + watch: { + currentNotificationContent: function (newValue) { + const self = this; + + if (self.notification) { + self.notification.close(); + self.notification.destroy(); + self.notification = null; + } + + if (newValue) { + f7ready((f7) => { + self.notification = f7.notification.create({ + icon: `logo`, + title: self.$t('global.app.title'), + text: newValue, + closeOnClick: true, + on: { + close() { + self.rootStore.setNotificationContent(null); + } + } + }).open(); + }); + } + } }, created() { const self = this; @@ -105,7 +138,7 @@ export default { setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor); if (self.$user.isUserLogined()) { - if (!self.settingsStore.appSettings.applicationLock) { + if (!self.settingsStore.appSettings.applicationLock || self.$user.isUserUnlocked()) { // refresh token if user is logined self.tokensStore.refreshTokenAndRevokeOldToken().then(response => { if (response.user) { @@ -113,6 +146,10 @@ export default { self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings); setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor); + + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } } }); diff --git a/src/desktop-main.js b/src/desktop-main.js index faef0722..f24c709f 100644 --- a/src/desktop-main.js +++ b/src/desktop-main.js @@ -306,6 +306,8 @@ const vuetify = createVuetify({ 'on-background': '#413935', 'surface': '#fff', 'on-surface': '#413935', + 'notification-background': '#ffffff', + 'on-notification-background': '#000', 'grey-50': '#fafafa', 'grey-100': '#f0f2f8', 'grey-200': '#eeeeee', @@ -374,6 +376,8 @@ const vuetify = createVuetify({ 'on-background': '#fcf0e3', 'surface': '#1c1c1d', 'on-surface': '#fcf0e3', + 'notification-background': '#1e1e1e', + 'on-notification-background': '#fff', 'grey-50': '#212121', 'grey-100': '#424242', 'grey-200': '#616161', diff --git a/src/mobile-main.js b/src/mobile-main.js index 56e59c22..f9b0b3c0 100644 --- a/src/mobile-main.js +++ b/src/mobile-main.js @@ -9,6 +9,7 @@ import Framework7LoginScreen from 'framework7/components/login-screen'; import Framework7Popover from 'framework7/components/popover'; import Framework7Actions from 'framework7/components/actions'; import Framework7Sheet from 'framework7/components/sheet'; +import Framework7Notification from 'framework7/components/notification'; import Framework7Toast from 'framework7/components/toast'; import Framework7Preloader from 'framework7/components/preloader'; import Framework7Progressbar from 'framework7/components/progressbar'; @@ -42,6 +43,7 @@ import 'framework7/components/login-screen/css'; import 'framework7/components/popover/css'; import 'framework7/components/actions/css'; import 'framework7/components/sheet/css'; +import 'framework7/components/notification/css'; import 'framework7/components/toast/css'; import 'framework7/components/preloader/css'; import 'framework7/components/progressbar/css'; @@ -130,6 +132,7 @@ Framework7.use([ Framework7Popover, Framework7Actions, Framework7Sheet, + Framework7Notification, Framework7Toast, Framework7Preloader, Framework7Progressbar, diff --git a/src/stores/index.js b/src/stores/index.js index ab9c3ebe..d5f9fafb 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -17,6 +17,9 @@ import logger from '@/lib/logger.js'; import { isObject, isString } from '@/lib/common.js'; export const useRootStore = defineStore('root', { + state: () => ({ + currentNotification: null + }), actions: { resetAllStates(resetUserInfoAndSettings) { if (resetUserInfoAndSettings) { @@ -24,6 +27,8 @@ export const useRootStore = defineStore('root', { exchangeRatesStore.resetLatestExchangeRates(); } + this.setNotificationContent(null); + const statisticsStore = useStatisticsStore(); statisticsStore.resetTransactionStatistics(); @@ -511,6 +516,9 @@ export const useRootStore = defineStore('root', { } }); }); + }, + setNotificationContent(content) { + this.currentNotification = content; } } }); diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css index f66fc5d3..70420a74 100644 --- a/src/styles/mobile/global.css +++ b/src/styles/mobile/global.css @@ -62,6 +62,7 @@ input[type=number] { --f7-color-gray-rgb: 142, 142, 147; --f7-color-gray-shade: #79797f; --f7-color-gray-tint: #a3a3a7; + --f7-notification-title-text-transform: unset; } .color-gray { diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue index 6da1825d..a999ad5e 100644 --- a/src/views/desktop/LoginPage.vue +++ b/src/views/desktop/LoginPage.vue @@ -306,6 +306,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (authResponse.notificationContent) { + self.rootStore.setNotificationContent(authResponse.notificationContent); + } + self.$router.replace('/'); }).catch(error => { self.logining = false; @@ -355,6 +359,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (authResponse.notificationContent) { + self.rootStore.setNotificationContent(authResponse.notificationContent); + } + self.$router.replace('/'); }).catch(error => { self.verifying = false; diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue index 64aa12ca..3b666eda 100644 --- a/src/views/desktop/SignupPage.vue +++ b/src/views/desktop/SignupPage.vue @@ -463,6 +463,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } + self.submitting = false; if (self.usePresetCategories && !response.presetCategoriesSaved) { diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue index 4190ff8f..61a6152f 100644 --- a/src/views/desktop/UnlockPage.vue +++ b/src/views/desktop/UnlockPage.vue @@ -188,6 +188,10 @@ export default { setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor); } + + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } }); if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) { @@ -233,6 +237,10 @@ export default { setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor); } + + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } }); if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) { diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue index d33dc14d..515032fa 100644 --- a/src/views/mobile/LoginPage.vue +++ b/src/views/mobile/LoginPage.vue @@ -315,6 +315,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (authResponse.notificationContent) { + self.rootStore.setNotificationContent(authResponse.notificationContent); + } + router.refreshPage(); }).catch(error => { self.logining = false; @@ -378,6 +382,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (authResponse.notificationContent) { + self.rootStore.setNotificationContent(authResponse.notificationContent); + } + self.show2faSheet = false; router.refreshPage(); }).catch(error => { diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue index 96d247ee..fc0afc19 100644 --- a/src/views/mobile/SignupPage.vue +++ b/src/views/mobile/SignupPage.vue @@ -333,6 +333,10 @@ export default { self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false }); } + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } + self.submitting = false; self.$hideLoading(); diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue index ee5f69da..42cbd30d 100644 --- a/src/views/mobile/UnlockPage.vue +++ b/src/views/mobile/UnlockPage.vue @@ -141,6 +141,10 @@ export default { setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor); } + + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } }); if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) { @@ -191,6 +195,10 @@ export default { setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor); } + + if (response.notificationContent) { + self.rootStore.setNotificationContent(response.notificationContent); + } }); if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {