refactor: Migrate to Vue components

server/views/pages/admin/_layout.pug

@@ -4,7 +4,7 @@ block rootNavCenter
   h2.nav-item= t('nav.account')
 
 block rootNavRight
-  i.nav-item#notifload
+  loading-spinner
   .nav-item
     a.button.btn-edit-discard(href='/')
       i.icon-home
@@ -48,6 +48,10 @@ block content
                   a(href='/admin/settings')
                     i.icon-cog
                     span= t('nav.syssettings')
+                li
+                  a(href='/admin/theme')
+                    i.icon-drop
+                    span= t('nav.theme')
               li
                 a(href='/logout')
                   i.icon-delete2

server/views/pages/admin/profile.pug

@@ -1,53 +1,51 @@
 extends ./_layout.pug
 
 block adminContent
-  #page-type-admin-profile
-    .hero
-      h1.title#title= t('nav.myprofile')
-      h2.subtitle= t('admin:profile.subtitle')
-    .form-sections
-      .columns.is-gapless
-        .column.is-two-thirds
-          section
-            label.label= t('admin:profile.email')
-            p.control.is-fullwidth
-              input.input(type='text', placeholder=t('admin:profile.email'), value=user.email, disabled)
-          if user.provider === 'local'
+  .hero
+    h1.title#title= t('nav.myprofile')
+    h2.subtitle= t('admin:profile.subtitle')
+  .form-sections
+    .columns.is-gapless
+      .column.is-two-thirds
+        admin-profile(inline-template, email=user.email, name=user.name, provider=user.provider)
+          div
             section
-              label.label= t('admin:profile.password')
+              label.label= t('admin:profile.email')
               p.control.is-fullwidth
-                input.input(type='password', placeholder=t('admin:profile.password'), value='********', v-model='password')
+                input.input(type='text', placeholder=t('admin:profile.email'), value=user.email, disabled)
+            if user.provider === 'local'
+              section
+                label.label= t('admin:profile.password')
+                p.control.is-fullwidth
+                  input.input(type='password', placeholder=t('admin:profile.password'), value='********', v-model='password')
+              section
+                label.label= t('admin:profile.passwordverify')
+                p.control.is-fullwidth
+                  input.input(type='password', placeholder=t('admin:profile.password'), value='********', v-model='passwordVerify')
             section
-              label.label= t('admin:profile.passwordverify')
+              label.label= t('admin:profile.displayname')
               p.control.is-fullwidth
-                input.input(type='password', placeholder=t('admin:profile.password'), value='********', v-model='passwordVerify')
-          section
-            label.label= t('admin:profile.displayname')
-            p.control.is-fullwidth
-              input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name')
-          section
-            button.button.is-green(v-on:click='saveUser')
-              i.icon-check
-              span= t('admin:profile.savechanges')
-        .column
-          .panel-aside
-            label.label= t('admin:profile.provider')
-            p.control.account-profile-provider
-              case user.provider
-                when 'local': i.icon-server
-                when 'windowslive': i.icon-windows2.is-blue
-                when 'azure': i.icon-windows2.is-blue
-                when 'google': i.icon-google.is-blue
-                when 'facebook': i.icon-facebook.is-indigo
-                when 'github': i.icon-github.is-grey
-                when 'slack': i.icon-slack.is-purple
-                when 'ldap': i.icon-arrow-repeat-outline
-                default: i.icon-warning
-              = t('auth:providers.' + user.provider)
-            label.label= t('admin:profile.membersince')
-            p.control= moment(user.createdAt).format('LL')
-            label.label= t('admin:profile.lastprofileupdate')
-            p.control= moment(user.updatedAt).format('LL')
-
-  script(type='text/javascript').
-    var usrDataName = "!{user.name}";
+                input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name')
+            section
+              button.button.is-green(v-on:click='saveUser')
+                i.icon-check
+                span= t('admin:profile.savechanges')
+      .column
+        .panel-aside
+          label.label= t('admin:profile.provider')
+          p.control.account-profile-provider
+            case user.provider
+              when 'local': i.icon-server
+              when 'windowslive': i.icon-windows2.is-blue
+              when 'azure': i.icon-windows2.is-blue
+              when 'google': i.icon-google.is-blue
+              when 'facebook': i.icon-facebook.is-indigo
+              when 'github': i.icon-github.is-grey
+              when 'slack': i.icon-slack.is-purple
+              when 'ldap': i.icon-arrow-repeat-outline
+              default: i.icon-warning
+            = t('auth:providers.' + user.provider)
+          label.label= t('admin:profile.membersince')
+          p.control= moment(user.createdAt).format('LL')
+          label.label= t('admin:profile.lastprofileupdate')
+          p.control= moment(user.updatedAt).format('LL')

server/views/pages/admin/settings.pug

@@ -1,10 +1,10 @@
 extends ./_layout.pug
 
 block adminContent
-  #page-type-admin-settings
-    .hero
-      h1.title#title= t('nav.syssettings')
-      h2.subtitle= t('admin:settings.subtitle')
+  .hero
+    h1.title#title= t('nav.syssettings')
+    h2.subtitle= t('admin:settings.subtitle')
+  admin-settings(inline-template)
     .form-sections
       section
         img(src='/images/logo.png', style={width:'200px', float:'right'})
@@ -34,4 +34,4 @@ block adminContent
           p.is-small= t('admin:settings.flushsessionstext')
           p: button.button.is-teal.is-outlined(v-on:click='flushsessions')= t('admin:settings.flushsessionsbtn')
 
-    include ../../modals/admin-upgrade.pug
+      include ../../modals/admin-upgrade.pug

server/views/pages/admin/theme.pug

@@ -0,0 +1,11 @@
+extends ./_layout.pug
+
+block adminContent
+  #page-type-admin-settings
+    .hero
+      h1.title#title= t('nav.theme')
+      h2.subtitle= t('admin:theme.subtitle')
+    .form-sections
+      section
+        label.label= t('admin:theme.primarycolor')
+        color-picker