migrate session list page /user security page to composition API and typescript

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>

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 = '';