From d8fddd5392f95ef6fb012e5d8698da1bbad5bb18 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Mon, 13 May 2019 18:06:47 +0200
Subject: [PATCH] usersettings: use panels to split different parts

---
 src/components/usersettings.vue | 130 +++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 51 deletions(-)

diff --git a/src/components/usersettings.vue b/src/components/usersettings.vue
index 026fc25..138631a 100644
--- a/src/components/usersettings.vue
+++ b/src/components/usersettings.vue
@@ -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 {