added avitar upload, created framework for dark and light theme, fixed inconsistent theme display bug

brain/api/content/settings.js

@@ -23,7 +23,7 @@ const fs = require('fs-extra');
 const Models = require('../../models');
 const dateUtils = new DateUtils();
 const rightsManager = new RightsManager();
-const uploadPath = "./content/blog-images/" + dateUtils.getDate('year', new Date()) + "/" + dateUtils.getDate('month', new Date());
+const uploadPath = "./content/user-images/" + dateUtils.getDate('year', new Date()) + "/" + dateUtils.getDate('month', new Date());
 const Sequelize = require('sequelize');
 const Op = Sequelize.Op;
 const _ = require('lodash');
@@ -47,11 +47,11 @@ var storage = multer.diskStorage(
 var avatar_upload = multer(
 {
     storage: storage
-}).array('avatar');
+}).array('avatar_upload');
 var background_upload = multer(
 {
     storage: storage
-}).array('feature_background');
+}).array('background_upload');
 //** SYNC POSTS */
 router.post("/sync", (req, res, next) =>
 {
@@ -138,11 +138,22 @@ router.post('/add-avatar', function(req, res, next)
                 }
                 else
                 {
-                    var postImage = req.files[0].path;
+                    var avatar = req.files[0].path;
+                    user.update(
+                    {
+                        avatar:  avatar.substr(7, avatar.length)
+                    }).then(updated =>
+                    {
+                        
+                        req.session.user = updated;
+                    }).catch(err =>
+                    {
+                        console.log("ERR", err);
+                    })
                     return res.json(
                     {
-                        message: DataEvent.POST_IMAGE_ADDED,
-                        url: postImage.substr(7, postImage.length)
+                        message: DataEvent.AVATAR_UPLOADED,
+                        url: avatar.substr(7, avatar.length)
                     });
                 }
             });

brain/routes/back/dash_settings.js

@@ -3,7 +3,6 @@ const router = express.Router();
 const FileHound = require('filehound');
 const Models = require('../../models');
 const fs = require("fs-extra");
-var themes = [];
 var settings = [];
 //--------------------------
 // SETTINGS
@@ -17,38 +16,50 @@ router.get('/', function(req, res)
     {
         //console.error(err)
     })
+    let themes = [];
     FileHound.create().paths('themes').ext('json').find().then(files =>
     {
-        themes = [];
-        for (let index = 0; index < files.length; index++)
+        files.forEach(file =>
         {
-            fs.readJson(files[index]).then(theme =>
+            fs.readJson(file).then(theme =>
             {
-                (theme.name == settings.theme) ? themes.push(
+                if (theme.name == settings.theme)
+                {
+                    themes.push(
                     {
                         theme: theme,
                         current: "true"
-                }): themes.push(
+                    })
+                }
+                else
+                {
+                    themes.push(
                     {
                         theme: theme,
                         current: "false"
                     })
+                }
             }).catch(err =>
             {
                 //console.error(err)
             })
-        }
         });
         if (req.session.user)
         {
             let memberInfo = [];
+            Models.User.findById(req.session.user.id).then((user) =>
+            {
                 memberInfo.push(
                 {
-            handle: req.session.user.handle,
-            email: req.session.user.email,
-            avi: req.session.user.avatar
+                    handle: user.handle,
+                    email: user.email,
+                    avi: user.avatar
+                });
+                themes.sort(function(a, b) {
+                    var textA = a.theme.name.toUpperCase();
+                    var textB = b.theme.name.toUpperCase();
+                    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
                 });
-        console.log("THEMES", themes);
                 res.render('dash/settings',
                 {
                     title: 'Dashboard | Settings',
@@ -56,10 +67,12 @@ router.get('/', function(req, res)
                     settings: settings,
                     member: memberInfo[0]
                 });
+            })
         }
         else
         {
             res.redirect('/@/dashboard');
         }
+    });
 });
 module.exports = router;

brain/tools/events/DataEvent.js

@@ -19,6 +19,7 @@ export const POST_DELETED = 'postImageAdded';
 export const POSTS_SYNCED = 'postsSynced';
 export const LOCAL_DB_READY = 'localDBReady';
 export const SETTINGS_UPDATED = 'settingsUpdated';
