mainly looks changes

src/script/component/Ban.vue

@@ -21,7 +21,9 @@
         span.value(v-if='expires_at') {{ new Date(expires_at).toString() }}
         span.value(v-else='v-else')
           b This ban is permanent.
-      .button.remove(@click='$parent.$emit("pardon", id)') Pardon
+      .button.remove(@click='$parent.$emit("pardon", id)') 
+        i.fa.fa-fw.fa-check
+        | Pardon
 </template>
 
 <script type="text/javascript">

src/script/component/BanList.vue

@@ -3,9 +3,9 @@
     h3 Bans ({{pagination.total}})
     .message.error(v-if='error') {{ error }}
     .entry(v-else)
-      pagination(v-bind="pagination" v-on:page="getBans")
+      pagination(:page="pagination.page" :pages="pagination.pages" v-on:page="getBans")
       .list.bans
-        ban(v-for='ban in bans' v-bind="ban")
+        ban(v-for='ban in bans' v-bind="ban" :key="ban.id")
 </template>
 
 <script type="text/javascript">

src/script/component/OAuthClient.vue

@@ -11,7 +11,7 @@
 
         .dropdown-wrapper.stamp(@click="dropdown = !dropdown" v-on-clickaway='away')
           i.fa.fa-fw.fa-ellipsis-v
-          transition(name="modal")
+          transition(name="pop")
             .dropdown(v-show="dropdown")
               .title Actions
               .action(@click="$parent.$emit('edit', id)") 
@@ -41,18 +41,21 @@
             span(v-show="!secretShown") Click here to reveal secret
             #hiddensecret(v-show="secretShown") {{ secret }}
       .section
-        span.key Created
-        span.value {{ new Date(created_at).toString() }}
+        span.key Grants
+        span.value {{ grants }}
       .section
         span.key Owner
         span.value {{ user.display_name }}
+      .section
+        span.key Created
+        span.value {{ new Date(created_at).toString() }}
 </template>
 
 <script type="text/javascript">
   import { directive as onClickaway } from 'vue-clickaway'
 
   export default {
-    props: ['icon', 'verified', 'title', 'description', 'url', 'scope', 'redirect_url', 'id', 'secret', 'created_at', 'user'],
+    props: ['icon', 'verified', 'title', 'description', 'url', 'scope', 'redirect_url', 'id', 'secret', 'created_at', 'user', 'grants'],
     data: function () {
       return {
         dropdown: false,

src/script/component/OAuthClients.vue

@@ -3,9 +3,9 @@
     button(@click="editing = -1") New Client
     .message.error(v-if="error") {{ error }}
     .entry(v-else)
-      pagination(v-bind="pagination" v-on:page="getClients")
+      pagination(:page="pagination.page" :pages="pagination.pages" v-on:page="getClients")
       .list.client
-        o-auth-client(v-for="client in clients" v-bind="client")
+        o-auth-client(v-for="client in clients" v-bind="client" :key="client.id")
         client-modal(:show="editing != 0" @close='editing = 0', :id='editing')
 </template>
 

src/script/component/User.vue

@@ -5,12 +5,15 @@
       img(v-else='v-else', src='/static/image/avatar.png')
     .info
       .stamps
+        .stamp(title="Used an external login" v-if="!password")
+          i.fa.fa-fw.fa-sign-out
+
         .noactive.stamp(v-if='activated == false', title='Not activated.')
           i.fa.fa-fw.fa-envelope
 
         .dropdown-wrapper.stamp(@click="dropdown = !dropdown" v-on-clickaway='away')
           i.fa.fa-fw.fa-ellipsis-v
-          transition(name="modal")
+          transition(name="pop")
             .dropdown(v-show="dropdown")
               .title Actions
               .action(v-if='bannable' v-on:click='$parent.$emit("ban", id)') 
@@ -18,19 +21,26 @@
                 | Ban User
 
       .display_name {{ display_name }}
-      .ame {{ id }} - {{ username }} ({{ uuid }})
-      .email {{ email }}
-      .privilege Privilege: level {{ nw_privilege }}
-      .timestamp {{ new Date(created_at).toString() }}
-      .external(v-if='!password')
-        b Used external login
+      .name {{ id }} - {{ username }} ({{ uuid }})
+      .section
+        span.key Email
+        span.value {{ email }}
+      .section
+        span.key Privilege
+        span.value {{ nw_privilege }}
+      .section
+        span.key Last IP
+        span.value {{ ip_address }}
+      .section
+        span.key Registered
+        span.value {{ new Date(created_at).toString() }}
 </template>
 
 <script type="text/javascript">
-  import { directive as onClickaway } from 'vue-clickaway';
+  import { directive as onClickaway } from 'vue-clickaway'
  
   export default {
-    props: ['avatar_file', 'activated', 'display_name', 'id', 'username', 'uuid', 'email', 'nw_privilege', 'created_at', 'password', 'bannable'],
+    props: ['avatar_file', 'activated', 'display_name', 'id', 'username', 'uuid', 'email', 'nw_privilege', 'created_at', 'password', 'bannable', 'ip_address'],
     directives: {
       onClickaway: onClickaway,
     },

src/script/component/UserList.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
   #userlist
     h3 Registered Users ({{ pagination.total }})
-    pagination(v-bind="pagination" v-on:page="getUsers")
+    pagination(:page="pagination.page" :pages="pagination.pages" v-on:page="getUsers")
     .list.users
-      user(v-for='user in users' v-bind="user")
+      user(v-for='user in users' v-bind="user" :key="user.id")
     ban-modal(:show='banning' @close='banning = 0' :id='banning')
 </template>
 

src/style/admin.styl

@@ -43,10 +43,14 @@ nav
     .stamps
         float: right
         .stamp
+            color: #2196F3
             padding: 5px
             font-size: 120%
             display: inline-block
 
+            &.noactive.stamp
+                color: #f70000
+
 .user
     min-height: 160px
     .avatar
@@ -75,7 +79,7 @@ nav
             background-color: #fff
 
 .application
-    min-height: 200px
+    min-height: 220px
 
     #hiddensecret
         color: #ff796f
@@ -93,15 +97,16 @@ nav
         display: inline-block
 
 .dropdown-wrapper
-    padding: 3px 0px
     border-radius: 5px
     position: relative
     cursor: pointer
+    color: #000 !important
 
     .dropdown
+        transition: all .2s ease
         cursor: default
         position: absolute
-        top: 25px
+        top: 30px
         right: 0
         background-color: #fff
         border: 1px solid #ddd
@@ -170,24 +175,20 @@ nav
     &.text-align
         text-align: center
 
-/*
- * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the modal transition by editing
- * these styles.
- */
-
 .fade-enter-active, .fade-leave-active
-  transition-property: opacity
-  transition-duration: .25s
+    transition-property: opacity
+    transition-duration: .25s
 
 .fade-enter-active
-  transition-delay: .25s
+    transition-delay: .25s
 
-.fade-enter, .fade-leave-active
-  opacity: 0
+.fade-enter, .fade-leave-active,
+.pop-enter, .pop-leave-active
+    opacity: 0
+
+.pop-enter, .pop-leave-active
+    -webkit-transform: scale(1.1)
+    transform: scale(1.1)
 
 .modal-enter
     opacity: 0