add class AdminAPI and admin.vue

package.json

@@ -14,6 +14,7 @@
     "jdenticon": "^3.1.0",
     "matrix-js-sdk": "^9.1.0",
     "sass": "^1.29.0",
+    "superagent": "^6.1.0",
     "v-emoji-picker": "^2.3.1",
     "vue": "^2.6.11",
     "ws": "^7.3.1"

src/lib/AdminAPI.js

@@ -0,0 +1,41 @@
+import rest from 'superagent';
+
+export class AdminAPI{
+  constructor(baseUrl, accessToken){
+    this.baseUrl = baseUrl;
+    this.accessToken = accessToken;
+  }
+  
+  async sendRequest({path, obj={}, method=rest=>rest.get}){
+    return await method(rest)(`${this.baseUrl}${path}?access_token=${this.accessToken}`)
+      .send(JSON.stringify(obj)).set('accept', 'json').then(res => {
+        return JSON.parse(res.text);
+      });
+  }
+
+  async getUsers(){
+    return await this.sendRequest({path: 'users'});
+  }
+  async resetPassword(userId, newPassword){
+    return await this.sendRequest({
+      path: `reset_password/${userId}`,
+      obj: {
+        new_password: newPassword,
+        logout_devices: true
+      }
+    });
+  }
+  async createUser(userId, password, displayName, avatarUrl=undefined){
+    return await this.sendRequest({
+      path: `reset_password/${userId}`,
+      method: rest=>rest.put,
+      obj: {
+        'password': password,
+        'displayname': displayName,
+        'avatar_url': avatarUrl,
+        'admin': false,
+        'deactivated': false
+      }
+    });
+  }
+}

src/lib/matrixHandler.js

@@ -31,6 +31,7 @@ export class MatrixHandler {
         callback(response.access_token);
         this.user = user;
         this.baseUrl = baseUrl;
+        this.accessToken = response.access_token;
         this.startSync()
       }
     }).catch(error => {
@@ -49,6 +50,7 @@ export class MatrixHandler {
     });
     this.user = userId;
     this.baseUrl = baseUrl;
+    this.accessToken = accessToken;
     this.startSync();
   }
   async logout(){

src/router.js

@@ -2,6 +2,7 @@ import VueRouter from 'vue-router';
 import login from '@/views/login';
 import chat from '@/views/chat';
 import rooms from '@/views/rooms';
+import admin from '@/views/admin';
 
 export const router = new VueRouter({
   routes: [
@@ -29,6 +30,11 @@ export const router = new VueRouter({
       path: '/rooms',
       name: 'rooms',
       component: rooms
+    },
+    {
+      path: '/admin',
+      name: 'admin',
+      component: admin
     }
   ]
 })

src/views/admin.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="admin">
+    <h2>users</h2>
+    <table v-if="users">
+      <tr>
+        <th class="left">user</th>
+        <th class="mid">displayname</th>
+        <th class="mid">deactivated</th>
+        <th class="right">admin</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="right">{{user.admin}}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import {matrix} from "@/main";
+import {AdminAPI} from "@/lib/AdminAPI";
+
+export default {
+  name: "admin",
+  data(){
+    return{
+      users: undefined
+    }
+  },
+  async created() {
+    this.api = new AdminAPI(matrix.baseUrl+'/_synapse/admin/v2/', matrix.accessToken);
+    this.users = await this.api.getUsers('users');
+  }
+}
+</script>
+
+<style scoped>
+.admin{
+  text-align: center;
+}
+table {
+  position: relative;
+  margin: auto;
+  width: calc(100% - 2rem);
+  max-width: 40rem;
+  background-color: #1f262b;
+  box-shadow: 3px 3px 10px #333;
+  border: 2px solid #fff;
+  border-collapse: separate;
+  border-spacing: 2px;
+  border-radius: 0.75rem;
+  color: #fff;
+  font-size: 1.2rem;
+  font-family: "Roboto", regular, sans-serif;
+}
+
+tr {
+  margin: auto;
+  border: 1px solid #fff;
+  text-align: left;
+}
+
+th {
+  margin: auto;
+  background-color: #546E7A;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+td {
+  margin: auto;
+  background-color: #37474F;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+td.left, th.left {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+td.right, th.right {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+td.mid, th.mid {
+  border-radius: 0 0 0 0;
+}
+</style>