fix update user and input styling

public/sym/arrow_back-24px.svg

@@ -1 +0,0 @@
-<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/expand_more-black-24dp.svg

@@ -1 +0,0 @@
-<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_close_white_24px.svg

@@ -1,4 +0,0 @@
-<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_send_white_24px.svg

@@ -1,4 +0,0 @@
-<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/menu-24px.svg

@@ -1 +0,0 @@
-<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/supervisor_account-24px.svg

@@ -1 +0,0 @@
-<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/App.vue

@@ -22,6 +22,23 @@ export default {
 body{
   margin: 0;
 }
+input{
+  padding: 0 2rem 0 2rem;
+  height: 2.5rem;
+  color: #fff;
+  background-color: #1d1d1d;
+  border-radius: 1.25rem;
+  border: 1px solid #fff;
+  text-align: center;
+  font-size: 1.1rem;
+  margin: 0.5rem;
+  appearance: none;
+  outline: none;
+}
+input:focus{
+  color: #000;
+  background-color: #fff;
+}
 *{
   scrollbar-width: thin;
   scrollbar-color: #42b983 #2220;
@@ -50,7 +67,7 @@ body{
   top: 0;
   left: calc(50% - 35rem);
   padding: 0;
-  min-height: calc(100%);
+  min-height: 100%;
   width: 70rem;
   min-width: 18rem;
   background-color: #313131;

src/components/icon.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="iconContainer" >
-    <img class="icon" v-bind:src=ic alt="" />
+    <img class="icon" :src=ic alt="" />
   </button>
 </template>
 
@@ -15,6 +15,7 @@ name: "icon",
 
 <style scoped>
   .iconContainer{
+    position: relative;
     width: 3rem;
     height: 3rem;
     border-radius: 1.5rem;

src/lib/AdminAPI.js

@@ -8,33 +8,34 @@ export class AdminAPI{
   
   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 => {
+      .send(obj).set('accept', 'json').then(res => {
         return JSON.parse(res.text);
       });
   }
 
   async getUsers(){
-    return await this.sendRequest({path: 'users'});
+    return await this.sendRequest({path: 'v2/users'});
   }
-  async resetPassword(userId, newPassword){
+  async resetPassword({userId, password}){
     return await this.sendRequest({
-      path: `reset_password/${userId}`,
+      path: `v1/reset_password/${userId}`,
+      method: rest=>rest.post,
       obj: {
-        new_password: newPassword,
+        new_password: password,
         logout_devices: true
       }
     });
   }
-  async createUser(userId, password, displayName, avatarUrl=undefined){
+  async updateUser({userId, password, displayname, avatar_url=undefined}){
     return await this.sendRequest({
-      path: `reset_password/${userId}`,
+      path: `v2/users/${userId}`,
       method: rest=>rest.put,
       obj: {
-        'password': password,
-        'displayname': displayName,
-        'avatar_url': avatarUrl,
-        'admin': false,
-        'deactivated': false
+        password,
+        displayname,
+        avatar_url,
+        admin: false,
+        deactivated: false
       }
     });
   }

src/views/admin.vue

@@ -1,36 +1,67 @@
 <template>
   <div class="admin">
+    <h1>admin</h1>
     <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 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>
+    <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>
 </template>
 
 <script>
 import {matrix} from "@/main";
 import {AdminAPI} from "@/lib/AdminAPI";
+import icon from "@/components/icon";
+import textbtn from "@/components/textbtn";
 
 export default {
   name: "admin",
+  components:{
+    icon,
+    textbtn
+  },
   data(){
     return{
-      users: undefined
+      users: undefined,
+      newUser:{
+        userId: '',
+        password: '',
+        displayname: '',
+      }
+    }
+  },
+  methods:{
+    async updateUser(){
+      await this.api.updateUser(this.newUser);
     }
   },
   async created() {
-    this.api = new AdminAPI(matrix.baseUrl+'/_synapse/admin/v2/', matrix.accessToken);
+    this.api = new AdminAPI(matrix.baseUrl+'/_synapse/admin/', matrix.accessToken);
     this.users = await this.api.getUsers('users');
   }
 }
@@ -39,12 +70,29 @@ export default {
 <style scoped>
 .admin{
   text-align: center;
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+}
+.editIcon{
+  float: left;
+  margin: 0 0.25rem;
+}
+.edit{
+  width: 6rem;
+  text-align: center;
+}
+.tableScroll{
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow-x: auto;
 }
 table {
   position: relative;
   margin: auto;
   width: calc(100% - 2rem);
-  max-width: 40rem;
+  max-width: 80%;
   background-color: #1f262b;
   box-shadow: 3px 3px 10px #333;
   border: 2px solid #fff;
@@ -52,8 +100,9 @@ table {
   border-spacing: 2px;
   border-radius: 0.75rem;
   color: #fff;
-  font-size: 1.2rem;
-  font-family: "Roboto", regular, sans-serif;
+  font-size: 1rem;
+  table-layout: auto;
+  min-width: max-content;
 }
 
 tr {
@@ -65,20 +114,21 @@ tr {
 th {
   margin: auto;
   background-color: #546E7A;
-  padding: 20px;
-  border-radius: 8px;
+  padding: 1rem;
+  border-radius: 1rem;
   text-align: center;
 }
 
 td {
   margin: auto;
   background-color: #37474F;
-  padding: 10px;
-  border-radius: 8px;
+  padding: 0.5rem;
+  border-radius: 1rem;
 }
 
 td.left, th.left {
   border-radius: 0.5rem 0 0 0.5rem;
+  width: auto;
 }
 
 td.right, th.right {
@@ -87,5 +137,6 @@ td.right, th.right {
 
 td.mid, th.mid {
   border-radius: 0 0 0 0;
+  width: auto;
 }
 </style>

src/views/login.vue

@@ -108,23 +108,6 @@ export default {
   height: min-content;
   width: 100%;
 }
-input{
-  padding: 0 2rem 0 2rem;
-  height: 2.5rem;
-  color: #fff;
-  background-color: #1d1d1d;
-  border-radius: 1.25rem;
-  border: 1px solid #fff;
-  text-align: center;
-  font-size: 1.1rem;
-  margin: 0.5rem;
-  appearance: none;
-  outline: none;
-}
-input:focus{
-  color: #000;
-  background-color: #fff;
-}
 .throbber{
   position: absolute;
   top: 50%;

src/views/rooms.vue

@@ -102,19 +102,7 @@ export default {
   text-align: center;
 }
 input{
-  padding: 0 2rem 0 2rem;
-  height: 2.5rem;
-  width: calc(100% - 6rem);
-  left: 1rem;
-  color: #fff;
-  background-color: #1d1d1d;
-  border-radius: 1.25rem;
-  border: 1px solid #fff;
-  text-align: center;
-  font-size: 1.1rem;
-  margin: 0.5rem;
-  appearance: none;
-  outline: none;
+  width: calc(100% - 5rem);
 }
 .wideElement{
   display: block;