usersettings: use panels to split different parts
This commit is contained in:
Simone Gotti
parent
68da08e94d
commit
d8fddd5392
|
|
@ -1,65 +1,94 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Linked Accounts</h4>
|
||||
<div class="message is-danger">
|
||||
<div
|
||||
class="message-body"
|
||||
>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</div>
|
||||
</div>
|
||||
<div v-if="user.linked_accounts">
|
||||
<div class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
|
||||
<nav class="level item">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<span class="name">{{la.remote_user_name}}</span>
|
||||
<span class="remotesource-name">( {{laRemoteSourceName(la)}} )</span>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Linked Accounts</p>
|
||||
<div class="panel-block is-block">
|
||||
<div class="message is-danger">
|
||||
<div
|
||||
class="message-body"
|
||||
>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</div>
|
||||
</div>
|
||||
<div v-if="user.linked_accounts">
|
||||
<div class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
|
||||
<nav class="level item">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<span class="name">{{la.remote_user_name}}</span>
|
||||
<span class="remotesource-name">( {{laRemoteSourceName(la)}} )</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-primary" @click="deleteLinkedAccount(la)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-primary" @click="deleteLinkedAccount(la)">Delete</button>
|
||||
</div>
|
||||
<div v-if="deleteLinkedAccountError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteLinkedAccountError }}</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div v-else>No linked accounts</div>
|
||||
</div>
|
||||
<div v-if="deleteLinkedAccountError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteLinkedAccountError }}</div>
|
||||
</nav>
|
||||
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">User Tokens</p>
|
||||
<div class="panel-block is-block">
|
||||
<div v-if="user.tokens">
|
||||
<div class="item-list" v-for="token in user.tokens" v-bind:key="token">
|
||||
<nav class="level item">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
disabled
|
||||
type="text"
|
||||
placeholder="Token name"
|
||||
:value="token"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div v-if="deleteUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteUserTokenError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>No user tokens</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>No linked accounts</div>
|
||||
<hr>
|
||||
<h4 class="title is-4">User Tokens</h4>
|
||||
<div v-if="user.tokens">
|
||||
<div class="item-list" v-for="token in user.tokens" v-bind:key="token">
|
||||
|
||||
<div class="panel-block is-block">
|
||||
<div v-if="token" class="notification is-success">
|
||||
<button class="delete" @click="closeNewTokenNotification()"></button>
|
||||
User token created: {{token}}
|
||||
</div>
|
||||
<h5 class="title is-5">Create new User Token</h5>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input class="input" disabled type="text" placeholder="Token name" :value="token">
|
||||
<input
|
||||
class="input is-primary"
|
||||
type="text"
|
||||
placeholder="Token name"
|
||||
v-model="newtokenname"
|
||||
>
|
||||
</div>
|
||||
<button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
|
||||
<button class="button is-primary" @click="createUserToken()">Create Token</button>
|
||||
</div>
|
||||
<div v-if="createUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ createUserTokenError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="deleteUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteUserTokenError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>No user tokens</div>
|
||||
<hr>
|
||||
<div v-if="token" class="notification is-success">
|
||||
<button class="delete" @click="closeNewTokenNotification()"></button>
|
||||
User token created: {{token}}
|
||||
</div>
|
||||
<h5 class="title is-5">Create new User Token</h5>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Token name" v-model="newtokenname">
|
||||
</div>
|
||||
<button class="button is-primary" @click="createUserToken()">Create Token</button>
|
||||
</div>
|
||||
<div v-if="createUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ createUserTokenError }}</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -168,7 +197,6 @@ export default {
|
|||
|
||||
.item-list {
|
||||
.item {
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
|
|
|
|||
Loading…
Reference in New Issue