fix admin and icons

public/sym/ic_add_white.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

public/sym/ic_arrow_back_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

public/sym/ic_close_white.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

public/sym/ic_create_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z"/></svg>

public/sym/ic_delete_white.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

public/sym/ic_expand_more_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>

public/sym/ic_menu_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path fill="#fff" d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>

public/sym/ic_send_white.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

public/sym/ic_supervisor_account_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></svg>

src/components/newMessage.vue

@@ -2,21 +2,21 @@
     <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
       <label for="newMessageInput"></label>
       <textarea
-          @keyup.enter.exact="sendMessage()"
-          @input="resizeMessageBanner()"
-          v-model="msg.content.body"
-          ref="newMessageInput"
-          id="newMessageInput"
-          class="newMessageInput"
-          autocomplete="off"
-          rows="1"
-          placeholder="type a message ..."
+        @keyup.enter.exact="sendMessage()"
+        @input="resizeMessageBanner()"
+        v-model="msg.content.body"
+        ref="newMessageInput"
+        id="newMessageInput"
+        class="newMessageInput"
+        autocomplete="off"
+        rows="1"
+        placeholder="type a message ..."
       />
       <icon
-          type="submit"
-          title="press enter to submit"
-          class="sendMessageBtn"
-          ic="./sym/ic_send_white_24px.svg"
+        type="submit"
+        title="press enter to submit"
+        class="sendMessageBtn"
+        ic="./sym/ic_send_white.svg"
       />
     </form>
 </template>

src/components/throbberOverlay.vue

@@ -25,7 +25,9 @@ export default {
   transform: translate(-50%, -50%);
 }
 .overlay{
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   background-color: #111d;

src/lib/AdminAPI.js

@@ -10,6 +10,9 @@ export class AdminAPI{
     return await method(rest)(`${this.baseUrl}${path}?access_token=${this.accessToken}`)
       .send(obj).set('accept', 'json').then(res => {
         return JSON.parse(res.text);
+      }).catch(err => {
+        console.log(err);
+        return false;
       });
   }
 

src/views/admin.vue

@@ -1,35 +1,39 @@
 <template>
-  <div class="admin">
-    <h1>admin</h1>
-    <h2>users</h2>
-    <div class="tableScroll">
-      <table v-if="users">
-        <tr>
-          <th class="left">user</th>
-          <th class="mid">displayname</th>
-          <th class="mid">deactivated</th>
-          <th class="mid">admin</th>
-          <th class="right edit">edit</th>
-        </tr>
-        <tr v-for="user in users.users" :key="user.name">
-          <td class="left">{{user.name}}</td>
-          <td class="mid">{{user.displayname}}</td>
-          <td class="mid">{{user.deactivated}}</td>
-          <td class="mid">{{user.admin}}</td>
-          <td class="right edit">
-            <icon @click.native="newUser.userId = user.name" class="editIcon" type="submit" ic="./sym/ic_create_white.svg"/>
-            <icon class="editIcon" type="submit" ic="./sym/ic_delete_white.svg"/>
-          </td>
-        </tr>
-      </table>
+  <div>
+    <div v-if="accessDenied">access denied!</div>
+    <div class="admin" v-else-if="users !== undefined">
+      <h1>admin</h1>
+      <h2>users</h2>
+      <div class="tableScroll">
+        <table>
+          <tr>
+            <th class="left">user</th>
+            <th class="mid">displayname</th>
+            <th class="mid">deactivated</th>
+            <th class="mid">admin</th>
+            <th class="right edit">edit</th>
+          </tr>
+          <tr v-for="user in users.users" :key="user.name">
+            <td class="left">{{user.name}}</td>
+            <td class="mid">{{user.displayname}}</td>
+            <td class="mid">{{user.deactivated}}</td>
+            <td class="mid">{{user.admin}}</td>
+            <td class="right edit">
+              <icon @click.native="newUser.userId = user.name" class="editIcon" type="submit" ic="./sym/ic_create_white.svg"/>
+              <icon class="editIcon" type="submit" ic="./sym/ic_delete_white.svg"/>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <h2>update user</h2>
+      <div class="update">
+        <input v-model="newUser.userId" type="text" placeholder="userId"><br>
+        <input v-model="newUser.password" type="password" placeholder="password"><br>
+        <input v-model="newUser.displayname" type="text" placeholder="displayname">
+      </div>
+      <textbtn @click.native="updateUser()" text="update user"/>
     </div>
-    <h2>update user</h2>
-    <div class="update">
-      <input v-model="newUser.userId" type="text" placeholder="userId"><br>
-      <input v-model="newUser.password" type="password" placeholder="password"><br>
-      <input v-model="newUser.displayname" type="text" placeholder="displayname">
-    </div>
-    <textbtn @click.native="updateUser()" text="update user"/>
+    <throbber-overlay v-if="loading" :text="loading"/>
   </div>
 </template>
 
@@ -38,10 +42,12 @@ import {matrix} from "@/main";
 import {AdminAPI} from "@/lib/AdminAPI";
 import icon from "@/components/icon";
 import textbtn from "@/components/textbtn";
+import ThrobberOverlay from "@/components/throbberOverlay";
 
 export default {
   name: "admin",
   components:{
+    ThrobberOverlay,
     icon,
     textbtn
   },
@@ -52,7 +58,9 @@ export default {
         userId: '',
         password: '',
         displayname: '',
-      }
+      },
+      loading: false,
+      accessDenied: false
     }
   },
   methods:{
@@ -61,8 +69,11 @@ export default {
     }
   },
   async created() {
+    this.loading = 'loading';
     this.api = new AdminAPI(matrix.baseUrl+'/_synapse/admin/', matrix.accessToken);
     this.users = await this.api.getUsers('users');
+    this.accessDenied = !this.users;
+    this.loading = false;
   }
 }
 </script>

src/views/chat.vue

@@ -6,7 +6,7 @@
         <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
         <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" />
       </div>
-      <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
+      <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
     </div>
     <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
     <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>