Update the Minimal template with the new SDK changes (#133)

* Update the Minimal template with the new SDK changes

* allow user to set the token through console

index.js

@@ -119,7 +119,7 @@ app.get('/', async (req, res) => {
 app.get('/minimal', async (req, res) => {
   let token
   if (req.session && req.session.token) {
-    token = session.token
+    token = req.session.token
   }
 
   res.render('minimal', {

public/full.js

@@ -400,17 +400,20 @@ function restoreUI() {
 }
 
 async function initSWClient() {
-  if (!client && _token) {
-    client = await SWire({
-      host: !!_host && _host.trim().length ? _host : undefined,
-      token: _token,
-      debug: {
-        logWsTraffic: true,
-      },
-      logLevel: 'debug',
-    })
+  if (!_token) {
+    console.error('Token not found')
+    return
   }
 
+  client = await SWire({
+    host: !!_host && _host.trim().length ? _host : undefined,
+    token: _token,
+    debug: {
+      logWsTraffic: true,
+    },
+    logLevel: 'debug',
+  })
+
   return client
 }
 
@@ -429,8 +432,8 @@ sendMessageBtn.addEventListener('click', async () => {
  * Connect with Relay creating a client and attaching all the event handler.
  */
 window.dial = async () => {
-  if (!_token) {
-    console.error('Auth required!')
+  if (!client) {
+    console.error('Client is not initialized!')
     return
   }
 

public/minimal.js

@@ -1,3 +1,5 @@
+const { SignalWire: SWire } = SignalWire
+
 let client = null
 let pnSecretKey = null
 
@@ -15,28 +17,52 @@ window.ready = (callback) => {
   }
 }
 
-async function connect() {
-  if (!_token) return
-
-  client = await SignalWire.SignalWire({
-    host: _host,
+async function initSWClient() {
+  if (!_token) {
+    console.error('Token not found')
+    return
+  }
+
+  client = await SWire({
+    host: !!_host && _host.trim().length ? _host : undefined,
     token: _token,
-    rootElement: document.getElementById('rootElement'),
+    debug: {
+      logWsTraffic: true,
+    },
+    logLevel: 'debug',
   })
 
-  await client.connect()
+  return client
 }
 
-async function makeCall() {
+async function connect() {
+  // Set the token through the console
+  _token = window._token
+  initSWClient()
+}
+
+async function dial() {
+  if (!client) {
+    console.error('Client is not initialized!')
+    return
+  }
+
   const call = await client.dial({
     to: document.getElementById('destination').value,
     logLevel: 'debug',
     debug: { logWsTraffic: true },
+    rootElement: document.getElementById('rootElement'),
   })
 
+  window.__call = call
+
   await call.start()
 }
 
+async function hangup() {
+  await window.__call.leave()
+}
+
 async function enablePushNotifications() {
   btnRegister.disabled = true
 
@@ -171,7 +197,7 @@ async function readPushNotification(payload) {
 }
 
 window.ready(async function () {
-  await connect()
+  await initSWClient()
 
   const searchParams = new URLSearchParams(location.search)
   console.log('Handle inbound?', searchParams.has('inbound'))

views/minimal.ejs

@@ -34,9 +34,11 @@
   <div class="container">
     <div class="row"></div>
     <div class="col-3">
+      <button class="btn btn-primary my-2" onclick="connect();">Connect</button>
+
       <label for="destination" class="form-label">Destination</label>
       <input type="text" id="destination" class="form-control" value="<%= destination %>">
-      <button class="btn btn-primary" onclick="makeCall();">Call</button>
+      <button class="btn btn-primary my-1" onclick="dial();">Call</button>
       <div class="card mt-2">
         <div class="d-grid gap-2">
           <a id="btnRegister" class="btn btn-success" href="/minimal?inbound">
@@ -64,13 +66,13 @@
     }
   </script>
   <script type="text/javascript">
-    const _token = "<%= token %>";
+    let _token = "<%= token %>";
     const _host = "<%= host %>";
     const _fabricApiUrl = "<%= fabricApiUrl %>";
     const _firebaseConfig = <%- firebaseConfig %>;
   </script>
   <script type="text/javascript" src="https://unpkg.com/@signalwire/js@dev"></script>
-  <script type="text/javascript" src="/minimal.js"></script>
+  <script type="text/javascript" src="minimal.js"></script>
 </body>
 
 </html>