refactor: Migrate to Vue components

server/controllers/admin.js

@@ -255,4 +255,11 @@ router.post('/settings/install', (req, res) => {
   res.status(400).send('Sorry, Upgrade/Re-Install via the web UI is not yet ready. You must use the npm upgrade method in the meantime.').end()
 })
 
+router.get('/theme', (req, res) => {
+  if (!res.locals.rights.manage) {
+    return res.render('error-forbidden')
+  }
+  res.render('pages/admin/theme', { adminTab: 'theme' })
+})
+
 module.exports = router

server/locales/en/admin.json

@@ -48,4 +48,4 @@
     "edituser": "Edit User",
     "uniqueid": "Unique ID"
   }
-}
+}

server/locales/en/browser.json

@@ -0,0 +1,16 @@
+{
+  "profile": {
+    "displayname": "Display Name",
+    "displaynameexample": "John Smith",
+    "email": "Email",
+    "password": "Password",
+    "passwordverify": "Verify Password",
+    "savechanges": "Save Changes"
+  },
+  "search": {
+    "placeholder": "Search...",
+    "results": "Search Results",
+    "nomatch": "No results matching your query",
+    "didyoumean": "Did you mean...?"
+  }
+}

server/locales/en/common.json

@@ -9,12 +9,6 @@
     "home": "Home",
     "top": "Return to top"
   },
-  "search": {
-    "placeholder": "Search...",
-    "results": "Search Results",
-    "nomatch": "No results matching your query",
-    "didyoumean": "Did you mean...?"
-  },
   "sidebar": {
     "nav": "NAV",
     "navigation": "Navigation",
@@ -24,9 +18,11 @@
   "nav": {
     "home": "Home",
     "account": "Account",
+    "settings": "Settings",
     "myprofile": "My Profile",
     "stats": "Stats",
     "syssettings": "System Settings",
+    "theme": "Color Theme",
     "users": "Users",
     "logout": "Logout",
     "create": "Create",
@@ -51,4 +47,4 @@
     "source": "Loading source...",
     "editor": "Loading editor..."
   }
-}
+}

server/locales/fr/common.json

@@ -24,9 +24,11 @@
   "nav": {
     "home": "Accueil",
     "account": "Compte",
+    "settings": "Paramètres",
     "myprofile": "Mon Profil",
     "stats": "Statistiques",
     "syssettings": "Paramètres système",
+    "theme": "Thème de couleur",
     "users": "Utilisateurs",
     "logout": "Se Déconnecter",
     "create": "Créer",
@@ -51,4 +53,4 @@
     "source": "Chargement de la source...",
     "editor": "Chargement de l'éditeur"
   }
-}
+}

server/views/common/header.pug

@@ -9,26 +9,11 @@
             = appconfig.title
     .nav-center
       block rootNavCenter
-        .nav-item
-          p.control(v-bind:class='{ "is-loading": searchload > 0 }')
-            input.input#search-input(type='text', v-model='searchq', @keyup.esc='closeSearch', @keyup.down='moveDownSearch', @keyup.up='moveUpSearch', @keyup.enter='moveSelectSearch', debounce='400', placeholder=t('search.placeholder'))
+        search
     span.nav-toggle
       span
       span
       span
     .nav-right
       block rootNavRight
-        i.nav-item#notifload
-
-  transition(name='searchresults-anim', enter-active-class='slideInDown', leave-active-class='fadeOutUp')
-    .searchresults.animated(v-show='searchactive', v-cloak, style={'display':'none'})
-      p.searchresults-label= t('search.results')
-      ul.searchresults-list
-        li(v-if='searchres.length === 0')
-          a: em= t('search.nomatch')
-        li(v-for='sres in searchres', v-bind:class='{ "is-active": searchmovekey === "res." + sres.entryPath }')
-          a(v-bind:href='"/" + sres.entryPath') {{ sres.title }}
-      p.searchresults-label(v-if='searchsuggest.length > 0')= t('search.didyoumean')
-      ul.searchresults-list(v-if='searchsuggest.length > 0')
-        li(v-for='sug in searchsuggest', v-bind:class='{ "is-active": searchmovekey === "sug." + sug }')
-          a(v-on:click='useSuggestion(sug)') {{ sug }}
+        loading-spinner

server/views/layout.pug

@@ -9,7 +9,7 @@ html
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
-    // Favicon
+    //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
       link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
     link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
@@ -17,7 +17,10 @@ html
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
 
-    // JS / CSS
+    //- Site Lang
+    script var siteLang = '!{appconfig.lang}';
+
+    //- JS / CSS
     script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
@@ -26,7 +29,7 @@ html
   body
     #root.has-stickynav
       include ./common/header.pug
-      include ./common/alerts.pug
+      //-include ./common/alerts.pug
       main
         block content
       include ./common/footer.pug

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

server/views/pages/view.pug

@@ -57,8 +57,8 @@ block content
               if !isGuest
                 li
                   a(href='/admin')
-                    i.icon-head
-                    span= t('nav.account')
+                    i.icon-cog
+                    span= t('nav.settings')
               else
                 li
                   a(href='/login')