station 0.0.0 → 0.0.100

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/step/Plain.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <p class="content">{{ step.content }}</p>
+    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
+    <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
+  </div>
+</template>
+<script>
+
+import eventHub from '../eventHub';
+
+export default {
+  props: ['step', 'lastStep'],
+  methods: {
+    reset: function() {
+      eventHub.$emit('reset-modal');
+    }
+  }
+}
+</script>
+<style scoped>
+.content {
+  white-space: pre-line;
+  max-width: 316px;
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/step/RadioGroup.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
+      <div v-for="(question, index) in step.questions" class="radio-button Vlt-radio">
+        <label>
+          <span class="Vlt-radio__button">
+            <input required="required" type="radio" :value=index v-model="answer">
+            <span class="Vlt-radio__icon"></span>
+          </span>
+          {{question}}
+        </label>
+      </div>
+
+      <small v-if="hasError"class="Vlt-form__element__error">This field is required</small>
+      <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
+      <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
+      <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
+    </div>
+  </div>
+</template>
+<script>
+
+import eventHub from '../eventHub';
+
+export default {
+  props: ['step', 'lastStep'],
+  data: function() {
+    return {
+      answer: '',
+      hasError: false
+    };
+  },
+  methods: {
+    resetFields: function() {
+      this.answer = '';
+      this.hasError = false;
+    },
+    reset: function() {
+      eventHub.$emit('reset-modal');
+    },
+    validate: function() {
+      if (this.$el.querySelector('input[type="radio"]:checked') !== null) {
+        this.hasError = false;
+        eventHub.$emit('next-step', this.answer);
+        return false;
+      } else {
+        this.hasError = true;
+      }
+    }
+  },
+  mounted: function() {
+    eventHub.$on('reset-modal', this.resetFields);
+  }
+}
+</script>
+<style scoped>
+.radio-button {
+  margin-bottom: 11px;
+}
+.Vlt-form__element {
+  @media only screen and (min-width: 576px) {
+    width: 450px;
+  };
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/step/TextArea.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="wrapper">
+    <p class="content">{{ step.content }}</p>
+    <br>
+
+    <div v-if="step.email" class="Vlt-form__element">
+      <label class="Vlt-label" for="email">Your Email <small class="Vlt-grey-dark">(optional)</small></label>
+      <div class="Vlt-input">
+        <input type="email" id="email" v-model="email"/>
+      </div>
+    </div>
+
+    <div class="step-textarea Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': error }">
+      <div class="Vlt-textarea" v-bind:class="{ 'step-textarea__no-content': step.content === undefined }">
+        <label for="answer">{{ step.label }}</label>
+        <textarea id="answer" :placeholder="step.placeholder" v-model="answer"></textarea>
+      </div>
+      <small v-if="error" class="Vlt-form__element__error">This field is required</small>
+    </div>
+
+    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
+    <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
+    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
+  </div>
+</template>
+<script>
+
+import eventHub from '../eventHub';
+import store from '../store';
+
+export default {
+  props: ['step', 'lastStep'],
+  data: function() {
+    return { answer: null, error: false, email: null };
+  },
+  methods: {
+    resetFields: function() {
+      this.answer = null;
+      this.error = false;
+    },
+    reset: function() {
+      eventHub.$emit('reset-modal');
+    },
+    validate: function() {
+      if (this.answer === null || this.answer === '') {
+        this.error = true;
+      } else {
+        this.error = false;
+        if (this.email) {
+          store.setEmail(this.email);
+        }
+        eventHub.$emit('next-step', this.answer);
+      }
+    }
+  },
+  mounted: function() {
+    eventHub.$on('reset-modal', this.resetFields);
+  }
+}
+
+</script>
+<style scoped>
+.wrapper {
+  flex-direction: column;
+  max-width: 434px;
+}
+.content {
+  white-space: pre-line;
+}
+.step-textarea {
+  display: flex;
+  flex-direction: column;
+}
+.step-textarea textarea {
+  resize: none;
+  max-width: 441px;
+  height: 73px;
+  margin-top: 11px;
+}
+.step-textarea__no-content textarea {
+  height: 169px;
+  @media only screen and (min-width: 576px) {
+    width: 450px;
+  };
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/step/base.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="step" v-bind:class="{ image: hasImage }">
+    <img v-if="hasImage" img :src="step.image" :alt="step.image">
+    <div class="step-content">
+      <span v-if="!hasImage">Feedback</span>
+      <h4 class="step-title">{{step.title}}</h4>
+
+      <plain v-if="step.type == 'plain'" v-bind:step="step" v-bind:last-step="lastStep"/>
+      <text-area v-else-if="step.type == 'textarea'" v-bind:step="step" v-bind:last-step="lastStep"/>
+      <radio-group v-else-if="step.type == 'radiogroup'" v-bind:step="step" v-bind:last-step="lastStep"/>
+      <field-set v-else-if="step.type == 'fieldset'" v-bind:step="step" v-bind:last-step="lastStep"/>
+      <div v-else></div>
+    </div>
+  </div>
+</template>
+<script>
+
+import TextArea from './TextArea.vue';
+import RadioGroup from './RadioGroup.vue';
+import Plain from './Plain.vue';
+import FieldSet from './FieldSet.vue';
+
+export default {
+  props: ['step', 'lastStep'],
+  components: { TextArea, RadioGroup, Plain, FieldSet },
+  computed: {
+    hasImage: function() {
+      return this.step.image !== undefined;
+    }
+  }
+}
+</script>
+<style scoped>
+.step {
+  display: flex;
+}
+.image {
+  padding: 0px;
+}
+.step-title {
+  white-space: pre-line;
+}
+.step-content {
+  flex-direction: column;
+  padding: 32px;
+  max-width: 580px;
+}
+img {
+  @media only screen and (max-width: 576px) {
+    display: none;
+  };
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/store.js

@@ -0,0 +1,50 @@
+export default {
+  state: {
+    path: null,
+    sentiment: null,
+    source: null,
+    configId: null,
+    steps: [],
+    feedbackId: null,
+    email: null
+  },
+  setPath: function(path) {
+    this.state.path = path;
+  },
+  setSentiment: function(sentiment) {
+    this.state.sentiment = sentiment;
+  },
+  setSource: function(source) {
+    this.state.source = source;
+  },
+  setConfigId: function(id) {
+    this.state.configId = id;
+  },
+  setFeedbackId: function(id) {
+    this.state.feedbackId = id;
+  },
+  setEmail: function(email) {
+    this.state.email = email;
+  },
+  addStep: function(step) {
+    this.state.steps.push(step);
+  },
+  toParam: function() {
+    return {
+      feedback_config_id: this.state.configId,
+      path: this.state.path,
+      sentiment: this.state.sentiment,
+      source: this.state.source,
+      steps: this.state.steps,
+      id: this.state.feedbackId,
+      email: this.state.email
+    }
+  },
+  clearState: function() {
+    this.state.path = null;
+    this.state.sentiment = null;
+    this.state.steps = [];
+    this.state.feedbackId = null;
+    this.state.email = null;
+  }
+};

data/lib/nexmo_developer/app/webpacker/javascript/components/jwt_generator/JwtGenerator.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="Vlt-card">
+    <h1>JWT Generator</h1>
+    <div v-show="!jwt" :class="[computedClass, 'Vlt-callout']">
+      <i></i>
+      <div v-if="invalidAcl" class="Vlt-callout__content">
+        Invalid ACL provided. Must be JSON
+      </div>
+      <div v-else-if="invalidPrivateKey" class="Vlt-callout__content">
+        Invalid private key provided
+      </div>
+      <div v-if="!invalidPrivateKey && !invalidAcl" v-html="callout" class="Vlt-callout__content"/>
+    </div>
+    <div class="Vlt-grid">
+
+      <div class="Vlt-col">
+        <h2>Parameters</h2>
+        <div class="Vlt-form__element">
+          <label class="Vlt-label">Private Key</label>
+          <div class="Vlt-textarea">
+            <textarea rows="8" cols="50" v-model="privateKey" id="private-key"></textarea>
+          </div>
+        </div>
+        <div class="Vlt-form__element">
+          <label class="Vlt-label">Application ID</label>
+          <div class="Vlt-input">
+            <input v-model="applicationId" id="application-id"/>
+          </div>
+        </div>
+        <div class="Vlt-form__element">
+          <label htmlFor="example-input-icon-button" class="Vlt-label">Valid For</label>
+          <div class="Vlt-composite">
+            <div class="Vlt-input">
+              <input type="number" v-model.number="validFor" placeholder="6" />
+            </div>
+
+            <div class="Vlt-composite__append">
+              <div class="Vlt-native-dropdown">
+                <select v-model.number='validForTimeUnit' defaultValue="3600">
+                  <option value="1">Seconds</option>
+                  <option value="60">Minutes</option>
+                  <option value="3600">Hours</option>
+                  <option value="86400">Days</option>
+                </select>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div class="Vlt-form__element">
+          <label class="Vlt-label">Sub (optional)</label>
+          <div class="Vlt-input">
+            <input v-model="sub"/>
+          </div>
+        </div>
+        <div class="Vlt-form__element">
+          <label class="Vlt-label">ACL (optional)</label>
+          <div class="Vlt-textarea">
+            <textarea rows="4" cols="50" v-model="acl" id="acl"></textarea>
+          </div>
+        </div>
+      </div>
+      <div class="Vlt-col">
+        <h2>Encoded</h2>
+        <div class="Vlt-form__element">
+          <label class="Vlt-label">Your JWT</label>
+          <div class="Vlt-textarea">
+            <textarea rows="29" cols="50" v-model="jwt" id="jwt"></textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="Vlt-grid">
+      <div class="Vlt-col">
+        <h2>Decoded</h2>
+        <div class="Vlt-table Vlt-table--data">
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+                <th>Meaning</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td><code>application_id</code></td><td>{{applicationId}}</td><td>The application ID this JWT uses for authentication</td></tr>
+              <tr><td><code>iat</code></td><td>{{iat}}</td><td>The time at which the token was issued</td></tr>
+              <tr><td><code>nbf</code></td><td>{{nbf}}</td><td>The time at which the token should become valid</td></tr>
+              <tr><td><code>exp</code></td><td>{{exp}}</td><td>The time at which the token should expire</td></tr>
+              <tr><td><code>sub</code></td><td>{{sub}}</td><td>The subject identified by the JWT (only used for the Client SDKs)</td></tr>
+              <tr><td><code>acl</code></td><td>{{acl}}</td><td>A list of permissions that this token will have</td></tr>
+              <tr><td><code>jti</code></td><td>{{jti}}</td><td>A unique identifier for the JWT</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { KJUR, KEYUTIL} from 'jsrsasign';
+
+export default {
+  data: function() {
+    return {
+      sub: '',
+      acl: '',
+      iat: '',
+      jti: '',
+      nbf: '',
+      applicationId: '',
+      validFor: '',
+      validForTimeUnit:  3600,
+      privateKey: '',
+    }
+  },
+  created: function() {
+    let tNow = KJUR.jws.IntDate.get('now');
+    let tEnd = tNow + (3600*6);
+
+    this.iat = tNow;
+    this.nbf = tNow;
+    this.jti = this.generateJti();
+  },
+  computed: {
+    invalidAcl: function() {
+      let invalid = false;
+
+      if (this.acl) {
+        try {
+          JSON.parse(this.acl);
+        } catch (e) {
+          invalid = true;
+        }
+      }
+      return invalid;
+    },
+    callout: function() {
+      let message;
+
+      if (this.privateKey) {
+        if (!this.applicationId) {
+          message = 'Next, provide an Application ID';
+        }
+      } else if (this.applicationId) {
+        message = 'Next, provide a Private Key';
+      } else {
+        message = '<h4>Use your <code>private key</code> and <code>application_id</code> to create a JWT for your Nexmo Application</h4>The JWT is generated on the client-side so your private key <strong>never leaves your browser</strong>.';
+      }
+      return message;
+    },
+    exp: function() {
+      let validFor = this.validFor || 6;
+      return this.iat + (validFor * this.validForTimeUnit);
+    },
+    jwt: function() {
+      let result = '';
+      if (this.privateKey && this.applicationId) {
+        try {
+          result = this.generateJwt();
+        } catch (e) {
+          result = '';
+        }
+      }
+      return result;
+    },
+    invalidPrivateKey: function() {
+      let invalid = false;
+      if (this.privateKey && this.applicationId) {
+        try {
+          this.generateJwt();
+        } catch (e) {
+          invalid = true;
+        }
+      }
+      return invalid;
+    },
+    computedClass: function() {
+      if (this.invalidPrivateKey || this.invalidAcl)
+        return 'Vlt-callout--critical';
+      if (this.applicationId && this.privateKey)
+        return '';
+      if (this.applicationId || this.privateKey)
+        return 'Vlt-callout--warning';
+      if (!this.applicationId && !this.privateKey)
+        return 'Vlt-callout--tip';
+    }
+  },
+  methods: {
+    generateJti: function() {
+      let text = "";
+      let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+      for (let i = 0; i < 12; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+      }
+
+      return text;
+    },
+    buildHeader: function() {
+      return JSON.stringify({ typ: 'JWT', alg: 'RS256' });
+    },
+    buildPayload: function() {
+      let payload = {};
+      payload.iat = this.iat;
+      payload.exp = this.exp;
+      payload.jti = this.jti;
+      payload.application_id = this.applicationId;
+      if (this.sub) { payload.sub = this.sub; }
+      if (this.acl) { payload.acl = JSON.parse(this.acl); }
+      return JSON.stringify(payload);
+    },
+    generateJwt: function() {
+      let prvKey = KEYUTIL.getKey(this.privateKey);
+      return KJUR.jws.JWS.sign("RS256", this.buildHeader(), this.buildPayload(), prvKey);
+    }
+  }
+}
+</script>