Move login.ejs into a vite handled view

dashboard/eslint.config.js

@@ -1,5 +1,5 @@
 import globals from 'globals';
-import js  from '@eslint/js';
+import js from '@eslint/js';
 import pluginVue from 'eslint-plugin-vue';
 
 export default [
@@ -16,7 +16,7 @@ export default [
         },
         rules: {
             semi: "error",
-            "prefer-const": "error"
+            "prefer-const": "error",
         }
     }
 ];

dashboard/login.html

@@ -4,11 +4,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
 
-    <title>{{ login.loginTo }} <%= name %></title>
+    <title>{{ login.loginTo }} ##NAME##</title>
 
-    <link id="favicon" type="image/png" rel="icon" href="<%= iconUrl %>">
+    <link id="favicon" type="image/png" rel="icon" href="##ICON_URL##">
-    <link rel="apple-touch-icon" href="<%= iconUrl %>">
+    <link rel="apple-touch-icon" href="##ICON_URL##">
-    <link rel="icon" href="<%= iconUrl %>">
+    <link rel="icon" href="##ICON_URL##">
 
     <!-- Theme CSS -->
     <link type="text/css" rel="stylesheet" href="/theme.css">
@@ -94,16 +94,16 @@
     <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" class="avatar" src="<%= iconUrl %>"/>
+          <img width="128" height="128" class="avatar" src="##ICON_URL##"/>
           <br/>
           <small>{{ login.loginTo }}</small>
-          <h1><%= name %></h1>
+          <h1>##NAME##</h1>
         </div>
       </div>
       <br/>
       <div class="row">
         <div class="col-md-12">
-          <%- note %>
+          ##NOTE##
           <form id="loginForm">
             <div class="form-group">
               <label class="control-label" for="inputUsername">{{ login.username }}</label>
@@ -131,7 +131,7 @@
   </div>
 
   <footer class="text-center">
-    <span class="text-muted"><%- footer %></span>
+    <span class="text-muted">##FOOTER##</span>
   </footer>
 </div>
 
@@ -175,7 +175,7 @@ document.getElementById('loginForm').addEventListener('submit', function (event)
     document.getElementById('internalError').classList.add('hide');
     document.getElementById('busyIndicator').classList.remove('hide');
 
-    const apiUrl = '<%= submitUrl %>';
+    const apiUrl = '##SUBMIT_URL##';
 
     const body = {
         username: document.getElementById('inputUsername').value,
@@ -225,7 +225,7 @@ document.getElementById('loginForm').addEventListener('submit', function (event)
 // placed in local storage by setupaccount.js
 const autoLoginToken = localStorage.cloudronFirstTimeToken;
 if (autoLoginToken) {
-    const apiUrl = '<%= submitUrl %>';
+    const apiUrl = '##SUBMIT_URL##';
 
     let res;
     fetch(apiUrl, {

dashboard/package-lock.json

@@ -1395,6 +1395,22 @@
       "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.0.tgz",
       "integrity": "sha512-pGGR7Nq1K/i9KGs29PvHDXA8AsfZ3OiYRMDClT3FIC085Kbns9CJ7ogq9MEiGnrjd9THOGoh7B+kWzePHzZyJQ=="
     },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1448,6 +1464,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chart.js": {
       "version": "4.4.7",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
@@ -1474,10 +1507,24 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/concat-map": {
@@ -1756,49 +1803,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
     "node_modules/eslint/node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -1856,15 +1860,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/eslint/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1892,18 +1887,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/espree": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
@@ -2062,6 +2045,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2681,6 +2674,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3729,6 +3735,15 @@
       "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.0.tgz",
       "integrity": "sha512-pGGR7Nq1K/i9KGs29PvHDXA8AsfZ3OiYRMDClT3FIC085Kbns9CJ7ogq9MEiGnrjd9THOGoh7B+kWzePHzZyJQ=="
     },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3776,6 +3791,16 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "peer": true
     },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
     "chart.js": {
       "version": "4.4.7",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
@@ -3792,6 +3817,15 @@
         "readdirp": "^4.0.1"
       }
     },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -3941,34 +3975,6 @@
           "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
           "peer": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "peer": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "peer": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "peer": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
         "debug": {
           "version": "4.3.7",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -4003,12 +4009,6 @@
             "is-glob": "^4.0.3"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "peer": true
-        },
         "ms": {
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4029,15 +4029,6 @@
           "requires": {
             "ansi-regex": "^5.0.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "peer": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
         }
       }
     },
@@ -4204,6 +4195,12 @@
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "peer": true
     },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true
+    },
     "ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4617,6 +4614,15 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "peer": true
     },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

dashboard/vite.config.mjs

@@ -5,7 +5,9 @@ import { NodePackageImporter } from 'sass';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue()
+  ],
   server: {
     fs: {
       // Allow serving files from one level up to the project root for monaco editor assets
@@ -21,6 +23,7 @@ export default defineConfig({
         authcallback: resolve('authcallback.html'),
         filemanager: resolve('filemanager.html'),
         index: resolve('index.html'),
+        login: resolve('login.html'),
         logs: resolve('logs.html'),
         notfound: resolve('notfound.html'),
         passwordreset: resolve('passwordreset.html'),

src/oidc.js

@@ -481,20 +481,24 @@ function renderInteractionPage(provider) {
             switch (prompt.name) {
             case 'login': {
                 const options = {
-                    submitUrl: `${ROUTE_PREFIX}/interaction/${uid}/login`,
+                    SUBMIT_URL: `${ROUTE_PREFIX}/interaction/${uid}/login`,
-                    iconUrl: '/api/v1/cloudron/avatar',
+                    ICON_URL: '/api/v1/cloudron/avatar',
-                    name: client?.name || await branding.getCloudronName(),
+                    NAME: client?.name || await branding.getCloudronName(),
-                    footer: marked.parse(await branding.renderFooter()),
+                    FOOTER: marked.parse(await branding.renderFooter()),
-                    note: (client.id === tokens.ID_WEBADMIN && constants.DEMO) ? '<div style="text-align: center;">This is a demo. Username and password is "cloudron"</div>' : ''
+                    NOTE: (client.id === tokens.ID_WEBADMIN && constants.DEMO) ? '<div style="text-align: center;">This is a demo. Username and password is "cloudron"</div>' : ''
                 };
 
                 if (app) {
-                    options.name = app.label || app.fqdn;
+                    options.NAME = app.label || app.fqdn;
-                    options.iconUrl = app.iconUrl;
+                    options.ICON_URL = app.iconUrl;
                 }
 
-                const template = fs.readFileSync(__dirname + '/oidc_templates/login.ejs', 'utf-8');
+                // great ejs replacement!
-                const html = ejs.render(translations.translate(template, translationAssets), options);
+                const template = fs.readFileSync(__dirname + '/../dashboard/login.html', 'utf-8');
+                let html = translations.translate(template, translationAssets);
+                Object.keys(options).forEach(key => {
+                    html = html.replace(`##${key}##`, options[key], 'g');
+                });
 
                 return res.send(html);
             }