Updates Voice Client Quickstart to support incoming number

voice-client-javascript/.env

@@ -10,4 +10,14 @@ APP_NAME=voice-client-javascript
 # description: Set a password for your app. Users who want to use the admin interface will have to use this password to access it
 # format: text
 # required: true
-ADMIN_PASSWORD=default
+ADMIN_PASSWORD=default
+
+# description: The Client username to wire up the examples and incoming number
+# format: text
+# required: true
+DEFAULT_CLIENT_NAME=alice
+
+# description: The Incoming Twilio Number to wire up to your Client
+# format: phone_number
+# required: true
+TWILIO_PHONE_NUMBER=

voice-client-javascript/assets/admin/actions.private.js

@@ -1,6 +1,7 @@
 const assets = Runtime.getAssets();
 const { urlForSiblingPage } = require(assets["/admin/shared.js"].path);
 
+const DEFAULT_TWILIO_WEBHOOK = "https://demo.twilio.com/welcome/voice/";
 
 class Actions {
   constructor(client, options) {
@@ -15,21 +16,34 @@ class Actions {
     env = Object.assign(env, results);
     const voiceUrl = `https://${this.options.DOMAIN_NAME}${urlForSiblingPage(
       "client-voice-twiml-app",
-      this.options.PATH, 
-      "..")}`;
+      this.options.PATH,
+      ".."
+    )}`;
     console.log(
       `Wiring up TwiML Application ${env.TWIML_APPLICATION_SID} to the function: ${voiceUrl}`
     );
     await this.updateTwimlAppVoiceUrl({
       twimlApplicationSid: env.TWIML_APPLICATION_SID,
-      voiceUrl
+      voiceUrl,
     });
     console.log("Generating new REST API Key");
     results = await this.generateNewKey(this.options);
     env = Object.assign(env, results);
-    const number = await this.chooseLogicalCallerId();
-    results = await this.setCallerId({ number });
-    env = Object.assign(env, results);
+    const incomingNumber = await this.chooseLogicalIncomingNumber(this.options.CHOSEN_TWILIO_NUMBER);
+    if (incomingNumber !== undefined) {
+      results = await this.updateIncomingNumber({
+        sid: incomingNumber.sid,
+        voiceApplicationSid: env.TWIML_APPLICATION_SID,
+      });
+      env = Object.assign(env, results);
+      results = await this.setCallerId({ number: incomingNumber.phoneNumber });
+      env = Object.assign(env, results);
+    } else {
+      // Did not find an incoming number, so we'll just choose a number
+      const callerIdNumber = await this.chooseLogicalCallerId();
+      results = await this.setCallerId({ number: callerIdNumber });
+      env = Object.assign(env, results);
+    }
     env.INITIALIZED = "voice-client-quickstart";
     env.INITIALIZATION_DATE = new Date().toISOString();
     return env;
@@ -38,7 +52,7 @@ class Actions {
   async createTwimlApp({ friendlyName }) {
     const result = await this.client.applications.create({ friendlyName });
     return {
-      TWIML_APPLICATION_SID: result.sid
+      TWIML_APPLICATION_SID: result.sid,
     };
   }
 
@@ -52,20 +66,32 @@ class Actions {
     const result = await this.client.newKeys.create({ friendlyName });
     return {
       API_KEY: result.sid,
-      API_SECRET: result.secret
+      API_SECRET: result.secret,
     };
   }
 
+  async chooseLogicalIncomingNumber(preferredNumber) {
+    const incomingNumbers = await this.client.incomingPhoneNumbers.list();
+    if (preferredNumber !== undefined) {
+      return incomingNumbers.find(number => number.phoneNumber === preferredNumber);
+    }
+    return incomingNumbers.find(
+      (number) =>
+        number.voiceUrl === DEFAULT_TWILIO_WEBHOOK || number.voiceUrl === ""
+    );
+  }
+
   async chooseLogicalCallerId() {
+    // This is only needed if we don't get a logical incoming number
     const incomingNumbers = await this.client.incomingPhoneNumbers.list({
-      limit: 1
+      limit: 1,
     });
     let number;
     if (incomingNumbers.length > 0) {
       number = incomingNumbers[0].phoneNumber;
     } else {
       const outgoingCallerIds = await this.client.outgoingCallerIds.list({
-        limit: 1
+        limit: 1,
       });
       // Required right?
       number = outgoingCallerIds[0].phoneNumber;
@@ -75,13 +101,34 @@ class Actions {
 
   async setCallerId({ number }) {
     return {
-      CALLER_ID: number
+      CALLER_ID: number,
+    };
+  }
+
+  async clearCallerId() {
+    return {
+      CALLER_ID: undefined,
+    };
+  }
+
+  async updateIncomingNumber({ sid, voiceApplicationSid }) {
+    const incomingNumber = await this.client.incomingPhoneNumbers(sid).update({
+      voiceApplicationSid,
+    });
+    return {
+      INCOMING_NUMBER: incomingNumber.phoneNumber,
+    };
+  }
+
+  async clearIncomingNumber() {
+    return {
+      INCOMING_NUMBER: undefined,
     };
   }
 
   async useExistingTwimlApp({ twimlApplicationSid }) {
     return {
-      TWIML_APPLICATION_SID: twimlApplicationSid
+      TWIML_APPLICATION_SID: twimlApplicationSid,
     };
   }
 }

voice-client-javascript/assets/admin/admin-client.js

@@ -2,6 +2,7 @@ class AdminClient {
 
   constructor() {
     this.isReady = this.token !== null;
+    this.isProcessing = false;
   }
 
   async _handleResponse(response) {
@@ -10,6 +11,7 @@ class AdminClient {
         console.warn('Invalid token, resetting client');
         this.token = null;
         this.isReady = false;
+        this.isProcessing = false;
       }
       // Throw an error
       throw {
@@ -20,6 +22,7 @@ class AdminClient {
   }
 
   async _post(url, obj) {
+    this.isProcessing = true;
     const response = await fetch(url, {
       method: "POST",
       headers: {
@@ -29,7 +32,9 @@ class AdminClient {
       body: JSON.stringify(obj)
     });
     await this._handleResponse(response);
-    return await response.json();
+    const result = await response.json();
+    this.isProcessing = false;
+    return result;
   }
 
   async login(password) {
@@ -52,11 +57,14 @@ class AdminClient {
   }
 
   async fetchState() {
+    this.isProcessing = true;
     const response = await fetch(
       `./check-status?token=${encodeURIComponent(this.token)}`
     );
     await this._handleResponse(response);
-    return await response.json();
+    const result = await response.json();
+    this.isProcessing = false;
+    return result;
   }
 
   get token() {

voice-client-javascript/assets/admin/admin.css

@@ -92,4 +92,24 @@ body {
   p a {
     color: #2492F8;
   }
-
+
+.spinner {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-block;
+  opacity: 1;
+  -webkit-transition: opacity 250ms cubic-bezier(0.215,0.61,0.355,1);
+  transition: opacity 250ms cubic-bezier(0.215,0.61,0.355,1);
+  -webkit-animation: animation-spinner 2s linear infinite;
+  animation: animation-spinner 2s linear infinite;
+}
+@keyframes animation-spinner {
+  0% {-webkit-transform:rotate(0deg);
+  -ms-transform:rotate(0deg);
+  transform:rotate(0deg);
+  }
+  100% {-webkit-transform:rotate(359deg);
+    -ms-transform:rotate(359deg);
+    transform:rotate(359deg);
+    }
+  }

voice-client-javascript/assets/admin/index.html

@@ -4,7 +4,15 @@
 <link rel="stylesheet" href="./admin.css"></link>
   </head>
   <body>
+    <style>
+    </style>
     <div id="app">
+      <span v-if="adminClient.isProcessing" display="block" color="currentColor" class="spinner">
+        <svg role="img" aria-hidden="false" width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby="LoadingIcon">
+          <title id="LoadingIcon">Loading</title>
+          <path fill="currentColor" fill-rule="evenodd" d="M17.043 11.39l.08.014c.239.062.38.3.317.534-.89 3.255-3.932 5.562-7.444 5.562-2.935 0-5.553-1.613-6.85-4.064l-.278 2.85-.015.077a.457.457 0 01-.471.327.429.429 0 01-.4-.47l.41-4.19.017-.085a.456.456 0 01.592-.294l3.96 1.47.072.034a.428.428 0 01.177.53l-.036.071a.457.457 0 01-.542.187l-2.748-1.02c1.124 2.23 3.473 3.705 6.112 3.705 3.104 0 5.792-2.038 6.579-4.915a.447.447 0 01.468-.322zm-7.04-8.89c2.936 0 5.554 1.613 6.85 4.064l.28-2.849.014-.078a.457.457 0 01.471-.327.429.429 0 01.4.47l-.41 4.19-.017.085a.456.456 0 01-.592.295l-3.96-1.47-.072-.035a.428.428 0 01-.177-.53l.036-.071a.457.457 0 01.542-.186l2.748 1.019c-1.124-2.23-3.473-3.705-6.112-3.705-3.104 0-5.792 2.038-6.579 4.915a.447.447 0 01-.468.322l-.08-.013a.435.435 0 01-.317-.534C3.45 4.807 6.492 2.5 10.004 2.5z"></path>
+        </svg>
+    </span>
       <div class="login" v-if="!adminClient.isReady">
         <h1>Password required</h1>
         <p>
@@ -73,6 +81,7 @@ <h2>Configuration Checklist</h2>
             const result = await this.adminClient.fetchState();
             this.environment = result.environment;
             this.statuses = result.statuses;
+            this.$forceUpdate();
           },
           async performAction(action) {
             const message = await this.adminClient.postAction(action);
@@ -84,7 +93,6 @@ <h2>Configuration Checklist</h2>
           async login() {
             await this.adminClient.login(this.password);
             await this.refreshStatus();
-            this.$forceUpdate();
           }
         },
         created() {

voice-client-javascript/assets/admin/shared.private.js

@@ -16,7 +16,7 @@ function createToken(context, password) {
 
 function isAllowed(context, token) {
   // Create the token with the environment password
-  const masterToken = createToken(context, process.env.ADMIN_PASSWORD);
+  const masterToken = createToken(context, context.ADMIN_PASSWORD);
   return masterToken === token;
 }
 
@@ -61,12 +61,21 @@ async function getEnvironmentVariables(context, environment) {
 }
 
 async function getEnvironmentVariable(context, environment, key) {
-  const client = context.getTwilioClient();
   // The list filter method isn't implemented yet.
   const envVars = await getEnvironmentVariables(context, environment);
   return envVars.find(variable => variable.key === key);
 }
 
+/**
+ * 
+ * @param {*} context Function Context
+ * @param {*} environment Serverless Environment
+ * @param {*} key Name of the variable
+ * @param {*} value The value to set. Using `undefined` will unset/remove the variable
+ * @param {*} override Should existing values be overridden. Default is true.
+ * @returns 
+ */
+
 async function setEnvironmentVariable(context, environment, key, value, override=true) {
   const client = context.getTwilioClient();
   try {
@@ -78,8 +87,14 @@ async function setEnvironmentVariable(context, environment, key, value, override
     if (currentVariable) {
       if (currentVariable.value !== value) {
         if (override) {
-          console.log(`Updating ${key}...`);
-          await currentVariable.update({ value });
+          // undefined is a special value that means to unset environment variables
+          if (value === undefined) {
+            console.log(`Removing ${key}...`);
+            await currentVariable.remove();
+          } else {
+            console.log(`Updating ${key}...`);
+            await currentVariable.update({ value });
+          }
           return true;
         } else {
           console.log(`Not overriding existing variable '${key}' which is set to '${currentVariable.value}'`);