@silexlabs/silex 3.0.1-0 → 3.0.1

package/src/ts/plugins/server/GitlabHostingConnector.ts

@@ -0,0 +1,215 @@
+/*
+ * 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/>.
+ */
+
+/**
+ * Gitlab hosting connector
+ * @fileoverview Gitlab hosting connector for Silex, connect to the user's Gitlab account to host websites with .gitlab-ci.yml file template for plain html by default
+ * @see https://docs.gitlab.com/ee/api/oauth2.html
+ * @see https://docs.gitlab.com/ee/user/project/pages/getting_started/pages_ci_cd_template.html
+ */
+
+import dedent from 'dedent'
+import GitlabConnector, { GitlabOptions, GitlabSession} from './GitlabConnector'
+import { HostingConnector, ConnectorFile } from '../../server/connectors/connectors'
+import { ConnectorType, WebsiteId, JobData, JobStatus, PublicationJobData } from '../../types'
+import { JobManager } from '../../server/jobs'
+import { ServerConfig } from '../../server/config'
+import { setTimeout } from 'timers/promises'
+
+const waitTimeOut = 5000 /* for wait loop in job pages getting */
+const SILEX_OVERWRITE_NOTICE = '# silexOverwrite: true'
+
+export default class GitlabHostingConnector extends GitlabConnector implements HostingConnector {
+
+  displayName = 'Gitlab hosting'
+  connectorType = ConnectorType.HOSTING
+
+  constructor( config: ServerConfig, opts: Partial<GitlabOptions>) {
+    super (config, opts)
+    // public directory for standard gitlab pages
+    this.options.assetsFolder= 'public'
+  }
+
+  async publish(session: GitlabSession, websiteId: WebsiteId, files: ConnectorFile[], {startJob, jobSuccess, jobError}: JobManager): Promise<JobData> {
+    const job = startJob(`Publishing to ${this.displayName}`) as PublicationJobData
+    job.logs = [[`Publishing to ${this.displayName}`]]
+    job.errors = [[]]
+    /* Configuration file .gitlab-ci.yml contains template for plain html Gitlab pages*/
+    const pathYml = '.gitlab-ci.yml'
+    const contentYml = dedent`
+      ${SILEX_OVERWRITE_NOTICE}
+      # You will want to remove these lines if you customize your build process
+      # Silex will overwrite this file unless you remove these lines
+      # This is the default build process for plain eleventy sites
+      image: node:20
+      pages:
+        stage: deploy
+        environment: production
+        script:${files.find(file => file.path.includes('.11tydata.')) ? `
+          - npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
+          - mkdir -p public/css public/assets && cp -R public/css public/assets _site/
+          - rm -rf public && mv _site public`
+    : ''}
+          - echo "The site will be deployed to $CI_PAGES_URL"
+        artifacts:
+          paths:
+            - public
+        rules:
+          - if: '$CI_COMMIT_TAG'
+          - if: '$CI_PIPELINE_SOURCE == "trigger"'
+    `
+    try {
+      const originalCi = await this.readFile(session, websiteId, pathYml)
+      if(originalCi.toString().startsWith(SILEX_OVERWRITE_NOTICE)) {
+        await this.updateFile(session, websiteId, pathYml, contentYml)
+      }
+    } catch (e) {
+      // If the file .gitlab-ci.yml does not exist, create it, otherwise do nothing (do not overwriting existing one)
+      if (e.statusCode === 404 || e.httpStatusCode === 404 || e.message.endsWith('A file with this name doesn\'t exist')) {
+        await this.createFile(session, websiteId, pathYml, contentYml)
+      } else {
+        jobError(job.jobId, e.message)
+      }
+    }
+
+    // publishing all files for website
+    // Do not await for the result, return the job and continue the publication in the background
+    this.writeAssets(session, websiteId, files, async ({status, message}) => {
+      // Update the job status
+      if(status === JobStatus.SUCCESS) {
+        /* Squash and tag the commits */
+        const successTag = await this.createTag(session, websiteId, job, { startJob, jobSuccess, jobError })
+        if(!successTag) {
+          // jobError will have been called in createTag
+          return
+        }
+        try {
+          job.message = 'Getting the website URL...'
+          job.logs[0].push(job.message)
+          const gitlabUrl = await this.getUrl(session, websiteId)
+          job.logs[0].push(`Website URL: ${gitlabUrl}`)
+          job.message = 'Getting the admin URL...'
+          job.logs[0].push(job.message)
+          const adminUrl = await this.getAdminUrl(session, websiteId)
+          job.logs[0].push(`Admin URL: ${adminUrl}`)
+          job.message = 'Getting the page URL...'
+          job.logs[0].push(job.message)
+          const pageUrl = await this.getPageUrl(session, websiteId, adminUrl)
+          job.logs[0].push(`Page URL: ${pageUrl}`)
+          job.message = 'Getting the deployment logs URL...'
+          job.logs[0].push(job.message)
+          const gitlabJobLogsUrl = await this.getGitlabJobLogsUrl(session, websiteId, job, { startJob, jobSuccess, jobError }, adminUrl, successTag)
+          // Because of the GitLab policy, this can be null (and we suggest the user to verify their account)
+          if (!gitlabJobLogsUrl) {
+            let errorMessage = 'Could not retrieve the deployment logs URL.'
+
+            if (this.isUsingOfficialInstance()) {
+              const verifyURL = 'https://gitlab.com/-/identity_verification'
+              errorMessage +=
+                `<div class="notice">
+                    If your GitLab account is recent, you may need to verify it <a href="${verifyURL}" target="_blank">here</a>
+                    in order to be able to use pipelines (this is GitLab's policy, not Silex's).
+                 </div>`
+            }
+
+            throw new Error(errorMessage)
+          }
+          job.logs[0].push(`Deployment logs URL: ${gitlabJobLogsUrl}`)
+          const message = `
+            <p><a href="${gitlabUrl}" target="_blank">Your website will soon be live here</a>.</p>
+            <p>Changes may take a few minutes to appear, <a href="${gitlabJobLogsUrl}" target="_blank">follow deployment here</a>.</p>
+            <p>Manage <a href="${pageUrl}" target="_blank">GitLab Pages settings</a>.</p>
+          `
+          job.logs[0].push(message)
+          jobSuccess(job.jobId, message)
+        } catch (error) {
+          console.error('Error during getting the website URLs:', error.message)
+          jobError(job.jobId, `Failed to get the website URLs: ${error.message}`)
+        }
+      } else if (status === JobStatus.ERROR) {
+        job.errors[0].push(message)
+        jobError(job.jobId, message)
+      } else {
+        // Update the job status while uploading files
+        job.status = status
+        job.message = message
+        job.logs[0].push(message)
+      }
+    })
+      .catch(e => {
+        console.error('Error uploading files to gitlab:', e.message)
+        jobError(job.jobId, `Failed to upload files: ${e.message}`)
+      })
+
+    return job
+  }
+
+  /* Get and return Url Gitlab Pages */
+  async getUrl(session: GitlabSession, websiteId: WebsiteId): Promise<string> {
+    const response = await this.callApi(session, `api/v4/projects/${websiteId}/pages`, 'GET')
+    return response.url
+  }
+
+  async getAdminUrl(session: GitlabSession, websiteId: WebsiteId): Promise<string> {
+    const projectInfo = await this.callApi(session, `api/v4/projects/${websiteId}`, 'GET')
+    return projectInfo.web_url
+  }
+
+  async getPageUrl(session: GitlabSession, websiteId: WebsiteId, projectUrl: string): Promise<string> {
+    return `${projectUrl}/pages`
+  }
+
+  // waiting for the job corresponding to the current tag
+  async getGitlabJobLogsUrl(session: GitlabSession, websiteId: WebsiteId, job: PublicationJobData, { startJob, jobSuccess, jobError }: JobManager, projectUrl: string, tag): Promise<string | null> {
+    const t0 = Date.now()
+    do {
+      const jobs = await this.callApi(session, `api/v4/projects/${websiteId}/jobs`, 'GET')
+      if (!jobs.length) return null
+      if (jobs[0].ref === tag) {return `${projectUrl}/-/jobs/${jobs[0].id}`}
+      await setTimeout(waitTimeOut)
+    } while ((Date.now() - t0) < this.options.timeOut)
+      
+    // failed in timelaps allowed (avoiding infinite loop)
+    jobError(job.jobId, 'Failed to get job id')
+    job.message = 'Unable to get job id'
+    job.logs[0].push(job.message)
+    return `${projectUrl}/-/jobs/`
+  }
+
+  async createTag(session: GitlabSession, websiteId: WebsiteId, job: PublicationJobData, { startJob, jobSuccess, jobError }: JobManager): Promise<string | null> {
+    const projectId = websiteId // Assuming websiteId corresponds to GitLab project ID
+    const newTag = '_silex_' + Date.now()
+    // Create a new tag
+    try {
+      job.message = `Creating new tag ${newTag}...`
+      job.logs[0].push(job.message)
+      await this.callApi(session, `api/v4/projects/${projectId}/repository/tags`, 'POST', {
+        tag_name: newTag,
+        ref: 'main',
+        message: 'Publication from Silex',
+      })
+    } catch (error) {
+      console.error('Error during creating new tag:', error.message)
+      jobError(job.jobId, `Failed to create new tag: ${error.message}`)
+      return null
+    }
+    
+    // Return new tag
+    return newTag
+  }
+
+}

