@silexlabs/silex-dashboard 1.0.3 → 1.0.5

package/.silex-client.js

@@ -1,26 +1,24 @@
 import templatePlugin from '/node_modules/@silexlabs/silex/dist/plugins/client/plugins/client/template.js'
-import publishTo from '/node_modules/@silexlabs/silex/dist/plugins/client/plugins/client/publicationRenderer.js'
+import publicationRenderer from '/node_modules/@silexlabs/silex/dist/plugins/client/plugins/client/publicationRenderer.js'
 
 export default async function(config, options) {
-  console.log('silex-client.js', templatePlugin)
   // Defaults
   const opts = {
     ...options,
   }
   await config.addPlugin(templatePlugin)
-  await config.addPlugin(publishTo, {
-    publishTo: 'https://silex.me/publish',
+  await config.addPlugin(publicationRenderer, {
     css: {
       frontMatter: true,
       ext: '.css.liquid',
-      path: '../../pages'
+      path: '../../../pages'
     },
     html: {
       frontMatter: false,
-      path: '../../_includes'
+      path: '../../../_includes'
     },
     assets: {
-      path: '../../',
+      path: '../../../',
       url: '/',
     },
   })

package/.silex.js

@@ -5,8 +5,17 @@ const node_modules = require('node_modules-path')
 const serveStatic = require('serve-static')
 const locale = require('locale')
 const { withCache } = require('@silexlabs/silex/dist/plugins/server/plugins/server/Cache')
+const { ServerEvent } = require('@silexlabs/silex').events
+
+const { ConnectorType } = require('@silexlabs/silex/dist/server/types')
+const FtpConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/FtpConnector').default
+const GitlabConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector').default
+const {FsStorage} = require('@silexlabs/silex/dist/server/server/connectors/FsStorage')
+const {FsHosting} = require('@silexlabs/silex/dist/server/server/connectors/FsHosting')
 
 module.exports = async function(config, options) {
+  console.log('> Silex dashboard plugin starting', {config, options})
+
   // Defaults
   const opts = {
     defaultLanguage: 'en',
@@ -14,11 +23,33 @@ module.exports = async function(config, options) {
     ...options,
   }
 
+  config.addHostingConnector([
+    new FsHosting(config, {
+      path: process.env.SILEX_FS_ROOT,
+    }),
+    new FtpConnector(config, {
+      type: ConnectorType.HOSTING,
+    }),
+  ])
+
+  //config.addStorageConnector([
+  //  //new FsStorage(config, {
+  //  //  path: process.env.SILEX_FS_ROOT,
+  //  //}),
+  //  new FtpConnector(config, {
+  //    type: ConnectorType.STORAGE,
+  //  }),
+  //  new GitlabConnector(config, {
+  //    clientId: process.env.GITLAB_CLIENT_ID,
+  //    clientSecret: process.env.GITLAB_CLIENT_SECRET,
+  //  }),
+  //])
+
   // Detect language from browser
   const languages = JSON.parse(await fs.readFile(join(__dirname, '_data/languages.json')))
 
   // Serve the dashboard and the editor
-  config.on('silex:startup:start', ({app}) => {
+  config.on(ServerEvent.STARTUP_START, ({app}) => {
     const router = express.Router()
     app.use(router)
 
@@ -38,6 +69,7 @@ module.exports = async function(config, options) {
 
     // Serve the editor when the ?id param is present in the URL
     const editorRouter = express.Router()
+    console.log('> Silex dashboard on route /', {opts})
     editorRouter.use('/', (req, res, next) => {
       if (req.path === '/' && !req.query.id) res.redirect(`/${req.locale}/`)
       else next()

package/_data/api-translations.json

@@ -1,5 +1,6 @@
 {
     "en": {
+        "Failed to start dashboard": "Failed to start dashboard",
         "Failed to fetch websites": "Failed to fetch websites",
         "HTTP error! status: ${response.status}": "HTTP error! status: ${response.status}",
         "You need to provide a website name": "You need to provide a website name",
@@ -9,9 +10,17 @@
         "Website deleted successfully": "Website deleted successfully",
         "Failed to delete website": "Failed to delete website",
         "New name for this website": "New name for this website",
-        "Website renamed successfully": "Website renamed successfully"
+        "Website renamed successfully": "Website renamed successfully",
+        "Failed to rename website": "Failed to rename website",
+        "Login failed": "Error, login failed.",
+        "Logout": "Logout",
+        "Logging out": "Logging out",
+        "Back to home": "< Back",
+        "Welcome to Silex": "Welcome to Silex",
+        "Please login to continue": "Please login to continue"
     },
     "fr": {
+        "Failed to start dashboard": "Erreur, impossible de démarrer le tableau de bord",
         "Failed to fetch websites": "Erreur, impossible de récupérer la liste des sites",
         "HTTP error! status: ${response.status}": "Erreur HTTP ! status: ${response.status}",
         "You need to provide a website name": "Vous n\\'avez pas donné de nom à votre site",
@@ -21,6 +30,13 @@
         "Website deleted successfully": "Le site a bien été effacé",
         "Failed to delete website": "Erreur, le site n\\'a pas été effacé",
         "New name for this website": "Nouveau nom",
-        "Website renamed successfully": "Changement de nom effectué"
+        "Website renamed successfully": "Changement de nom effectué",
+        "Failed to rename website": "Erreur, le nom n\\'a pas été changé",
+        "Login failed": "Erreur, impossible de se connecter.",
+        "Logout": "Déconnexion",
+        "Logging out": "Déconnexion en cours",
+        "Back to home": "< Retour",
+        "Welcome to Silex": "Bienvenue sur Silex",
+        "Please login to continue": "Merci de vous connecter pour continuer"
     }
 }

package/_includes/api-connectors.js.html

@@ -9,6 +9,7 @@ window.addEventListener('load', function() {
   } = types
   const {
     connectorList,
+    logout,
   } = api
 
   const App = {
@@ -18,10 +19,16 @@ window.addEventListener('load', function() {
         error: null,
         message: null,
         loading: true,
+        lastConnector: null,
       }
     },
     mounted() {
       this.init()
+      window.addEventListener('message', (event) => {
+        if(event.data && event.data.type === 'login') {
+          this.loginResult(event.data)
+        }
+      })
     },
 
     methods: {
@@ -29,7 +36,7 @@ window.addEventListener('load', function() {
         try {
           this.loading = true
           console.log('init')
-          this.connectors = await connectorList()
+          this.connectors = await connectorList({type: ConnectorType.STORAGE})
           console.log('connectors', this.connectors)
           this.loading = false
         } catch (error) {
@@ -38,6 +45,38 @@ window.addEventListener('load', function() {
           this.loading = false
         }
       },
+      openLogin(connector) {
+        this.lastConnector = connector
+        const nonOAuthUrl = `${constants.API_PATH}${constants.API_CONNECTOR_PATH}${constants.API_CONNECTOR_LOGIN}?connectorId=${connector.connectorId}&type=${connector.type}`
+        console.log('openLogin', connector.oauthUrl, nonOAuthUrl)
+        window.open(connector.oauthUrl || nonOAuthUrl, '_blank')
+      },
+      loginResult(data) {
+        console.log('loginResult', data)
+        if(data.error) {
+          this.error = data.error
+          this.message = `{{ api-translations[lang]["Login failed"] }} ${data.message}`
+        } else {
+          window.location.href = '/'
+        }
+      },
+      async logout() {
+        try {
+          this.message = '{{ api-translations[lang]["Logging out"] }}'
+          await logout({type: ConnectorType.STORAGE, connectorId: this.lastConnector.connectorId})
+          this.loggedIn = false
+          this.user = null
+          this.websites = []
+          this.loading = false
+          this.message = ''
+          this.error = false
+        } catch (error) {
+          console.error(error)
+          this.error = error
+          this.message = error.message
+          this.loading = false
+        }
+      },
     },
   };
 

package/_includes/api-websites.js.html

@@ -30,6 +30,7 @@ window.addEventListener('load', function() {
         storage: null,
         user: null,
         showMenu: false,
+        empty: false,
       }
     },
     mounted() {
@@ -46,6 +47,7 @@ window.addEventListener('load', function() {
             this.user = user
             this.loggedIn = true
             this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+            this.empty = this.websites.length === 0
             this.loading = false
           } else {
             this.openLogin()
@@ -53,11 +55,12 @@ window.addEventListener('load', function() {
         } catch (error) {
           console.error(error)
           this.loading = false
-          if(error.code === 401) {
+          if(error.code === 401 || error.httpStatusCode === 401) {
             this.loggedIn = false
             this.openLogin()
           } else {
-            this.error = error
+            this.error = `{{ api-translations[lang]["Failed to start dashboard"] }} - ${error.message}`
+            this.message = ''
           }
         }
       },
@@ -79,12 +82,13 @@ window.addEventListener('load', function() {
           type: ConnectorType.STORAGE,
           connectorId: this.user.storage.connectorId,
         })
+        window.location.reload()
       },
 
       async createWebsite() {
-        if (!this.newWebsiteName) throw new Error('{{ api-translations[lang]["You need to provide a website name"] }}')
-        this.loading = true
         try {
+          if (!this.newWebsiteName) throw new Error('{{ api-translations[lang]["You need to provide a website name"] }}')
+          this.loading = true
           const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
           const result = await websiteCreate({
             websiteId,
@@ -95,15 +99,18 @@ window.addEventListener('load', function() {
             connectorId: this.user.storage.connectorId
           })
           this.message = '{{ api-translations[lang]["Website created successfully"] }}'
+          this.error = ''
           this.newWebsiteName = ''
           this.showCreationForm = false;
           this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
           this.loading = false
           return result
         } catch (error) {
           this.loading = false
           console.error(error)
-          this.error = '{{ api-translations[lang]["Failed to create website"] }}'
+          this.error = `{{ api-translations[lang]["Failed to create website"] }} - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -114,12 +121,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteDelete({websiteId, connectorId: this.user.storage.connectorId})
           this.message = '{{ api-translations[lang]["Website deleted successfully"] }}'
+          this.error = ''
           this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
           this.loading = false
           return result
         } catch (error) {
           this.loading = false
-          this.error = '{{ api-translations[lang]["Failed to delete website"] }}'
+          this.error = `{{ api-translations[lang]["Failed to delete website"] }} - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -131,12 +141,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteMetaWrite({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
           this.message = '{{ api-translations[lang]["Website renamed successfully"] }}'
+          this.error = ''
           this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
           this.loading = false
           return result
         } catch (error) {
           this.loading = false
-          this.error = '{{ api-translations[lang]["Failed to delete website"] }}'
+          this.error = `{{ api-translations[lang]["Failed to rename website"] }} - ${error.message}`
+          this.message = ''
         }
       },
     },

package/_includes/connectors.html

@@ -46,29 +46,90 @@ a:hover { text-decoration: underline; }
       </head>
       <body
             id="i2hcfw"
-            class=" app"
+            class="body app"
             
             
-            ><div
+            ><HEADER
+            
+            class="header padding-normal "
+            
+            
+            ><A
+            href="/"
+            
+            
+            
+            ><img
+            src="/assets/silex-icon-2018@200px.png" href=""
+            class="nav__logo "
+            
+            
+            ></img></A><NAV
+            id="in5jeq"
+            class="nav "
+            
+            
+            >{% for item in nav %}<A
+            href="{{ item.url }}" id="i0g3ac"
+            class="nav__item {% if forloop.index == 1 %}active{% endif %}"
+            target="{{ item.target }}"
+            
+            >{{ item.label }}</A>{% endfor %}</NAV><div
+            
+            class="lang h-space "
+            
+            
+            >{% assign links = languages %}
+{%- for link in links %}<A
+            href="/{{ link.code }}"
+            class="lang__item nav__item {% if link.code == lang %}active{% endif %}"
+            hreflang="{{link.code}}"
+            
+            >{{ link.code }}</A>{% endfor %}</div></HEADER><A
+            id="ixzhcr" href="/"
+            class="button button-bar__item--secondary "
+            
+            
+            >{{ api-translations[lang]["Back to home"] }}</A><div
             id="imgx81"
             
             
             
-            ><div
-            id="in62y2"
+            ><H1
+            id="ighycb"
+            class="title "
             
             
+            >{{ api-translations[lang]["Welcome to Silex"] }}</H1><div
+            id="it2175"
+            class="subtitle "
             
-            ><div
-            id="isqe61"
             
-            v-if="!loading" v-for="(connector, index) in connectors" :key="index"
+            >{{ api-translations[lang]["Please login to continue"] }}</div><div
+            id="in62y2"
+            class="button-bar "
+            
+            
+            ><A
+            id="isqe61" href="https://"
+            class="h-space button-bar__item--main button-bar_item button big-button "
+            v-if="!loading" v-for="(connector, index) in connectors" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" @click="openLogin(connector)"
             
             ><div
             id="i87asw"
             
+            v-text="connector.displayName"
+            
+            >Insert your text here</div></A></div><div
+            id="i9msnk"
+            
+            v-if="error" v-html="message"
             
+            >Insert your text here</div><div
+            id="i6akll"
+            class="button button--tertiary "
+            v-if="error" @click="logout()"
             
-            >Insert your text here</div></div></div></div></body>
+            >{{ api-translations[lang]["Logout"] }}</div></div></body>
       </html>
       

package/_includes/websites.html

@@ -88,7 +88,7 @@ a:hover { text-decoration: underline; }
             >{{ link.code }}</A>{% endfor %}</div><div
             id="i24ew"
             class="user__wrapper "
-            v-if="user"  @NOmouseover="showMenu = true"  @NOmouseout="showMenu = false"  @click="showMenu = !showMenu"
+            v-if="user && !user.storage.disableLogout"  @NOmouseover="showMenu = true"  @NOmouseout="showMenu = false"  @click="showMenu = !showMenu"
             
             ><div
             id="i5xsbd"
@@ -116,16 +116,31 @@ a:hover { text-decoration: underline; }
             
             
             ><H1
-            id="itp1f"
-            
             
+            class="title "
+            v-if="!empty"
             
             >{{ title2 }}</H1><div
             id="iyex8"
-            class="subtitle color--light "
+            class="subtitle "
+            v-if="!empty"
+            
+            >{{ subtitle }}</div><SECTION
+            id="iqmx38"
+            
+            v-if="empty"
+            
+            ><H1
+            
+            class="title "
+            
+            
+            >{{ title2-empty }}</H1><DIV
             
+            class="subtitle "
             
-            >{{ subtitle }}</div><div
+            
+            >{{ subtitle-empty }}</DIV></SECTION><div
             id="ickx4"
             class="button-bar margin-20 "
             
@@ -198,7 +213,7 @@ a:hover { text-decoration: underline; }
             >{{ add-cancel }}</button></div></form></div><div
             id="if80m"
             
-            
+            v-if="!empty"
             
             ><SECTION
             id="idgvg"
@@ -315,31 +330,6 @@ a:hover { text-decoration: underline; }
             class="button-bar_item skeleton skeleton-button "
             
             
-            >Edit</div></SECTION><SECTION
-            id="iqmx38"
-            class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
-            v-if="loading"
-            
-            ><H3
-            
-            class="button-bar_item button-bar__item--main skeleton-text skeleton "
-            
-            
-            >My first websiteMy first websiteMy first websiteMy first</H3><P
-            
-            class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
-            
-            
-            >Updated 1h ago by lexoyo</P><P
-            
-            class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
-            
-            
-            >Created 2023-02-16 by lexoyo</P><div
-            id="ie83jl"
-            class="button-bar_item skeleton skeleton-button "
-            
-            
             >Edit</div></SECTION></div><div
             id="i7ej6j"
             class="box horizontal "