a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

usersettings: use panels to split different parts

This commit is contained in:
Simone Gotti 2019-05-13 18:06:47 +02:00
parent 68da08e94d
commit d8fddd5392
1 changed files with 79 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/usersettings.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<h4 class="title is-4">Linked Accounts</h4> <nav class="panel">
<p class="panel-heading">Linked Accounts</p>
<div class="panel-block is-block">
<div class="message is-danger"> <div class="message is-danger">
<div <div
class="message-body" class="message-body"
@ -29,23 +31,43 @@
</div> </div>
</div> </div>
<div v-else>No linked accounts</div> <div v-else>No linked accounts</div>
<hr> </div>
<h4 class="title is-4">User Tokens</h4> </nav>
<nav class="panel">
<p class="panel-heading">User Tokens</p>
<div class="panel-block is-block">
<div v-if="user.tokens"> <div v-if="user.tokens">
<div class="item-list" v-for="token in user.tokens" v-bind:key="token"> <div class="item-list" v-for="token in user.tokens" v-bind:key="token">
<div class="field is-grouped"> <nav class="level item">
<div class="level-left">
<div class="level-item">
<div class="control"> <div class="control">
<input class="input" disabled type="text" placeholder="Token name" :value="token"> <input
class="input"
disabled
type="text"
placeholder="Token name"
:value="token"
>
</div> </div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<button class="button is-primary" @click="deleteUserToken(token)">Delete</button> <button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
</div> </div>
</div> </div>
</nav>
</div>
<div v-if="deleteUserTokenError" class="message is-danger"> <div v-if="deleteUserTokenError" class="message is-danger">
<div class="message-body">{{ deleteUserTokenError }}</div> <div class="message-body">{{ deleteUserTokenError }}</div>
</div> </div>
</div> </div>
<div v-else>No user tokens</div> <div v-else>No user tokens</div>
<hr> </div>
<div class="panel-block is-block">
<div v-if="token" class="notification is-success"> <div v-if="token" class="notification is-success">
<button class="delete" @click="closeNewTokenNotification()"></button> <button class="delete" @click="closeNewTokenNotification()"></button>
User token created: {{token}} User token created: {{token}}
@ -53,7 +75,12 @@
<h5 class="title is-5">Create new User Token</h5> <h5 class="title is-5">Create new User Token</h5>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<input class="input is-primary" type="text" placeholder="Token name" v-model="newtokenname"> <input
class="input is-primary"
type="text"
placeholder="Token name"
v-model="newtokenname"
>
</div> </div>
<button class="button is-primary" @click="createUserToken()">Create Token</button> <button class="button is-primary" @click="createUserToken()">Create Token</button>
</div> </div>
@ -61,6 +88,8 @@
<div class="message-body">{{ createUserTokenError }}</div> <div class="message-body">{{ createUserTokenError }}</div>
</div> </div>
</div> </div>
</nav>
</div>
</template> </template>
<script> <script>
@ -168,7 +197,6 @@ export default {
.item-list { .item-list {
.item { .item {
border-bottom: 1px solid $grey-lighter;
padding: 10px; padding: 10px;
} }
.name { .name {