+export const AVATAR_UPLOADED = 'avatarUploaded';
 class DataEvent
 {
 

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "The most chill blog framework ever.",
   "repository": "https://code.playvicio.us/Are0h/Fipamo",
-  "theme": "default",
+  "theme": "default-light",
   "scripts": {
     "start": "forever start -r esm init.js",
     "stop": "forever stop init.js",

site-settings.json

@@ -1 +1,22 @@
-{"url":"http://fipamo.local","title":"This is Fipamo, bro","description":"The most chill blog framework ever.","theme":"default","private":"false","email":{"smtp":{"domain":"","email":"","password":""},"mailgun":{"domain":"","api-key":""}}}
+{
+    "url": "http://fipamo.local",
+    "title": "This is Fipamo, bro",
+    "description": "The most chill blog framework ever.",
+    "theme": "default-light",
+    "private": "false",
+    "feautred-url":"",
+    "email":
+    {
+        "smtp":
+        {
+            "domain": "",
+            "email": "",
+            "password": ""
+        },
+        "mailgun":
+        {
+            "domain": "",
+            "api-key": ""
+        }
+    }
+}

themes/dash/assets/css/dash.css

@@ -1897,9 +1897,10 @@ svg.icons {
 }
 #settings-index #settings-index-wrapper #member-avatar-drop img {
   width: 200px;
-  border: 1px solid #f2f1ef;
-  border-radius: 100px;
+  border: 5px solid #f2f1ef;
+  border-radius: 150px;
   overflow: hidden;
+  cursor: pointer;
 }
 #settings-index #settings-index-wrapper #member-avatar-drop input {
   visibility: hidden;
@@ -1913,7 +1914,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #member-settings label,
 #settings-index #settings-index-wrapper #site-settings label,
 #settings-index #settings-index-wrapper #theme-settings label {
-  font-family: "Apercu-Mono";
+  font-family: 'Apercu-Mono';
   color: #f2f1ef;
 }
 #settings-index #settings-index-wrapper #member-settings input,
@@ -1934,9 +1935,9 @@ svg.icons {
   margin-top: 10px;
   padding: 10px;
 }
-#settings-index #settings-index-wrapper #theme-settings a {
+#settings-index #settings-index-wrapper #theme-settings a[data-enabled='false'] {
   width: 310px;
-  margin-right: 5px;
+  margin: 0 5px 5px 0;
   height: 25px;
   padding: 10px;
   display: inline-block;
@@ -1944,6 +1945,21 @@ svg.icons {
   color: #b2cce5;
   border-radius: 3px;
 }
