Fixed index html page

src/node/hooks/express/specialpages.ts

@@ -111,7 +111,7 @@ const convertTypescript = (content: string) => {
   }
 }
 
-const handleLiveReload = async (args: any, padString: string, timeSliderString: string ) => {
+const handleLiveReload = async (args: any, padString: string, timeSliderString: string, indexString: any) => {
   const chokidar = await import('chokidar')
   const watcher = chokidar.watch(path.join(settings.root, 'src', 'static', 'js'));
   let routeHandlers: { [key: string]: Function } = {};
@@ -130,6 +130,8 @@ const handleLiveReload = async (args: any, padString: string, timeSliderString:
         pad: req.path.split('/')[2]
       }
       routeHandlers['/p/:pad/timeslider'](req, res);
+    } else if (req.path == "/"){
+      routeHandlers['/'](req, res);
     } else if (routeHandlers[req.path]) {
       routeHandlers[req.path](req, res);
     } else {
@@ -138,6 +140,17 @@ const handleLiveReload = async (args: any, padString: string, timeSliderString:
   });
 
   function handleUpdate() {
+
+    convertTypescriptWatched(indexString, (output, hash) => {
+      setRouteHandler('/watch/index', (req: any, res: any) => {
+        res.header('Content-Type', 'application/javascript');
+        res.send(output)
+      })
+      setRouteHandler('/', (req: any, res: any) => {
+        res.send(eejs.require('ep_etherpad-lite/templates/index.html', {req, entrypoint: '/watch/index?hash=' + hash, settings}));
+      })
+    })
+
     convertTypescriptWatched(padString, (output, hash) => {
       console.log("New pad hash is", hash)
       setRouteHandler('/watch/pad', (req: any, res: any) => {
@@ -145,6 +158,9 @@ const handleLiveReload = async (args: any, padString: string, timeSliderString:
         res.send(output)
       })
 
+
+
+
       setRouteHandler("/p/:pad", (req: any, res: any, next: Function) => {
         // The below might break for pads being rewritten
         const isReadOnly = !webaccess.userCanModify(req.params.pad, req);
@@ -228,12 +244,6 @@ const convertTypescriptWatched = (content: string, cb: (output:string, hash: str
 }
 
 exports.expressCreateServer = async (hookName: string, args: any, cb: Function) => {
-  // serve index.html under /
-  args.app.get('/', (req: any, res: any) => {
-    res.send(eejs.require('ep_etherpad-lite/templates/index.html', {req}));
-  });
-
-
   const padString =   eejs.require('ep_etherpad-lite/templates/padBootstrap.js', {
       pluginModules: (() => {
         const pluginModules = new Set();
@@ -248,6 +258,9 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
       settings,
     })
 
+  const indexString = eejs.require('ep_etherpad-lite/templates/indexBootstrap.js', {
+  })
+
     const timeSliderString = eejs.require('ep_etherpad-lite/templates/timeSliderBootstrap.js', {
       pluginModules: (() => {
         const pluginModules = new Set();
@@ -268,19 +281,27 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
 
   let fileNamePad: string
   let fileNameTimeSlider: string
+  let fileNameIndex: string
   if(process.env.NODE_ENV === "production"){
     const padSliderWrite = convertTypescript(padString)
     const timeSliderWrite = convertTypescript(timeSliderString)
+    const indexWrite = convertTypescript(indexString)
 
     fileNamePad = `padbootstrap-${padSliderWrite.hash}.min.js`
     fileNameTimeSlider = `timeSliderBootstrap-${timeSliderWrite.hash}.min.js`
+    fileNameIndex = `indexBootstrap-${indexWrite.hash}.min.js`
     const pathNamePad = path.join(outdir, fileNamePad)
     const pathNameTimeSlider = path.join(outdir, fileNameTimeSlider)
+    const pathNameIndex = path.join(outdir, 'index.js')
 
     if (!fs.existsSync(pathNamePad)) {
       fs.writeFileSync(pathNamePad, padSliderWrite.output);
     }
 
+    if (!fs.existsSync(pathNameIndex)) {
+      fs.writeFileSync(pathNameIndex, indexWrite.output);
+    }
+
     if (!fs.existsSync(pathNameTimeSlider)) {
       fs.writeFileSync(pathNameTimeSlider,timeSliderWrite.output)
     }
@@ -289,10 +310,19 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
       res.sendFile(pathNamePad)
     })
 
+    args.app.get("/"+fileNameIndex, (req: any, res: any) => {
+      res.sendFile(pathNameIndex)
+    })
+
     args.app.get("/"+fileNameTimeSlider, (req: any, res: any) => {
       res.sendFile(pathNameTimeSlider)
     })
 
+    // serve index.html under /
+    args.app.get('/', (req: any, res: any) => {
+      res.send(eejs.require('ep_etherpad-lite/templates/index.html', {req, settings, entrypoint: "/"+fileNameIndex}));
+    });
+
 
     // serve pad.html under /p
     args.app.get('/p/:pad', (req: any, res: any, next: Function) => {
@@ -326,7 +356,7 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
       }));
     });
   } else {
-    await handleLiveReload(args, padString, timeSliderString)
+    await handleLiveReload(args, padString, timeSliderString, indexString)
   }
 
   // The client occasionally polls this endpoint to get an updated expiration for the express_sid

src/static/js/index.ts

@@ -19,6 +19,7 @@
  * limitations under the License.
  */
 
+
 const randomPadName = () => {
   // the number of distinct chars (64) is chosen to ensure that the selection will be uniform when
   // using the PRNG below
@@ -28,8 +29,7 @@ const randomPadName = () => {
   // make room for 8-bit integer values that span from 0 to 255.
   const randomarray = new Uint8Array(stringLength);
   // use browser's PRNG to generate a "unique" sequence
-  const cryptoObj = window.crypto || window.msCrypto; // for IE 11
-  cryptoObj.getRandomValues(randomarray);
+  crypto.getRandomValues(randomarray);
   let randomstring = '';
   for (let i = 0; i < stringLength; i++) {
     // instead of writing "Math.floor(randomarray[i]/256*64)"
@@ -42,9 +42,9 @@ const randomPadName = () => {
 
 $(() => {
   $('#go2Name').on('submit', () => {
-    const padname = $('#padname').val();
+    const padname = $('#padname').val() as string;
     if (padname.length > 0) {
-      window.location = `p/${encodeURIComponent(padname.trim())}`;
+      window.location.href = `p/${encodeURIComponent(padname.trim())}`;
     } else {
       alert('Please enter a name');
     }
@@ -52,10 +52,11 @@ $(() => {
   });
 
   $('#button').on('click', () => {
-    window.location = `p/${randomPadName()}`;
+    window.location.href = `p/${randomPadName()}`;
   });
 
   // start the custom js
+  // @ts-ignore
   if (typeof window.customStart === 'function') window.customStart();
 });
 

src/templates/index.html

@@ -1,6 +1,3 @@
-<%
-  var settings = require("ep_etherpad-lite/node/utils/Settings");
-%>
 <!doctype html>
 <html>
 
@@ -10,12 +7,7 @@
         <meta name="referrer" content="no-referrer">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
         <link rel="shortcut icon" href="favicon.ico">
-
         <link rel="localizations" type="application/l10n+json" href="locales.json">
-        <script type="text/javascript" src="static/js/vendors/html10n.js?v=<%=settings.randomVersionString%>"></script>
-        <script type="text/javascript" src="static/js/l10n.js?v=<%=settings.randomVersionString%>"></script>
-        <script src="static/js/vendors/jquery.js"></script>
-        <script src="static/js/index.js"></script>
 
         <style>
             html, body {
@@ -157,6 +149,7 @@
             </div>
         <% e.end_block(); %>
         </div>
+        <script src="<%=entrypoint%>"></script>
 
         <% e.begin_block("indexCustomScripts"); %>
         <script src="static/skins/<%=encodeURI(settings.skinName)%>/index.js?v=<%=settings.randomVersionString%>"></script>

src/templates/indexBootstrap.js

@@ -0,0 +1,6 @@
+
+(async () => {
+  window.$ = window.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
+  require('ep_etherpad-lite/static/js/l10n')
+  require('ep_etherpad-lite/static/js/index')
+})()