From e053528abf0430f65c6ad99896c600d19c46e6cb Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 21 Jan 2025 23:38:06 +0800
Subject: [PATCH] migrate session list page /user security page to composition
 API and typescript

---
 src/models/token.ts                           |   2 +-
 src/stores/index.ts                           |  13 +-
 .../settings/tabs/UserBasicSettingTab.vue     |   4 +-
 .../settings/tabs/UserSecuritySettingTab.vue  | 435 +++++++++---------
 src/views/mobile/users/SessionListPage.vue    | 311 +++++++------
 src/views/mobile/users/UserProfilePage.vue    |   5 +-
 6 files changed, 397 insertions(+), 373 deletions(-)

diff --git a/src/models/token.ts b/src/models/token.ts
index c3875a9f..c716cabd 100644
--- a/src/models/token.ts
+++ b/src/models/token.ts
@@ -25,7 +25,7 @@ export class SessionInfo {
     public readonly createdByCli: boolean;
     public readonly lastSeen: number;
 
-    private constructor(tokenId: string, isCurrent: boolean, deviceType: string, deviceInfo: string, createdByCli: boolean, lastSeen: number) {
+    protected constructor(tokenId: string, isCurrent: boolean, deviceType: string, deviceInfo: string, createdByCli: boolean, lastSeen: number) {
         this.tokenId = tokenId;
         this.isCurrent = isCurrent;
         this.deviceType = deviceType;
diff --git a/src/stores/index.ts b/src/stores/index.ts
index cf9e7fdb..95ad80f1 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -16,7 +16,14 @@ import { useStatisticsStore } from './statistics.js';
 import { useExchangeRatesStore } from './exchangeRates.ts';
 
 import type { AuthResponse, RegisterResponse } from '@/models/auth_response.ts';
-import type { User, UserLoginRequest, UserResendVerifyEmailRequest, UserVerifyEmailResponse, UserProfileUpdateResponse } from '@/models/user.ts';
+import type {
+    User,
+    UserLoginRequest,
+    UserResendVerifyEmailRequest,
+    UserVerifyEmailResponse,
+    UserProfileUpdateRequest,
+    UserProfileUpdateResponse
+} from '@/models/user.ts';
 import type { LocalizedPresetCategory } from '@/core/category.ts';
 import type { ForgetPasswordRequest } from '@/models/forget_password.ts';
 
@@ -370,9 +377,9 @@ export const useRootStore = defineStore('root', () => {
         });
     }
 
-    function updateUserProfile({ profile, currentPassword }: { profile: User, currentPassword?: string }): Promise<UserProfileUpdateResponse> {
+    function updateUserProfile(req: UserProfileUpdateRequest): Promise<UserProfileUpdateResponse> {
         return new Promise((resolve, reject) => {
-            services.updateProfile(profile.toProfileUpdateRequest(currentPassword)).then(response => {
+            services.updateProfile(req).then(response => {
                 const data = response.data;
 
                 if (!data || !data.success || !data.result) {
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index bd4a3529..f5983663 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -451,9 +451,7 @@ function save(): void {
 
     saving.value = true;
 
-    rootStore.updateUserProfile({
-        profile: newProfile.value
-    }).then(response => {
+    rootStore.updateUserProfile(newProfile.value.toProfileUpdateRequest()).then(response => {
         saving.value = false;
 
         doAfterProfileUpdate(response.user);
diff --git a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
index 12e53ab9..715ae301 100644
--- a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
@@ -1,10 +1,10 @@
 <template>
     <v-row>
         <v-col cols="12">
-            <v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')">
+            <v-card :class="{ 'disabled': updatingPassword }" :title="tt('Modify Password')">
                 <v-form>
                     <v-card-text class="pt-0">
-                        <span class="text-body-1">{{ $t('After changing the password, other devices will be logged out. Please use the new password to log in on other devices.') }}</span>
+                        <span class="text-body-1">{{ tt('After changing the password, other devices will be logged out. Please use the new password to log in on other devices.') }}</span>
                     </v-card-text>
 
                     <v-card-text>
@@ -15,8 +15,8 @@
                                     ref="currentPasswordInput"
                                     type="password"
                                     :disabled="updatingPassword"
-                                    :label="$t('Current Password')"
-                                    :placeholder="$t('Current Password')"
+                                    :label="tt('Current Password')"
+                                    :placeholder="tt('Current Password')"
                                     v-model="currentPassword"
                                     @keyup.enter="$refs.newPasswordInput.focus()"
                                 />
@@ -30,8 +30,8 @@
                                     ref="newPasswordInput"
                                     type="password"
                                     :disabled="updatingPassword"
-                                    :label="$t('New Password')"
-                                    :placeholder="$t('New Password')"
+                                    :label="tt('New Password')"
+                                    :placeholder="tt('New Password')"
                                     v-model="newPassword"
                                     @keyup.enter="$refs.confirmPasswordInput.focus()"
                                 />
@@ -44,8 +44,8 @@
                                     ref="confirmPasswordInput"
                                     type="password"
                                     :disabled="updatingPassword"
-                                    :label="$t('Confirm Password')"
-                                    :placeholder="$t('Re-enter the password')"
+                                    :label="tt('Confirm Password')"
+                                    :placeholder="tt('Re-enter the password')"
                                     v-model="confirmPassword"
                                     @keyup.enter="updatePassword"
                                 />
@@ -55,7 +55,7 @@
 
                     <v-card-text class="d-flex flex-wrap gap-4">
                         <v-btn :disabled="!currentPassword || !newPassword || !confirmPassword || updatingPassword" @click="updatePassword">
-                            {{ $t('Save Changes') }}
+                            {{ tt('Save Changes') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="updatingPassword"></v-progress-circular>
                         </v-btn>
                     </v-card-text>
@@ -67,14 +67,14 @@
             <v-card :class="{ 'disabled': loadingSession }">
                 <template #title>
                     <div class="d-flex align-center">
-                        <span>{{ $t('Device & Sessions') }}</span>
+                        <span>{{ tt('Device & Sessions') }}</span>
                         <v-btn density="compact" color="default" variant="text" size="24"
-                               class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions">
+                               class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions(false)">
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
                             <v-icon :icon="icons.refresh" size="24" />
-                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                            <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                     </div>
                 </template>
@@ -82,14 +82,14 @@
                 <v-table class="table-striped text-no-wrap" :hover="!loadingSession">
                     <thead>
                     <tr>
-                        <th>{{ $t('Type') }}</th>
-                        <th>{{ $t('Device Info') }}</th>
-                        <th>{{ $t('Last Activity Time') }}</th>
+                        <th>{{ tt('Type') }}</th>
+                        <th>{{ tt('Device Info') }}</th>
+                        <th>{{ tt('Last Activity Time') }}</th>
                         <th class="text-right">
                             <v-btn density="comfortable" color="error" variant="tonal"
                                    :disabled="sessions.length < 2 || loadingSession"
                                    @click="revokeAllSessions">
-                                {{ $t('Logout All') }}
+                                {{ tt('Logout All') }}
                             </v-btn>
                         </th>
                     </tr>
@@ -106,7 +106,7 @@
                         v-for="session in sessions">
                         <td class="text-sm">
                             <v-icon start :icon="session.icon"/>
-                            {{ $t(session.isCurrent ? 'Current' : 'Other Device') }}
+                            {{ tt(session.isCurrent ? 'Current' : 'Other Device') }}
                         </td>
                         <td class="text-sm">{{ session.deviceInfo }}</td>
                         <td class="text-sm">{{ session.lastSeenDateTime }}</td>
@@ -114,7 +114,7 @@
                             <v-btn density="comfortable" color="error" variant="tonal"
                                    :disabled="session.isCurrent || loadingSession"
                                    @click="revokeSession(session)">
-                                {{ $t('Log Out') }}
+                                {{ tt('Log Out') }}
                             </v-btn>
                         </td>
                     </tr>
@@ -128,13 +128,20 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<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 { useI18n } from '@/locales/helpers.ts';
+
 import { useRootStore } from '@/stores/index.ts';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.ts';
 
+import { type TokenInfoResponse, SessionInfo } from '@/models/token.ts';
+
 import { isEquals } from '@/lib/common.ts';
 import { parseSessionInfo } from '@/lib/session.ts';
 
@@ -148,206 +155,214 @@ import {
     mdiDevices
 } from '@mdi/js';
 
-export default {
-    data() {
-        return {
-            tokens: [],
-            currentPassword: '',
-            newPassword: '',
-            confirmPassword: '',
-            updatingPassword: false,
-            loadingSession: true,
-            icons: {
-                refresh: mdiRefresh
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore),
-        inputProblemMessage() {
-            if (!this.currentPassword) {
-                return 'Current password cannot be blank';
-            } else if (!this.newPassword && !this.confirmPassword) {
-                return 'Nothing has been modified';
-            } else if (!this.newPassword && this.confirmPassword) {
-                return 'New password cannot be blank';
-            } else if (this.newPassword && !this.confirmPassword) {
-                return 'Password confirmation cannot be blank';
-            } else if (this.newPassword && this.confirmPassword && this.newPassword !== this.confirmPassword) {
-                return 'Password and password confirmation do not match';
-            } else {
-                return null;
-            }
-        },
-        sessions() {
-            if (!this.tokens) {
-                return this.tokens;
-            }
+class DesktopPageSessionInfo extends SessionInfo {
+    public readonly icon: string;
+    public readonly lastSeenDateTime: string;
 
-            const sessions = [];
+    public constructor(sessionInfo: SessionInfo) {
+        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.createdByCli, sessionInfo.lastSeen);
+        this.icon = getTokenIcon(sessionInfo.deviceType);
+        this.lastSeenDateTime = sessionInfo.lastSeen ? formatUnixTimeToLongDateTime(sessionInfo.lastSeen) : '-';
+    }
+}
 
-            for (let i = 0; i < this.tokens.length; i++) {
-                const token = this.tokens[i];
-                const sessionInfo = parseSessionInfo(token);
-                sessionInfo.icon = this.getTokenIcon(sessionInfo.deviceType);
-                sessionInfo.lastSeenDateTime = sessionInfo.lastSeen ? this.$locale.formatUnixTimeToLongDateTime(this.userStore, sessionInfo.lastSeen) : '-';
-                sessions.push(sessionInfo);
-            }
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
 
-            return sessions;
+const { tt, formatUnixTimeToLongDateTime, setLanguage } = useI18n();
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
+
+const icons = {
+    refresh: mdiRefresh
+};
+
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const tokens = ref<TokenInfoResponse[]>([]);
+const currentPassword = ref<string>('');
+const newPassword = ref<string>('');
+const confirmPassword = ref<string>('');
+const updatingPassword = ref<boolean>(false);
+const loadingSession = ref<boolean>(true);
+
+const sessions = computed<DesktopPageSessionInfo[]>(() => {
+    const sessions: DesktopPageSessionInfo[] = [];
+
+    if (!tokens.value) {
+        return sessions;
+    }
+
+    for (let i = 0; i < tokens.value.length; i++) {
+        const token = tokens.value[i];
+        const sessionInfo = parseSessionInfo(token);
+        sessions.push(new DesktopPageSessionInfo(sessionInfo));
+    }
+
+    return sessions;
+});
+
+const inputProblemMessage = computed<string | null>(() => {
+    if (!currentPassword.value) {
+        return 'Current password cannot be blank';
+    } else if (!newPassword.value && !confirmPassword.value) {
+        return 'Nothing has been modified';
+    } else if (!newPassword.value && confirmPassword.value) {
+        return 'New password cannot be blank';
+    } else if (newPassword.value && !confirmPassword.value) {
+        return 'Password confirmation cannot be blank';
+    } else if (newPassword.value && confirmPassword.value && newPassword.value !== confirmPassword.value) {
+        return 'Password and password confirmation do not match';
+    } else {
+        return null;
+    }
+});
+
+function getTokenIcon(deviceType: string): string {
+    if (deviceType === 'phone') {
+        return mdiCellphone;
+    } else if (deviceType === 'wearable') {
+        return mdiWatch;
+    } else if (deviceType === 'tablet') {
+        return mdiTablet;
+    } else if (deviceType === 'tv') {
+        return mdiTelevision;
+    } else if (deviceType === 'cli') {
+        return mdiConsole;
+    } else {
+        return mdiDevices;
+    }
+}
+
+function init(): void {
+    loadingSession.value = true;
+
+    tokensStore.getAllTokens().then(response => {
+        tokens.value = response;
+        loadingSession.value = false;
+    }).catch(error => {
+        loadingSession.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
         }
-    },
-    created() {
-        const self = this;
+    });
+}
 
-        self.loadingSession = true;
+function updatePassword(): void {
+    const problemMessage = inputProblemMessage.value;
 
-        self.tokensStore.getAllTokens().then(tokens => {
-            self.tokens = tokens;
-            self.loadingSession = false;
+    if (problemMessage) {
+        snackbar.value?.showMessage(problemMessage);
+        return;
+    }
+
+    updatingPassword.value = true;
+
+    rootStore.updateUserProfile({
+        password: newPassword.value,
+        oldPassword: currentPassword.value
+    }).then(response => {
+        updatingPassword.value = false;
+        currentPassword.value = '';
+        newPassword.value = '';
+        confirmPassword.value = '';
+
+        if (response.user) {
+            const localeDefaultSettings = setLanguage(response.user.language);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+        }
+
+        reloadSessions(true);
+
+        snackbar.value?.showMessage('Your profile has been successfully updated');
+    }).catch(error => {
+        updatingPassword.value = false;
+        currentPassword.value = '';
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function reloadSessions(silent?: boolean): void {
+    loadingSession.value = true;
+
+    tokensStore.getAllTokens().then(response => {
+        if (!silent) {
+            if (isEquals(tokens.value, response)) {
+                snackbar.value?.showMessage('Session list is up to date');
+            } else {
+                snackbar.value?.showMessage('Session list has been updated');
+            }
+        }
+
+        tokens.value = response;
+        loadingSession.value = false;
+    }).catch(error => {
+        loadingSession.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function revokeSession(session: SessionInfo): void {
+    confirmDialog.value?.open('Are you sure you want to logout from this session?').then(() => {
+        loadingSession.value = true;
+
+        tokensStore.revokeToken({
+            tokenId: session.tokenId
+        }).then(() => {
+            loadingSession.value = false;
+
+            for (let i = 0; i < tokens.value.length; i++) {
+                if (tokens.value[i].tokenId === session.tokenId) {
+                    tokens.value.splice(i, 1);
+                }
+            }
         }).catch(error => {
-            self.loadingSession = false;
+            loadingSession.value = false;
 
             if (!error.processed) {
-                self.$refs.snackbar.showError(error);
+                snackbar.value?.showError(error);
             }
         });
-    },
-    methods: {
-        updatePassword() {
-            const self = this;
+    });
+}
 
-            const problemMessage = self.inputProblemMessage;
-
-            if (problemMessage) {
-                self.$refs.snackbar.showMessage(problemMessage);
-                return;
-            }
-
-            self.updatingPassword = true;
-
-            self.rootStore.updateUserProfile({
-                profile: {
-                    password: self.newPassword,
-                    confirmPassword: self.confirmPassword
-                },
-                currentPassword: self.currentPassword
-            }).then(response => {
-                self.updatingPassword = false;
-                self.currentPassword = '';
-                self.newPassword = '';
-                self.confirmPassword = '';
-
-                if (response.user) {
-                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-                }
-
-                self.reloadSessions(true);
-
-                self.$refs.snackbar.showMessage('Your profile has been successfully updated');
-            }).catch(error => {
-                self.updatingPassword = false;
-                self.currentPassword = '';
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        reloadSessions(silent) {
-            const self = this;
-
-            self.loadingSession = true;
-
-            self.tokensStore.getAllTokens().then(tokens => {
-                if (!silent) {
-                    if (isEquals(self.tokens, tokens)) {
-                        self.$refs.snackbar.showMessage('Session list is up to date');
-                    } else {
-                        self.$refs.snackbar.showMessage('Session list has been updated');
-                    }
-                }
-
-                self.tokens = tokens;
-                self.loadingSession = false;
-            }).catch(error => {
-                self.loadingSession = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        revokeSession(session) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to logout from this session?').then(() => {
-                self.loadingSession = true;
-
-                self.tokensStore.revokeToken({
-                    tokenId: session.tokenId
-                }).then(() => {
-                    self.loadingSession = false;
-
-                    for (let i = 0; i < self.tokens.length; i++) {
-                        if (self.tokens[i].tokenId === session.tokenId) {
-                            self.tokens.splice(i, 1);
-                        }
-                    }
-                }).catch(error => {
-                    self.loadingSession = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        revokeAllSessions() {
-            const self = this;
-
-            if (self.tokens.length < 2) {
-                return;
-            }
-
-            self.$refs.confirmDialog.open('Are you sure you want to logout all other sessions?').then(() => {
-                self.loadingSession = true;
-
-                self.tokensStore.revokeAllTokens().then(() => {
-                    self.loadingSession = false;
-
-                    for (let i = self.tokens.length - 1; i >= 0; i--) {
-                        if (!self.tokens[i].isCurrent) {
-                            self.tokens.splice(i, 1);
-                        }
-                    }
-
-                    self.$refs.snackbar.showMessage('You have logged out all other sessions');
-                }).catch(error => {
-                    self.loadingSession = false
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        getTokenIcon(deviceType) {
-            if (deviceType === 'phone') {
-                return mdiCellphone;
-            } else if (deviceType === 'wearable') {
-                return mdiWatch;
-            } else if (deviceType === 'tablet') {
-                return mdiTablet;
-            } else if (deviceType === 'tv') {
-                return mdiTelevision;
-            } else if (deviceType === 'cli') {
-                return mdiConsole;
-            } else {
-                return mdiDevices;
-            }
-        }
+function revokeAllSessions(): void {
+    if (sessions.value.length < 2) {
+        return;
     }
-};
+
+    confirmDialog.value?.open('Are you sure you want to logout all other sessions?').then(() => {
+        loadingSession.value = true;
+
+        tokensStore.revokeAllTokens().then(() => {
+            loadingSession.value = false;
+
+            for (let i = tokens.value.length - 1; i >= 0; i--) {
+                if (!tokens.value[i].isCurrent) {
+                    tokens.value.splice(i, 1);
+                }
+            }
+
+            snackbar.value?.showMessage('You have logged out all other sessions');
+        }).catch(error => {
+            loadingSession.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
+init();
 </script>
diff --git a/src/views/mobile/users/SessionListPage.vue b/src/views/mobile/users/SessionListPage.vue
index 38e9fda4..87ba9565 100644
--- a/src/views/mobile/users/SessionListPage.vue
+++ b/src/views/mobile/users/SessionListPage.vue
@@ -1,10 +1,10 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Device & Sessions')"></f7-nav-title>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt('Device & Sessions')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :class="{ 'disabled': sessions.length < 2 }" :text="$t('Logout All')" @click="revokeAll"></f7-link>
+                <f7-link :class="{ 'disabled': sessions.length < 2 }" :text="tt('Logout All')" @click="revokeAll"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -24,7 +24,7 @@
         <f7-list strong inset dividers media-list class="margin-top" v-else-if="!loading">
             <f7-list-item class="list-item-media-valign-middle" swipeout
                           :id="session.domId"
-                          :title="$t(session.isCurrent ? 'Current' : 'Other Device')"
+                          :title="tt(session.isCurrent ? 'Current' : 'Other Device')"
                           :text="session.deviceInfo"
                           :key="session.tokenId"
                           v-for="session in sessions">
@@ -35,175 +35,182 @@
                     <small>{{ session.lastSeenDateTime }}</small>
                 </template>
                 <f7-swipeout-actions right v-if="!session.isCurrent">
-                    <f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(session)"></f7-swipeout-button>
+                    <f7-swipeout-button color="red" :text="tt('Log Out')" @click="revoke(session)"></f7-swipeout-button>
                 </f7-swipeout-actions>
             </f7-list-item>
         </f7-list>
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.ts';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
+
 import { useTokensStore } from '@/stores/token.ts';
 
+import { type TokenInfoResponse, SessionInfo } from '@/models/token.ts';
+
 import { isEquals } from '@/lib/common.ts';
 import { parseSessionInfo } from '@/lib/session.ts';
 
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
+class MobilePageSessionInfo extends SessionInfo {
+    public readonly domId: string;
+    public readonly icon: string;
+    public readonly lastSeenDateTime: string;
 
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            tokens: [],
-            loading: true,
-            loadingError: null
-        };
-    },
-    computed: {
-        ...mapStores(useUserStore, useTokensStore),
-        sessions() {
-            if (!this.tokens) {
-                return this.tokens;
-            }
+    public constructor(sessionInfo: SessionInfo) {
+        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.createdByCli, sessionInfo.lastSeen);
+        this.domId = getTokenDomId(sessionInfo.tokenId);
+        this.icon = getTokenIcon(sessionInfo.deviceType);
+        this.lastSeenDateTime = sessionInfo.lastSeen ? formatUnixTimeToLongDateTime(sessionInfo.lastSeen) : '-';
+    }
+}
 
-            const sessions = [];
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-            for (let i = 0; i < this.tokens.length; i++) {
-                const token = this.tokens[i];
-                const sessionInfo = parseSessionInfo(token);
-                sessionInfo.domId = this.getTokenDomId(sessionInfo.tokenId);
-                sessionInfo.icon = this.getTokenIcon(sessionInfo.deviceType);
-                sessionInfo.lastSeenDateTime = sessionInfo.lastSeen ? this.$locale.formatUnixTimeToLongDateTime(this.userStore, sessionInfo.lastSeen) : '-';
-                sessions.push(sessionInfo);
-            }
+const { tt, formatUnixTimeToLongDateTime } = useI18n();
+const { showConfirm, showToast, routeBackOnError } = useI18nUIComponents();
 
-            return sessions;
+const tokensStore = useTokensStore();
+
+const tokens = ref<TokenInfoResponse[]>([]);
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
+
+const sessions = computed<MobilePageSessionInfo[]>(() => {
+    const sessions: MobilePageSessionInfo[] = [];
+
+    if (!tokens.value) {
+        return sessions;
+    }
+
+    for (let i = 0; i < tokens.value.length; i++) {
+        const token = tokens.value[i];
+        const sessionInfo = parseSessionInfo(token);
+        sessions.push(new MobilePageSessionInfo(sessionInfo));
+    }
+
+    return sessions;
+});
+
+function getTokenIcon(deviceType: string): string {
+    if (deviceType === 'phone') {
+        return 'device_phone_portrait';
+    } else if (deviceType === 'wearable') {
+        return 'device_phone_portrait';
+    } else if (deviceType === 'tablet') {
+        return 'device_tablet_portrait';
+    } else if (deviceType === 'tv') {
+        return 'tv';
+    } else if (deviceType === 'cli') {
+        return 'chevron_left_slash_chevron_right';
+    } else {
+        return 'device_desktop';
+    }
+}
+
+function getTokenDomId(tokenId: string): string {
+    return 'token_' + tokenId.replace(/:/g, '_');
+}
+
+function init(): void {
+    loading.value = true;
+
+    tokensStore.getAllTokens().then(response => {
+        tokens.value = response;
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
         }
-    },
-    created() {
-        const self = this;
+    });
+}
 
-        self.loading = true;
+function reload(done?: () => void): void {
+    tokensStore.getAllTokens().then(response => {
+        done?.();
 
-        self.tokensStore.getAllTokens().then(tokens => {
-            self.tokens = tokens;
-            self.loading = false;
+        if (isEquals(response, tokens.value)) {
+            showToast('Session list is up to date');
+        } else {
+            showToast('Session list has been updated');
+        }
+
+        tokens.value = response;
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function revoke(session: SessionInfo): void {
+    showConfirm('Are you sure you want to logout from this session?', () => {
+        showLoading();
+
+        tokensStore.revokeToken({
+            tokenId: session.tokenId
+        }).then(() => {
+            hideLoading();
+
+            onSwipeoutDeleted(getTokenDomId(session.tokenId), () => {
+                for (let i = 0; i < tokens.value.length; i++) {
+                    if (tokens.value[i].tokenId === session.tokenId) {
+                        tokens.value.splice(i, 1);
+                    }
+                }
+            });
         }).catch(error => {
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
+            hideLoading();
+
+            if (!error.processed) {
+                showToast(error.message || error);
             }
         });
-    },
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            const self = this;
+    });
+}
 
-            self.tokensStore.getAllTokens().then(tokens => {
-                if (done) {
-                    done();
-                }
-
-                if (isEquals(self.tokens, tokens)) {
-                    self.$toast('Session list is up to date');
-                } else {
-                    self.$toast('Session list has been updated');
-                }
-
-                self.tokens = tokens;
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        revoke(session) {
-            const self = this;
-
-            self.$confirm('Are you sure you want to logout from this session?', () => {
-                self.$showLoading();
-
-                self.tokensStore.revokeToken({
-                    tokenId: session.tokenId
-                }).then(() => {
-                    self.$hideLoading();
-
-                    onSwipeoutDeleted(self.getTokenDomId(session.tokenId), () => {
-                        for (let i = 0; i < self.tokens.length; i++) {
-                            if (self.tokens[i].tokenId === session.tokenId) {
-                                self.tokens.splice(i, 1);
-                            }
-                        }
-                    });
-                }).catch(error => {
-                    self.$hideLoading();
-
-                    if (!error.processed) {
-                        self.$toast(error.message || error);
-                    }
-                });
-            });
-        },
-        revokeAll() {
-            const self = this;
-
-            if (self.tokens.length < 2) {
-                return;
-            }
-
-            self.$confirm('Are you sure you want to logout all other sessions?', () => {
-                self.$showLoading();
-
-                self.tokensStore.revokeAllTokens().then(() => {
-                    self.$hideLoading();
-
-                    for (let i = self.tokens.length - 1; i >= 0; i--) {
-                        if (!self.tokens[i].isCurrent) {
-                            self.tokens.splice(i, 1);
-                        }
-                    }
-
-                    self.$toast('You have logged out all other sessions');
-                }).catch(error => {
-                    self.$hideLoading();
-
-                    if (!error.processed) {
-                        self.$toast(error.message || error);
-                    }
-                });
-            });
-        },
-        getTokenIcon(deviceType) {
-            if (deviceType === 'phone') {
-                return 'device_phone_portrait';
-            } else if (deviceType === 'wearable') {
-                return 'device_phone_portrait';
-            } else if (deviceType === 'tablet') {
-                return 'device_tablet_portrait';
-            } else if (deviceType === 'tv') {
-                return 'tv';
-            } else if (deviceType === 'cli') {
-                return 'chevron_left_slash_chevron_right';
-            } else {
-                return 'device_desktop';
-            }
-        },
-        getTokenDomId(tokenId) {
-            return 'token_' + tokenId.replace(/:/g, '_');
-        }
+function revokeAll(): void {
+    if (tokens.value.length < 2) {
+        return;
     }
-};
+
+    showConfirm('Are you sure you want to logout all other sessions?', () => {
+        showLoading();
+
+        tokensStore.revokeAllTokens().then(() => {
+            hideLoading();
+
+            for (let i = tokens.value.length - 1; i >= 0; i--) {
+                if (!tokens.value[i].isCurrent) {
+                    tokens.value.splice(i, 1);
+                }
+            }
+
+            showToast('You have logged out all other sessions');
+        }).catch(error => {
+            hideLoading();
+
+            if (!error.processed) {
+                showToast(error.message || error);
+            }
+        });
+    });
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+}
+
+init();
 </script>
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index 79c0dc2e..0fe6e6fd 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -456,10 +456,7 @@ function save(): void {
     saving.value = true;
     showLoading(() => saving.value);
 
-    rootStore.updateUserProfile({
-        profile: newProfile.value,
-        currentPassword: currentPassword.value
-    }).then(response => {
+    rootStore.updateUserProfile(newProfile.value.toProfileUpdateRequest(currentPassword.value)).then(response => {
         saving.value = false;
         hideLoading();
         currentPassword.value = '';