feat(user): Can Sign-out from all devices

src/service/api-client.ts

@@ -57,8 +57,8 @@ axios.interceptors.response.use(
       }
     }
 
-    // User not found.
-    if (errCode === 40106) {
+    // User not found or force logout.
+    if (errCode === 40106 || errCode === 40102) {
       return userService.logoutAndRedirect();
     }
 

src/theme/base/_typography.scss

@@ -0,0 +1,3 @@
+a {
+  text-decoration-line: none;
+}

src/theme/main.scss

@@ -1,6 +1,7 @@
 @import "variables";
 
 @import "base/body";
+@import "base/typography";
 @import "base/utilities";
 @import "base/color-modes";
 

src/utilities/alert.ts

@@ -42,13 +42,13 @@ export async function simpleConfirm(title: string, text?: string): Promise<boole
         message: text,
         buttons: [
           {
-            text: '取消',
+            text: 'Cancel',
             handler: () => {
               resolve(false);
             },
           },
           {
-            text: '確定',
+            text: 'OK',
             handler: () => {
               resolve(true);
             },
@@ -72,14 +72,14 @@ export async function simpleActionSheetConfirm(
         header: title,
         buttons: [
           {
-            text: buttons[0] || '確定',
+            text: buttons[0] || 'OK',
             role: 'destructive',
             handler: () => {
               resolve(true);
             },
           },
           {
-            text: buttons[1] || '取消',
+            text: buttons[1] || 'Cancel',
             role: 'cancel',
             handler: () => {
               resolve(false);

src/views/options/ProfilePage.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 
 import MainLayout from '@/components/layout/MainLayout.vue';
+import apiClient from '@/service/api-client';
 import exportService from '@/service/export-service';
 import importService from '@/service/import-service';
 import userDeleteService from '@/service/user-delete-service';
+import userService from '@/service/user-service';
 import { userStorage } from '@/store/main-store';
-import { faDownload, faEnvelope, faTrash, faUpload } from '@fortawesome/free-solid-svg-icons';
+import { simpleConfirm } from '@/utilities/alert';
+import { useLoadingOverlay } from '@/utilities/loading';
+import {
+  faDownload,
+  faEnvelope,
+  faSignOut,
+  faTrash,
+  faUpload,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { IonItem, IonLabel, IonList, IonListHeader, IonNote } from '@ionic/vue';
 
@@ -22,6 +32,23 @@ async function exportAccounts() {
 async function deleteAccount() {
   await userDeleteService.deleteMeAndLogout();
 }
+
+async function sessionsRefresh() {
+  const v = await simpleConfirm(
+    'This will sign your all devices out.',
+    'You must re-login this device.'
+  );
+
+  if (!v) {
+    return;
+  }
+
+  const { run } = await useLoadingOverlay('Refreshing and Logout...');
+
+  const res = await run(() => apiClient.post('user/sessions/refresh'));
+
+  await userService.logoutAndRedirect();
+}
 </script>
 
 <template>
@@ -40,6 +67,17 @@ async function deleteAccount() {
         </ion-label>
       </ion-item>
 
+      <!-- sessions Refresh -->
+      <ion-item button @click="sessionsRefresh">
+        <FontAwesomeIcon :icon="faSignOut" slot="start" />
+        <ion-label>
+          <h4>Sign-Out from All My Devices</h4>
+          <ion-note>
+            Make all session tokens expired, you must re-login again.
+          </ion-note>
+        </ion-label>
+      </ion-item>
+
       <!-- Import -->
       <ion-item button @click="importAccounts">
         <FontAwesomeIcon :icon="faUpload" slot="start" />