Merge pull request #204 from watson-developer-cloud/iam-support

feat(UI): Use the server url in the client

Author: germanattanasio

app.js

@@ -27,30 +27,34 @@ require('./config/express')(app);
 
 // Create the token manager
 let tokenManager;
+const serviceUrl = process.env.SPEECH_TO_TEXT_URL || 'https://stream.watsonplatform.net/speech-to-text/api';
 
 if (process.env.SPEECH_TO_TEXT_IAM_APIKEY && process.env.SPEECH_TO_TEXT_IAM_APIKEY !== '') {
-  tokenManager = new IamTokenManagerV1({
+  tokenManager = new IamTokenManagerV1.IamTokenManagerV1({
     iamApikey: process.env.SPEECH_TO_TEXT_IAM_APIKEY || '<iam_apikey>',
     iamUrl: process.env.SPEECH_TO_TEXT_IAM_URL || 'https://iam.bluemix.net/identity/token',
   });
 } else {
   const speechService = new SpeechToTextV1({
     username: process.env.SPEECH_TO_TEXT_USERNAME || '<username>',
     password: process.env.SPEECH_TO_TEXT_PASSWORD || '<password>',
-    url: process.env.SPEECH_TO_TEXT_URL || '<url>',
+    url: serviceUrl,
   });
   tokenManager = new AuthorizationV1(speechService.getCredentials());
 }
 
 app.get('/', (req, res) => res.render('index'));
 
-// Get token using your credentials
-app.get('/api/token', (req, res, next) => {
+// Get credentials using your credentials
+app.get('/api/credentials', (req, res, next) => {
   tokenManager.getToken((err, token) => {
     if (err) {
       next(err);
     } else {
-      res.send(token);
+      res.json({
+        token,
+        serviceUrl,
+      });
     }
   });
 });

public/scripts/bundle.jsx

@@ -1,6 +1,6 @@
 import './polyfills';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Demo from '../../views/demo.jsx'
+import Demo from '../../views/demo.jsx';
 
-ReactDOM.render(<Demo/>, document.getElementById('root'));
+ReactDOM.render(<Demo />, document.getElementById('root'));

test/unit/offline.test.js

@@ -17,21 +17,24 @@ describe('offline tests', () => {
       request(app).get('/foo/bar').expect(404, done);
     });
 
-    it('should fetch and return a token for GET /api/token', (done) => {
-      const fakeToken = 'asdfasdfasdf';
+    it('should fetch and return a token for GET /api/credentials', (done) => {
+      const fakeToken = {
+        token: 'faketoken',
+        serviceUrl: 'https://stream.watsonplatform.net/speech-to-text/api',
+      };
 
       nock('https://stream.watsonplatform.net:443', { encodedQueryParams: true })
         .get('/authorization/api/v1/token')
         .query({ url: 'https://stream.watsonplatform.net/speech-to-text/api' })
-        .reply(200, fakeToken, {
+        .reply(200, 'faketoken', {
           connection: 'close',
           'transfer-encoding': 'chunked',
           'content-type': 'text/xml',
           'x-dp-watson-tran-id': 'stream-dp01-34302424',
           date: 'Tue, 29 Mar 2016 19:50:27 GMT',
         });
 
-      request(app).get('/api/token').expect(200, fakeToken, done);
+      request(app).get('/api/credentials').expect(200, fakeToken, done);
     });
   });
 });

views/demo.jsx

@@ -96,6 +96,7 @@ export default React.createClass({
       resultsBySpeaker: this.state.speakerLabels,
       // allow interim results through before the speaker has been determined
       speakerlessInterim: this.state.speakerLabels,
+      url: this.state.serviceUrl,
     }, extra);
   },
 
@@ -263,13 +264,13 @@ export default React.createClass({
   },
 
   fetchToken() {
-    return fetch('/api/token').then((res) => {
+    return fetch('/api/credentials').then((res) => {
       if (res.status !== 200) {
         throw new Error('Error retrieving auth token');
       }
-      return res.text();
+      return res.json();
     }) // todo: throw here if non-200 status
-      .then(token => this.setState({ token })).catch(this.handleError);
+      .then(creds => this.setState({ ...creds })).catch(this.handleError);
   },
 
   getKeywords(model) {
@@ -401,7 +402,7 @@ export default React.createClass({
 
     const messages = this.getFinalAndLatestInterimResult();
     const micBullet = (typeof window !== 'undefined' && recognizeMicrophone.isSupported)
-      ? <li className="base--li">Use your microphone to record audio.</li>
+      ? <li className="base--li">Use your microphone to record audio. For best results, use broadband models for microphone input.</li>
       : <li className="base--li base--p_light">Use your microphone to record audio. (Not supported in current browser)</li>;// eslint-disable-line
 
     return (
@@ -432,7 +433,7 @@ export default React.createClass({
 
         <ul className="base--ul">
           {micBullet}
-          <li className="base--li">'Upload pre-recorded audio (.mp3, .mpeg, .wav, .flac, or .opus only).</li>
+          <li className="base--li">Upload pre-recorded audio (.mp3, .mpeg, .wav, .flac, or .opus only).</li>
           <li className="base--li">Play one of the sample audio files.*</li>
         </ul>
 
@@ -535,7 +536,6 @@ export default React.createClass({
             <JSONView raw={rawMessages} formatted={formattedMessages} />
           </Pane>
         </Tabs>
-
       </Dropzone>
     );
   },