@silexlabs/silex-dashboard 1.0.41 → 1.0.45

package/.gitmodules

@@ -1,3 +1,3 @@
-[submodule "_silex/dashboard"]
-	path = _silex/dashboard
+[submodule "silex/websites/dashboard"]
+	path = silex/websites/dashboard
 	url = git@gitlab.com:ceubri/dashboard-silexv3.git

package/11ty/eleventy.config.mjs

@@ -0,0 +1,62 @@
+import { EleventyI18nPlugin } from '@11ty/eleventy'
+import nodeModules from 'node_modules-path'
+import fs from 'fs/promises'
+
+export default async function (eleventyConfig) {
+  // Silex CMS
+  eleventyConfig.addPassthroughCopy({"templates/css/*.css": "css"});
+  eleventyConfig.addPassthroughCopy({"templates/assets": "assets"});
+
+  // For the fetch plugin
+  eleventyConfig.watchIgnores.add('**/.cache/**')
+
+  // Delete _site before eleventy starts
+  eleventyConfig.on(
+    "eleventy.before",
+    async ({dir, runMode, outputMode}) => {
+      try {
+        return await fs.rm(dir.output, { recursive: true })
+      } catch(e) {
+        if(e.code === 'ENOENT') {
+          return
+        }
+        throw e
+      }
+    },
+  )
+  // Serve node_modules
+  eleventyConfig.on(
+		"eleventy.after",
+		async ({ dir, results, runMode, outputMode }) => {
+      await fs.mkdir(`${dir.output}/js`, { recursive: true })
+      for(const file of await fs.readdir(`${nodeModules('vue')}/vue/dist/`)) {
+        await fs.copyFile(`${nodeModules('vue')}/vue/dist/${file}`, `${dir.output}/js/${file}`)
+      }
+      for(const file of await fs.readdir(`${nodeModules('@silexlabs/silex')}/@silexlabs/silex/dist/client/js/`)) {
+        await fs.copyFile(`${nodeModules('@silexlabs/silex')}/@silexlabs/silex/dist/client/js/${file}`, `${dir.output}/js/${file}`)
+      }
+		}
+	)
+  // // Ignore all files from ../.gitignore
+  // eleventyConfig.setUseGitIgnore(false)
+  // const content = await fs.readFile('.gitignore', 'utf8')
+  // const files = content.split('\n')
+  // for (const file of files) {
+  //   if (file.trim() !== '') {
+  //     eleventyConfig.ignores.add(file.trim())
+  //   }
+  // }
+  eleventyConfig.addPlugin(EleventyI18nPlugin, {
+		defaultLanguage: "en",
+	})
+
+  // Return the configuration object
+  return {
+    dir: {
+      input: 'templates',
+      includes: '../11ty/_includes',
+      layouts: '../11ty/_includes',
+      data: '../11ty/_data',
+    }
+  }
+}

package/README.md

