@silexlabs/silex-dashboard 1.0.3 → 1.0.5

package/_site/en/index.html

@@ -71,6 +71,7 @@ window.addEventListener('load', function() {
         storage: null,
         user: null,
         showMenu: false,
+        empty: false,
       }
     },
     mounted() {
@@ -87,6 +88,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()
@@ -94,11 +96,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 = `Failed to start dashboard - ${error.message}`
+            this.message = ''
           }
         }
       },
@@ -120,12 +123,13 @@ window.addEventListener('load', function() {
           type: ConnectorType.STORAGE,
           connectorId: this.user.storage.connectorId,
         })
+        window.location.reload()
       },
 
       async createWebsite() {
-        if (!this.newWebsiteName) throw new Error('You need to provide a website name')
-        this.loading = true
         try {
+          if (!this.newWebsiteName) throw new Error('You need to provide a website name')
+          this.loading = true
           const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
           const result = await websiteCreate({
             websiteId,
@@ -136,15 +140,18 @@ window.addEventListener('load', function() {
             connectorId: this.user.storage.connectorId
           })
           this.message = '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 = 'Failed to create website'
+          this.error = `Failed to create website - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -155,12 +162,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteDelete({websiteId, connectorId: this.user.storage.connectorId})
           this.message = '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 = 'Failed to delete website'
+          this.error = `Failed to delete website - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -172,12 +182,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteMetaWrite({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
           this.message = '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 = 'Failed to delete website'
+          this.error = `Failed to rename website - ${error.message}`
+          this.message = ''
         }
       },
     },
@@ -259,7 +272,7 @@ window.addEventListener('load', function() {
             >fr</A></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"
@@ -287,16 +300,31 @@ window.addEventListener('load', function() {
             
             
             ><H1
-            id="itp1f"
-            
             
+            class="title "
+            v-if="!empty"
             
             >Welcome back!</H1><div
             id="iyex8"
-            class="subtitle color--light "
+            class="subtitle "
+            v-if="!empty"
+            
+            >Dive into your projects or kickstart a new one</div><SECTION
+            id="iqmx38"
+            
+            v-if="empty"
+            
+            ><H1
+            
+            class="title "
+            
             
+            >Welcome, let's get started</H1><DIV
             
-            >Dive into your projects or kickstart a new one</div><div
+            class="subtitle "
+            
+            
+            >Create your first project, click on "Create a website"</DIV></SECTION><div
             id="ickx4"
             class="button-bar margin-20 "
             
@@ -369,7 +397,7 @@ window.addEventListener('load', function() {
             >Cancel</button></div></form></div><div
             id="if80m"
             
-            
+            v-if="!empty"
             
             ><SECTION
             id="idgvg"
@@ -486,31 +514,6 @@ window.addEventListener('load', function() {
             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 "

package/_site/fr/connectors/index.html

@@ -50,6 +50,7 @@ window.addEventListener('load', function() {
   } = types
   const {
     connectorList,
+    logout,
   } = api
 
   const App = {
@@ -59,10 +60,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: {
@@ -70,7 +77,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) {
@@ -79,6 +86,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 = `Erreur, impossible de se connecter. ${data.message}`
+        } else {
+          window.location.href = '/'
+        }
+      },
+      async logout() {
+        try {
+          this.message = 'Déconnexion en cours'
+          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
+        }
+      },
     },
   };
 
@@ -96,29 +135,109 @@ window.addEventListener('load', function() {
       </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 "
+            
+            
+            ><A
+            href="/" id="i0g3ac"
+            class="nav__item active"
+            target=""
+            
+            >Sites</A><A
+            href="http://docs.silex.me/" id="i0g3ac"
+            class="nav__item "
+            target="_blank"
+            
+            >Docs</A><A
+            href="https://www.silex.me/" id="i0g3ac"
+            class="nav__item "
+            target="_blank"
+            
+            >A propos</A><A
+            href="https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=fr-FR&source=silex-dashboard" id="i0g3ac"
+            class="nav__item "
+            target="_blank"
+            
+            >Info</A></NAV><div
+            
+            class="lang h-space "
+            
+            
+            ><A
+            href="/en"
+            class="lang__item nav__item "
+            hreflang="en"
+            
+            >en</A><A
+            href="/fr"
+            class="lang__item nav__item active"
+            hreflang="fr"
+            
+            >fr</A></div></HEADER><A
+            id="ixzhcr" href="/"
+            class="button button-bar__item--secondary "
+            
+            
+            >< Retour</A><div
             id="imgx81"
             
             
             
-            ><div
-            id="in62y2"
+            ><H1
+            id="ighycb"
+            class="title "
             
             
+            >Bienvenue sur Silex</H1><div
+            id="it2175"
+            class="subtitle "
             
-            ><div
-            id="isqe61"
             
-            v-if="!loading" v-for="(connector, index) in connectors" :key="index"
+            >Merci de vous connecter pour continuer</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>
+            >Déconnexion</div></div></body>
       </html>
       

package/_site/fr/index.html

@@ -71,6 +71,7 @@ window.addEventListener('load', function() {
         storage: null,
         user: null,
         showMenu: false,
+        empty: false,
       }
     },
     mounted() {
@@ -87,6 +88,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()
@@ -94,11 +96,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 = `Erreur, impossible de démarrer le tableau de bord - ${error.message}`
+            this.message = ''
           }
         }
       },
@@ -120,12 +123,13 @@ window.addEventListener('load', function() {
           type: ConnectorType.STORAGE,
           connectorId: this.user.storage.connectorId,
         })
+        window.location.reload()
       },
 
       async createWebsite() {
-        if (!this.newWebsiteName) throw new Error('Vous n\'avez pas donné de nom à votre site')
-        this.loading = true
         try {
+          if (!this.newWebsiteName) throw new Error('Vous n\'avez pas donné de nom à votre site')
+          this.loading = true
           const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
           const result = await websiteCreate({
             websiteId,
@@ -136,15 +140,18 @@ window.addEventListener('load', function() {
             connectorId: this.user.storage.connectorId
           })
           this.message = 'Le site a bien été créé'
+          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 = 'Erreur, le site n\'a pas été créé'
+          this.error = `Erreur, le site n\'a pas été créé - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -155,12 +162,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteDelete({websiteId, connectorId: this.user.storage.connectorId})
           this.message = 'Le site a bien été effacé'
+          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 = 'Erreur, le site n\'a pas été effacé'
+          this.error = `Erreur, le site n\'a pas été effacé - ${error.message}`
+          this.message = ''
         }
       },
 
@@ -172,12 +182,15 @@ window.addEventListener('load', function() {
         try {
           const result = await websiteMetaWrite({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
           this.message = 'Changement de nom effectué'
+          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 = 'Erreur, le site n\'a pas été effacé'
+          this.error = `Erreur, le nom n\'a pas été changé - ${error.message}`
+          this.message = ''
         }
       },
     },
@@ -259,7 +272,7 @@ window.addEventListener('load', function() {
             >fr</A></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"
@@ -287,16 +300,31 @@ window.addEventListener('load', function() {
             
             
             ><H1
-            id="itp1f"
-            
             
+            class="title "
+            v-if="!empty"
             
             >Bienvenue !</H1><div
             id="iyex8"
-            class="subtitle color--light "
+            class="subtitle "
+            v-if="!empty"
+            
+            >Plongez-vous dans un projet ou créez-en un nouveau</div><SECTION
+            id="iqmx38"
+            
+            v-if="empty"
+            
+            ><H1
+            
+            class="title "
+            
             
+            >Bienvenue !</H1><DIV
             
-            >Plongez-vous dans un projet ou créez-en un nouveau</div><div
+            class="subtitle "
+            
+            
+            >Créez votre premier projet, clickez sur le boutont "Créer un site"</DIV></SECTION><div
             id="ickx4"
             class="button-bar margin-20 "
             
@@ -369,7 +397,7 @@ window.addEventListener('load', function() {
             >Annuler</button></div></form></div><div
             id="if80m"
             
-            
+            v-if="!empty"
             
             ><SECTION
             id="idgvg"
@@ -486,31 +514,6 @@ window.addEventListener('load', function() {
             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 "

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silexlabs/silex-dashboard",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Dashboard for Silex v3",
   "main": ".silex.js",
   "scripts": {
@@ -24,7 +24,7 @@
   "homepage": "https://github.com/silexlabs/silex-dashboard#readme",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@silexlabs/silex": "^3.0.0-alpha.42"
+    "@silexlabs/silex": "^3.0.0-alpha.48"
   },
   "dependencies": {
     "locale": "^0.1.0",

package/pages/connectors.css.liquid

@@ -1,4 +1,4 @@
 ---
 permalink: /css/connectors.css
 ---
-* { box-sizing: border-box; } body {margin: 0;}#imgx81{min-height:100vh;display:flex;justify-content:center;align-items:center;}#in62y2{max-width:400px;width:100%;display:flex;}#i87asw{padding:10px;}
+* { box-sizing: border-box; } body {margin: 0;}.nav__item{margin:0px 10px 0px 10px;font-size:1rem;padding:24px 0px 24px 0px;color:#4a4a4a;}.body{font-family:Verdana, Geneva, sans-serif;background-color:#f0f0f0;}.header{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff;}.padding-normal{padding:0px 24px 0px 24px;}.nav{width:100%;margin:0px 20px 0px 20px;}.subtitle{font-size:1rem;margin:0px 0px 20px 0px;color:#4a4a4a;}.subtitle.color--light{color:#636363;font-weight:700;}.button{font-weight:700;font-size:0.8rem;padding:8px 15px 8px 15px;display:inline-block;border:1px solid transparent;transition:all 0.18s ease-out;font-family:"Roboto", sans-serif;}.button.button--primary{background-color:#5e85a8;color:white;}.button-bar{margin:10px 0px 10px 0px;display:flex;}.button-bar.button-bar--full-width{justify-content:space-between;align-items:center;}.button-bar_item{margin:20px 20px 20px 20px;}.button-bar_item.button-bar__item--secondary{font-size:0.8rem;color:#444444;}.button.button--secondary{font-weight:400;background-color:rgba(221,221,221,0.5);}.nav__item.active{color:black;}.h-space{margin:0px 10px 0px 10px;}.button--tertiary{background-color:transparent;font-weight:400;}.lang__item{margin:0px 5px 0px 5px;}.nav__logo{height:50px;}.button:hover{color:#ff6600;background-color:transparent;border:1px solid #dddddd;}.button.button--secondary:hover{background-color:white;}#imgx81{min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;}#in62y2{width:100%;display:flex;justify-content:center;}.big-button{border-radius:5px 5px 5px 5px;font-size:15px;margin:10px 10px 10px 10px;padding:15px 30px 15px 30px;font-weight:400;}#i9msnk{padding:10px;display:inline;}#i6akll{padding:10px;display:inline;}#ixzhcr{padding:10px;position:absolute;display:none;}.title{margin:0 0 10px 0;font-size:2rem;font-weight:400;font-family:Times New Roman, Times, serif;}#ighycb{padding:10px;}#it2175{padding:10px;}#in5jeq{display:flex;}

package/pages/en/en.json

@@ -0,0 +1,23 @@
+{
+  "nav": [
+    {
+      "label": "Sites",
+      "url": "/"
+    },
+    {
+      "label": "Docs",
+      "url": "http://docs.silex.me/",
+      "target": "_blank"
+    },
+    {
+      "label": "About",
+      "url": "https://www.silex.me/",
+      "target": "_blank"
+    },
+    {
+      "label": "News",
+      "url": "https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=en-US&source=silex-dashboard",
+      "target": "_blank"
+    }
+  ]
+}

package/pages/en/index.md

@@ -3,6 +3,8 @@ layout: websites
 lang: en
 title: Silex Dashboard
 title2: Welcome back!
+title2-empty: Welcome, let's get started
+subtitle-empty: Create your first project, click on "Create a website"
 subtitle: Dive into your projects or kickstart a new one
 add-button: Create website
 add-title: Create a new website
@@ -16,18 +18,5 @@ list-edit: Edit
 list-rename: Rename
 list-delete: Delete
 message-dismiss: Dismiss
-nav:
-- label: Sites
-  url: /
-- label: Docs
-  url: http://docs.silex.me/
-  target: _blank
-- label: About
-  url: https://www.silex.me/
-  target: _blank
-- label: News
-  url: https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=en-US&source=silex-dashboard
-  target: _blank
-
 
 ---

package/pages/fr/fr.json

@@ -0,0 +1,23 @@
+{
+  "nav": [
+    {
+      "label": "Sites",
+      "url": "/"
+    },
+    {
+      "label": "Docs",
+      "url": "http://docs.silex.me/",
+      "target": "_blank"
+    },
+    {
+      "label": "A propos",
+      "url": "https://www.silex.me/",
+      "target": "_blank"
+    },
+    {
+      "label": "Info",
+      "url": "https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=fr-FR&source=silex-dashboard",
+      "target": "_blank"
+    }
+  ]
+}

package/pages/fr/index.md

@@ -4,6 +4,8 @@ lang: fr
 title: Dashboard Silex
 title2: Bienvenue !
 subtitle: Plongez-vous dans un projet ou créez-en un nouveau
+title2-empty: Bienvenue !
+subtitle-empty: Créez votre premier projet, clickez sur le boutont "Créer un site"
 add-button: Créer un site
 add-title: Créer un nouveau site internet
 add-name-label: Nom du site
@@ -16,18 +18,6 @@ list-edit: Editer
 list-rename: Renommer
 list-delete: Supprimer
 message-dismiss: Fermer
-nav:
-- label: Sites
-  url: /
-- label: Docs
-  url: http://docs.silex.me/
-  target: _blank
-- label: A propos
-  url: https://www.silex.me/
-  target: _blank
-- label: Info
-  url: https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=fr-FR&source=silex-dashboard
-  target: _blank
 
 ---
 [Silex website builder](https://www.silex.me/) est un projet libre et open source, supporté par l'[association Silex Labs](https://www.silexlabs.org/)