From f72763306da4a0e0f0147b674fe9d1374cb3cb1d Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 25 Jun 2023 00:25:43 +0800
Subject: [PATCH] code refactor

---
 src/components/desktop/Snackbar.vue           | 50 +++++++++++++++++++
 src/desktop-main.js                           |  6 +++
 src/views/desktop/ExchangeRatesPage.vue       | 20 ++------
 src/views/desktop/HomePage.vue                | 18 ++-----
 src/views/desktop/LoginPage.vue               | 26 +++-------
 src/views/desktop/MainLayout.vue              | 16 +-----
 .../user/settings/UserBasicSettingTab.vue     | 25 +++-------
 .../settings/UserDataManagementSettingTab.vue | 25 +++-------
 .../user/settings/UserSecuritySettingTab.vue  | 35 ++++---------
 .../settings/UserTwoFactorAuthSettingTab.vue  | 34 ++++---------
 10 files changed, 106 insertions(+), 149 deletions(-)
 create mode 100644 src/components/desktop/Snackbar.vue

diff --git a/src/components/desktop/Snackbar.vue b/src/components/desktop/Snackbar.vue
new file mode 100644
index 00000000..c1bbb993
--- /dev/null
+++ b/src/components/desktop/Snackbar.vue
@@ -0,0 +1,50 @@
+<template>
+    <v-snackbar v-model="showState">
+        {{ messageContent }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showState = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script>
+export default {
+    props: [
+        'show',
+        'message'
+    ],
+    emits: [
+        'update:show'
+    ],
+    expose: [
+        'showMessage',
+        'showError'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            showState: self.show,
+            messageContent: self.message,
+            resolve: null,
+            reject: null
+        }
+    },
+    watch: {
+        'showState': function (newValue) {
+            this.$emit('update:show', newValue);
+        }
+    },
+    methods: {
+        showMessage(message) {
+            this.showState = true;
+            this.messageContent = this.$t(message);
+        },
+        showError(error) {
+            this.showState = true;
+            this.messageContent = this.$tError(error.message || error);
+        }
+    }
+}
+</script>
diff --git a/src/desktop-main.js b/src/desktop-main.js
index 2d6418ff..c504ebc8 100644
--- a/src/desktop-main.js
+++ b/src/desktop-main.js
@@ -55,6 +55,7 @@ import {
 
 import AmountInput from '@/components/desktop/AmountInput.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import Snackbar from '@/components/desktop/Snackbar.vue';
 
 import '@/styles/desktop/template/base/libs/vuetify/_index.scss';
 import '@/styles/desktop/template/template/index.scss';
@@ -221,6 +222,8 @@ const vuetify = createVuetify({
                     'info': '#2196f3',
                     'warning': '#ff9500',
                     'error': '#ff3b30',
+                    'income': '#ff3b30',
+                    'expense': '#009688',
                     'on-primary': '#ffffff',
                     'on-success': '#ffffff',
                     'on-warning': '#ffffff',
@@ -269,6 +272,8 @@ const vuetify = createVuetify({
                     'info': '#2196f3',
                     'warning': '#ff9500',
                     'error': '#ff3b30',
+                    'income': '#ff3b30',
+                    'expense': '#009688',
                     'on-primary': '#ffffff',
                     'on-success': '#ffffff',
                     'on-warning': '#ffffff',
@@ -322,6 +327,7 @@ app.component('VueDatePicker', VueDatePicker);
 
 app.component('AmountInput', AmountInput);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('Snackbar', Snackbar);
 
 app.config.globalProperties.$version = getVersion();
 app.config.globalProperties.$buildTime = getBuildTime();
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 6bbf8fe6..ecb4232b 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -76,13 +76,7 @@
         </v-col>
     </v-row>
 
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -105,8 +99,6 @@ export default {
             baseCurrency: userStore.currentUserDefaultCurrency,
             baseAmount: '1',
             loading: false,
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 refresh: mdiRefresh
             }
@@ -157,7 +149,7 @@ export default {
             }
         }
 
-        this.showSnackbarMessage(this.$t('There is no exchange rates data for your default currency'));
+        this.$refs.snackbar.showMessage('There is no exchange rates data for your default currency');
     },
     methods: {
         update() {
@@ -173,12 +165,12 @@ export default {
                 force: true
             }).then(() => {
                 self.loading = false;
-                self.showSnackbarMessage(self.$t('Exchange rates data has been updated'));
+                self.$refs.snackbar.showMessage('Exchange rates data has been updated');
             }).catch(error => {
                 self.loading = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -221,10 +213,6 @@ export default {
                 const trimmedRateStr = rateStr.substring(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
                 return appendThousandsSeparator(trimmedRateStr);
             }
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 }
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 63413334..274de21e 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -97,13 +97,7 @@
         </v-col>
     </v-row>
 
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -147,8 +141,6 @@ export default {
             loadingOverview: true,
             todayFirstUnixTime: getTodayFirstUnixTime(),
             todayLastUnixTime: getTodayLastUnixTime(),
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 refresh: mdiRefresh,
                 eye: mdiEyeOutline,
@@ -279,13 +271,13 @@ export default {
                 self.loadingOverview = false;
 
                 if (force) {
-                    self.showSnackbarMessage(self.$t('Data has been updated'));
+                    self.$refs.snackbar.showMessage('Data has been updated');
                 }
             }).catch(error => {
                 self.loadingOverview = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -295,10 +287,6 @@ export default {
             }
 
             return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 }
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index cded0737..7ccbc534 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -117,13 +117,7 @@
             </v-card-text>
         </v-card>
 
-        <v-snackbar v-model="showSnackbar">
-            {{ snackbarMessage }}
-
-            <template #actions>
-                <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-            </template>
-        </v-snackbar>
+        <snackbar ref="snackbar" />
 
         <v-overlay class="justify-center align-center" :persistent="true" v-model="logining">
             <v-progress-circular indeterminate></v-progress-circular>
@@ -163,8 +157,6 @@ export default {
             verifying: false,
             show2faInput: false,
             twoFAVerifyType: 'passcode',
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 eye: mdiEyeOutline,
                 eyeSlash: mdiEyeOffOutline,
@@ -211,12 +203,12 @@ export default {
             const self = this;
 
             if (!self.username) {
-                self.showSnackbarMessage(self.$t('Username cannot be empty'));
+                self.$refs.snackbar.showMessage('Username cannot be empty');
                 return;
             }
 
             if (!self.password) {
-                self.showSnackbarMessage(self.$t('Password cannot be empty'));
+                self.$refs.snackbar.showMessage('Password cannot be empty');
                 return;
             }
 
@@ -266,7 +258,7 @@ export default {
                 self.logining = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -278,10 +270,10 @@ export default {
             }
 
             if (this.twoFAVerifyType === 'passcode' && !this.passcode) {
-                self.showSnackbarMessage(self.$t('Passcode cannot be empty'));
+                self.$refs.snackbar.showMessage('Passcode cannot be empty');
                 return;
             } else if (this.twoFAVerifyType === 'backupcode' && !this.backupCode) {
-                self.showSnackbarMessage(self.$t('Backup code cannot be empty'));
+                self.$refs.snackbar.showMessage('Backup code cannot be empty');
                 return;
             }
 
@@ -308,7 +300,7 @@ export default {
                 self.verifying = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -322,10 +314,6 @@ export default {
         changeLanguage(locale) {
             const localeDefaultSettings = this.$locale.setLanguage(locale);
             this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 }
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index 442b08a7..9bbe546f 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -185,13 +185,7 @@
             <v-progress-circular indeterminate></v-progress-circular>
         </v-overlay>
 
-        <v-snackbar v-model="showSnackbar">
-            {{ snackbarMessage }}
-
-            <template #actions>
-                <v-btn color="red" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-            </template>
-        </v-snackbar>
+        <snackbar ref="snackbar" />
     </div>
 </template>
 
@@ -236,8 +230,6 @@ export default {
             showVerticalOverlayMenu: false,
             showLoading: false,
             showMobileQrCode: false,
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 menu: mdiMenu,
                 overview: mdiHomeOutline,
@@ -321,13 +313,9 @@ export default {
                 self.showLoading = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 }
diff --git a/src/views/desktop/user/settings/UserBasicSettingTab.vue b/src/views/desktop/user/settings/UserBasicSettingTab.vue
index a8feec4c..719b8771 100644
--- a/src/views/desktop/user/settings/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/UserBasicSettingTab.vue
@@ -170,14 +170,7 @@
     </v-row>
 
     <confirm-dialog ref="confirmDialog"/>
-
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -224,9 +217,7 @@ export default {
                 shortTimeFormat: 0
             },
             loading: true,
-            saving: false,
-            showSnackbar: false,
-            snackbarMessage: ''
+            saving: false
         };
     },
     computed: {
@@ -380,7 +371,7 @@ export default {
             self.loading = false;
 
             if (!error.processed) {
-                self.showSnackbarMessage(self.$tError(error.message || error));
+                self.$refs.snackbar.showError(error);
             }
         });
     },
@@ -391,7 +382,7 @@ export default {
             const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
 
             if (problemMessage) {
-                self.showSnackbarMessage(self.$t(problemMessage));
+                self.$refs.snackbar.showMessage(problemMessage);
                 return;
             }
 
@@ -409,12 +400,12 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                self.showSnackbarMessage(self.$t('Your profile has been successfully updated'));
+                self.$refs.snackbar.showMessage('Your profile has been successfully updated');
             }).catch(error => {
                 self.saving = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -445,10 +436,6 @@ export default {
             this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
             this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
             this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 };
diff --git a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
index 475eabb1..25083755 100644
--- a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
@@ -137,14 +137,7 @@
     </v-row>
 
     <confirm-dialog ref="confirmDialog"/>
-
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -176,8 +169,6 @@ export default {
             currentPasswordForClearData: '',
             isCurrentPasswordVisible: false,
             clearingData: false,
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 refresh: mdiRefresh,
                 transactions: mdiListBoxOutline,
@@ -237,7 +228,7 @@ export default {
                 self.loadingDataStatistics = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -257,7 +248,7 @@ export default {
                 self.exportingData = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -265,7 +256,7 @@ export default {
             const self = this;
 
             if (!self.currentPasswordForClearData) {
-                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                self.$refs.snackbar.showMessage('Current password cannot be empty');
                 return;
             }
 
@@ -282,20 +273,16 @@ export default {
                 }).then(() => {
                     self.clearingData = false;
 
-                    self.showSnackbarMessage(self.$t('All user data has been cleared'));
+                    self.$refs.snackbar.showMessage('All user data has been cleared');
                     self.reloadUserDataStatistics();
                 }).catch(error => {
                     self.clearingData = false;
 
                     if (!error.processed) {
-                        self.showSnackbarMessage(self.$tError(error.message || error));
+                        self.$refs.snackbar.showError(error);
                     }
                 });
             });
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 }
diff --git a/src/views/desktop/user/settings/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
index 49d233a1..dcf6ef0b 100644
--- a/src/views/desktop/user/settings/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
@@ -119,14 +119,7 @@
     </v-row>
 
     <confirm-dialog ref="confirmDialog"/>
-
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -162,8 +155,6 @@ export default {
             isConfirmPasswordVisible: false,
             updatingPassword: false,
             loadingSession: true,
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 refresh: mdiRefresh,
                 eye: mdiEyeOutline,
@@ -223,7 +214,7 @@ export default {
             self.loadingSession = false;
 
             if (!error.processed) {
-                self.showSnackbarMessage(self.$tError(error.message || error));
+                self.$refs.snackbar.showError(error);
             }
         });
     },
@@ -234,7 +225,7 @@ export default {
             const problemMessage = self.inputProblemMessage;
 
             if (problemMessage) {
-                self.showSnackbarMessage(self.$t(problemMessage));
+                self.$refs.snackbar.showMessage(problemMessage);
                 return;
             }
 
@@ -260,13 +251,13 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                self.showSnackbarMessage(self.$t('Your profile has been successfully updated'));
+                self.$refs.snackbar.showMessage('Your profile has been successfully updated');
             }).catch(error => {
                 self.updatingPassword = false;
                 self.currentPassword = '';
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -277,9 +268,9 @@ export default {
 
             self.tokensStore.getAllTokens().then(tokens => {
                 if (isEquals(self.tokens, tokens)) {
-                    self.showSnackbarMessage(this.$t('Session list is up to date'));
+                    self.$refs.snackbar.showMessage('Session list is up to date');
                 } else {
-                    self.showSnackbarMessage(this.$t('Session list has been updated'));
+                    self.$refs.snackbar.showMessage('Session list has been updated');
                 }
 
                 self.tokens = tokens;
@@ -288,7 +279,7 @@ export default {
                 self.loadingSession = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -312,7 +303,7 @@ export default {
                     self.loadingSession = false;
 
                     if (!error.processed) {
-                        self.showSnackbarMessage(self.$tError(error.message || error));
+                        self.$refs.snackbar.showError(error);
                     }
                 });
             });
@@ -336,12 +327,12 @@ export default {
                         }
                     }
 
-                    self.showSnackbarMessage(this.$t('You have logged out all other sessions'));
+                    self.$refs.snackbar.showMessage('You have logged out all other sessions');
                 }).catch(error => {
                     self.loadingSession = false
 
                     if (!error.processed) {
-                        self.showSnackbarMessage(self.$tError(error.message || error));
+                        self.$refs.snackbar.showError(error);
                     }
                 });
             });
@@ -364,10 +355,6 @@ export default {
             } else {
                 return mdiDevices;
             }
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 };
diff --git a/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
index 8a7fce53..509edbb4 100644
--- a/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
@@ -100,13 +100,7 @@
         </v-col>
     </v-row>
 
-    <v-snackbar v-model="showSnackbar">
-        {{ snackbarMessage }}
-
-        <template #actions>
-            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
-        </template>
-    </v-snackbar>
+    <snackbar ref="snackbar" />
 </template>
 
 <script>
@@ -137,8 +131,6 @@ export default {
             disabling: false,
             regenerating: false,
             clipboardHolder: null,
-            showSnackbar: false,
-            snackbarMessage: '',
             icons: {
                 eye: mdiEyeOutline,
                 eyeSlash: mdiEyeOffOutline,
@@ -161,7 +153,7 @@ export default {
             self.loading = false;
 
             if (!error.processed) {
-                self.showSnackbarMessage(self.$tError(error.message || error));
+                self.$refs.snackbar.showError(error);
             }
         });
     },
@@ -191,7 +183,7 @@ export default {
                 self.enabling = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -199,7 +191,7 @@ export default {
             const self = this;
 
             if (!self.currentPasscode) {
-                self.showSnackbarMessage(self.$t('Passcode cannot be empty'));
+                self.$refs.snackbar.showMessage('Passcode cannot be empty');
                 return;
             }
 
@@ -236,7 +228,7 @@ export default {
                 self.enableConfirming = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -244,7 +236,7 @@ export default {
             const self = this;
 
             if (!self.currentPassword) {
-                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                self.$refs.snackbar.showMessage('Current password cannot be empty');
                 return;
             }
 
@@ -265,12 +257,12 @@ export default {
                 self.disabling = false;
 
                 self.status = false;
-                self.showSnackbarMessage(self.$t('Two factor authentication has been disabled'));
+                self.$refs.snackbar.showMessage('Two factor authentication has been disabled');
             }).catch(error => {
                 self.disabling = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -278,7 +270,7 @@ export default {
             const self = this;
 
             if (!self.currentPassword) {
-                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                self.$refs.snackbar.showMessage('Current password cannot be empty');
                 return;
             }
 
@@ -307,7 +299,7 @@ export default {
                 self.regenerating = false;
 
                 if (!error.processed) {
-                    self.showSnackbarMessage(self.$tError(error.message || error));
+                    self.$refs.snackbar.showError(error);
                 }
             });
         },
@@ -323,14 +315,10 @@ export default {
                     el: '#copy-to-clipboard-icon',
                     text: self.currentBackupCode,
                     successCallback: function () {
-                        self.showSnackbarMessage(self.$t('Backup codes copied'));
+                        self.$refs.snackbar.showMessage('Backup codes copied');
                     }
                 });
             }
-        },
-        showSnackbarMessage(message) {
-            this.showSnackbar = true;
-            this.snackbarMessage = message;
         }
     }
 };