fix update user and input styling

add-admin-interface
adb 4 years ago
parent 7292700cc9
commit 6a92858ac1

@ -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>

Before

Width:  |  Height:  |  Size: 210 B

@ -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>

Before

Width:  |  Height:  |  Size: 199 B

@ -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>

Before

Width:  |  Height:  |  Size: 265 B

@ -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>

Before

Width:  |  Height:  |  Size: 201 B

@ -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>

Before

Width:  |  Height:  |  Size: 350 B

@ -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>

Before

Width:  |  Height:  |  Size: 465 B

@ -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;

@ -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;

@ -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
}
});
}

@ -1,36 +1,67 @@
<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="right">admin</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="right">{{user.admin}}</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>

@ -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%;

@ -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;

Loading…
Cancel
Save