Ui/transit modal

ui/app/components/modal.js

@@ -0,0 +1,21 @@
+/**
+ * @module Modal
+ * Modal components are used to overlay content on top of the page. Has a darkened background,
+ * a title, and in order to close it you must pass an onClose function.
+ *
+ * @example
+ * ```js
+ * <Modal @title={'myTitle'} @showCloseButton={true} @onClose={() => {}}/>
+ * ```
+ * @param {function} onClose - onClose is the action taken when someone clicks the modal background or close button (if shown).
+ * @param {string} [title] - This text shows up in the header section of the modal.
+ * @param {boolean} [showCloseButton=false] - controls whether the close button in the top right corner shows.
+ */
+
+import Component from '@ember/component';
+
+export default Component.extend({
+  title: null,
+  showCloseButton: false,
+  onClose: () => {},
+});

ui/app/components/transit-key-actions.js

@@ -43,12 +43,24 @@ const PARAMS_FOR_ACTION = {
   decrypt: ['ciphertext', 'context', 'nonce'],
   rewrap: ['ciphertext', 'context', 'nonce', 'key_version'],
 };
+const SUCCESS_MESSAGE_FOR_ACTION = {
+  sign: 'Signed your data',
+  // the verify action doesn't trigger a success message
+  hmac: 'Created your hash output',
+  encrypt: 'Created a wrapped token for your data',
+  decrypt: 'Decrypted the data from your token',
+  rewrap: 'Created a new token for your data',
+  datakey: 'Generated your key',
+  export: 'Exported your key',
+};
 export default Component.extend(TRANSIT_PARAMS, {
   store: service(),
+  flashMessages: service(),
 
   // public attrs
   selectedAction: null,
   key: null,
+  isModalActive: false,
 
   onRefresh() {},
   init() {
@@ -137,6 +149,12 @@ export default Component.extend(TRANSIT_PARAMS, {
     this.set('errors', null);
   },
 
+  triggerSuccessMessage(action) {
+    const message = SUCCESS_MESSAGE_FOR_ACTION[action];
+    if (!message) return;
+    this.get('flashMessages').success(message);
+  },
+
   handleSuccess(resp, options, action) {
     let props = {};
     if (resp && resp.data) {
@@ -149,10 +167,12 @@ export default Component.extend(TRANSIT_PARAMS, {
     if (options.wrapTTL) {
       props = assign({}, props, { wrappedToken: resp.wrap_info.token });
     }
+    this.toggleProperty('isModalActive');
     this.setProperties(props);
     if (action === 'rotate') {
       this.get('onRefresh')();
     }
+    this.triggerSuccessMessage(action);
   },
 
   compactData(data) {
@@ -184,6 +204,13 @@ export default Component.extend(TRANSIT_PARAMS, {
       arr.forEach(param => this.set(param, null));
     },
 
+    toggleModal(successMessage) {
+      if (!!successMessage && typeof successMessage === 'string') {
+        this.get('flashMessages').success(successMessage);
+      }
+      this.toggleProperty('isModalActive');
+    },
+
     doSubmit(data, options = {}) {
       const { backend, id } = this.getModelInfo();
       const action = this.get('selectedAction');
@@ -192,7 +219,7 @@ export default Component.extend(TRANSIT_PARAMS, {
         if (action === 'encrypt' && !!formData.plaintext) {
           formData.plaintext = encodeString(formData.plaintext);
         }
-        if ((action === 'hmac' || action === 'verify') && !!formData.input) {
+        if ((action === 'hmac' || action === 'verify' || action === 'sign') && !!formData.input) {
           formData.input = encodeString(formData.input);
         }
       }

ui/app/styles/components/modal.scss

@@ -0,0 +1,44 @@
+.modal-background {
+  background: rgb(235, 238, 242, 0.9);
+}
+
+.modal-card {
+  box-shadow: $box-shadow-highest;
+  border: 1px solid $grey-light;
+
+  &-head {
+    border-radius: 0;
+    background-color: $grey-lightest;
+    border-bottom: 1px solid $grey-light;
+  }
+
+  &-foot {
+    border-radius: 0;
+    border: 0;
+    background-color: $white;
+  }
+
+  &-title.title {
+    margin: 0;
+  }
+
+  .copy-text {
+    background-color: $grey-lightest;
+    padding: $spacing-s;
+    margin-bottom: $spacing-s;
+
+    code {
+      overflow: scroll;
+      max-width: calc(100% - 36px);
+      background-color: inherit;
+    }
+  }
+
+  .copy-close {
+    margin-top: $spacing-s;
+  }
+}
+
+pre {
+  background-color: inherit;
+}

ui/app/styles/components/transit-card.scss

@@ -9,10 +9,11 @@
 
 .transit-card {
   border-radius: $radius;
-  box-shadow: 0 0 0 1px rgba($grey-dark, 0.3), $box-shadow-middle;
+  box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
   display: grid;
   grid-template-columns: 0.45fr 2fr;
   padding: $spacing-m;
+  border: none;
 
   .transit-icon {
     justify-self: center;

ui/app/styles/core.scss

@@ -68,6 +68,7 @@
 @import './components/loader';
 @import './components/login-form';
 @import './components/masked-input';
+@import './components/modal';
 @import './components/namespace-picker';
 @import './components/namespace-reminder';
 @import './components/navigate-input';

ui/app/templates/components/modal.hbs

@@ -0,0 +1,14 @@
+{{#ember-wormhole to="modal-wormhole"}}
+  <div class="modal {{if isActive 'is-active'}}" aria-modal="true">
+    <div class="modal-background" onclick={{onClose}} data-test-modal-background></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+          <h2 class="modal-card-title title is-5" data-test-modal-title>{{title}}</h2>
+          {{#if showCloseButton}}
+            <button class="delete" aria-label="close" onclick={{onClose}} data-test-modal-close-button></button>
+          {{/if}}
+        </header>
+      {{yield}}
+    </div>
+  </div>
+{{/ember-wormhole}}