More work on leve room dialog

Issue #21

src/assets/css/main.scss

@@ -61,6 +61,16 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
     margin-bottom: $chat-standard-padding-xs;
 }
 
+.v-btn.text-button {
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    font-size: 11 * $chat-text-size;
+    border: none;
+    height: $chat-standard-padding;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+}
+
 .v-btn.filled-button {
     font-family: 'Inter', sans-serif;
     font-weight: 700;
@@ -73,12 +83,26 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
     margin-bottom: $chat-standard-padding-xs;
 }
 
-.dialog-title {
-    word-break: break-word;
-}
-
-.dialog-text {
-    word-break: break-word;
+.v-dialog {
+    border-radius: 20px !important;
+    .dialog-content {
+        padding: 20px;
+        background-color: white;
+    }
+    .dialog-title {
+        word-break: break-word;
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    
+    .dialog-text {
+        text-align: left;
+        word-break: break-word;
+        a {
+            color: black;
+            text-decoration: underline;
+        }
+    }    
 }
 
 .build-version {

src/components/LeaveRoomDialog.vue

@@ -1,30 +1,61 @@
 <template>
   <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
-    <v-card>
-      <v-card-title class="dialog-title">Are you sure you want to leave?</v-card-title>
-      <v-card-text>
-        <div class="dialog-text">You may not be able to rejoin.</div>
-      </v-card-text>
-      <v-divider></v-divider>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn text @click="showDialog = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          text
-          @click="
-            onLeaveRoom();
-            showDialog = false;
-          "
-          >Next</v-btn
-        >
-      </v-card-actions>
-    </v-card>
+    <div class="dialog-content text-center">
+      <template v-if="roomJoinRule == 'public'">
+        <h1>👋</h1>
+        <h2 class="dialog-title">
+          Goodbye, {{ $matrix.currentUserDisplayName }}.
+        </h2>
+        <div v-if="$matrix.currentUser.is_guest" class="dialog-text">
+          If you want to join this group again, you can join under a new identity. To keep {{ $matrix.currentUserDisplayName }}, <a @click.prevent="viewProfile">create an account</a>.
+        </div>
+        <div v-else class="dialog-text">
+          Since this group is public, you can join again later.
+        </div>
+      </template>
+      <template v-else>
+        <v-icon color="black" size="30">lock</v-icon>
+        <h2 class="dialog-title">Are you sure you want to leave?</h2>
+        <div class="dialog-text">
+          This group is locked. You cannot rejoin without a special permission.
+        </div>
+      </template>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn
+              depressed
+              text
+              block
+              class="text-button"
+              @click="showDialog = false"
+              >Go back</v-btn
+            >
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn
+              color="red"
+              depressed
+              block
+              class="filled-button"
+              @click.stop="
+                onLeaveRoom();
+                showDialog = false;
+              "
+              >Leave</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
   </v-dialog>
 </template>
 <script>
+import roomInfoMixin from "./roomInfoMixin";
+
 export default {
   name: "LeaveRoomDialog",
+  mixins: [roomInfoMixin],
   props: {
     show: {
       type: Boolean,
@@ -32,12 +63,6 @@ export default {
         return false;
       },
     },
-    room: {
-        type: Object,
-        default: function() {
-            return null;
-        }
-    }
   },
   data() {
     return {
@@ -51,24 +76,30 @@ export default {
       },
     },
     showDialog() {
-        if (!this.showDialog) {
-            this.$emit('close');
-        }
-    }
+      if (!this.showDialog) {
+        this.$emit("close");
+      }
+    },
   },
 
   methods: {
     onLeaveRoom() {
       //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
       const roomId = this.room.roomId;
-      this.$matrix.leaveRoom(roomId)
-      .then(() => {
-        console.log("Left room");
-        this.$navigation.push({name:'Home', params:{roomId:null}}, -1);
-      })
-      .catch(err => {
-        console.log("Error leaving", err);
-      });
+      this.$matrix
+        .leaveRoom(roomId)
+        .then(() => {
+          console.log("Left room");
+          this.$navigation.push({ name: "Home", params: { roomId: null } }, -1);
+        })
+        .catch((err) => {
+          console.log("Error leaving", err);
+        });
+    },
+
+    viewProfile() {
+      this.showDialog = false;
+      this.$navigation.push({ name: "Profile" }, 1);
     },
   },
 };

src/components/RoomInfo.vue

@@ -113,7 +113,7 @@
             Your are logged in as <b>{{ displayName }}</b
             >.
           </div>
-          <v-btn block class="outlined-button" @click.stop="viewProfile"
+          <v-btn depressed block class="outlined-button" @click.stop="viewProfile"
             >View</v-btn
           >
         </div>
@@ -124,6 +124,7 @@
       <v-card-text>
         <v-btn
           color="red"
+          depressed
           block
           class="filled-button"
           @click.stop="showLeaveConfirmation = true"
@@ -170,8 +171,6 @@ export default {
       showLeaveConfirmation: false,
       expandedMembers: [],
       buildVersion: "",
-      roomJoinRule: null,
-      userCanChangeJoinRules: false,
       updatingJoinRule: false, // Flag if we are processing update curerntly
     };
   },

src/services/matrix.service.js

@@ -50,6 +50,14 @@ export default {
                     return user.user_id;
                 },
 
+                currentUserDisplayName() {
+                    if (this.ready) {
+                        const user = this.matrixClient.getUser(this.currentUserId) || {}
+                        return user.displayName;
+                    }
+                    return null;
+                },
+
                 currentRoomId() {
                     return this.$store.state.currentRoomId;
                 },