package/src/ts/plugins/server/SslPlugin.ts

@@ -47,18 +47,18 @@ export default async function(config, opts = {}) {
     // SSL
     // force ssl if the env var SILEX_FORCE_HTTPS is set
     if (options.forceHttps) {
-      console.log('> [SslPlugin] Force SSL option is enabled')
+      console.info('> [SslPlugin] Force SSL option is enabled')
       app.set('forceSSLOptions', {
         trustXFPHeader: !!options.trustXFPHeader,
       })
       router.use(forceSSL)
     } else {
-      console.log('> [SslPlugin] Force SSL option is disabled, env var SILEX_FORCE_HTTPS not set')
+      console.info('> [SslPlugin] Force SSL option is disabled, env var SILEX_FORCE_HTTPS not set')
     }
 
     // SSL certificate
     if (options.privateKey && options.certificate) {
-      console.log('> [SslPlugin] SSL certificate is enabled, found certificate:', options.certificate)
+      console.info('> [SslPlugin] SSL certificate is enabled, found certificate:', options.certificate)
       try {
         const privateKey = readFileSync(options.privateKey).toString()
         const certificate = readFileSync(options.certificate).toString()
@@ -71,13 +71,13 @@ export default async function(config, opts = {}) {
         }
 
         createServer(sslServerOptions, this).listen(options.sslPort, () => {
-          console.log('> [SslPlugin] Listening on port ', options.sslPort)
+          console.info('> [SslPlugin] Listening on port ', options.sslPort)
         })
       } catch (e) {
         console.error('> [SslPlugin] Load certificate failed.', e)
       }
     } else {
-      console.log('> [SslPlugin] Certificate disabled, env vars SILEX_SSL_CERTIFICATE and SILEX_SSL_PRIVATE_KEY not set')
+      console.info('> [SslPlugin] Certificate disabled, env vars SILEX_SSL_CERTIFICATE and SILEX_SSL_PRIVATE_KEY not set')
     }
     app.use(router)
   })

