Improved interface for copying key after creation

client/modules/User/actions.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import { browserHistory } from 'react-router';
+import ReactDom from 'react-dom';
 import axios from 'axios';
 import crypto from 'crypto';
 import * as ActionTypes from '../../constants';
@@ -227,7 +229,31 @@ export function addApiKey(label) {
       const hashedKey = Buffer.from(key).toString('base64');
       axios.put(`${ROOT_URL}/account/api-keys`, { label, hashedKey }, { withCredentials: true })
         .then((response) => {
-          window.alert(`Here is your key :\n${key}\nNote it somewhere, you won't be able to see it later !`);
+          // window.alert(`Here is your key :\n${key}\nNote it somewhere, you won't be able to see it later !`);
+          const elt = React.createElement(
+            'tr', { className: 'new-key' },
+            React.createElement('td', {}, 'Here is your new key ;\ncopy it somewhere, you won\'t be able to see it later !'),
+            React.createElement(
+              'td', {},
+              React.createElement('input', {
+                id: 'key-to-copy', type: 'text', value: key, readOnly: true
+              })
+            ),
+            React.createElement(
+              'td', {},
+              React.createElement('input', {
+                type: 'submit',
+                value: 'Copy to clipboard',
+                className: 'form__table-button-copy',
+                onClick: () => {
+                  const inputKey = document.getElementById('key-to-copy');
+                  inputKey.select();
+                  document.execCommand('copy');
+                }
+              })
+            )
+          );
+          ReactDom.render(elt, document.getElementById('form__table_new_key'));
           dispatch({
             type: ActionTypes.ADDED_API_KEY,
             user: response.data

client/modules/User/components/APIKeyForm.jsx

@@ -13,6 +13,7 @@ class APIKeyForm extends React.Component {
     event.preventDefault();
     document.getElementById('addKeyForm').reset();
     this.props.addApiKey(this.state.keyLabel);
+    this.state.keyLabel = '';
     return false;
   }
 
@@ -39,12 +40,13 @@ class APIKeyForm extends React.Component {
           />
         </form>
         <table className="form__table">
+          <tbody id="form__table_new_key"></tbody>
           <tbody>
             {this.props.apiKeys && this.props.apiKeys.map(v => (
               <tr key={v.id}>
                 <td><b>{v.label}</b><br />Created on: {v.createdAt}</td>
                 <td>Last used on:<br /> {v.lastUsedAt}</td>
-                <td><button className="form__button-remove" onClick={() => this.removeKey(v.id)}>Delete</button></td>
+                <td><button className="form__table-button-remove" onClick={() => this.removeKey(v.id)}>Delete</button></td>
               </tr>))}
           </tbody>
         </table>

client/styles/components/_form-container.scss

@@ -50,4 +50,7 @@
   & tr:nth-child(even) {
     background-color: #f2f2f2;
   }
+  & tr.new-key {
+    background-color: #f2f2f2;
+  }
 }

client/styles/components/_forms.scss

@@ -52,7 +52,7 @@
   cursor: not-allowed;
 }
 
-.form__button-remove {
+.form__table-button-remove {
   @extend %forms-button;
   margin: 1rem 0 1rem 0;
   @include themify() {
@@ -68,3 +68,8 @@
     }
   }
 }
+
+.form__table-button-copy{
+    @extend %forms-button;
+    margin: 1rem 0 1rem 0;
+}