Updates client UI to request token generation from server

client/constants.js

@@ -19,7 +19,7 @@ export const AUTH_ERROR = 'AUTH_ERROR';
 
 export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
 
-export const ADDED_API_KEY = 'ADDED_API_KEY';
+export const API_KEY_CREATED = 'API_KEY_CREATED';
 export const REMOVED_API_KEY = 'REMOVED_API_KEY';
 
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';

client/modules/User/actions.js

@@ -222,46 +222,22 @@ export function updateSettings(formValues) {
       .catch(response => Promise.reject(new Error(response.data.error)));
 }
 
-export function addApiKey(label) {
-  return ((dispatch) => {
-    crypto.randomBytes(20, (err, buf) => {
-      const key = buf.toString('hex');
-      const encodedKey = Buffer.from(key).toString('base64');
-      axios.put(`${ROOT_URL}/account/api-keys`, { label, encodedKey }, { withCredentials: true })
-        .then((response) => {
-          // 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
-          });
-        })
-        .catch(response => Promise.reject(new Error(response.data.error)));
-    });
-  });
+export function createApiKeySuccess(token) {
+  return {
+    type: ActionTypes.API_KEY_CREATED,
+    token
+  };
+}
+
+export function createApiKey(label) {
+  return dispatch =>
+    axios.post(`${ROOT_URL}/account/api-keys`, { label }, { withCredentials: true })
+      .then((response) => {
+        const { token } = response.data;
+        dispatch(createApiKeySuccess(token));
+        return token;
+      })
+      .catch(response => Promise.reject(new Error(response.data.error)));
 }
 
 export function removeApiKey(keyId) {

client/modules/User/components/APIKeyForm.jsx

@@ -12,7 +12,8 @@ class APIKeyForm extends React.Component {
   addKey(event) {
     event.preventDefault();
     document.getElementById('addKeyForm').reset();
-    this.props.addApiKey(this.state.keyLabel);
+    this.props.createApiKey(this.state.keyLabel)
+      .then(newToken => this.setState({ newToken }));
     this.state.keyLabel = '';
     return false;
   }
@@ -22,23 +23,35 @@ class APIKeyForm extends React.Component {
   }
 
   render() {
+    const { newToken } = this.state;
+
+    const content = newToken ?
+      (
+        <div>
+          <p>Here is your new key. Copy it somewhere, you won't be able to see it later !</p>
+          <input type="text" readOnly value={newToken} />
+          <button>Copy to clipboard</button>
+        </div>) :
+      (<form id="addKeyForm" className="form" onSubmit={this.addKey}>
+        <h2 className="form__label">Key label</h2>
+        <input
+          type="text"
+          className="form__input"
+          placeholder="A name you will be able to recognize"
+          id="keyLabel"
+          onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
+        /><br />
+        <input
+          type="submit"
+          value="Create new Key"
+          disabled={this.state.keyLabel === ''}
+        />
+        </form>
+      );
+
     return (
       <div>
-        <h2 className="form__label">Key label</h2>
-        <form id="addKeyForm" className="form" onSubmit={this.addKey}>
-          <input
-            type="text"
-            className="form__input"
-            placeholder="A name you will be able to recognize"
-            id="keyLabel"
-            onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
-          /><br />
-          <input
-            type="submit"
-            value="Create new Key"
-            disabled={this.state.keyLabel === ''}
-          />
-        </form>
+        {content}
         <table className="form__table">
           <tbody id="form__table_new_key"></tbody>
           <tbody>
@@ -56,7 +69,7 @@ class APIKeyForm extends React.Component {
 }
 
 APIKeyForm.propTypes = {
-  addApiKey: PropTypes.func.isRequired,
+  createApiKey: PropTypes.func.isRequired,
   removeApiKey: PropTypes.func.isRequired,
   apiKeys: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.object.isRequired,

client/modules/User/pages/AdvancedSettingsView.jsx

@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
-import { addApiKey, removeApiKey } from '../actions';
+import { createApiKey, removeApiKey } from '../actions';
 import APIKeyForm from '../components/APIKeyForm';
 
 const exitUrl = require('../../../images/exit.svg');
@@ -64,7 +64,7 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ addApiKey, removeApiKey }, dispatch);
+  return bindActionCreators({ createApiKey, removeApiKey }, dispatch);
 }
 
 AdvancedSettingsView.propTypes = {

client/modules/User/reducers.js

@@ -33,7 +33,7 @@ const user = (state = { authenticated: false }, action) => {
       return { ...state, ...action.user };
     case ActionTypes.REMOVED_API_KEY:
       return { ...state, ...action.user };
-    case ActionTypes.ADDED_API_KEY:
+    case ActionTypes.API_KEY_CREATED:
       return { ...state, ...action.user };
     default:
       return state;