From aa1ce4ee485f4fa7b62e1ff14afbba5e23d7df44 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 16 May 2025 09:55:15 +0200
Subject: [PATCH] Fix "rememberMe" functionality

---
 src/components/CreateRoom.vue                 |   2 +-
 src/components/Join.vue                       |   3 +-
 src/components/Login.vue                      |   1 -
 src/components/LogoutRoomDialog.vue           |  39 ++----
 src/components/messages/AudioPlayer.vue       |   2 +-
 src/components/rememberMeMixin.js             |  15 ++-
 .../welcome_headers/WelcomeHeaderChannel.vue  |   2 +-
 .../welcome_headers/WelcomeHeaderRoom.vue     |   2 +-
 src/services/matrix.service.js                | 120 +++++++++---------
 9 files changed, 89 insertions(+), 97 deletions(-)

diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index f3bef6c..54276a8 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -120,7 +120,7 @@
           </v-row>
           <v-row class="mt-0">
             <v-col class="py-0">
-              <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" @change="onRememberMe"
+              <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe"
                 :label="$t('join.remember_me')" />
             </v-col>
           </v-row>
diff --git a/src/components/Join.vue b/src/components/Join.vue
index 07bca4a..34937d0 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -57,8 +57,7 @@
                   </v-list-item>
                 </template>
               </v-select>
-            <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
-              @change="onRememberMe" />
+            <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
           </v-col>
           <v-col cols="2" sm="5" class="py-0">
             <v-avatar @click="showAvatarPicker">
diff --git a/src/components/Login.vue b/src/components/Login.vue
index f1e6ead..c143d16 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -72,7 +72,6 @@
           id="chk-remember-me"
           class="mt-0"
           v-model="rememberMe"
-          @change="onRememberMe"
           :label="$t('join.remember_me')"
         />
         <v-btn
diff --git a/src/components/LogoutRoomDialog.vue b/src/components/LogoutRoomDialog.vue
index eae7acc..174773f 100644
--- a/src/components/LogoutRoomDialog.vue
+++ b/src/components/LogoutRoomDialog.vue
@@ -1,36 +1,17 @@
 <template>
-  <v-dialog
-    :value="showLogoutPopup"
-    class="ma-0 pa-0"
-    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
-    @click:outside="$emit('onOutsideLogoutPopupClicked')"
-  >
+  <v-dialog :modelValue="showLogoutPopup" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    @click:outside="$emit('onOutsideLogoutPopupClicked')">
     <div class="dialog-content text-center">
-      <template>
-        <h2 class="dialog-title">
-         {{ $t("logout.confirm_text")}}
-        </h2>
-      </template>
+      <h2 class="dialog-title">{{ $t("logout.confirm_text") }}</h2>
       <v-container fluid>
         <v-row cols="12">
           <v-col cols="6">
-            <v-btn
-              variant="flat"
-              block
-              class="text-button"
-              @click.stop="$emit('onCancelLogoutClicked')"
-              >{{ $t("menu.cancel") }}</v-btn
-            >
+            <v-btn variant="flat" block class="text-button" @click.stop="$emit('onCancelLogoutClicked')">{{
+              $t("menu.cancel") }}</v-btn>
           </v-col>
           <v-col cols="6" align="center">
-            <v-btn
-              color="red"
-              variant="flat"
-              block
-              class="filled-button"
-              @click.stop="logout"
-              >{{ $t("menu.logout") }}</v-btn
-            >
+            <v-btn color="red" variant="flat" block class="filled-button" @click.stop="logout">{{ $t("menu.logout")
+            }}</v-btn>
           </v-col>
         </v-row>
       </v-container>
@@ -46,8 +27,8 @@ export default {
   props: {
     showLogoutPopup: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 };
 </script>
diff --git a/src/components/messages/AudioPlayer.vue b/src/components/messages/AudioPlayer.vue
index 536abd6..3c80a65 100644
--- a/src/components/messages/AudioPlayer.vue
+++ b/src/components/messages/AudioPlayer.vue
@@ -7,7 +7,7 @@
       {{ currentTime }} / {{ totalTime }}
     </div>
     <div style="position:relative;flex: 1 1 100%">
-    <v-slider @change="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :value="info.playPercent" min="0"
+    <v-slider @update:modelValue="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :modelValue="info.playPercent" min="0"
       max="100" />
       <div style="position:absolute;left:18px;right:18px;top:0;bottom:0;height:100%">
       <AudioWaveformView :event="event" style="width:100%;height:100%" />
diff --git a/src/components/rememberMeMixin.js b/src/components/rememberMeMixin.js
index ffade3a..a093c2f 100644
--- a/src/components/rememberMeMixin.js
+++ b/src/components/rememberMeMixin.js
@@ -4,9 +4,18 @@ export default {
       rememberMe: this.$store.state.useLocalStorage
     }
   },
