@silexlabs/silex 3.0.0-alpha.39 → 3.0.0-alpha.41

package/src/css/dialog.scss

@@ -18,17 +18,24 @@
   background-color: variables.$primaryColor;
   z-index: variables.$z-dialog-inline;
   border-radius: 3px;
+  border: 2px solid rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  header {
+    padding: 10px;
+  }
   main {
     flex-grow: 1;
+    padding: 10px;
   }
   footer {
-    padding: 5px;
+    padding: 10px;
     text-align: right;
   }
   a {
     color: variables.$quaternaryColor;
   }
+  header > * {
+    margin: 0;
+  }
 }

package/src/css/grapesjs.scss

@@ -42,3 +42,82 @@
   }
 }
 
+/*
+*/
+// Font awesome 5 fix
+// https://github.com/GrapesJS/grapesjs/issues/644#issuecomment-833215677
+.gjs-editor-cont .fa {
+	font-weight: 400;
+}
+
+.fa-square-o:before {
+	content: "\f0c8";
+}
+
+.fa-trash-o:before {
+	content: "\f1f8";
+}
+
+.fa-map-o:before {
+	content: "\f279";
+}
+
+.fa-youtube-play:before {
+	content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+	content: "\f054";
+}
+
+.fa-chevron-down:before {
+	content: "\f078";
+}
+
+// Font awesome 6 fix
+.fa-cog:before {
+  font-weight: 900;
+}
+
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+	content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+/*
+.fa-plus:before {
+	content: "+";
+  font-size: 35px;
+}
+.fa-diamond:before {
+  content: "\f3a5";
+}
+// .fa-plus {
+//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
+// }
+*/

package/src/css/project-bar.scss

