Work on profile and login

src/components/Profile.vue

@@ -15,25 +15,70 @@
       </v-container>
     </div>
 
-    <div @click="showEditDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
 
-    <!-- EDIT dialog -->
-    <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
+    <v-container class="user-info">
+        <v-row>
+          <v-col class="flex-grow-0 flex-shrink-0">
+                <v-avatar class="avatar" size="48" color="#e0e0e0">
+          <img v-if="userAvatar" :src="userAvatar" />
+            <span v-else class="white--text headline">{{
+              userAvatarLetter
+            }}</span>
+          </v-avatar>
+          </v-col>
+          <v-col class="flex-shrink-1 flex-grow-1">
+            <div class="h1">{{ displayName }}</div>
+            <div v-if="$matrix.currentUser.is_guest">
+              This identity is temporary. Set a password to use it again.
+          </div>
+          </v-col>
+        </v-row>
+      </v-container>
+
+    <div class="action" @click="showEditPasswordDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
+    <div class="action" @click="editValue = displayName;showEditDisplaynameDialog = true"><v-icon>edit</v-icon><span>Change name</span></div>
+
+    <!-- edit password dialog -->
+    <v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
       <v-card>
-        <v-card-title>Display name</v-card-title>
+        <v-card-title>Change password</v-card-title>
         <v-card-text>
-          <v-text-field v-model="displayName" />
+          Not yet implemented.
+          <!-- <v-text-field v-model="password" /> -->
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="showEditDialog = false">Cancel</v-btn>
+          <v-btn text @click="showEditPasswordDialog = false">Cancel</v-btn>
           <v-btn
             color="primary"
             text
             @click="
-              $matrix.matrixClient.setDisplayName(displayName);
-              showEditDialog = false;
+              showEditPasswordDialog = false;
+            "
+            >Ok</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- edit display name dialog -->
+    <v-dialog v-model="showEditDisplaynameDialog" class="ma-0 pa-0" width="50%">
+      <v-card>
+        <v-card-title>Display name</v-card-title>
+        <v-card-text>
+          <v-text-field v-model="editValue" />
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text @click="showEditDisplaynameDialog = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            text
+            @click="
+              setDisplayName(editValue);
+              showEditDisplaynameDialog = false;
             "
             >Ok</v-btn
           >
@@ -49,16 +94,14 @@ export default {
   data() {
     return {
       memberCount: null,
-      showEditDialog: false,
-      user: null,
-      displayName: "",
+      showEditPasswordDialog: false,
+      showEditDisplaynameDialog: false,
+      editValue: null,
     };
   },
   mounted() {
     this.$matrix.on("Room.timeline", this.onEvent);
     this.updateMemberCount();
-    this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
-    this.displayName = this.user.displayName;
   },
 
   destroyed() {
@@ -69,6 +112,31 @@ export default {
     room() {
       return this.$matrix.currentRoom;
     },
+
+    user() {
+      return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
+    },
+
+    displayName() {
+      if (!this.user) {
+        return null;
+      }
+      return (this.user.displayName || this.user.userId);
+    },
+
+    userAvatar() {
+      if (!this.user || !this.user.avatarUrl) {
+        return null;
+      }
+      return this.$matrix.matrixClient.mxcUrlToHttp(this.user.avatarUrl, 80, 80, 'scale', true);
+    },
+
+    userAvatarLetter() {
+      if (!this.user) {
+        return null;
+      }
+      return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
+    }
   },
 
   watch: {
@@ -109,8 +177,8 @@ export default {
       return null;
     },
 
-    viewProfile() {
-
+    setDisplayName(name) {
+      this.$matrix.matrixClient.setDisplayName(name);
     },
 
     upgradeAccount() {