package/src/ts/plugins/server/StaticPlugin.ts

@@ -16,10 +16,8 @@
  */
 
 import express from 'express'
-import nodeModules from 'node_modules-path'
 import serveStatic from 'serve-static'
 import { withCache } from './Cache'
-import { join } from 'path'
 import { ServerEvent } from '../../server/events'
 
 type StaticOptions = {
@@ -29,34 +27,9 @@ type StaticOptions = {
   }[]
 }
 
-export default async function(config, opts = {}) {
-  // Options with defaults
-  const options: StaticOptions = {
-    routes: [
-      {
-        route: '/',
-        path: join(__dirname, '../../../../..', 'public'),
-      }, {
-        route: '/css/',
-        path: nodeModules('@fortawesome/fontawesome-free') + '/@fortawesome/fontawesome-free/css/',
-      }, {
-        route: '/webfonts/',
-        path: nodeModules('@fortawesome/fontawesome-free') + '/@fortawesome/fontawesome-free/webfonts/',
-      }, {
-        route: '/node_modules/',
-        path: nodeModules(),
-      }, {
-        route: '/',
-        path: join(__dirname, '../../../../..', 'dist', 'client'),
-      },
-    ]
-    // add project route for source maps
-      .concat(config.debug ? [{
-        route: '/',
-        path: './',
-      }] : []),
-    ...opts,
-  }
+export default async function(config, options: StaticOptions = { routes: [] }) {
+  if(!options.routes) throw new Error('The config for static module has no `routes` attribute')
+  console.info(`> [StaticPlugin] Serving ${options.routes.length} static files`)
 
   config.on(ServerEvent.STARTUP_START, ({app}) => {
     const router = express.Router()

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.
@@ -45,6 +45,24 @@ export default function(config: ServerConfig) {
   return router
 }
 
+/**
+ * Method to validate HTTP status codes
+ * Returns a suitable error code if it is not valid
+ */
+function validateStatus(status: number, _default = 500): number {
+  if(!status) {
+    console.warn(`Status code is undefined, returning default ${_default}`)
+    return _default
+  }
+  // Make sure it is a string
+  status = parseInt(status.toString())
+  // Check the status code
+  if (status >= 100 && status < 600) return status
+  // Invalid status code
+  console.warn(`Invalid status code ${status}, returning default ${_default}}`)
+  return _default
+}
+
 /**
  * Express route to check if the user is logged in
  * Returns user data and connector data
@@ -78,8 +96,8 @@ async function routeUser(req: Request, res: Response) {
     const user = await connector.getUser(session)
     res.json(user as ApiConnectorUserResponse)
   } catch (error) {
-    console.error('Error in the login status request', error)
-    res.status(error?.code ?? error?.httpStatusCode ?? 500).json({
+    console.error('Error in the user request', error, error.code)
+    res.status(validateStatus(error.code ?? error.httpStatusCode, 500)).json({
       error: true,
       message: error.message,
     } as ApiResponseError)
@@ -101,14 +119,14 @@ async function routeListConnectors(req: Request, res: Response) {
       res.json(list as ApiConnectorListResponse)
     } catch (error) {
       console.error('Error while listing connectors', error)
-      res.status(error?.code ?? error?.httpStatusCode ?? 500).json({
+      res.status(validateStatus(error?.code ?? error?.httpStatusCode, 500)).json({
         error: true,
         message: 'Error while listing connectors: ' + error.message,
       } as ApiResponseError)
     }
   } catch (error) {
     console.error('Error in the list connectors request', error)
-    res.status(error?.code ?? error?.httpStatusCode ?? 400).json({
+    res.status(validateStatus(error?.code ?? error?.httpStatusCode, 400)).json({
       error: true,
       message: 'Error in the list connectors request: ' + error.message,
     } as ApiResponseError)
@@ -132,7 +150,7 @@ async function routeLogin(req: Request, res: Response) {
     if (!connector) throw new Error(`Connector not found ${connectorId} ${type}`)
     // Check if the user is already logged in
     if (await connector.isLoggedIn(session)) {
-      res.redirect(`${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}`)
+      res.redirect(`${config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}`)
       return
     }
     const oauthUrl = await connector.getOAuthUrl(session)
@@ -142,13 +160,13 @@ async function routeLogin(req: Request, res: Response) {
     } else {
       // Display the login form
       const redirectTo = await connector.getSettingsForm(session, '') ?
-        `${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_SETTINGS}?connectorId=${connectorId}&type=${type}` :
-        `${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}`
+        `${config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_SETTINGS}?connectorId=${connectorId}&type=${type}` :
+        `${config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}`
       res.send(await connector.getLoginForm(session, redirectTo))
     }
   } catch (error) {
     console.error('Error in the login request', error)
-    res.status(error?.code ?? error?.httpStatusCode ?? 400).json({
+    res.status(validateStatus(error?.code ?? error?.httpStatusCode, 400)).json({
       error: true,
       message: 'Error in the login request: ' + error.message,
     } as ApiResponseError)
@@ -171,7 +189,7 @@ async function routeLogin(req: Request, res: Response) {
 //     if (!connector) throw new Error(`Connector not found ${connectorId} ${type}`)
 //     // Check if the user is already logged in
 //     if (!await connector.isLoggedIn(session)) {
-//       res.redirect(`${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}&error=Not logged in`)
+//       res.redirect(`${config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}&error=Not logged in`)
 //       return
 //     }
 //     // Display the login form
@@ -202,7 +220,7 @@ async function routeLogin(req: Request, res: Response) {
 //     if (!connector) throw new Error(`Connector not found ${connectorId} ${type}`)
 //     // Check if the user is already logged in
 //     if (!await connector.isLoggedIn(session)) {
-//       res.redirect(`${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}&error=Not logged in`)
+//       res.redirect(`${config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?connectorId=${connectorId}&type=${type}&error=Not logged in`)
 //       return
 //     }
 //     // Save the settings
@@ -245,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(error?.code ?? error?.httpStatusCode ?? 500)
-      .send(getEndAuthHtml(error.message, true))
+      .status(validateStatus(error?.code ?? error?.httpStatusCode, 500))
+      .send(getEndAuthHtml(error.message, true, req.query.connectorId as ConnectorId, req.query.type as ConnectorType))
   }
 }
 
@@ -276,7 +294,7 @@ async function routeLogout(req: Request, res: Response) {
       } as ApiResponseError)
     } catch (error) {
       console.error('Error while logging out', error)
-      res.status(error?.code ?? error?.httpStatusCode ?? 500).json({
+      res.status(validateStatus(error?.code ?? error?.httpStatusCode, 500)).json({
         error: true,
         message: 'Error while logging out: ' + error.message,
       } as ApiResponseError)
@@ -284,7 +302,7 @@ async function routeLogout(req: Request, res: Response) {
     }
   } catch (error) {
     console.error('Error in the logout request', error)
-    res.status(error?.code ?? error?.httpStatusCode ?? 400).json({
+    res.status(validateStatus(error?.code ?? error?.httpStatusCode, 400)).json({
       error: true,
       message: 'Error in the logout request: ' + error.message,
     } as ApiResponseError)
@@ -296,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;
+          }
+
+          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;
           }
-        </script>
+
+          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>
   `