feat: Color Theme page logic

server/locales/en/admin.json

@@ -9,7 +9,12 @@
     "passwordverify": "Verify Password",
     "provider": "Provider",
     "savechanges": "Save Changes",
-    "subtitle": "Profile and authentication info"
+    "subtitle": "Profile and authentication info",
+    "tfa": "Two-Factor Authentication",
+    "tfadisable": "Disable 2FA",
+    "tfadisabled": "Disabled",
+    "tfaenable": "Enable 2FA",
+    "tfaenabled": "Enabled"
   },
   "stats": {
     "subtitle": "General site-wide statistics",
@@ -36,6 +41,25 @@
     "flushsessionstext": "All users will be logged out and forced to login again. Your current session will also be affected!",
     "flushsessionsbtn": "Flush Sessions"
   },
+  "system": {
+    "subtitle": "Information and utilities for your wiki"
+  },
+  "theme": {
+    "subtitle": "Change the look and feel of your wiki",
+    "primarycolor": "Primary Color",
+    "primarycolordesc": "Used for top navigation bar, headers, links, etc.",
+    "altcolor": "Alternate Color",
+    "altcolordesc": "Used for the sidebar (in a darker tone)",
+    "footercolor": "Footer Color",
+    "footercolordesc": "Used for the foter (in a lighter tone)",
+    "codeblock": {
+      "title": "Code Blocks",
+      "dark": "Use Dark Theme",
+      "colorize": "Colorize code syntax"
+    },
+    "savechanges": "Save Changes",
+    "reset": "Revert to Defaults"
+  },
   "users": {
     "createauthorize": "Create / Authorize User",
     "subtitle": "Manage users and access rights",
@@ -48,4 +72,4 @@
     "edituser": "Edit User",
     "uniqueid": "Unique ID"
   }
-}
+}

server/locales/en/common.json

@@ -33,6 +33,7 @@
     "settings": "Settings",
     "source": "Source",
     "stats": "Stats",
+    "sysinfo": "System Info",
     "syssettings": "System Settings",
     "theme": "Color Theme",
     "users": "Users",
@@ -47,4 +48,4 @@
     "source": "Loading source...",
     "editor": "Loading editor..."
   }
-}
+}

server/views/pages/admin/_layout.pug

@@ -46,7 +46,7 @@ block content
                     span= t('nav.users')
                 li
                   a(href='/admin/theme')
-                    i.nc-icon-outline.design_paint-37
+                    i.nc-icon-outline.ui-1_drop
                     span= t('nav.theme')
                 li
                   a(href='/admin/settings')

server/views/pages/admin/theme.pug

@@ -4,25 +4,29 @@ block adminContent
   .hero
     h1.title#title= t('nav.theme')
     h2.subtitle= t('admin:theme.subtitle')
-    i.pageicon.nc-icon-outline.design_paint-37
-  .form-sections
-    section
-      label.label= t('admin:theme.primarycolor')
-      color-picker(current-color=appconfig.theme.primary)
-      span.desc Used for top navigation bar, headers, links, etc.
-    section
-      label.label= t('admin:theme.altcolor')
-      color-picker(current-color=appconfig.theme.alt)
-      span.desc Used for the sidebar (in a darker tone)
-    section
-      label.label= t('admin:theme.footercolor')
-      color-picker(current-color=appconfig.theme.footer)
-      span.desc Used for the foter (in a lighter tone)
-    section
-      label.label= t('admin:theme.codeblock')
-      toggle(:current-value=appconfig.theme.code.dark.toString(), desc='Use Dark Theme')
-      toggle(:current-value=appconfig.theme.code.colorize.toString(), desc='Colorize code syntax')
-    section
-      button.button.is-green(@click='saveUser')
-        i.nc-icon-outline.ui-1_check
-        span= t('admin:profile.savechanges')
+    i.pageicon.nc-icon-outline.ui-1_drop
+  admin-theme(inline-template, themedata=JSON.stringify(appconfig.theme))
+    .form-sections
+      section
+        label.label= t('admin:theme.primarycolor')
+        color-picker(v-model='primary')
+        span.desc= t('admin:theme.primarycolordesc')
+      section
+        label.label= t('admin:theme.altcolor')
+        color-picker(v-model='alt')
+        span.desc= t('admin:theme.altcolordesc')
+      section
+        label.label= t('admin:theme.footercolor')
+        color-picker(v-model='footer')
+        span.desc= t('admin:theme.footercolordesc')
+      section
+        label.label= t('admin:theme.codeblock.title')
+        toggle(v-model='codedark', desc=t('admin:theme.codeblock.dark'))
+        toggle(v-model='codecolorize', desc=t('admin:theme.codeblock.colorize'))
+      section
+        button.button.is-grey(@click='resetTheme')
+          i.nc-icon-outline.design_paint-37
+          span= t('admin:theme.reset')
+        button.button.is-green(@click='saveTheme')
+          i.nc-icon-outline.ui-1_check
+          span= t('admin:theme.savechanges')