@silexlabs/silex 3.0.0-alpha.183 → 3.0.0-alpha.185

package/dist/server/server/api/connectorApi.js

@@ -144,12 +144,12 @@ async function routeLoginSuccess(req, res) {
                 ...body,
             });
         }
-        res.send(getEndAuthHtml('Logged in', false, connectorId, connector.getOptions(body)));
+        res.send(getEndAuthHtml('Logged in', false, connectorId, type, connector.getOptions(body)));
     }
     catch (error) {
         res
             .status(validateStatus(error?.code ?? error?.httpStatusCode, 500))
-            .send(getEndAuthHtml(error.message, true));
+            .send(getEndAuthHtml(error.message, true, req.query.connectorId, req.query.type));
     }
 }
 async function routeLogout(req, res) {
@@ -187,29 +187,147 @@ async function routeLogout(req, res) {
         return;
     }
 }
-function getEndAuthHtml(message, error, connectorId, options) {
+function getEndAuthHtml(message, error, connectorId, connectorType, options) {
     const data = {
         type: 'login',
         error,
         message,
         connectorId,
+        connectorType,
         options,
     };
+    const status = error ? 'Error' : 'Success';
     return `
-    <html>
+    <!DOCTYPE html><html lang="en">
       <head>
-        <script>
-          if(window.opener) {
-            window.opener.postMessage(${JSON.stringify(data)}, '*')
-            window.close()
-          } else {
-            window.location.href = '/'
+        <title>Authentication ${status}</title>
+        <style>
+          :root {
+            --primaryColor: #333333;
+            --secondaryColor: #ddd;
+            --tertiaryColor: #8873FE;
+            --quaternaryColor: #A291FF;
+            --darkerPrimaryColor: #292929;
+            --lighterPrimaryColor: #575757;
           }
-        </script>
+
+          body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 50px;
+            color: var(--primaryColor);
+            background-color: var(--secondaryColor);
+          }
+
+          h1 {
+            color: var(--tertiaryColor);
+          }
+
+          p {
+            font-size: 18px;
+          }
+
+          a {
+            color: var(--tertiaryColor);
+            text-decoration: none;
+          }
+
+          a:hover {
+            text-decoration: underline;
+          }
+
+          .container {
+            max-width: 600px;
+            margin: auto;
+          }
+
+          .button {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 10px 20px;
+            font-size: 16px;
+            color: var(--secondaryColor);
+            background-color: var(--tertiaryColor);
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            cursor: pointer;
+          }
+
+          .button:hover {
+            background-color: var(--quaternaryColor); /* Slightly lighter shade of tertiary color */
+          }
+
+          .error {
+            display: none;
+            margin-top: 20px;
+            padding: 15px;
+            border: 1px solid var(--tertiaryColor);
+            border-radius: 5px;
+            text-wrap: wrap;
+          }
+
+        </style>
       </head>
       <body>
-        <p>${message}</p>
-        <p>Close this window or <a href="/">go back to /</a></p>
+        <div class="container">
+          <div id="message">
+            <h1>Authentication ${status}</h1>
+            <p>${error ? '' : message}</p>
+          </div>
+          ${error ? `
+            <p><a data-link-to href="/">click here to continue</a>.</p>
+            <a data-link-to href="/" class="button">Retry</a>
+            <pre id="error-container" class="error">${message}</pre>
+            <script>
+              document.getElementById('error-container').style.display = "block";
+              fetch("${constants_1.API_PATH}${constants_1.API_CONNECTOR_PATH}${constants_1.API_CONNECTOR_LOGOUT}?connectorId=${connectorId}&type=${connectorType}", {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  credentials: 'include', // sends the cookies with the request
+                },
+              })
+              if(window.opener && window.opener !== window) {
+                const linksTo = document.querySelectorAll('[data-link-to]');
+                linksTo.forEach(link => {
+                  link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const data = ${JSON.stringify(data)};
+                    window.opener.postMessage(data, '*');
+                    window.close();
+                  });
+                });
+              }
+            </script>
+          ` : `
+            <p>If this window doesn’t close automatically, <a href="/">click here to return to the homepage</a>.</p>
+            <a href="/" class="button">Go to Homepage</a>
+            <pre id="error-container" class="error"></pre>
+            <script>
+              const data = ${JSON.stringify(data)};
+              const errorContainer = document.getElementById('error-container');
+              const messageContainer = document.getElementById('message');
+
+              // Check if the window was opened programmatically and is valid
+              if (window.opener && window.opener !== window) {
+                try {
+                  // Send a postMessage to the opener
+                  window.opener.postMessage(data, '*');
+                  // Attempt to close the window
+                  window.close();
+                } catch (e) {
+                  // Display error message if closing fails
+                  errorContainer.innerText = "Unable to close the window. Please close it manually.";
+                  errorContainer.style.display = "block";
+                }
+              } else {
+                messageContainer.innerHTML = '<h1>Redirecting, please wait...</h1>';
+                window.location.href = '/'
+              }
+            </script>
+          `}
+        </div>
       </body>
     </html>
   `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.183",
