Improved logout/login and change password support

src/App.vue

@@ -9,17 +9,17 @@
 <script>
 export default {
   name: "App",
-  methods: {
+  mounted() {
-    loggedIn() {
+    if (this.currentUser) {
-      return this.$store.state.auth.status.loggedIn;
+      this.$matrix
-    },
+        .login(this.currentUser)
-    logOut() {
+        .then(() => {
-      this.openDrawer = false;
+          console.log("Matrix client ready");
-      this.$store.dispatch("auth/logout");
-      this.$nextTick(() => {
-        this.$navigation.push({path: "/login"}, -1);
         })
-    },
+        .catch((error) => {
+          console.log("Error creating client", error);
+        });
+    }
   },
   computed: {
     currentUser() {
@@ -35,33 +35,21 @@ export default {
       }
       if (this.$route.meta.includeRoom) {
         if (this.$matrix.currentRoom) {
-          title += " - " + (this.$matrix.currentRoom.summary.info.title || this.$matrix.currentRoom.roomId);
+          title +=
+            " - " +
+            (this.$matrix.currentRoom.summary.info.title ||
+              this.$matrix.currentRoom.roomId);
         } else if (this.$matrix.currentRoomId) {
-          title += " - " + (this.$matrix.currentRoomId);
+          title += " - " + this.$matrix.currentRoomId;
         }
       }
       return title;
-    }
+    },
   },
   watch: {
     title(title) {
       document.title = title;
     },
-    currentUser: {
-      immediate: true,
-      handler(ignorednewVal, ignoredoldVal) {
-        if (this.currentUser) {
-          this.$matrix
-            .login(this.currentUser)
-            .then(() => {
-              console.log("Matrix client ready");
-            })
-            .catch((error) => {
-              console.log("Error creating client", error);
-            });
-        }
-      },
-    },
   },
 };
 </script>

src/assets/css/chat.scss

@@ -608,7 +608,9 @@ $admin-fg: white;
 
     .action {
         padding: 4px 20px;
+        cursor: pointer;
         &::after {
+            /* divider */
             content: ' ';
             display: block;
             margin: 10px 0px;

src/components/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <RoomList />
-    <v-btn block class="outlined-button" @click.stop="logout">Logout</v-btn>
+    <v-btn block depressed class="outlined-button" @click.stop="logout">Logout</v-btn>
   </div>
 </template>
 

src/components/Join.vue

@@ -283,6 +283,9 @@ export default {
      * a random account.
      */
     getLoginPromise() {
+      if (this.$matrix.ready) {
+        return Promise.resolve(this.$matrix.currentUser);
+      }
       return this.$store.dispatch("auth/login", this.currentUser || this.guestUser);
     },
 
@@ -326,7 +329,7 @@ export default {
     },
 
     handleLogin() {
-      this.$navigation.push({ name: "Login" }, 1);
+      this.$navigation.push({path: "/login"}, 1);
     },
 
     handleOpenApp() {

src/components/Profile.vue

@@ -31,7 +31,7 @@
             <div v-if="$matrix.currentUser.is_guest">
               This identity is temporary. Set a password to use it again.
             </div>
-            <v-btn block class="outlined-button" @click.stop="logout">Logout</v-btn>
+            <v-btn depressed block class="outlined-button" @click.stop="logout">Logout</v-btn>
           </v-col>
         </v-row>
       </v-container>
@@ -41,21 +41,24 @@
 
     <!-- edit password dialog -->
     <v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
-      <v-card>
+      <v-card :disabled="settingPassword">
         <v-card-title>Change password</v-card-title>
         <v-card-text>
-          Not yet implemented.
+          <v-text-field v-if="!$matrix.currentUser.is_guest" v-model="password" label="Old password" type="password" />
-          <!-- <v-text-field v-model="password" /> -->
+          <v-text-field v-model="newPassword1" label="New password" type="password" />
+          <v-text-field v-model="newPassword2" label="Repeat new password" type="password" />
+          <div class="red--text" v-if="passwordErrorMessage">{{ passwordErrorMessage }}</div>
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="showEditPasswordDialog = false">Cancel</v-btn>
+          <v-btn text @click="closeEditPasswordDialog">Cancel</v-btn>
           <v-btn
+            :disabled="!passwordsMatch"
             color="primary"
             text
             @click="
-              showEditPasswordDialog = false;
+              setPassword($matrix.currentUser.is_guest ? $matrix.currentUser.password : password, newPassword1);
             "
             >Ok</v-btn
           >
@@ -97,6 +100,11 @@ export default {
       showEditPasswordDialog: false,
       showEditDisplaynameDialog: false,
       editValue: null,
+      password: null,
+      newPassword1: null,
+      newPassword2: null,
+      settingPassword: false,
+      passwordErrorMessage: null
     };
   },
 
@@ -127,6 +135,10 @@ export default {
         return null;
       }
       return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
+    },
+
+    passwordsMatch() {
+      return this.newPassword1 && this.newPassword2 && this.newPassword1 == this.newPassword2;
     }
   },
 
@@ -143,21 +155,29 @@ export default {
       this.$matrix.matrixClient.setDisplayName(name);
     },
 
-    upgradeAccount() {
+    setPassword(oldPassword, newPassword) {
-      this.$matrix
+      this.settingPassword = true;
-        .upgradeGuestAccount()
+      this.passwordErrorMessage = null;
-        .then(user => {
+      this.$matrix.setPassword(oldPassword, newPassword)
-          // Done, login with the "new" account to get a real token instead of our guest token.
+      .then(success => {
-          this.user = user;
+        console.log(success ? "Password changed" : "Failed to change password");
-          return this.$store.dispatch("auth/login", this.user);
+        this.closeEditPasswordDialog();
       })
-        .then(() => {
+      .catch(error => {
-          console.log("Upgrade done!");
+        this.passwordErrorMessage = error.message;
       })
-        .catch((err) => {
+      .finally(() => {
-          console.log("ERROR", err);
+        this.settingPassword = false;
       });
     },
+
+    closeEditPasswordDialog() {
+      this.passwordErrorMessage = null;
+      this.password = null;
+      this.newPassword1 = null;
+      this.newPassword2 = null;
+      this.showEditPasswordDialog = false;
+    }
   },
 };
 </script>

src/components/RoomInfo.vue

@@ -306,22 +306,6 @@ export default {
       this.$navigation.push({ name: "Profile" }, 1);
     },
 
-    upgradeAccount() {
-      this.$matrix
-        .upgradeGuestAccount()
-        .then((user) => {
-          // Done, login with the "new" account to get a real token instead of our guest token.
-          this.user = user;
-          return this.$store.dispatch("auth/login", this.user);
-        })
-        .then(() => {
-          console.log("Upgrade done!");
-        })
-        .catch((err) => {
-          console.log("ERROR", err);
-        });
-    },
-
     copyRoomLink() {
       this.$copyText(this.roomLink).then(
         function (e) {

src/services/matrix.service.js

@@ -77,7 +77,10 @@ export default {
                     const tempMatrixClient = sdk.createClient(User.homeServerUrl(user.home_server));
                     var promiseLogin;
 
-                    if (user.is_guest && !user.access_token) {
+                    if (user.access_token) {
+                        // Logged in on "real" account
+                        promiseLogin = Promise.resolve(user);
+                    } else if (user.is_guest && !user.user_id) {
                         // Generate random username and password. We don't user REAL matrix
                         // guest accounts because 1. They are not allowed to post media, 2. They
                         // can not use avatars and 3. They can not seamlessly be upgraded to real accounts.
@@ -96,9 +99,6 @@ export default {
                                 localStorage.setItem('user', JSON.stringify(response));
                                 return response;
                             })
-                    } else if (!user.is_guest && user.access_token) {
-                        // Logged in on "real" account
-                        promiseLogin = Promise.resolve(user);
                     } else {
                         var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password" };
                         if (user.device_id) {
@@ -155,29 +155,6 @@ export default {
                     this.$store.commit("setCurrentRoomId", null);
                 },
 
-                /**
-                 * Upgrade a guest account into a "normal" account. For now, use random user and pass...
-                 */
-                upgradeGuestAccount() {
-                    if (!this.matrixClient || !this.currentUser || !this.currentUser.is_guest) {
-                        return Promise.reject("Invalid params");
-                    }
-                    const randomPassword = util.randomPass();
-                    const self = this;
-                    return this.matrixClient.register(this.matrixClient.getUserIdLocalpart(), randomPassword, null, {
-                        type: "m.login.dummy",
-                    }, undefined, this.currentUser.access_token)
-                        .then((response) => {
-                            console.log("Response", response);
-                            response.is_guest = false;
-                            response.password = randomPassword;
-                            self.currentUser = response;
-                            localStorage.setItem('user', JSON.stringify(response)); // Update local storage as well.
-                            self.logout();
-                            return self.currentUser;
-                        });
-                },
-
                 initClient() {
                     this.reloadRooms();
                     this.matrixClientReady = true;
@@ -322,15 +299,23 @@ export default {
                         this.matrixClient = null;
                         this.matrixClientReady = false;
                     }
-                    this.$store.commit("setCurrentRoomId", null);
 
+                    // For "real" accounts we totally wipe the user object, but for "guest"
+                    // accounts (i.e. created from random data and with password never changed)
+                    // we need to hang on to the generated password and use that to login to a new
+                    // session, so only wipe the token in s that case.
                     // Clear the access token
                     var user = JSON.parse(localStorage.getItem('user'));
-                    if (user) {
+                    if (user.is_guest) {
                         delete user.access_token;
-                    }
                         localStorage.setItem('user', JSON.stringify(user));
-                    this.$navigation.push({ name: "Login" }, -1);
+                        // Login again
+                        this.login(user);
+                    } else {
+                        localStorage.removeItem('user');
+                        this.$store.commit("setCurrentRoomId", null);
+                        this.$navigation.push({path: "/login"}, -1);
+                    }
                 },
 
                 reloadRooms() {
@@ -398,6 +383,34 @@ export default {
                     }
                 },
 
+                setPassword(oldPassword, newPassword) {
+                    if (this.matrixClient && this.currentUser) {
+                        const authDict = {
+                            type: 'm.login.password',
+                            identifier: {
+                                type: 'm.id.user',
+                                user: this.currentUser.user_id,
+                            },
+                            // TODO: Remove `user` once servers support proper UIA
+                            // See https://github.com/matrix-org/synapse/issues/5665
+                            user: this.currentUser.user_id,
+                            password: oldPassword,
+                        };
+                        const self = this;
+                        return this.matrixClient.setPassword(authDict, newPassword)
+                        .then(() => {
+                            // Forget password and remove the 'is_guest' flag, we are now a "real" user!
+                            self.currentUser.password = undefined;
+                            self.currentUser.is_guest = false;
+                            localStorage.setItem('user', JSON.stringify(self.currentUser));
+                        })
+                        .then(() => {
+                            return true;
+                        })
+                    }
+                    return Promise.resolve(false);
+                },
+
                 uploadFile(file, opts) {
                     return this.matrixClient.uploadContent(file, opts);
                 },