-  methods: {
-    onRememberMe(val) {
-      this.$store.commit("setUseLocalStorage", val);
+  watch: {
+    rememberMe(val) {
+      if (val != this.$store.state.useLocalStorage) {
+        this.$store.commit("setUseLocalStorage", val);
+      }
+    },
+    "$store.state.useLocalStorage": {
+      handler(val) {
+        if (val != this.rememberMe) {
+          this.rememberMe = val;
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/welcome_headers/WelcomeHeaderChannel.vue b/src/components/welcome_headers/WelcomeHeaderChannel.vue
index 2362189..4477d94 100644
--- a/src/components/welcome_headers/WelcomeHeaderChannel.vue
+++ b/src/components/welcome_headers/WelcomeHeaderChannel.vue
@@ -4,7 +4,7 @@
       <i18n-t keypath="room_welcome.join_channel" tag="span">
         <template v-slot:link>
           <div style="position:relative;display:inline-block">
-            <a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
+            <a @click.stop.prevent="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
             <v-btn v-if="publicRoomLinkCopied" id="btn-copy-room-link" color="#444444" variant="flat"
               style="position:absolute;left:0;top:0" class="filled-button link-copied-in-place">{{
       $t("room_info.link_copied") }}</v-btn>
diff --git a/src/components/welcome_headers/WelcomeHeaderRoom.vue b/src/components/welcome_headers/WelcomeHeaderRoom.vue
index 70362c8..6f86f7e 100644
--- a/src/components/welcome_headers/WelcomeHeaderRoom.vue
+++ b/src/components/welcome_headers/WelcomeHeaderRoom.vue
@@ -5,7 +5,7 @@
       <i18n-t keypath="room_welcome.join_public" tag="span">
         <template v-slot:link>
           <div style="position:relative;display:inline-block">
-            <a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
+            <a @click.stop.prevent="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
             <v-btn
               v-if="publicRoomLinkCopied"
               id="btn-copy-room-link"
diff --git a/src/services/matrix.service.js b/src/services/matrix.service.js
index 5efc37f..283a09b 100644
--- a/src/services/matrix.service.js
+++ b/src/services/matrix.service.js
@@ -4,6 +4,7 @@ import { TimelineWindow, EventTimeline, EventStatus } from "matrix-js-sdk";
 import util, { STATE_EVENT_ROOM_DELETED, STATE_EVENT_ROOM_TYPE, ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE, ROOM_TYPE_DEFAULT } from "../plugins/utils";
 import User from "../models/user";
 import * as LocalStorageCryptoStoreClass from "matrix-js-sdk/lib/crypto/store/localStorage-crypto-store";
+import rememberMeMixin from "../components/rememberMeMixin";
 
 const LocalStorageCryptoStore = LocalStorageCryptoStoreClass.LocalStorageCryptoStore;
 
@@ -34,6 +35,7 @@ export default {
     //     return ret;
     // });
     const matrixService = createApp({
+        mixins: [ rememberMeMixin ],
         data() {
           return {
             matrixClient: null,
@@ -43,6 +45,7 @@ export default {
             userAvatar: null,
             currentRoom: null,
             notificationCount: 0,
+            legacyCryptoStore: undefined,
           };
         },
         
@@ -122,8 +125,11 @@ export default {
 
     methods: {
         createCryptoStore() {
-            console.log("create crypto store");
-            return new LocalStorageCryptoStore(this.$store.getters.storage);
+            if (!this.legacyCryptoStore) {
+                console.log("create crypto store");
+                this.legacyCryptoStore = new LocalStorageCryptoStore(this.$store.getters.storage);
+            }
+            return this.legacyCryptoStore;
         },
         login(user, registrationFlowHandler, createUser = false) {
             return util.getMatrixBaseUrl(user, this.$config).then((baseUrl) => {
@@ -264,14 +270,12 @@ export default {
                 });
         },
 
-        getMatrixClient(user) {
+        async getMatrixClient(user) {
             if (user === undefined) {
                 user = this.$store.state.auth.user;
             }
             if (this.matrixClientReady) {
-                return new Promise((resolve, ignoredreject) => {
-                    resolve(user);
-                });
+                return user;
             } else if (this.matrixClient) {
                 return new Promise((resolve, ignoredreject) => {
                     this.matrixClient.once("Matrix.initialized", (ignoredclient) => {
@@ -281,62 +285,62 @@ export default {
             }
 
             const matrixStore = new sdk.MemoryStore(this.$store.getters.storage);
+            const cryptoStore = this.createCryptoStore();
 
-            return util.getMatrixBaseUrl(user, this.$config).then((baseUrl) => {
-                var opts = {
-                    baseUrl: baseUrl,
-                    userId: user.user_id,
-                    store: matrixStore,
-                    deviceId: user.device_id,
-                    accessToken: user.access_token,
-                    timelineSupport: true,
-                    unstableClientRelationAggregation: true,
-                    cryptoStore: this.createCryptoStore()
-                    //useAuthorizationHeader: true
-                };
-                this.matrixClient = sdk.createClient(opts);
-                // if (user.is_guest) {
-                //     this.matrixClient.setGuest(true);
-                // }
-                console.error("Created client", this.matrixClient);
-                return this.matrixClient
-                    .initRustCrypto()
-                    .then(() => {
-                        console.log("Crypto initialized");
-
-                        this.addMatrixClientListeners(this.matrixClient);
-
-                        this.matrixClient.startClient();
-                        return this.matrixClient;
-                    })
-                    .then((matrixClient) => {
-                        if (matrixClient.isInitialSyncComplete()) {
-                            console.log("Initial sync done already!");
-                            return matrixClient;
-                        } else {
-                            return new Promise((resolve, reject) => {
-                                matrixClient.once("sync", function (state, ignoredprevState, ignoredres) {
-                                    console.log(state); // state will be 'PREPARED' when the client is ready to use
-                                    if (state == "PREPARED") {
-                                        resolve(matrixClient);
-                                    } else if (state == "ERROR") {
-                                        reject("Error syncing");
-                                    }
-                                });
-                            });
+            if (cryptoStore) {
+                const migrationState = await cryptoStore.getMigrationState();
+                if (migrationState >= 0) {
+                    const store = this.$store.getters.storage;
+                    // Rust crypto migration is broken, needs the sessionId to be set. So do that here, if needed.
+                    for (let i = 0; i < store.length; ++i) {
+                        const key = store.key(i);
+                        if (key.startsWith("crypto.sessions/")) {
+                            const sessions = JSON.parse(store.getItem(key));
+                            for (let sessionId of Object.keys(sessions)) {
+                                sessions[sessionId].sessionId = sessionId;
+                                sessions[sessionId].deviceKey = key.substring("crypto.sessions/".length);
+                            }
+                            store.setItem(key, JSON.stringify(sessions));
                         }
-                    })
-                    .then(() => {
-                        return this.matrixClient.isVersionSupported("v1.11");
-                    })
-                    .then((authedMediaSupported) => {
-                        this.useAuthedMedia = authedMediaSupported;
+                    }
+                }
+            }
 
-                        // Ready to use! Start by loading rooms.
-                        this.initClient();
-                        return user;
+            const baseUrl = await util.getMatrixBaseUrl(user, this.$config);
+            var opts = {
+                baseUrl: baseUrl,
+                userId: user.user_id,
+                store: matrixStore,
+                deviceId: user.device_id,
+                accessToken: user.access_token,
+                timelineSupport: true,
+                unstableClientRelationAggregation: true,
+                cryptoStore: cryptoStore
+                //useAuthorizationHeader: true
+            };
+            const matrixClient = sdk.createClient(opts); 
+            this.matrixClient = matrixClient;
+            await this.matrixClient.initRustCrypto({useIndexedDB: this.rememberMe});// storageKey: cryptoStorageKey});
+            console.log("Crypto initialized");
+            this.addMatrixClientListeners(this.matrixClient);
+            this.matrixClient.startClient();
+            if (!this.matrixClient.isInitialSyncComplete()) {
+                await new Promise((resolve, reject) => {
+                    this.matrixClient.once("sync", function (state, ignoredprevState, ignoredres) {
+                        console.log(state); // state will be 'PREPARED' when the client is ready to use
+                        if (state == "PREPARED") {
+                            resolve(matrixClient);
+                        } else if (state == "ERROR") {
+                            reject("Error syncing");
+                        }
                     });
-            });
+                });
+            }
+            this.useAuthedMedia = await this.matrixClient.isVersionSupported("v1.11");
+
+            // Ready to use! Start by loading rooms.
+            this.initClient();
+            return user;
         },
 
         /**