Work on profile and login

src/assets/css/chat.scss

@@ -528,10 +528,29 @@ $admin-fg: white;
         border-radius: 20px;
     }
 
+    .user-info {
+        display: flex;
+        flex-wrap: nowrap;
+        max-width: 40%;
+    }
+
     .show-all {
         color: black;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
     }
+
+    .action {
+        padding: 4px 20px;
+        &::after {
+            content: ' ';
+            display: block;
+            margin: 10px 0px;
+            bottom: 0px;
+            height: 1px;
+            background-color: #e1e1e1;
+            width: 100%;
+        }
+    }
 }

src/assets/css/login.scss

@@ -6,9 +6,9 @@
     top: 0px;
     right: 0px;
     bottom: 0px;
-    width: 100%;
+    width: 80%;
     height: 100%;
     padding: 0;
-    margin: 0;
+    margin: 10%;
     background-color: $background;
 }

src/components/Login.vue

@@ -5,7 +5,7 @@
     </v-btn>
 
     <div color="rgba(255,255,255,0.1)" class="text-center">
-      <h4>Login</h4>
+      <div class="h2">Login</div>
       <v-form v-model="isValid">
         <v-text-field
           v-model="user.username"
@@ -90,19 +90,17 @@ export default {
     message() {
       if (
         this.message &&
-        this.message.message &&
+        this.message.toLowerCase().includes("user")
-        this.message.message.toLowerCase().includes("user")
       ) {
-        this.userErrorMessage = this.message.message;
+        this.userErrorMessage = this.message;
       } else {
         this.userErrorMessage = null;
       }
       if (
         this.message &&
-        this.message.message &&
+        this.message.toLowerCase().includes("pass")
-        this.message.message.toLowerCase().includes("pass")
       ) {
-        this.passErrorMessage = this.message.message;
+        this.passErrorMessage = this.message;
       } else {
         this.passErrorMessage = null;
       }
@@ -112,6 +110,9 @@ export default {
     handleLogin() {
       if (this.user.username && this.user.password) {
 
+      // Reset errors
+      this.message = null;
+
         // Is it a full matrix user id? Modify a copy, so that the UI will still show the full ID.
         var user = Object.assign({}, this.user);
         if (user.username.startsWith('@') && user.username.includes(':')) {
@@ -128,9 +129,10 @@ export default {
           (error) => {
             this.loading = false;
             this.message =
-              (error.response && error.response.data) ||
+              (error.data && error.data.error) ||
               error.message ||
               error.toString();
+            console.log("Message set to ", this.message);
           }
         );
       }

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-container class="user-info">
-    <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
+        <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);
+              showEditPasswordDialog = false;
-              showEditDialog = 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,
+      showEditPasswordDialog: false,
-      user: null,
+      showEditDisplaynameDialog: false,
-      displayName: "",
+      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() {