+  "version": "3.0.0-alpha.185",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",

package/src/css/project-bar.scss

@@ -6,7 +6,7 @@
 //  width: auto;
 //}
 .silex-squeeze-left .gjs-cv-canvas {
-  left: calc(13% + 35px);
+  left: calc(var(--viewsProjectPanelWidth) + 35px);
   width: auto;
   right: var(--viewsPanelWidth);
 }

package/src/css/silex.scss

@@ -79,6 +79,7 @@
   }
   footer {
     position: fixed;
+    z-index: 10;
     bottom: 0;
     left: 0;
     width: 100%;

package/src/ts/server/api/connectorApi.ts

@@ -3,7 +3,7 @@ import { API_CONNECTOR_LIST, API_CONNECTOR_LOGIN_CALLBACK, API_CONNECTOR_USER, A
 import { ServerConfig } from '../config'
 import { requiredParam } from '../utils/validation'
 import { Connector, getConnector, toConnectorData, toConnectorEnum } from '../connectors/connectors'
-import { ApiConnectorListQuery, ApiConnectorListResponse, ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiConnectorUserQuery, ApiConnectorUserResponse, ApiConnectorLogoutQuery, ConnectorId, ApiConnectorLoginCbkQuery, ApiConnectorLoginCbkBody, ConnectorOptions, ApiResponseError } from '../../types'
+import { ApiConnectorListQuery, ApiConnectorListResponse, ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiConnectorUserQuery, ApiConnectorUserResponse, ApiConnectorLogoutQuery, ConnectorId, ApiConnectorLoginCbkQuery, ApiConnectorLoginCbkBody, ConnectorOptions, ApiResponseError, ConnectorType } from '../../types'
 
 /**
  * @fileoverview The connector API adds routes to handle the connectors and the methods they implement, this includes authentication and user data.
@@ -263,11 +263,11 @@ async function routeLoginSuccess(req: Request, res: Response) {
       })
     }
     // End the auth flow
-    res.send(getEndAuthHtml('Logged in', false, connectorId, connector.getOptions(body)))
+    res.send(getEndAuthHtml('Logged in', false, connectorId, type, connector.getOptions(body)))
   } catch (error) {
     res
       .status(validateStatus(error?.code ?? error?.httpStatusCode, 500))
-      .send(getEndAuthHtml(error.message, true))
+      .send(getEndAuthHtml(error.message, true, req.query.connectorId as ConnectorId, req.query.type as ConnectorType))
   }
 }
 
@@ -314,31 +314,150 @@ async function routeLogout(req: Request, res: Response) {
  * Utility function to send an HTML page to the browser
  * is page will send a postMessage to the parent window and close itself
  */
-function getEndAuthHtml(message: string, error: boolean, connectorId?: ConnectorId, options?: ConnectorOptions): string {
+function getEndAuthHtml(message: string, error: boolean, connectorId: ConnectorId, connectorType: ConnectorType, options?: ConnectorOptions): string {
   // Data for postMessage
   const data = {
     type: 'login', // For postMessage
     error,
     message,
     connectorId,
+    connectorType,
     options,
   } as ApiConnectorLoggedInPostMessage
-  // Send the HTML
+  // Determine status title and heading based on the error
+  const status = error ? 'Error' : 'Success'
+  // Return the HTML template
   return `
-    <html>
+    <!DOCTYPE html><html lang="en">
       <head>
-        <script>
-          if(window.opener) {
-            window.opener.postMessage(${JSON.stringify(data)}, '*')
-            window.close()
-          } else {
-            window.location.href = '/'
+        <title>Authentication ${status}</title>
+        <style>
+          :root {
+            --primaryColor: #333333;
+            --secondaryColor: #ddd;
+            --tertiaryColor: #8873FE;
+            --quaternaryColor: #A291FF;
+            --darkerPrimaryColor: #292929;
+            --lighterPrimaryColor: #575757;
           }
-        </script>
+
+          body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 50px;
+            color: var(--primaryColor);
+            background-color: var(--secondaryColor);
+          }
+
+          h1 {
+            color: var(--tertiaryColor);
+          }
+
+          p {
+            font-size: 18px;
+          }
+
+          a {
+            color: var(--tertiaryColor);
+            text-decoration: none;
+          }
+
+          a:hover {
+            text-decoration: underline;
+          }
+
+          .container {
+            max-width: 600px;
+            margin: auto;
+          }
+
+          .button {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 10px 20px;
+            font-size: 16px;
+            color: var(--secondaryColor);
+            background-color: var(--tertiaryColor);
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            cursor: pointer;
+          }
+
+          .button:hover {
+            background-color: var(--quaternaryColor); /* Slightly lighter shade of tertiary color */
+          }
+
+          .error {
+            display: none;
+            margin-top: 20px;
+            padding: 15px;
+            border: 1px solid var(--tertiaryColor);
+            border-radius: 5px;
+            text-wrap: wrap;
+          }
+
+        </style>
       </head>
       <body>
-        <p>${message}</p>
-        <p>Close this window or <a href="/">go back to /</a></p>
+        <div class="container">
+          <div id="message">
+            <h1>Authentication ${status}</h1>
+            <p>${error ? '' : message}</p>
+          </div>
+          ${ error ? `
+            <p><a data-link-to href="/">click here to continue</a>.</p>
+            <a data-link-to href="/" class="button">Retry</a>
+            <pre id="error-container" class="error">${message}</pre>
+            <script>
+              document.getElementById('error-container').style.display = "block";
+              fetch("${ API_PATH }${ API_CONNECTOR_PATH }${ API_CONNECTOR_LOGOUT }?connectorId=${ connectorId }&type=${ connectorType }", {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  credentials: 'include', // sends the cookies with the request
+                },
+              })
+              if(window.opener && window.opener !== window) {
+                const linksTo = document.querySelectorAll('[data-link-to]');
+                linksTo.forEach(link => {
+                  link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const data = ${JSON.stringify(data)};
+                    window.opener.postMessage(data, '*');
+                    window.close();
+                  });
+                });
+              }
+            </script>
+          ` : `
+            <p>If this window doesn’t close automatically, <a href="/">click here to return to the homepage</a>.</p>
+            <a href="/" class="button">Go to Homepage</a>
+            <pre id="error-container" class="error"></pre>
+            <script>
+              const data = ${JSON.stringify(data)};
+              const errorContainer = document.getElementById('error-container');
+              const messageContainer = document.getElementById('message');
+
+              // Check if the window was opened programmatically and is valid
+              if (window.opener && window.opener !== window) {
+                try {
+                  // Send a postMessage to the opener
+                  window.opener.postMessage(data, '*');
+                  // Attempt to close the window
+                  window.close();
+                } catch (e) {
+                  // Display error message if closing fails
+                  errorContainer.innerText = "Unable to close the window. Please close it manually.";
+                  errorContainer.style.display = "block";
+                }
+              } else {
+                messageContainer.innerHTML = '<h1>Redirecting, please wait...</h1>';
+                window.location.href = '/'
+              }
+            </script>
+          `}
+        </div>
       </body>
     </html>
   `