Added publish providers and templates

Author: Benoit Schweblin

build/dev-server.js

@@ -23,6 +23,9 @@ var proxyTable = config.dev.proxyTable
 var app = express()
 var compiler = webpack(webpackConfig)
 
+// StackEdit custom middlewares
+require('./server')(app);
+
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
   quiet: true

build/server.js

@@ -0,0 +1,38 @@
+var qs = require('qs');
+var request = require('request');
+
+function githubToken(clientId, code) {
+  return new Promise(function (resolve, reject) {
+    request({
+      method: 'POST',
+      url: 'https://github.com/login/oauth/access_token',
+      qs: {
+        client_id: clientId,
+        client_secret: process.env.GITHUB_SECRET,
+        code: code
+      },
+    }, function(err, res, body) {
+      if (err) {
+        reject(err);
+      }
+      console.log(body)
+      var token = qs.parse(body).access_token;
+      if (token) {
+        resolve(token);
+      } else {
+        reject(res.statusCode);
+      }
+    });
+  });
+}
+
+module.exports = function (app) {
+  app.get('/oauth2/githubToken', function (req, res) {
+    githubToken(req.query.clientId, req.query.code)
+      .then(function (token) {
+        res.send(token);
+      }, function (err) {
+        res.status(400).send(err ? err.message || err.toString() : 'bad_code');
+      });
+  });
+};

package.json

@@ -32,6 +32,7 @@
     "normalize-scss": "^7.0.0",
     "prismjs": "^1.6.0",
     "raw-loader": "^0.5.1",
+    "request": "^2.82.0",
     "vue": "^2.3.3",
     "vuex": "^2.3.1"
   },

src/assets/iconBlogger.svg

@@ -2,6 +2,7 @@
   <div v-if="ready" class="app" :class="{'app--loading': loading}">
     <layout></layout>
     <modal v-if="showModal"></modal>
+    <notification></notification>
   </div>
   <div v-else class="app__spash-screen"></div>
 </template>
@@ -11,6 +12,7 @@ import Vue from 'vue';
 import { mapState } from 'vuex';
 import Layout from './Layout';
 import Modal from './Modal';
