migrate forget password / reset password / verify email page to composition API and typescript

src/views/desktop/ForgetPasswordPage.vue

@@ -2,8 +2,8 @@
     <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="ezBookkeepingLogoPath" />
+                <img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
-                <h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
+                <h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
             </div>
         </router-link>
         <v-row no-gutters class="auth-wrapper">
@@ -22,8 +22,8 @@
                 <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">{{ $t('Forget Password?') }}</h4>
+                            <h4 class="text-h4 mb-2">{{ tt('Forget Password?') }}</h4>
-                            <p class="mb-0">{{ $t('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</p>
+                            <p class="mb-0">{{ tt('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</p>
                         </v-card-text>
 
                         <v-card-text class="pb-0 mb-6">
@@ -35,8 +35,8 @@
                                             autocomplete="email"
                                             autofocus="autofocus"
                                             :disabled="requesting"
-                                            :label="$t('E-mail')"
+                                            :label="tt('E-mail')"
-                                            :placeholder="$t('Your email address')"
+                                            :placeholder="tt('Your email address')"
                                             v-model="email"
                                             @keyup.enter="requestResetPassword"
                                         />
@@ -44,7 +44,7 @@
 
                                     <v-col cols="12">
                                         <v-btn block type="submit" :disabled="!email || requesting" @click="requestResetPassword">
-                                            {{ $t('Send Reset Link') }}
+                                            {{ tt('Send Reset Link') }}
                                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="requesting"></v-progress-circular>
                                         </v-btn>
                                     </v-col>
@@ -53,7 +53,7 @@
                                         <router-link class="d-flex align-center justify-center" to="/login"
                                                      :class="{ 'disabled': requesting }">
                                             <v-icon :icon="icons.left"/>
-                                            <span>{{ $t('Back to login page') }}</span>
+                                            <span>{{ tt('Back to login page') }}</span>
                                         </router-link>
                                     </v-col>
                                 </v-row>
@@ -105,83 +105,77 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
+import { getVersion } from '@/lib/version.ts';
 
 import {
     mdiChevronLeft,
 } from '@mdi/js';
 
-export default {
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
-    data() {
+type SnackBarType = InstanceType<typeof SnackBar>;
-        return {
+
-            email: '',
-            requesting: false,
-            icons: {
-                left: mdiChevronLeft
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore),
-        ezBookkeepingLogoPath() {
-            return APPLICATION_LOGO_PATH;
-        },
-        version() {
-            return 'v' + this.$version;
-        },
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        currentLanguageName() {
-            return this.$locale.getCurrentLanguageDisplayName();
-        }
-    },
-    setup() {
 const theme = useTheme();
 
-        return {
+const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
-            globalTheme: theme
-        };
-    },
-    methods: {
-        requestResetPassword() {
-            const self = this;
 
-            if (!self.email) {
+const rootStore = useRootStore();
-                self.$refs.snackbar.showMessage('Email address cannot be blank');
+const settingsStore = useSettingsStore();
+
+const icons = {
+    left: mdiChevronLeft
+};
+
+const version = `v${getVersion()}`;
+
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const email = ref<string>('');
+const requesting = ref<boolean>(false);
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
+
+function requestResetPassword(): void {
+    if (!email.value) {
+        snackbar.value?.showMessage('Email address cannot be blank');
         return;
     }
 
-            self.requesting = true;
+    requesting.value = true;
 
-            self.rootStore.requestResetPassword({
+    rootStore.requestResetPassword({
-                email: self.email
+        email: email.value
     }).then(() => {
-                self.requesting = false;
+        requesting.value = false;
-                self.$refs.snackbar.showMessage('Password reset email has been sent');
+        snackbar.value?.showMessage('Password reset email has been sent');
     }).catch(error => {
-                self.requesting = false;
+        requesting.value = false;
 
         if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-        },
-        changeLanguage(locale) {
-            const localeDefaultSettings = this.$locale.setLanguage(locale);
-            this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-        }
 }
+
+function changeLanguage(locale: string): void {
+    const localeDefaultSettings = setLanguage(locale);
+    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 }
 </script>

src/views/desktop/ResetPasswordPage.vue

@@ -2,8 +2,8 @@
     <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="ezBookkeepingLogoPath" />
+                <img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
-                <h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
+                <h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
             </div>
         </router-link>
         <v-row no-gutters class="auth-wrapper">
@@ -22,8 +22,8 @@
                 <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">{{ $t('Reset Password') }}</h4>
+                            <h4 class="text-h4 mb-2">{{ tt('Reset Password') }}</h4>
-                            <p class="mb-0">{{ $t('Please enter your email address again, and input the new password.') }}</p>
+                            <p class="mb-0">{{ tt('Please re-enter your email address, and then enter a new password.') }}</p>
                         </v-card-text>
 
                         <v-card-text class="pb-0 mb-6">
@@ -35,10 +35,10 @@
                                             autocomplete="email"
                                             autofocus="autofocus"
                                             :disabled="updating"
-                                            :label="$t('E-mail')"
+                                            :label="tt('E-mail')"
-                                            :placeholder="$t('Your email address')"
+                                            :placeholder="tt('Your email address')"
                                             v-model="email"
-                                            @keyup.enter="$refs.passwordInput.focus()"
+                                            @keyup.enter="passwordInput?.focus()"
                                         />
                                     </v-col>
 
@@ -48,10 +48,10 @@
                                             ref="passwordInput"
                                             type="password"
                                             :disabled="updating"
-                                            :label="$t('Password')"
+                                            :label="tt('Password')"
-                                            :placeholder="$t('Your password')"
+                                            :placeholder="tt('Your password')"
                                             v-model="newPassword"
-                                            @keyup.enter="$refs.confirmPasswordInput.focus()"
+                                            @keyup.enter="confirmPasswordInput?.focus()"
                                         />
                                     </v-col>
 
@@ -60,8 +60,8 @@
                                             ref="confirmPasswordInput"
                                             type="password"
                                             :disabled="updating"
-                                            :label="$t('Confirm Password')"
+                                            :label="tt('Confirm Password')"
-                                            :placeholder="$t('Re-enter the password')"
+                                            :placeholder="tt('Re-enter the password')"
                                             v-model="confirmPassword"
                                             @keyup.enter="resetPassword"
                                         />
@@ -69,7 +69,7 @@
 
                                     <v-col cols="12">
                                         <v-btn block :disabled="!email || !newPassword || !confirmPassword || updating" @click="resetPassword">
-                                            {{ $t('Update Password') }}
+                                            {{ tt('Update Password') }}
                                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="updating"></v-progress-circular>
                                         </v-btn>
                                     </v-col>
@@ -78,7 +78,7 @@
                                         <router-link class="d-flex align-center justify-center" to="/login"
                                                      :class="{ 'disabled': updating }">
                                             <v-icon :icon="icons.left"/>
-                                            <span>{{ $t('Back to login page') }}</span>
+                                            <span>{{ tt('Back to login page') }}</span>
                                         </router-link>
                                     </v-col>
                                 </v-row>
@@ -130,116 +130,119 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { VTextField } from 'vuetify/components/VTextField';
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
+import { getVersion } from '@/lib/version.ts';
 
 import {
     mdiChevronLeft
 } from '@mdi/js';
 
-export default {
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
-    props: [
+type SnackBarType = InstanceType<typeof SnackBar>;
-        'token'
+
-    ],
+const props = defineProps<{
-    data() {
+    token: string;
-        return {
+}>();
-            email: '',
+
-            newPassword: '',
+const router = useRouter();
-            confirmPassword: '',
+const theme = useTheme();
-            updating: false,
+
-            passwordChanged: false,
+const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
-            icons: {
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+
+const icons = {
     left: mdiChevronLeft
-            }
 };
-    },
+
-    computed: {
+const version = `v${getVersion()}`;
-        ...mapStores(useRootStore, useSettingsStore),
+
-        inputProblemMessage() {
+const passwordInput = useTemplateRef<VTextField>('passwordInput');
-            if (!this.email) {
+const confirmPasswordInput = useTemplateRef<VTextField>('confirmPasswordInput');
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const email = ref<string>('');
+const newPassword = ref<string>('');
+const confirmPassword = ref<string>('');
+const updating = ref<boolean>(false);
+const passwordChanged = ref<boolean>(false);
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
+
+const inputProblemMessage = computed<string | null>(() => {
+    if (!email.value) {
         return 'Email address cannot be blank';
-            } else if (!this.newPassword && !this.confirmPassword) {
+    } else if (!newPassword.value && !confirmPassword.value) {
         return 'Nothing has been modified';
-            } else if (!this.newPassword && this.confirmPassword) {
+    } else if (!newPassword.value && confirmPassword.value) {
         return 'New password cannot be blank';
-            } else if (this.newPassword && !this.confirmPassword) {
+    } else if (newPassword.value && !confirmPassword.value) {
         return 'Password confirmation cannot be blank';
-            } else if (this.newPassword && this.confirmPassword && this.newPassword !== this.confirmPassword) {
+    } else if (newPassword.value && confirmPassword.value && newPassword.value !== confirmPassword.value) {
         return 'Password and password confirmation do not match';
     } else {
         return null;
     }
-        },
+});
-        ezBookkeepingLogoPath() {
+
-            return APPLICATION_LOGO_PATH;
+function changeLanguage(locale: string): void {
-        },
+    const localeDefaultSettings = setLanguage(locale);
-        version() {
+    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-            return 'v' + this.$version;
-        },
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        currentLanguageName() {
-            return this.$locale.getCurrentLanguageDisplayName();
 }
-    },
-    setup() {
-        const theme = useTheme();
 
-        return {
+function onSnackbarShowStateChanged(newValue: boolean): void {
-            globalTheme: theme
+    if (!newValue && passwordChanged.value) {
-        };
+        router.replace('/login');
-    },
+    }
-    methods: {
+}
-        resetPassword() {
-            const self = this;
-            self.passwordChanged = false;
 
-            const problemMessage = self.inputProblemMessage;
+function resetPassword(): void  {
+    passwordChanged.value = false;
+
+    const problemMessage = inputProblemMessage.value;
 
     if (problemMessage) {
-                self.$refs.snackbar.showMessage(problemMessage);
+        snackbar.value?.showMessage(problemMessage);
         return;
     }
 
-            self.updating = true;
+    updating.value = true;
 
-            self.rootStore.resetPassword({
+    rootStore.resetPassword({
-                token: self.token,
+        token: props.token,
-                email: self.email,
+        email: email.value,
-                password: self.newPassword
+        password: newPassword.value
     }).then(() => {
-                self.updating = false;
+        updating.value = false;
-                self.passwordChanged = true;
+        passwordChanged.value = true;
-                self.$refs.snackbar.showMessage('Password has been updated');
+        snackbar.value?.showMessage('Password has been updated');
     }).catch(error => {
-                self.updating = false;
+        updating.value = false;
-                self.passwordChanged = false;
+        passwordChanged.value = false;
 
         if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-        },
-        onSnackbarShowStateChanged(newValue) {
-            if (!newValue && this.passwordChanged) {
-                this.$router.replace('/login');
-            }
-        },
-        changeLanguage(locale) {
-            const localeDefaultSettings = this.$locale.setLanguage(locale);
-            this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-        }
-    }
 }
 </script>

src/views/desktop/VerifyEmailPage.vue

@@ -2,8 +2,8 @@
     <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="ezBookkeepingLogoPath" />
+                <img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
-                <h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
+                <h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
             </div>
         </router-link>
         <v-row no-gutters class="auth-wrapper">
@@ -22,32 +22,32 @@
                 <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">{{ $t('Verify your email') }}</h4>
+                            <h4 class="text-h4 mb-2">{{ tt('Verify your email') }}</h4>
-                            <p class="mb-0" v-if="token && loading">{{ $t('Verifying...') }}</p>
+                            <p class="mb-0" v-if="token && loading">{{ tt('Verifying...') }}</p>
-                            <p class="mb-0" v-if="token && verified">{{ $t('Email address is verified') }}</p>
+                            <p class="mb-0" v-if="token && verified">{{ tt('Email address is verified') }}</p>
                             <p class="mb-0" v-if="token && !verified && errorMessage">{{ errorMessage }}</p>
-                            <p class="mb-0" v-if="!token && !email">{{ $t('Parameter Invalid') }}</p>
+                            <p class="mb-0" v-if="!token && !email">{{ tt('Parameter Invalid') }}</p>
-                            <p class="mb-0" v-if="!token && email">{{ $t(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: email }) }}</p>
+                            <p class="mb-0" v-if="!token && email">{{ tt(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: email }) }}</p>
                         </v-card-text>
 
                         <v-card-text class="pb-0 mb-6">
                             <v-form>
                                 <v-row>
-                                    <v-col cols="12" v-if="!loading && !token && email && isUserVerifyEmailEnabled">
+                                    <v-col cols="12" v-if="!loading && !token && email && isUserVerifyEmailEnabled()">
                                         <v-text-field
                                             autocomplete="password"
                                             type="password"
                                             :disabled="loading || resending"
-                                            :label="$t('Password')"
+                                            :label="tt('Password')"
-                                            :placeholder="$t('Your password')"
+                                            :placeholder="tt('Your password')"
                                             v-model="password"
                                             @keyup.enter="resendEmail"
                                         />
                                     </v-col>
 
-                                    <v-col cols="12" v-if="!loading && !token && email && isUserVerifyEmailEnabled">
+                                    <v-col cols="12" v-if="!loading && !token && email && isUserVerifyEmailEnabled()">
                                         <v-btn block type="submit" :disabled="loading || resending || !password" @click="resendEmail">
-                                            {{ $t('Resend Validation Email') }}
+                                            {{ tt('Resend Validation Email') }}
                                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="resending"></v-progress-circular>
                                         </v-btn>
                                     </v-col>
@@ -56,8 +56,8 @@
                                         <router-link class="d-flex align-center justify-center" :to="verified ? '/' : '/login'"
                                                      :class="{ 'disabled': loading || resending }">
                                             <v-icon :icon="icons.left"/>
-                                            <span v-if="!verified">{{ $t('Back to login page') }}</span>
+                                            <span v-if="!verified">{{ tt('Back to login page') }}</span>
-                                            <span v-else-if="verified">{{ $t('Back to home page') }}</span>
+                                            <span v-else-if="verified">{{ tt('Back to home page') }}</span>
                                         </router-link>
                                     </v-col>
                                 </v-row>
@@ -109,10 +109,17 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
 
@@ -120,114 +127,103 @@ import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
 import { isUserLogined } from '@/lib/userstate.ts';
+import { getVersion } from '@/lib/version.ts';
 
 import {
     mdiChevronLeft
 } from '@mdi/js';
 
-export default {
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
-    props: [
+type SnackBarType = InstanceType<typeof SnackBar>;
-        'email',
+
-        'token',
+const props = defineProps<{
-        'hasValidEmailVerifyToken'
+    email: string;
-    ],
+    token: string;
-    data() {
+    hasValidEmailVerifyToken: boolean;
-        return {
+}>();
-            password: '',
+
-            loading: true,
+const router = useRouter();
-            resending: false,
-            verified: false,
-            errorMessage: '',
-            icons: {
-                left: mdiChevronLeft
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore),
-        ezBookkeepingLogoPath() {
-            return APPLICATION_LOGO_PATH;
-        },
-        version() {
-            return 'v' + this.$version;
-        },
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        currentLanguageName() {
-            return this.$locale.getCurrentLanguageDisplayName();
-        },
-        isUserVerifyEmailEnabled() {
-            return isUserVerifyEmailEnabled();
-        }
-    },
-    setup() {
 const theme = useTheme();
 
-        return {
+const { tt, te, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
-            globalTheme: theme
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+
+const icons = {
+    left: mdiChevronLeft
 };
-    },
-    created() {
-        const self = this;
 
-        self.verified = false;
+const version = `v${getVersion()}`;
-        self.loading = true;
 
-        if (!self.token) {
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
-            self.loading = false;
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const password = ref<string>('');
+const loading = ref<boolean>(true);
+const resending = ref<boolean>(false);
+const verified = ref<boolean>(false);
+const errorMessage = ref<string>('');
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
+
+function init(): void {
+    verified.value = false;
+    loading.value = true;
+
+    if (!props.token) {
+        loading.value = false;
         return;
     }
 
-        self.rootStore.verifyEmail({
+    rootStore.verifyEmail({
-            token: self.token,
+        token: props.token,
         requestNewToken: !isUserLogined()
     }).then(() => {
-            self.loading = false;
+        loading.value = false;
-            self.verified = true;
+        verified.value = true;
-            self.$refs.snackbar.showMessage('Email address is verified');
+        snackbar.value?.showMessage('Email address is verified');
     }).catch(error => {
-            self.loading = false;
+        loading.value = false;
-            self.verified = false;
+        verified.value = false;
 
         if (!error.processed) {
-                self.errorMessage = self.$tError(error.message || error);
+            errorMessage.value = te(error.message || error);
-                self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-    },
+}
-    methods: {
-        resendEmail() {
-            const self = this;
 
-            self.resending = true;
+function resendEmail(): void {
+    resending.value = true;
 
-            self.rootStore.resendVerifyEmailByUnloginUser({
+    rootStore.resendVerifyEmailByUnloginUser({
-                email: self.email,
+        email: props.email,
-                password: self.password
+        password: password.value
     }).then(() => {
-                self.resending = false;
+        resending.value = false;
-                self.$refs.snackbar.showMessage('Validation email has been sent');
+        snackbar.value?.showMessage('Validation email has been sent');
     }).catch(error => {
-                self.resending = false;
+        resending.value = false;
 
         if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-        },
-        onSnackbarShowStateChanged(newValue) {
-            if (!newValue && this.verified && isUserLogined()) {
-                this.$router.replace('/');
-            }
-        },
-        changeLanguage(locale) {
-            const localeDefaultSettings = this.$locale.setLanguage(locale);
-            this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 }
+
+function changeLanguage(locale: string): void {
+    const localeDefaultSettings = setLanguage(locale);
+    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+}
+
+function onSnackbarShowStateChanged(newValue: boolean): void {
+    if (!newValue && verified.value && isUserLogined()) {
+        router.replace('/');
     }
 }
+
+init();
 </script>