+#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] {
+  width: 310px;
+  margin: 0 5px 5px 0;
+  height: 25px;
+  padding: 10px;
+  display: inline-block;
+  background: #b2cce5;
+  color: #374857;
+  border-radius: 3px;
+}
+#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] svg {
+  fill: #374857;
+  display: inline-block;
+  float: right;
+}
 /**
 -------------------------------
 -- Forms
@@ -1972,7 +1988,7 @@ textarea {
 button,
 input[type=submit] {
   background: #fc6399;
-  color: #f2f1ef;
+  color: #161d23;
   font: 1em 'Apercu-Mono';
   border-radius: 3px;
   position: relative;

themes/dash/assets/js/dash.min.js

@@ -197,7 +197,7 @@ exports.default = _default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SETTINGS_UPDATED = exports.LOCAL_DB_READY = exports.POSTS_SYNCED = exports.POST_DELETED = exports.POST_UPDATED = exports.POST_ADDED = exports.POST_ERROR = exports.FEATURE_IMAGE_ADDED = exports.POST_IMAGE_ADDED = exports.PROJECTS_SORTED = exports.PROJECT_ADDED = exports.PROJECT_UPDATED = exports.ARCHIVES_ENTRY_LOADED = exports.ARCHIVES_PAGE_LOADED = exports.ARCHIVES_JSON_LOADED = exports.HTML_LOADED = exports.SETTINGS_LOADED = exports.IMG_REQUEST_LAME = exports.IMG_REQUEST_GOOD = exports.REQUEST_LAME = exports.REQUEST_GOOD = void 0;
+exports.default = exports.AVATAR_UPLOADED = exports.SETTINGS_UPDATED = exports.LOCAL_DB_READY = exports.POSTS_SYNCED = exports.POST_DELETED = exports.POST_UPDATED = exports.POST_ADDED = exports.POST_ERROR = exports.FEATURE_IMAGE_ADDED = exports.POST_IMAGE_ADDED = exports.PROJECTS_SORTED = exports.PROJECT_ADDED = exports.PROJECT_UPDATED = exports.ARCHIVES_ENTRY_LOADED = exports.ARCHIVES_PAGE_LOADED = exports.ARCHIVES_JSON_LOADED = exports.HTML_LOADED = exports.SETTINGS_LOADED = exports.IMG_REQUEST_LAME = exports.IMG_REQUEST_GOOD = exports.REQUEST_LAME = exports.REQUEST_GOOD = void 0;
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -243,6 +243,8 @@ var LOCAL_DB_READY = 'localDBReady';
 exports.LOCAL_DB_READY = LOCAL_DB_READY;
 var SETTINGS_UPDATED = 'settingsUpdated';
 exports.SETTINGS_UPDATED = SETTINGS_UPDATED;
+var AVATAR_UPLOADED = 'avatarUploaded';
+exports.AVATAR_UPLOADED = AVATAR_UPLOADED;
 
 var DataEvent = function DataEvent() {
   _classCallCheck(this, DataEvent);
@@ -8388,6 +8390,12 @@ exports.default = void 0;
 
 var _SettingsActions = _interopRequireDefault(require("../actions/SettingsActions"));
 
+var _DataUtils = _interopRequireWildcard(require("../../../../../brain/tools/utilities/DataUtils"));
+
+var DataEvent = _interopRequireWildcard(require("../../../../../brain/tools/events/DataEvent"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -8406,6 +8414,7 @@ function () {
     _classCallCheck(this, SettingsIndex);
 
     this.start();
+    this.dataUtils = new _DataUtils.default();
   } //--------------------------
   // methods
   //--------------------------
@@ -8414,6 +8423,7 @@ function () {
   _createClass(SettingsIndex, [{
     key: "start",
     value: function start() {
+      var self = this;
       document.getElementById('save-toggle').addEventListener('click', function (f) {
         return new _SettingsActions.default().save().then(function (response) {
           console.log(response);
@@ -8421,17 +8431,52 @@ function () {
           console.log(err);
         });
       });
+      document.getElementById('avatar').addEventListener('click', function (e) {
+        document.getElementById('avatar-upload').click();
+      });
+      document.getElementById('avatar-upload').addEventListener('change', function (e) {
+        self.handleImageUpload(e.target.id, e.target.files);
+      }, false);
     } //--------------------------
     // event handlers
     //--------------------------
 
+  }, {
+    key: "handleImageUpload",
+    value: function handleImageUpload(type, files) {
+      var url = "";
+      var eventType = "";
+      var self = this;
+      type == "avatar-upload" ? url = "/api/settings/add-avatar" : url = "/api/settings/add-feature-background"; //(type == "featured-image-upload") ? eventType = DataEvent.FEATURE_IMAGE_ADDED: eventType = DataEvent.POST_IMAGE_ADDED
+
+      var imageData = new FormData();
+
+      for (var i = 0; i < files.length; i++) {
+        var file = files[i]; // Check the file type.
+
+        if (!file.type.match('image.*')) {
+          continue;
+        }
+
+        type == "avatar-upload" ? imageData.append('avatar_upload', file, file.name) : imageData.append('background_upload', file, file.name);
+      }
+
+      this.dataUtils.request(url, eventType, _DataUtils.REQUEST_TYPE_POST, _DataUtils.CONTENT_TYPE_FORM, imageData).then(function (response) {
+        var r = JSON.parse(response.request['response']);
+
+        if (r.message == DataEvent.AVATAR_UPLOADED) {
+          document.getElementById('avatar').src = r.url;
+        }
+      }).catch(function (err) {//console.log(err)
+      });
+    }
   }]);
 
   return SettingsIndex;
 }();
 
 exports.default = SettingsIndex;
-},{"../actions/SettingsActions":"actions/SettingsActions.js"}],"controllers/DashManager.js":[function(require,module,exports) {
+},{"../actions/SettingsActions":"actions/SettingsActions.js","../../../../../brain/tools/utilities/DataUtils":"../../../../brain/tools/utilities/DataUtils.js","../../../../../brain/tools/events/DataEvent":"../../../../brain/tools/events/DataEvent.js"}],"controllers/DashManager.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

themes/dash/partials/front.pug

@@ -10,7 +10,7 @@
   a#menu(href="")
     svg(viewBox="0 0 20 20" class="icons")
       use(xlink:href='/dash/assets/images/sprite.svg#entypo-list')
-    label Menu
+    label Navigation
 #dash-recent
   #recent-list
     h3 Recent

themes/dash/settings.pug

@@ -3,8 +3,8 @@ block main-content
       #settings-index
         #settings-index-wrapper
             #member-avatar-drop
-              img(src=member.avi)
-              input(id="avatar-upload" type="file" name="avatar-image-upload")
+              img#avatar(src=member.avi, for="avatar-upload")
+              input(id="avatar-upload" type="file" name="avatar-upload")
             #member-settings
               input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
               input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
@@ -24,6 +24,8 @@ block main-content
                   -if(themes[index].current == "true")
                     a.theme-select(href="#" id=themes[index].theme.name, data-enabled="true")
                         = themes[index].theme["display-name"]
+                        svg(viewBox="0 0 20 20" class="icons")
+                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-check')
                   -else
                     a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
                         = themes[index].theme["display-name"]

themes/dash/src/com/controllers/SettingsIndex.js

@@ -1,4 +1,15 @@
 import SettingsActions from "../actions/SettingsActions";
+import DataUtils,
+{
+    REQUEST_TYPE_GET,
+    REQUEST_TYPE_PUT,
+    REQUEST_TYPE_POST,
+    REQUEST_TYPE_DELETE,
+    CONTENT_TYPE_JSON,
+    CONTENT_TYPE_FORM
+}
+from "../../../../../brain/tools/utilities/DataUtils";
+import * as DataEvent from '../../../../../brain/tools/events/DataEvent';
 export default class SettingsIndex
 {
     //--------------------------
@@ -7,12 +18,14 @@ export default class SettingsIndex
     constructor()
     {
         this.start();
+        this.dataUtils = new DataUtils();
     }
     //--------------------------
     // methods
     //--------------------------
     start()
     {
+        let self = this;
         document.getElementById('save-toggle').addEventListener('click', f => new SettingsActions().save().then(response =>
         {
             console.log(response);
@@ -20,8 +33,47 @@ export default class SettingsIndex
         {
             console.log(err);
         }));
+        document.getElementById('avatar').addEventListener('click', e =>
+        {
+            document.getElementById('avatar-upload').click();
+        })
+        document.getElementById('avatar-upload').addEventListener('change', e =>
+        {
+            self.handleImageUpload(e.target.id, e.target.files);
+        }, false);
     }
     //--------------------------
     // event handlers
     //--------------------------
+    handleImageUpload(type, files)
+    {
+        let url = ""
+        let eventType = "";
+        let self = this;
+        (type == "avatar-upload") ? url = "/api/settings/add-avatar": url = "/api/settings/add-feature-background";
+        //(type == "featured-image-upload") ? eventType = DataEvent.FEATURE_IMAGE_ADDED: eventType = DataEvent.POST_IMAGE_ADDED
+        var imageData = new FormData();
+        for (var i = 0; i < files.length; i++)
+        {
+            var file = files[i];
+            // Check the file type.
+            if (!file.type.match('image.*'))
+            {
+                continue;
+            }
+            (type == "avatar-upload") ? imageData.append('avatar_upload', file, file.name): imageData.append('background_upload', file, file.name);
+        }
+        this.dataUtils.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData).then((response) =>
+        {
+            let r = JSON.parse(response.request['response']);
+            if(r.message == DataEvent.AVATAR_UPLOADED)
+            {
+                document.getElementById('avatar').src = r.url;
+            }
+            
+        }).catch((err) =>
+        {
+            //console.log(err)
+        })
+    }
 }

themes/dash/src/styles/main/_forms.styl

@@ -18,7 +18,7 @@ textarea
 
 button, input[type=submit]
     background $highlight
-    color $white
+    color $primary - 60%
     font 1em 'Apercu-Mono'
     border-radius 3px
     position relative

themes/dash/src/styles/main/_settings.styl

@@ -2,47 +2,69 @@
     width 100%
     max-width 900px
     margin 0 auto
+
     #settings-index-wrapper
         padding 0.75rem
+
         button
-                margin-top: 5px;
-                width: 320px
+            margin-top 5px
+            width 320px
             height 45px
+
         #member-avatar-drop
             img
-                width: 200px
-                border: 1px solid $white
-                border-radius: 100px;
+                width 200px
+                border 5px solid $white
+                border-radius 150px
                 overflow hidden
+                cursor pointer
+
             input
                 visibility hidden
+
         #member-settings, #site-settings, #theme-settings
             label
-                font-family: "Apercu-Mono"
-                color: $white
-            width: 80%
-            margin-bottom: 40px
+                font-family 'Apercu-Mono'
+                color $white
+
+            width 80%
+            margin-bottom 40px
+
             input
-                width: 44%;
-                margin-right: 5px;
+                width 44%
+                margin-right 5px
                 height 30px
-                padding: 10px
+                padding 10px
+
             textarea
-                background: $primary - 60%
-                width: 91.5%
-                height 100px;
-                color: $secondary
-                margin-top: 10px
-                padding: 10px;
+                background $primary - 60%
+                width 91.5%
+                height 100px
+                color $secondary
+                margin-top 10px
+                padding 10px
+
         #theme-settings
-                a
-                    width: 310px;
-                    margin-right: 5px;
+            a[data-enabled='false']
+                width 310px
+                margin 0 5px 5px 0
                 height 25px
-                    padding: 10px
+                padding 10px
                 display inline-block
-                    background: $primary - 60%
+                background $primary - 60%
                 color $secondary
                 border-radius 3px
 
-        
+            a[data-enabled='true']
+                width 310px
+                margin 0 5px 5px 0
+                height 25px
+                padding 10px
+                display inline-block
+                background $secondary
+                color $primary
+                border-radius 3px
+                svg 
+                    fill $primary
+                    display inline-block
+                    float right