@@ -10,14 +10,20 @@ For discussions and bug report please go to [Silex main project](https://github.
 
 ## Contribute
 
-Start 11ty on localhost:8080
+Start 11ty
 
 ```sh
 $ npm run serve
 ```
 
-Start Silex on localhost:6805
+Start Silex
 
 ```sh
 $ npm start
 ```
+
+Use these links
+
+* Silex editor: http://localhost:6805
+* Silex dashboard: http://localhost:6805/en/
+* Silex connectors: http://localhost:6805/en/connectors/

package/_site/css/connectors-61bd21c2345101e48cc530cacf3afc0156ce7e089fcef3a34f853a537f0c55f2.css

@@ -0,0 +1 @@
+* { box-sizing: border-box; } body {margin: 0;}.body{font-family:"Ubuntu", sans-serif;background-color:#f0f0f0;color:#2b1b63;}.subtitle-16{font-size:1rem;margin:0px 0px 20px 0px;}.subtitle-16.color--light{color:#636363;font-weight:700;}.button{font-size:0.8rem;padding:10px 20px 10px 20px;display:inline-block;border:2px solid #8873fe;transition:all 0.18s ease-out;font-weight:700;line-height:1.2rem;}.button.button--primary{background-color:#8873fe;color:white;}.button-bar{margin:20px 0px 20px 0px;display:flex;padding:30px 30px 30px 30px;align-items:center;justify-content:space-between;border-radius:4px 4px 4px 4px;background-color:#ffffff;}.button-bar.button-bar--full-width{justify-content:space-between;align-items:center;}.button-bar_item.button-bar__item--secondary{font-size:0.8rem;}.button.button--secondary{font-weight:400;color:#8873fe;border:2px solid #8873fe;}.box{border-radius:4px 4px 4px 4px;background-color:#ffffff;}.box.flex-between{align-items:center;}.button--tertiary{background-color:transparent;font-weight:400;}.button:hover{color:#8873fe;border:2px solid #8873fe;}.button.button--secondary:hover{background-color:white;border:2px solid rgba(136,115,254,0.5);}#imgx81{min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;}#in62y2{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:700;background-color:#ffffff;}#i9msnk{padding:10px;display:inline;}#i6akll{padding:10px;display:inline;}#ixzhcr{padding:10px;position:absolute;display:none;}.bg-silex-purpel{background-repeat:repeat-y;background-position:center top;background-attachment:scroll;background-size:contain;background-image:url(/assets/../assets/bg-purpel-silex.webp);}.text-centered{text-align:center;}.text-white{color:#ffffff;}.box.box_transp{background-color:rgba(255,255,255,0.5);}.top-space-20{margin:20px 0 0 0;}.button.button--tertiary{border:2px solid transparent;background-color:rgba(221,221,221,0.5);}.box_login{max-width:450px;width:100%;padding:30px 30px 30px 30px;}.button-bar__item--link.text-white{color:#ffffff;}.button.big-button{border:2px solid transparent;}.button.button--tertiary:hover{border:2px solid #8873fe;color:#8873fe;background-color:white;}.button-bar__item__icon{float:left;height:40px;margin:5px 5px 5px 5px;width:40px;}.button-bar__item--secondary{font-size:0.8rem;}.connector__card{align-items:center;margin:5px auto 5px auto;border:1px solid;border-radius:5px 5px 5px 5px;max-width:100%;display:flex;color:black;}#i3cney{width:100%;display:none;justify-content:center;}.connector__description{padding:5px 15px 5px 15px;}#ie0dxn{min-height:100px;}#ior0hl{color:black;}#igp4xl{justify-content:center;display:inline-block;}#isqe61{display:inline-block;}.margin-top{margin:80px 0px 30px 0px;}.margin-30{margin:30px 0px 30px 0px;}.connector__card:link{text-decoration:none;color:black;border:1px solid;}.connector__card:hover{background-color:#8873fe;color:white;}

package/_site/css/websites-4b9b2b0a0a907b33eca109d50c2a3eee97f1955c742cef487110d21a0bbf8f50.css

@@ -0,0 +1 @@
+* { box-sizing: border-box; } body {margin: 0;}.nav__item{margin:0px 10px 0px 10px;font-size:0.8rem;padding:24px 0px 24px 0px;color:#4a4a4a;}.body{font-family:"Ubuntu", sans-serif;background-color:#f0f0f0;color:#2b1b63;}.menu-bar{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff;height:94px;padding:0px 100px 0px 100px;width:100%;}.padding-normal{padding:0px 24px 0px 24px;}#i9jq{display:flex;}.nav{width:100%;margin:0px 20px 0px 20px;}.subtitle-16{font-size:1rem;margin:0px 0px 20px 0px;}.subtitle-16.color--light{color:#636363;font-weight:700;}.button{font-size:0.8rem;padding:10px 20px 10px 20px;display:inline-block;border:2px solid #8873fe;transition:all 0.18s ease-out;font-weight:700;line-height:1.2rem;}.button.button--primary{background-color:#8873fe;color:white;}.button-bar{margin:20px 0px 20px 0px;display:flex;padding:30px 30px 30px 30px;align-items:center;justify-content:space-between;border-radius:4px 4px 4px 4px;background-color:#ffffff;}#ibsgw{position:relative;top:3px;}.button-bar.button-bar--full-width{justify-content:space-between;align-items:center;}.button-bar_item.button-bar__item--secondary{font-size:0.8rem;}.button.button--secondary{font-weight:400;color:#8873fe;border:2px solid #8873fe;}.rounded{border-radius:4px 4px 4px 4px;}.footer{display:flex;margin:50px 0px 0px 0px;background-color:#ffffff;justify-content:space-evenly;padding:30px 30px 60px 30px;}.skeleton-text.skeleton{background-color:#dddddd;color:transparent;opacity:0.31;border-radius:5px 5px 5px 5px;}.skeleton.skeleton-button{color:transparent;opacity:0.31;background-color:#dddddd;border-radius:5px 5px 5px 5px;width:140px;}.skeleton-anim{position:relative;}.nav__item.active{color:black;}.margin-20{margin:20px 0px 20px 0px;}#i0ro3{display:none;}.loading__item.loaded-true{display:none;}.flex-no-shrink{flex-shrink:0;}.form{padding:10px 0px 10px 0px;border-radius:5px 5px 5px 5px;}#i1nmbc{flex-shrink:0;}.input{padding:10px 10px 10px 10px;background-color:transparent;border:2px solid #8873fe;margin:10px 0px 10px 0px;border-radius:4px 4px 4px 4px;}.full-width{width:100%;}.v-space{margin:10px 0px 10px 0px;}.box{border-radius:4px 4px 4px 4px;background-color:#ffffff;}.box__header{margin:0px 0px 0px 0px;padding:10px 0px 10px 0px;font-weight:700;font-size:1.625rem;color:rgba(43,27,99,0.5);}.box.flex-between{align-items:center;}.flex-between{display:flex;align-items:center;justify-content:space-between;}.button--tertiary{background-color:transparent;font-weight:400;}.icon-font{font-size:1.5rem;line-height:1px;margin:0px 2px 0px 2px;}.lang__item{margin:0px 5px 0px 5px;}.top-space-40{margin:40px 0 0 0;}.nav__logo{height:50px;}.user-icon__image{width:100%;height:100%;}.user__wrapper{border:1px solid white;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 0 0 20px;}.right-space-20{margin:0px 20px 0px 0px;}#iksw4d{padding:10px;}.button:hover{color:#8873fe;border:2px solid #8873fe;}.button.button--secondary:hover{background-color:white;border:2px solid rgba(136,115,254,0.5);}.user-icon__wrapper{border:1px solid #f0f0f0;background-color:#f0f0f0;border-radius:50% 50% 50% 50%;width:40px;height:40px;overflow:hidden hidden;}.title-40{margin:0 0 10px 0;font-size:2.5rem;font-weight:700;}.bg-silex-purpel{background-repeat:repeat-y;background-position:center top;background-attachment:scroll;background-size:contain;background-image:url(/assets/../assets/bg-purpel-silex.webp);}.section-top{max-width:1200px;padding:40px 30px 40px 30px;height:226px;display:flex;flex-direction:column;justify-content:center;margin:0px auto 0px auto;}.text-centered{text-align:center;}.box-message{background-color:rgba(43,27,99,0.3);border-radius:4px 4px 4px 4px;padding:20px 30px 20px 30px;margin:10px 0px 10px 0px;}.text-white{color:#ffffff;}.bold{font-weight:800;}.button-bar__item--link{background-color:transparent;border:0px solid black;font-size:0.8rem;color:#8873fe;}.padding-30{padding:30px 30px 30px 30px;}.right-space-40{margin:0 40px 0 0;}.title-26{font-size:1.625rem;margin:10px 0px 10px 0px;}.empty-image{min-height:500px;background-image:url(/assets/../assets/empty-projects-sos.gif);background-repeat:no-repeat;background-position:center center;background-attachment:scroll;background-size:contain;}.padding-50-30{padding:50px 30px 50px 30px;}.box.box_transp{background-color:rgba(255,255,255,0.5);}.button.button--tertiary{border:2px solid transparent;background-color:rgba(221,221,221,0.5);}.button-bar__item--link.text-white{color:#ffffff;}.button.big-button{border:2px solid transparent;}.color-2B1B63-80{color:rgba(43,27,99,0.8);}.button.button--tertiary:hover{border:2px solid #8873fe;color:#8873fe;background-color:white;}.box-message-text{margin:0px 0 0 0;font-weight:300;}.website-max-width{max-width:1200px;}.margin-80{margin:80px auto 80px auto;}.button-bar__item--secondary{font-size:0.8rem;}.skeleton{line-height:1.1rem;}#isucae{min-height:100px;}.footer__column{display:flex;flex-direction:column;flex-grow:1;text-align:center;}.footer__item{padding:10px 10px 10px 10px;}#igsxoc{position:relative;top:3px;}.box--centered{display:flex;flex-direction:column;align-items:center;}.button-bar__title:hover{color:#8873fe;}.button-bar__item--icon{margin:0px 0 0 0;padding:5px 5px 5px 5px;}.nav__item:hover{text-decoration:none;color:#8873fe;}.nav_item--active:first-child{color:#8873fe;}

package/_site/en/connectors/index.html

@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
 <head>
-<link rel="stylesheet" href="/css/connectors.css" />
+<meta charset="UTF-8">
+<link rel="stylesheet" href="/css/connectors-61bd21c2345101e48cc530cacf3afc0156ce7e089fcef3a34f853a537f0c55f2.css" />
 <!--  font google -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
 
-    <link
-      rel="alternate"
-      hreflang="fr"
-      href="/fr/connectors" />
 <style>
   .before-js > * {
     visibility: hidden;
     opacity: 0;
     transition: opacity .5s ease;
   }
+  .before-js[data-gjs-type] > *, /* This is only inside the editor, .before-js needs to be on the body */
   .after-js > * {
     visibility: visible;
     opacity: 1;
@@ -26,6 +24,7 @@
     top: 49%;
     left: 49%;
   }
+  .before-js[data-gjs-type]:before, /* This is only inside the editor, .before-js needs to be on the body */
   .after-js:before {
     content: none;
   }
@@ -61,7 +60,7 @@
     color: #8873FE;
   }
   input:focus {
-    border: 2px solid ##9977FE;
+    border: 2px solid #9977FE;
     background-color:#ffffff;
   }
   :focus {
@@ -129,12 +128,12 @@
   }
   /*flash*/
   .fx-flash:hover {
-    animation: flash-in .5s ;
+    animation: flash-in .25s ;
   }
   /*flash-in animation*/
   @keyframes flash-in{
     0% {
-      opacity:0;
+      opacity:.25;
     }
     100% {
       opacity:1;
@@ -143,10 +142,13 @@
   /*flash-in animation*/
   /*FX ANIMATIONS*/
 </style>
-<script src="/js/vue.global.js"></script>
+<script src="/js/vue.global.prod.js"></script>
 <script src="/js/main.js"></script>
 <script type="module">
+          console.log('xxxxxx')
+const CONNECTORS_PATH = '/connectors/'
 window.addEventListener('load', function() {
+          console.log('xxxxxx')
   const { createApp } = Vue;
   const { api, constants, types } = silex;
   const {
@@ -154,84 +156,190 @@ window.addEventListener('load', function() {
   } = types
   const {
     setServerUrl,
-    connectorList,
+    getUser,
     logout,
+    websiteDelete,
+    websiteDuplicate,
+    websiteList,
+    websiteCreate,
+    websiteMetaWrite,
   } = api
+  function toSafeId(name) {
+    return name.replace(/[/\\?%*:|"<>]/g, '_')
+  }
 
   const App = {
     data() {
       return {
-        connectors: [],
+        websites: [],
+        newWebsiteName: '',
+        showCreationForm: false,
         error: null,
         message: null,
+        loggedIn: false,
         loading: true,
-        lastConnector: null,
+        storage: null,
+        user: null,
+        showMenu: false,
+        empty: false,
       }
     },
     mounted() {
       this.init()
-      window.addEventListener('message', (event) => {
-        if(event.data && event.data.type === 'login') {
-          this.loginResult(event.data)
-        }
-      })
     },
 
     methods: {
       async init() {
         try {
           // Init Silex server path
-          // Go up 2 levels because of the language prefix + the page path
-          setServerUrl((window.location.origin + window.location.pathname.replace(/\/$/, '')).replace(/\/[^/]+\/[^/]+$/, ''))
+          // Go up one level because of the language prefix
+          setServerUrl(window.location.origin)
           // Start
-          this.loading = true
-          console.log('init')
-          this.connectors = await connectorList({type: ConnectorType.STORAGE})
-          console.log('connectors', this.connectors)
-          this.loading = false
+          const user = await getUser({type: ConnectorType.STORAGE})
+          // Escape single quotes in the picture URL and decode the picture URL
+          user.picture = decodeURIComponent(user.picture).replace(/'/g, "\\'")
+          if(user) {
+            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()
+          }
         } catch (error) {
           console.error(error)
-          this.error = error
           this.loading = false
+          if(error.code === 401 || error.httpStatusCode === 401) {
+            this.loggedIn = false
+            this.openLogin()
+          } else {
+            this.error = `Failed to start dashboard - ${error.message}`
+            this.message = ''
+          }
         }
       },
-      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')
+
+      openLogin(id, lang) {
+        //throw new Error('debug')
+        const path = `/en${CONNECTORS_PATH}`
+        console.log(window.location.pathname, window.location.path, path)
+        if(window.location.pathname === path) return
+        window.open(path, '_self')
       },
-      loginResult(data) {
-        console.log('loginResult', data)
-        if(data.error) {
-          this.error = data.error
-          this.message = `Error, login failed. ${data.message}`
-        } else {
-          window.location.href = '/'
-        }
+
+      openEditor(id, lang) {
+        window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_self')
       },
+
       async logout() {
+        await logout({
+          type: ConnectorType.STORAGE,
+          connectorId: this.user.storage.connectorId,
+        })
+        window.location.reload()
+      },
+
+      async createWebsite() {
         try {
-          this.message = 'Logging out'
-          await logout({type: ConnectorType.STORAGE, connectorId: this.lastConnector.connectorId})
-          this.loggedIn = false
-          this.user = null
-          this.websites = []
+          if (!this.newWebsiteName) throw new Error('You need to provide a website name')
+          this.loading = true
+          const websiteId = toSafeId(this.newWebsiteName)
+          const result = await websiteCreate({
+            websiteId,
+            data: {
+              name: this.newWebsiteName,
+              imageUrl: null,
+            },
+            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
-          this.message = ''
-          this.error = false
+          return result
         } catch (error) {
+          this.loading = false
           console.error(error)
-          this.error = error
-          this.message = error.message
+          this.error = `Failed to create website - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      async deleteWebsite(websiteId) {
+        const ok = confirm('Deleting a website? Are your sure? Really?')
+        if (!ok) return
+        this.loading = true
+        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 - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      async duplicateWebsite(websiteId) {
+        this.loading = true
+        try {
+          await websiteDuplicate({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
+          this.error = ''
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.message = 'Website duplicated successfully'
+          this.empty = this.websites.length === 0
+          this.loading = false
+        } catch (error) {
+          this.loading = false
+          this.error = `Failed to duplicate website - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      async renameWebsite(websiteId) {
+        const website = this.websites.find(w => w.websiteId === websiteId)
+        const name = prompt('New name for this website', website.name)
+        if (!name) return
+        this.loading = true
+        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 rename website - ${error.message}`
+          this.message = ''
         }
       },
     },
   };
+  // Prepare elements for vue
+  document.querySelectorAll('[v-text], [v-html]')
+  .forEach(el => el.innerText = '')
+
+  // Create the app
+  const app = createApp(App);
+
+  // Suppress "v-text will override element children" warning
+  app.config.compilerOptions.directiveTransforms = {
+    text: false,
+  }
+
+  // Mount the app
+  app.mount('.app');
 
-  // Start vue app
-  createApp(App).mount('.app');
 
   // Remove loading
   setTimeout(() => {
@@ -240,137 +348,24 @@ window.addEventListener('load', function() {
 })
 </script>
 
-<title></title>
+<title>Silex Dashboard</title>
 <link rel="icon" href="/assets/favicon-32x32.png" />
-<meta name="description" property="description" content=""/>
-<meta name="og:title" property="og:title" content=""/>
-<meta name="og:description" property="og:description" content=""/>
-<meta name="og:image" property="og:image" content=""/>
-</head>
-<body
-            id="i2hcfw"
-            class="body app"
-            
-            
-            ><HEADER
-            id="ij139z"
-            class="menu-bar "
-            
-            
-            ><A
-            href="/" id="iy54t1"
-            
-            
-            
-            ><img
-            src="/assets/picto-silex@3x.png"
-            class="nav__logo "
-            
-            
-            ></img></A><NAV
-            id="in5jeq"
-            class="nav "
-            
-            
-            ><A
-            href="/" id="i0g3ac"
-            class="nav__item uppercase active"
-            target=""
-            
-            >Sites</A><A
-            href="http://docs.silex.me/" id="i0g3ac"
-            class="nav__item uppercase "
-            target="_blank"
-            
-            >Docs</A><A
-            href="https://www.silex.me/" id="i0g3ac"
-            class="nav__item uppercase "
-            target="_blank"
-            
-            >About</A><A
-            href="https://community.silex.me/" id="i0g3ac"
-            class="nav__item uppercase "
-            target="_blank"
-            
-            >Community</A><A
-            href="https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=en-US&source=silex-dashboard" id="i0g3ac"
-            class="nav__item uppercase "
-            target="_blank"
-            
-            >News</A></NAV><div
-            
-            class="lang h-space uppercase "
-            
-            
-            ><A
-            href="/en"
-            class="lang__item nav__item active"
-            hreflang="en"
-            
-            >en</A><A
-            href="/fr"
-            class="lang__item nav__item "
-            hreflang="fr"
-            
-            >fr</A></div></HEADER><A
-            id="ixzhcr" href="/"
-            class="button button-bar__item--secondary "
-            
-            
-            >< Back</A><div
-            id="imawg3"
-            class="bg-silex-purpel "
-            
-            
-            ><div
-            id="imgx81"
-            class=" before-js"
-            
-            
-            ><div
-            id="iikf0s"
-            class="box text-centered padding-100-30 box_login "
-            
-            
-            ><H1
-            id="ighycb"
-            class="title-40 "
-            
-            
-            >Welcome to Silex</H1><div
-            id="it2175"
-            class="subtitle-16 "
-            
-            
-            >Please login to continue</div><div
-            id="in62y2"
-            class="button-bar "
-            
-            
-            ><A
-            id="isqe61"
-            class="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="io3lid"
-            class="button-bar__item__icon "
-            :style='`background: url("${connector.icon}"); background-repeat: no-repeat; background-size: contain;`'
-            
-            ></div><div
-            id="i87asw"
-            
-            v-text="connector.displayName"
-            
-            >Insert your text here</div></A></div></div><div
-            id="i9msnk"
-            class="text-white top-space-20 "
-            v-if="error" v-html="message"
-            
-            >Insert your text here</div><div
-            id="i6akll"
-            class="button button--tertiary text-centered "
-            v-if="error" @click="logout()"
-            
-            >Logout</div></div></div></body>
+<meta name="og:title" property="og:title" content="Silex Dashboard"/>
+<link href="https://www.googleapis.com" rel="preconnect" ><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ><link href="https://www.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" ></head>
+<body id="i2hcfw" class="body app before-js"><A id="ixzhcr" href="/" class="button button-bar__item--secondary">< Back</A><div id="imawg3" class="bg-silex-purpel"><div id="imgx81" class=""><div id="iikf0s" class="box box_login"><div id="ie0dxn" class="text-centered"><img id="ior0hl" src="/assets/logo-silex.svg"/><p id="it2175" class="subtitle-16">Please login to continue</p><div id="ilq8ui" class="text-centered">Do you need help? Check <a href="https://docs.silex.me/en/user/login" target="_blank">the documentation</a>.</div></div><h3 id="iqc1xf" class="margin-top">Recommended and free</h3><div id="in62y2">
+    
+  
+    
+  <div id="isqe61" class="">
+<a id="i0vhjr" href="/api/connector/login?connectorId=gitlab&type=STORAGE" class="connector__card" data-style="background: rgba(252, 109, 38, 0.2); color: #2B1B63;" title="Gitlab.com is the service we recommend to host your Silex website. We trust the company behind the service, go check them out."><div id="io3lid" class="button-bar__item__icon"><svg   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"   width="100%"   height="100%"   viewBox="0 0 1000 963.197"   version="1.1"   id="svg85">   <sodipodi:namedview     id="namedview87"     pagecolor="#ffffff"     bordercolor="#666666"     borderopacity="1.0"     inkscape:pageshadow="2"     inkscape:pageopacity="0.0"     inkscape:pagecheckerboard="0"     showgrid="false"     inkscape:zoom="1"     inkscape:cx="991.5"     inkscape:cy="964.5"     inkscape:window-width="1126"     inkscape:window-height="895"     inkscape:window-x="774"     inkscape:window-y="12"     inkscape:window-maximized="0"     inkscape:current-layer="svg85" />   <defs id="defs74">     <style id="style72">       .cls-1{fill:#e24329;}       .cls-2{fill:#fc6d26;}       .cls-3{fill:#fca326;}     </style>   </defs>   <g     id="LOGO"     transform="matrix(5.2068817,0,0,5.2068817,-489.30756,-507.76085)">     <path       class="cls-1"       d="m 282.83,170.73 -0.27,-0.69 -26.14,-68.22 a 6.81,6.81 0 0 0 -2.69,-3.24 7,7 0 0 0 -8,0.43 7,7 0 0 0 -2.32,3.52 l -17.65,54 h -71.47 l -17.65,-54 a 6.86,6.86 0 0 0 -2.32,-3.53 7,7 0 0 0 -8,-0.43 6.87,6.87 0 0 0 -2.69,3.24 L 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.08,-56.04 z"       id="path76" />     <path       class="cls-2"       d="m 282.83,170.73 -0.27,-0.69 a 88.3,88.3 0 0 0 -35.15,15.8 L 190,229.25 c 19.55,14.79 36.57,27.64 36.57,27.64 l 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.1,-56.08 z"       id="path78" />     <path       class="cls-3"       d="m 153.43,256.89 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 c 0,0 -17.04,-12.89 -36.59,-27.64 -19.55,14.75 -36.57,27.64 -36.57,27.64 z"       id="path80" />     <path       class="cls-2"       d="M 132.58,185.84 A 88.19,88.19 0 0 0 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 c 0,0 17,-12.85 36.57,-27.64 z"       id="path82" />   </g> </svg></div><div id="i87asw" class="connector__description">Connect with GitLab.com</div></a></div>
+  
+    </div><h3 id="i8w75b" class="margin-30">Advanced users</h3><div id="igp4xl">
+    
+  
+    
+  
+    
+  <div id="id9k25" href="" class="">
+<a href="/api/connector/login?connectorId=ftp&type=STORAGE" id="irgt6z" class="connector__card" data-style="background: #0066CC; color: #ffffff;" title="FTP is for professional users who want to host their websites with a hosting company of their choice
+"><div class="button-bar__item__icon"><svg xmlns='http://www.w3.org/2000/svg' height='100%' viewBox='0 0 512 512'>   <path d='M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z' /> </svg></div><div class="connector__description">Connect with FTP</div></a></div></div><div id="i3cney" class="button-bar"><a id="iacshy" class="button big-button connector__card" v-if="!loading" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" v-for="(connector, index) in connectors" v-on-click="openLogin(connector)"><div id="iiwn36"><div class="button-bar__item__icon" :style="`background: url('${connector.icon}'); background-repeat: no-repeat; background-size: contain;`"></div><div id="if4gvb" class="" v-text="connector.displayName">Name<br/></div></div><div id="isndui">This connector is about blablabla<br/></div></a></div></div><div id="i9msnk" class="text-white top-space-20" v-if="error" v-text="message" :test="message">Insert your text here</div><div id="i6akll" class="button button--tertiary text-centered" v-if="error" v-on:click="logout()">Logout</div></div></div></body>
 </html>