♻️ random tokens in simple demos too

jupyter-book · Sep 5, 2024 · a781984 · a781984
1 parent da9062b
commit a781984
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 36 deletions.
diff --git a/apps/simple/static/ipywidgets-local.html b/apps/simple/static/ipywidgets-local.html
@@ -3,19 +3,24 @@
   <head>
     <title>ipywidgets - Thebe Demo</title>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
@@ -45,7 +50,10 @@ <h1>ipywidgets using a local server</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -138,5 +146,23 @@ <h2>ipywidgets + matplotlib</h2>
     </pre
       >
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>
diff --git a/apps/simple/static/jupyter.html b/apps/simple/static/jupyter.html
@@ -3,19 +3,24 @@
   <head>
     <title>Jupyter - Thebe Demo</title>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -43,7 +48,10 @@ <h1>Simple plots using a local server</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -61,5 +69,23 @@ <h1>Simple plots using a local server</h1>
 ax.set(title="Wow, an interactive plot!")
       </pre>
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>
diff --git a/apps/simple/static/maths.html b/apps/simple/static/maths.html
@@ -10,19 +10,24 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
     ></script>
     <!-- Configure and load Thebe !-->
-    <script type="text/x-thebe-config">
-      {
-        requestKernel: true,
-        mountActivateWidget: true,
-        mountStatusWidget: true,
-        useJupyterLite: false,
-        useBinder: false,
-        serverSettings: {
-          baseUrl: 'http://localhost:8888',
-          token: 'test-secret'
-        }
+    <script>
+      if (!window.localStorage) {
+        window.THEBE_TOKEN = Math.floor(Math.random() * 1e12).toString(16);
+      } else if (
+        window.localStorage.getItem('thebeDemoToken') === null ||
+        Date.now() - JSON.parse(window.localStorage.getItem('thebeDemoToken')).stamp >
+          1000 * 60 * 60
+      ) {
+        window.localStorage.setItem(
+          'thebeDemoToken',
+          JSON.stringify({
+            stamp: Date.now(),
+            token: Math.floor(Math.random() * 1e12).toString(16),
+          }),
+        );
       }
     </script>
+    <script id="thebe-config" type="text/x-thebe-config"></script>
     <link rel="stylesheet" href="thebe.css" />
     <link rel="stylesheet" href="main.css" />
     <script src="index.js"></script>
@@ -54,7 +59,10 @@ <h1>Math Rendering Example</h1>
         from <code>localhost</code>. To start a local server, use the following command:
       </p>
       <p>
-        <code>jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'</code>
+        <code
+          >jupyter lab --NotebookApp.token=<span id="thebe-token"></span>
+          --NotebookApp.allow_origin='*' --no-browser</code
+        >
       </p>
       <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
@@ -76,5 +84,23 @@ <h2>maths with LaTeX magic</h2>
     </pre
       >
     </div>
+    <script>
+      var token = window.THEBE_TOKEN;
+      if (window.localStorage && window.localStorage.getItem('thebeDemoToken')) {
+        token = JSON.parse(window.localStorage.getItem('thebeDemoToken')).token;
+      }
+      document.getElementById('thebe-token').innerText = token;
+      document.getElementById('thebe-config').innerText = JSON.stringify({
+        requestKernel: true,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
+        useJupyterLite: false,
+        useBinder: false,
+        serverSettings: {
+          baseUrl: 'http://localhost:8888',
+          token,
+        },
+      });
+    </script>
   </body>
 </html>