added mail protocol editing in settings

brain/api/content/settings.js

@@ -86,6 +86,13 @@ router.post("/sync", (req, res, next) =>
                 obj.private = payload.private;
                 obj.theme = payload.theme;
                 obj.background = payload.background; //TODO: make this url relative
+                //mail stuff
+                obj.email.active = payload.mailSettings.activeProtocol;
+                obj.email.smtp.domain = payload.mailSettings.smtp.domain;
+                obj.email.smtp.email = payload.mailSettings.smtp.email;
+                obj.email.smtp.password = payload.mailSettings.smtp.password;
+                obj.email.mailgun.domain = payload.mailSettings.mailgun.domain;
+                obj.email.mailgun['api-key'] = payload.mailSettings.mailgun.key;
                 fs.writeJson('site-settings.json', obj).then(() =>
                 {
                     res.json(
@@ -96,8 +103,6 @@ router.post("/sync", (req, res, next) =>
                 {
                     console.error(err)
                 })
-                //console.log("PAYLOAD", payload);
-                //console.log("SETTINGS", obj);
             }).catch(err =>
             {
                 console.error(err)
@@ -130,7 +135,6 @@ router.post('/add-avatar', function(req, res, next)
             {
                 if (err)
                 {
-                    //console.log('Error in Saving Entry: ' + err);
                     res.json(
                     {
                         message: err
@@ -186,7 +190,6 @@ router.post('/add-feature-background', function(req, res, next)
             {
                 if (err)
                 {
-                    //console.log('Error in Saving Entry: ' + err);
                     res.json(
                     {
                         message: err

brain/app.js

@@ -7,7 +7,7 @@ var bodyParser = require('body-parser');
 var session = require('express-session');
 var MemoryStore = require('memorystore')(session)
 var flash = require('connect-flash');
-var theme = "default";
+var theme = "default-dark";
 var app = express();
 var request = require('request');
 // view engine setup

themes/dash/assets/css/dash.css

@@ -1882,6 +1882,27 @@ svg.icons {
 -- Settings
 -------------------------------
 **/
+#site-background {
+  margin: 0 0 10px 0;
+}
+#site-background img {
+  width: 100%;
+  border-radius: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+#site-background label {
+  position: absolute;
+  color: #f2f1ef;
+  margin: 5px;
+  background: #161d23;
+  padding: 5px;
+  border-radius: 3px;
+}
+#site-background input {
+  visibility: hidden;
+  display: none;
+}
 #settings-index {
   width: 100%;
   max-width: 900px;
@@ -1899,7 +1920,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #site-settings,
 #settings-index #settings-index-wrapper #theme-settings,
 #settings-index #settings-index-wrapper #mail-settings {
-  width: 80%;
+  width: 100%;
   margin-bottom: 40px;
 }
 #settings-index #settings-index-wrapper #member-settings label,
@@ -1940,28 +1961,6 @@ svg.icons {
   visibility: hidden;
   display: none;
 }
-#settings-index #settings-index-wrapper #member-settings #site-background,
-#settings-index #settings-index-wrapper #site-settings #site-background,
-#settings-index #settings-index-wrapper #theme-settings #site-background,
-#settings-index #settings-index-wrapper #mail-settings #site-background {
-  margin: 0 0 10px 0;
-}
-#settings-index #settings-index-wrapper #member-settings #site-background img,
-#settings-index #settings-index-wrapper #site-settings #site-background img,
-#settings-index #settings-index-wrapper #theme-settings #site-background img,
-#settings-index #settings-index-wrapper #mail-settings #site-background img {
-  width: 100%;
-  border-radius: 5px;
-  overflow: hidden;
-  cursor: pointer;
-}
-#settings-index #settings-index-wrapper #member-settings #site-background input,
-#settings-index #settings-index-wrapper #site-settings #site-background input,
-#settings-index #settings-index-wrapper #theme-settings #site-background input,
-#settings-index #settings-index-wrapper #mail-settings #site-background input {
-  visibility: hidden;
-  display: none;
-}
 #settings-index #settings-index-wrapper #member-settings #member-info,
 #settings-index #settings-index-wrapper #site-settings #member-info,
 #settings-index #settings-index-wrapper #theme-settings #member-info,
@@ -2014,6 +2013,31 @@ svg.icons {
   display: inline-block;
   float: right;
 }
+#settings-index #settings-index-wrapper #mail-settings {
+  height: 100px;
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option {
+  float: right;
+  font-family: 'Apercu-Mono';
+  font-size: 0.9em;
+  border-radius: 3px;
+  text-decoration: none;
+  margin: 0 0 0 5px;
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='true'] {
+  color: #fc6399;
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='false'] {
+  color: #f2f1ef;
+}
+#settings-index #settings-index-wrapper #mail-settings input {
+  margin: 0 5px 5px 0;
+  vertical-align: top;
+}
+#settings-index #settings-index-wrapper #mail-settings div[data-enabled='false'] {
+  display: none;
+  visibility: hidden;
+}
 /**
 -------------------------------
 -- Forms

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

@@ -8351,11 +8351,22 @@ function () {
       var background = document.getElementById('background').src;
       var selected = "";
       var selects = document.querySelectorAll('.theme-select');
+      var smtpDomain = document.getElementById('smtp-domain').value;
+      var smtpEmail = document.getElementById('smtp-email').value;
+      var smtpPass = document.getElementById('smtp-pass').value;
+      var mgDomain = document.getElementById('mg-domain').value;
+      var mgKey = document.getElementById('mg-key').value;
+      var mailActive = "";
+      var mailOptions = document.querySelectorAll('.mail-option');
 
       for (var i = 0, length = selects.length; i < length; i++) {
         if (selects[i].getAttribute('data-enabled') == "true") selected = selects[i].id;
       }
 
+      for (var i = 0, length = mailOptions.length; i < length; i++) {
+        if (mailOptions[i].getAttribute('data-enabled') == "true") mailActive = mailOptions[i].id;
+      }
+
       var settingsData = {
         handle: handle,
         email: email,
@@ -8364,7 +8375,19 @@ function () {
         descriptions: desc,
         background: background,
         private: privacy,
-        theme: selected
+        theme: selected,
+        mailSettings: {
+          activeProtocol: mailActive,
+          smtp: {
+            domain: smtpDomain,
+            email: smtpEmail,
+            password: smtpPass
+          },
+          mailgun: {
+            domain: mgDomain,
+            key: mgKey
+          }
+        }
       };
       return new Promise(function (resolve, reject) {
         self.dataUtils.request('/api/settings/sync', DataEvent.SETTINGS_UPDATED, _DataUtils.REQUEST_TYPE_POST, _DataUtils.CONTENT_TYPE_JSON, settingsData).then(function (response) {
@@ -8462,6 +8485,15 @@ function () {
         themeBtns[i].addEventListener('click', function (e) {
           return _this.handleThemes(e);
         });
+      } //handle mail options
+
+
+      var mailBtn = document.querySelectorAll('.mail-option');
+
+      for (var i = 0, length = mailBtn.length; i < length; i++) {
+        mailBtn[i].addEventListener('click', function (e) {
+          return _this.handleMailOptions(e);
+        });
       }
     } //--------------------------
     // event handlers
@@ -8492,6 +8524,34 @@ function () {
         e.target.id == themes[i].id ? themes[i].setAttribute('data-enabled', 'true') : themes[i].setAttribute('data-enabled', 'false');
       }
     }
+  }, {
+    key: "handleMailOptions",
+    value: function handleMailOptions(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var smtp = document.getElementById('mail-smtp');
+      var mailgun = document.getElementById('mail-mg');
+      var mail = document.querySelectorAll('.mail-option');
+
+      for (var i = 0, length = mail.length; i < length; i++) {
+        if (e.target.id == mail[i].id) {
+          mail[i].setAttribute('data-enabled', 'true');
+
+          if (e.target.id == "option-smtp") {
+            smtp.setAttribute('data-enabled', 'true');
+            mailgun.setAttribute('data-enabled', 'false');
+          } else if (e.target.id == "option-none") {
+            smtp.setAttribute('data-enabled', 'false');
+            mailgun.setAttribute('data-enabled', 'false');
+          } else {
+            smtp.setAttribute('data-enabled', 'false');
+            mailgun.setAttribute('data-enabled', 'true');
+          }
+        } else {
+          mail[i].setAttribute('data-enabled', 'false');
+        }
+      }
+    }
   }, {
     key: "handleImageUpload",
     value: function handleImageUpload(type, files) {

themes/dash/partials/mailforms.pug

@@ -0,0 +1,25 @@
+
+-if(settings.email.active == "option-smtp")
+    #mail-smtp(data-enabled='true')
+        input(type='text', name='smtp-domain' id='smtp-domain', placeholder='domain', value=settings.email.smtp.domain autofocus)
+        input(type='text', name='smtp-email' id='smtp-email', placeholder='email', value=settings.email.smtp.email , autofocus)
+        input(type='text', name='smtp-pass' id='smtp-pass', placeholder='password', value=settings.email.smtp.password , autofocus)
+    #mail-mg(data-enabled='false')
+        input(type='text', name='mg-domain' id='mg-domain', placeholder='domain', value=settings.email.mailgun.domain  autofocus)
+        input(type='text', name='mg-key' id='mg-key', placeholder='api key', value=settings.email.mailgun['api-key'] , autofocus)
+-else if(settings.email.active == "option-mg")
+    #mail-smtp(data-enabled='false')
+        input(type='text', name='smtp-domain' id='smtp-domain', placeholder='domain', value=settings.email.smtp.domain autofocus)
+        input(type='text', name='smtp-email' id='smtp-email', placeholder='email', value=settings.email.smtp.email , autofocus)
+        input(type='text', name='smtp-pass' id='smtp-pass', placeholder='password', value=settings.email.smtp.password , autofocus)
+    #mail-mg(data-enabled='mg')
+        input(type='text', name='mg-domain' id='mg-domain', placeholder='domain', value=settings.email.mailgun.domain  autofocus)
+        input(type='text', name='mg-key' id='mg-key', placeholder='api key', value=settings.email.mailgun['api-key'] , autofocus)
+-else
+    #mail-smtp(data-enabled='false')
+        input(type='text', name='smtp-domain' id='smtp-domain', placeholder='domain', value=settings.email.smtp.domain autofocus)
+        input(type='text', name='smtp-email' id='smtp-email', placeholder='email', value=settings.email.smtp.email , autofocus)
+        input(type='text', name='smtp-pass' id='smtp-pass', placeholder='password', value=settings.email.smtp.password , autofocus)
+    #mail-mg(data-enabled='false')
+        input(type='text', name='mg-domain' id='mg-domain', placeholder='domain', value=settings.email.mailgun.domain  autofocus)
+        input(type='text', name='mg-key' id='mg-key', placeholder='api key', value=settings.email.mailgun['api-key'] , autofocus)

themes/dash/settings.pug

@@ -1,5 +1,10 @@
 extends frame
 block main-content
+      #site-background
+        label FEATURE SITE IMAGE  
+        img#background(src=settings.background, alt="image for site background", for="background-upload")
+        input(id="background-upload" type="file" name="backgrond-upload")  
+               
       #settings-index
         #settings-index-wrapper
             #member-settings
@@ -14,9 +19,6 @@ block main-content
             #site-settings
               label SITE INFO
               br
-              #site-background
-                img#background(src=settings.background, alt="image for site background", for="background-upload")
-                input(id="background-upload" type="file" name="backgrond-upload")
               input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
               input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
               textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
@@ -41,6 +43,21 @@ block main-content
                         = themes[index].theme["display-name"]
             #mail-settings
               label MAIL SETTINGS
+              -if(settings.email.active == "option-none")
+                a.mail-option#option-none(href="#", data-enabled='true') NONE
+              -else
+                a.mail-option#option-none(href="#", data-enabled='false') NONE
+              -if(settings.email.active == "option-mg")
+                a.mail-option#option-mg(href="#", data-enabled='true') MAILGUN
+              -else
+                a.mail-option#option-mg(href="#", data-enabled='false') MAILGUN
+              -if(settings.email.active == "option-smtp")
+                a.mail-option#option-smtp(href="#", data-enabled='true') SMTP
+              -else
+                a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
+              
+              include partials/mailforms
+              
               br
             button#save-toggle SAVE SETTINGS
       

themes/dash/src/com/actions/SettingsActions.js

@@ -36,10 +36,22 @@ export default class SettingsActions
         let background = document.getElementById('background').src;
         let selected = "";
         let selects = document.querySelectorAll('.theme-select');
+        let smtpDomain = document.getElementById('smtp-domain').value;
+        let smtpEmail = document.getElementById('smtp-email').value;
+        let smtpPass = document.getElementById('smtp-pass').value;
+        let mgDomain = document.getElementById('mg-domain').value;
+        let mgKey = document.getElementById('mg-key').value;
+        let mailActive = "";
+        let mailOptions = document.querySelectorAll('.mail-option');
         for (var i = 0, length = selects.length; i < length; i++)
         {
             if (selects[i].getAttribute('data-enabled') == "true") selected = selects[i].id;
         }
+
+        for (var i = 0, length = mailOptions.length; i < length; i++)
+        {
+            if (mailOptions[i].getAttribute('data-enabled') == "true") mailActive = mailOptions[i].id;
+        }
         let settingsData = {
             handle: handle,
             email: email,
@@ -48,7 +60,19 @@ export default class SettingsActions
             descriptions: desc,
             background: background,
             private: privacy,
-            theme: selected
+            theme: selected,
+            mailSettings:{
+                activeProtocol: mailActive,
+                smtp:{
+                    domain: smtpDomain,
+                    email: smtpEmail,
+                    password:smtpPass
+                },
+                mailgun:{
+                    domain: mgDomain,
+                    key: mgKey
+                }
+            }
         }
         return new Promise(function(resolve, reject)
         {

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

@@ -59,6 +59,12 @@ export default class SettingsIndex
         {
             themeBtns[i].addEventListener('click', e=>this.handleThemes(e));
         }
+        //handle mail options
+        let mailBtn = document.querySelectorAll('.mail-option');
+        for (var i = 0, length = mailBtn.length; i < length; i++)
+        {
+            mailBtn[i].addEventListener('click', e=>this.handleMailOptions(e));
+        }
     }
     //--------------------------
     // event handlers
@@ -87,6 +93,33 @@ export default class SettingsIndex
         }
     }
 
+    handleMailOptions(e)
+    {
+        e.preventDefault();
+        e.stopPropagation();
+        let smtp = document.getElementById('mail-smtp');
+        let mailgun = document.getElementById('mail-mg')
+        let mail = document.querySelectorAll('.mail-option');
+        for (var i = 0, length = mail.length; i < length; i++)
+        {
+            if(e.target.id == mail[i].id){
+                mail[i].setAttribute('data-enabled', 'true')
+                if (e.target.id == "option-smtp"){
+                    smtp.setAttribute('data-enabled', 'true')
+                    mailgun.setAttribute('data-enabled', 'false')
+                }else if(e.target.id == "option-none"){
+                    smtp.setAttribute('data-enabled', 'false')
+                    mailgun.setAttribute('data-enabled', 'false')
+                }else{
+                    smtp.setAttribute('data-enabled', 'false')
+                    mailgun.setAttribute('data-enabled', 'true')
+                }
+            }else{
+                mail[i].setAttribute('data-enabled', 'false')
+            }
+        }
+    }
+
     handleImageUpload(type, files)
     {
         let url = ""

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

@@ -1,3 +1,23 @@
+#site-background
+    margin 0 0 10px 0
+    img
+        width 100%
+        // border 5px solid $white
+        border-radius 0
+        overflow hidden
+        cursor pointer
+    label
+        position: absolute
+        color $white
+        margin 5px
+        background $primary - 60%
+        padding: 5px
+        border-radius 3px
+
+    input
+        visibility hidden
+        display none
+
 #settings-index
     width 100%
     max-width 900px
@@ -22,7 +42,7 @@
                 height 30px
                 padding 10px
 
-            width 80%
+            width 100%
             margin-bottom 40px
 
             #member-avatar-drop
@@ -39,20 +59,6 @@
                     visibility hidden
                     display none
 
-            #site-background
-                margin 0 0 10px 0
-
-                img
-                    width 100%
-                    // border 5px solid $white
-                    border-radius 5px
-                    overflow hidden
-                    cursor pointer
-
-                input
-                    visibility hidden
-                    display none
-
             #member-info
                 vertical-align top
                 display inline-block
@@ -96,3 +102,26 @@
                     fill $primary
                     display inline-block
                     float right
+
+        #mail-settings
+            height 100px
+            a.mail-option
+                float right
+                font-family 'Apercu-Mono'
+                font-size .9em
+                border-radius 3px
+                text-decoration: none
+                margin 0 0 0 5px
+                //padding: 1px
+            a.mail-option[data-enabled='true']
+                color $highlight
+            a.mail-option[data-enabled='false']
+                color $white
+            input
+                // width 94%
+                margin 0 5px 5px 0
+                vertical-align: top
+
+            div[data-enabled='false']
+                display none
+                visibility hidden