+import Notification from './Notification';
 
 // Global directives
 Vue.directive('focus', {
@@ -23,6 +25,7 @@ export default {
   components: {
     Layout,
     Modal,
+    Notification,
   },
   computed: {
     ...mapState([
@@ -32,7 +35,7 @@ export default {
       return !this.$store.getters['content/current'].id;
     },
     showModal() {
-      return !!this.$store.state.modal.config;
+      return !!this.$store.getters['modal/config'];
     },
   },
 };

src/assets/iconDropbox.svg

@@ -1,10 +1,11 @@
 <template>
   <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--open': isOpen, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.prevent.stop="onDrop">
-    <div v-if="isEditing" class="explorer-node__item-editor" :class="['explorer-node__item-editor--' + node.item.type]" :style="{'padding-left': leftPadding}">
+    <div class="explorer-node__item-editor" v-if="isEditing" :class="['explorer-node__item-editor--' + node.item.type]" :style="{'padding-left': leftPadding}">
       <input type="text" class="text-input" v-focus @blur="submitEdit()" @keyup.enter="submitEdit()" @keyup.esc="submitEdit(true)" v-model="editingNodeName">
     </div>
-    <div v-else class="explorer-node__item" :class="['explorer-node__item--' + node.item.type]" :style="{'padding-left': leftPadding}" @click="select(node.item.id)" draggable="true" @dragstart.stop="setDragSourceId" @dragend.stop="setDragTargetId()">
+    <div class="explorer-node__item" v-else :class="['explorer-node__item--' + node.item.type]" :style="{'padding-left': leftPadding}" @click="select(node.item.id)" draggable="true" @dragstart.stop="setDragSourceId" @dragend.stop="setDragTargetId()">
       {{node.item.name}}
+      <icon-provider class="explorer-node__location" v-for="location in node.locations" :key="location.id" :provider-id="location.providerId"></icon-provider>
     </div>
     <div class="explorer-node__children" v-if="node.isFolder && isOpen">
       <explorer-node v-for="node in node.folders" :key="node.item.id" :node="node" :depth="depth + 1"></explorer-node>
@@ -112,10 +113,11 @@ export default {
       this.$store.commit('explorer/setNewItem', null);
     },
     submitEdit(cancel) {
-      const id = this.$store.getters['explorer/editingNode'].item.id;
+      const editingNode = this.$store.getters['explorer/editingNode'];
+      const id = editingNode.item.id;
       const value = this.editingValue;
       if (!cancel && id && value) {
-        this.$store.commit('file/patchItem', {
+        this.$store.commit(editingNode.isFolder ? 'folder/patchItem' : 'file/patchItem', {
           id,
           name: value.slice(0, 250),
         });
@@ -166,6 +168,7 @@ $item-font-size: 14px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  padding-right: 5px;
 
   .explorer-node--selected > & {
     background-color: rgba(0, 0, 0, 0.2);
@@ -179,6 +182,13 @@ $item-font-size: 14px;
   .explorer__tree--new-item & {
     opacity: 0.33;
   }
+
+  .explorer-node__location {
+    float: right;
+    width: 18px;
+    height: 18px;
+    margin: 2px 1px;
+  }
 }
 
 .explorer-node__item--folder,

src/assets/iconGithub.svg

@@ -98,7 +98,6 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  -webkit-flex: none;
   flex: none;
 }
 

src/assets/iconGoogleDrive.svg

@@ -3,10 +3,22 @@
     <file-properties-modal v-if="config.type === 'fileProperties'"></file-properties-modal>
     <settings-modal v-else-if="config.type === 'settings'"></settings-modal>
     <templates-modal v-else-if="config.type === 'templates'"></templates-modal>
+    <html-export-modal v-else-if="config.type === 'htmlExport'"></html-export-modal>
     <link-modal v-else-if="config.type === 'link'"></link-modal>
     <image-modal v-else-if="config.type === 'image'"></image-modal>
     <google-photo-modal v-else-if="config.type === 'googlePhoto'"></google-photo-modal>
-    <html-export-modal v-else-if="config.type === 'htmlExport'"></html-export-modal>
+    <sync-management-modal v-else-if="config.type === 'syncManagement'"></sync-management-modal>
+    <publish-management-modal v-else-if="config.type === 'publishManagement'"></publish-management-modal>
+    <google-drive-sync-modal v-else-if="config.type === 'googleDriveSync'"></google-drive-sync-modal>
+    <google-drive-publish-modal v-else-if="config.type === 'googleDrivePublish'"></google-drive-publish-modal>
+    <dropbox-sync-modal v-else-if="config.type === 'dropboxSync'"></dropbox-sync-modal>
+    <dropbox-publish-modal v-else-if="config.type === 'dropboxPublish'"></dropbox-publish-modal>
+    <github-sync-modal v-else-if="config.type === 'githubSync'"></github-sync-modal>
+    <github-publish-modal v-else-if="config.type === 'githubPublish'"></github-publish-modal>
+    <gist-sync-modal v-else-if="config.type === 'gistSync'"></gist-sync-modal>
+    <gist-publish-modal v-else-if="config.type === 'gistPublish'"></gist-publish-modal>
+    <blogger-publish-modal v-else-if="config.type === 'bloggerPublish'"></blogger-publish-modal>
+    <blogger-page-publish-modal v-else-if="config.type === 'bloggerPagePublish'"></blogger-page-publish-modal>
     <div v-else class="modal__inner-1">
       <div class="modal__inner-2">
         <div class="modal__content" v-html="config.content"></div>
@@ -20,35 +32,56 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex';
-import FilePropertiesModal from './FilePropertiesModal';
-import SettingsModal from './SettingsModal';
-import TemplatesModal from './TemplatesModal';
-import LinkModal from './LinkModal';
-import ImageModal from './ImageModal';
-import GooglePhotoModal from './GooglePhotoModal';
-import HtmlExportModal from './HtmlExportModal';
+import { mapGetters } from 'vuex';
 import editorEngineSvc from '../services/editorEngineSvc';
+import FilePropertiesModal from './modals/FilePropertiesModal';
+import SettingsModal from './modals/SettingsModal';
+import TemplatesModal from './modals/TemplatesModal';
+import HtmlExportModal from './modals/HtmlExportModal';
+import LinkModal from './modals/LinkModal';
+import ImageModal from './modals/ImageModal';
+import GooglePhotoModal from './modals/GooglePhotoModal';
+import SyncManagementModal from './modals/SyncManagementModal';
+import PublishManagementModal from './modals/PublishManagementModal';
+import GoogleDriveSyncModal from './modals/GoogleDriveSyncModal';
+import GoogleDrivePublishModal from './modals/GoogleDrivePublishModal';
+import DropboxSyncModal from './modals/DropboxSyncModal';
+import DropboxPublishModal from './modals/DropboxPublishModal';
+import GithubSyncModal from './modals/GithubSyncModal';
+import GithubPublishModal from './modals/GithubPublishModal';
+import GistSyncModal from './modals/GistSyncModal';
+import GistPublishModal from './modals/GistPublishModal';
+import BloggerPublishModal from './modals/BloggerPublishModal';
+import BloggerPagePublishModal from './modals/BloggerPagePublishModal';
 
 export default {
   components: {
     FilePropertiesModal,
     SettingsModal,
     TemplatesModal,
+    HtmlExportModal,
     LinkModal,
     ImageModal,
     GooglePhotoModal,
-    HtmlExportModal,
+    SyncManagementModal,
+    PublishManagementModal,
+    GoogleDriveSyncModal,
+    GoogleDrivePublishModal,
+    DropboxSyncModal,
+    DropboxPublishModal,
+    GithubSyncModal,
+    GithubPublishModal,
+    GistSyncModal,
+    GistPublishModal,
+    BloggerPublishModal,
+    BloggerPagePublishModal,
   },
-  computed: mapState('modal', [
+  computed: mapGetters('modal', [
     'config',
   ]),
   methods: {
-    ...mapMutations('modal', [
-      'setConfig',
-    ]),
     onEscape() {
-      this.setConfig();
+      this.config.reject();
       editorEngineSvc.clEditor.focus();
     },
     onFocusInOut(evt) {
@@ -69,7 +102,7 @@ export default {
           }
           target = target.parentNode;
         }
-        this.setConfig();
+        this.config.reject();
       }
     },
   },
@@ -78,7 +111,7 @@ export default {
     window.addEventListener('focusout', this.onFocusInOut);
     const eltToFocus = this.$el.querySelector('input.text-input')
       || this.$el.querySelector('.textfield')
-      || this.$el.querySelector('button.button');
+      || this.$el.querySelector('.button');
     if (eltToFocus) {
       eltToFocus.focus();
     }
@@ -103,7 +136,6 @@ export default {
 
 .modal__inner-1 {
   margin: 0 auto;
-  display: table;
   width: 100%;
   min-width: 320px;
   max-width: 500px;
@@ -142,10 +174,30 @@ export default {
   margin-top: 0;
 }
 
+.modal__image {
+  float: left;
+  width: 64px;
+  height: 64px;
+  margin: 1.5em 1.5em 0.5em 0;
+
+  & + *::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
 .modal__error {
   color: #de2c00;
 }
 
+.modal__tip {
+  background-color: transparentize(#ffd600, 0.85);
+  border-radius: $border-radius-base;
+  margin: 1.2em 0;
+  padding: 0.75em 1.25em;
+}
+
 .modal__button-bar {
   margin-top: 1.75rem;
   text-align: right;