@@ -85,8 +85,8 @@ iframe.enable-squeeze.silex-squeeze-left {
         font-weight: 400;
         span {
           position: relative;
-          left: -6px;
-          top: 6px;
+          left: -2px;
+          top: -11px;
           font-weight: bolder;
           background-color: #444;
           border-radius: 100%;

package/src/example-client-config.js

@@ -1,3 +1,20 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 import directusStorage from 'https://unpkg.com/@silexlabs/grapesjs-directus-storage'
 console.log('directusStorage', directusStorage, directusStorage?.default)
 

package/src/html/templates/includes.pug

@@ -1,2 +1 @@
 link(rel='stylesheet', type='text/css', href='css/admin.css')
-

package/src/ts/client/config.ts

@@ -17,15 +17,16 @@
 
 import { Config, Plugin } from '@silexlabs/silex-plugins'
 import { getEditorConfig } from './grapesjs'
-import { CLIENT_CONFIG_FILE_NAME } from '../constants'
+import { CLIENT_CONFIG_FILE_NAME, DEFAULT_BACKEND_ID, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID } from '../constants'
 
 /**
  * @fileoverview Silex client side config
  */
 
-const id = new URL(location.href).searchParams.get('id') || 'default'
-const lang = new URL(location.href).searchParams.get('lang') || 'en'
-const rootUrl = `${location.protocol}//${location.host}${location.pathname}`
+const id = new URL(location.href).searchParams.get('id') ?? DEFAULT_WEBSITE_ID
+const backendId = new URL(location.href).searchParams.get('backendId') ?? DEFAULT_BACKEND_ID
+const lang = new URL(location.href).searchParams.get('lang') ?? DEFAULT_LANGUAGE
+const rootUrl = window.location.origin
 
 export class SilexConfig extends Config {
   /**
@@ -41,13 +42,13 @@ export class SilexConfig extends Config {
   /**
    * Grapesjs config
    */
-  editor = getEditorConfig(id, rootUrl)
+  editor = getEditorConfig(id, backendId, rootUrl)
 
   /**
    * Client config url
    * This is the url of the config file which is a plugin
    */
-  clientConfigUrl = `${rootUrl}${CLIENT_CONFIG_FILE_NAME}`
+  clientConfigUrl = `${rootUrl}/${CLIENT_CONFIG_FILE_NAME}`
 
   /**
    * GrapesJs plugins

package/src/ts/client/grapesjs/LoginDialog.ts

@@ -0,0 +1,190 @@
+import { html, render } from 'lit-html'
+import { Editor } from 'grapesjs'
+import { ApiBackendLoggedInPostMessage, BackendData, BackendId, BackendType } from '../../types'
+import { LoginStatus, backendList, loginStatus, logout } from '../services'
+import { WebsiteId } from '../../types'
+
+export const cmdLogin = 'silex:auth:login'
+export const eventLoggingIn = 'silex:auth:logging-in'
+export const eventLoggedIn = 'silex:auth:logged-in'
+export const eventLoginFailed = 'silex:auth:login-failed'
+export const eventLoggedOut = 'silex:auth:logged-out'
+
+export interface LoginDialogOptions {
+  id: WebsiteId,
+}
+
+export async function getCurrentLoginStatus(editor: Editor): Promise<LoginStatus> {
+  return editor.getModel().get('loginStatus') as LoginStatus // ?? { backend: null, user: null, websiteMeta: null }
+}
+
+let open = false
+let body: HTMLElement | null = null
+export default function loginDialogPlugin(editor, opts) {
+  // Options
+  const options: LoginDialogOptions = {
+    ...opts,
+  }
+
+  // Commands and events
+  editor.Commands.add(cmdLogin, {
+    async run(editor: Editor) {  await openDialog() },
+    stop(editor: Editor) { closeDialog() },
+  })
+  editor.on(eventLoggedOut, async () => openDialog())
+
+  // Dialog API
+  function closeDialog() {
+    if (open) {
+      editor.Modal.close()
+      open = false
+    }
+  }
+  async function openDialog() {
+    editor.trigger(eventLoggingIn)
+    open = true
+    editor.Modal.open({
+      title: 'Login',
+      content: '<div id="LoginDialog__content"></div>',
+    }, {
+      closeOnConfirm: false,
+      closeOnEscape: false,
+      closeOnOverlayClick: false,
+    })
+    body = document.querySelector('#LoginDialog__content')
+    if (!body) {
+      throw new Error('Dialog creation failed')
+    }
+    render(html`Logging in...`, body)
+    return loadStorageList(async list => onStorageList(list))
+  }
+  async function onStorageList(list) {
+    const loggedIn = list.find(backend => backend.isLoggedIn)
+    if (loggedIn) {
+      try {
+        const status = await updateLoginStatus(loggedIn.backendId, loggedIn.type)
+        editor.trigger(eventLoggedIn, status)
+        return closeDialog()
+      } catch (err) {
+        console.error('Error with updating login status', err)
+        render(html`
+            <main>
+              <p>There was an error with updating the login status. ${err.message}</p>
+            </main>
+            <footer>
+              <button class="silex-button silex-button--primary" @click=${() => loadStorageList(async list => onStorageList(list))}>Retry</button>
+              <button class="silex-button" @click=${async () => {
+    await logout(loggedIn.backendId, loggedIn.type)
+    openDialog()
+  }}>Login with another backend</button>
+            </footer>
+          `, body)
+      }
+      return
+    }
+    // Display the list of storage and continue to login
+    render(html`
+        <main>
+          <p>Login and give Silex access to a file storage.</p>
+          ${list.map(backend => html`
+            <button
+              class="silex-button silex-button--primary"
+              id="publish-button--primary"
+              @click=${() => loginWithBackend(backend)}
+            >Login with ${backend.displayName}</button>
+          `)}
+        </main>
+        <footer>
+        </footer>
+      `, body)
+  }
+
+  // Auth management
+  async function loadStorageList(done: (list: BackendData[]) => Promise<void>) {
+    try {
+      const storageProviders = await backendList(BackendType.STORAGE)
+      await done(storageProviders)
+    } catch (err) {
+      console.error('Error with loading storage providers', err)
+      render(html`
+        <main>
+          An error occured while loading the storage providers: ${err.message}
+        </main>
+        <footer>
+          <button type="button" class="gjs-btn-prim" @click=${() => loadStorageList(done)}>Retry</button>
+        </footer>
+        `, body)
+    }
+  }
+  async function loginWithBackend(provider: BackendData) {
+    window.open(provider.authUrl, '_blank')
+    return new Promise(resolve => {
+      render(html`
+        <main>
+          <p>Waiting for your authorization in popup window...</p>
+          </main>
+        <footer>
+          <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Cancel</button>
+        </footer>
+      `, body)
+      const onMessage = async (event) => {
+        if (event.data?.type === 'login') {
+          window.removeEventListener('message', onMessage)
+          const data = event.data as ApiBackendLoggedInPostMessage
+          const { backendId, error, message } = data
+          if (error) {
+            // Error, start over
+            console.error('login error', message)
+            render(html`
+              <main>
+                <p>Login failed with error: ${message}</p>
+              <footer>
+                <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Retry</button>
+                ${ backendId ? html`<button class="silex-button" @click=${async () => {
+    await logout(backendId, provider.type)
+    openDialog()
+  }}>Login with another backend</button>` : '' }
+
+                  </footer>
+                `, body)
+            editor.trigger(eventLoginFailed)
+          } else {
+            try {
+              render(html`
+                <main>
+                  <p>Loging in...</p>
+                </main>
+                <footer>
+                </footer>
+              `, body)
+              const status = await updateLoginStatus(backendId, provider.type)
+              editor.trigger(eventLoggedIn, status)
+              closeDialog()
+            } catch (err) {
+              console.error('Error with loading login status', err)
+              render(html`
+                <main>
+                  An error occured, could not get your data.
+                  ${err.message}
+                </main>
+                <footer>
+                  <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Retry</button>
+                  <button class="silex-button" @click=${async () => {
+    await logout(backendId, provider.type)
+    openDialog()
+  }}>Login with another backend</button>
+                </footer>
+                `, body)
+            }
+          }
+        }
+      }
+      window.addEventListener('message', onMessage, false)
+    })
+  }
+  async function updateLoginStatus(backendId: BackendId, type: BackendType): Promise<LoginStatus> {
+    const status = await loginStatus(backendId, type, options.id)
+    editor.getModel().set('loginStatus', status)
+    return status
+  }
+}