adding ability to generate API keys

goTorrentWebUI/src/BackendComm/backendWebsocket.js

@@ -21,6 +21,7 @@ let serverMessage = [];
 let serverPushMessage = [];
 let webSocketState = false;
 let settingsFile = [];
+let tokenReturn = "";
 
 var torrentListRequest = {
     MessageType: "torrentListRequest"
@@ -29,7 +30,7 @@ var torrentListRequest = {
 
 
 
-//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined 22
+//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined
 ws.onmessage = function (evt) { //When we recieve a message from the websocket
     var serverMessage = JSON.parse(evt.data)
     console.log("message", serverMessage.MessageType)
@@ -134,6 +135,10 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
             settingsFile = [];
             console.log("Settings File Returned", serverMessage)
             settingsFile = serverMessage.Config
+
+        case "TokenReturn":
+            tokenReturn = serverMessage.TokenReturn
+            console.log("Token Returned", serverMessage)
     }
                                     
 }
@@ -222,9 +227,14 @@ class BackendSocket extends React.Component {
             console.log("PROPSSERVER", this.props.serverPushMessage, "SERVERPUSH", serverPushMessage)
             this.props.newServerMessage(serverPushMessage)
         }
-        if (this.props.settingsModalOpen) { //TODO don't really need to updaate every tick currently until we can edit config
+        if (this.props.settingsModalOpen) { //TODO don't really need to update every tick currently until we can edit config
             this.props.newSettingsFile(settingsFile)
         }
+
+        if (tokenReturn != ""){ //If we get a return token
+            console.log("Dispatching token return", tokenReturn)
+            this.props.newTokenReturn(tokenReturn)
+        }
         
         ws.send(JSON.stringify(torrentListRequest))//talking to the server to get the torrent list
         if (ws.readyState === ws.CLOSED){ //if our websocket gets closed inform the user
@@ -264,6 +274,9 @@ class BackendSocket extends React.Component {
         if (nextProps.selectionHashes.length === 1){ //if we have a selection pass it on for the tabs to verify
             this.selectionHandler(nextProps.selectionHashes, nextProps.selectedTab)
         }
+        if (nextProps.tokenReturn != this.props.tokenReturn){  //clearing out the token if we switch from the API tab
+            tokenReturn = nextProps.tokenReturn
+        }
     }
 
 
@@ -287,6 +300,7 @@ const mapStateToProps = state => {
         RSSTorrentList: state.RSSTorrentList,
         serverPushMessage: state.serverPushMessage,
         settingsModalOpen: state.settingsModalOpen,
+        tokenReturn: state.tokenReturn,
 
     };
   }
@@ -301,9 +315,8 @@ const mapDispatchToProps = dispatch => {
         RSSTorrentList: (RSSTorrentList) => dispatch({type: actionTypes.RSS_TORRENT_LIST, RSSTorrentList}),
         newServerMessage: (serverPushMessage) => dispatch({type: actionTypes.SERVER_MESSAGE, serverPushMessage}),
         webSocketStateUpdate: (webSocketState) => dispatch({type: actionTypes.WEBSOCKET_STATE, webSocketState}),
-        newSettingsFile: (settingsFile) => dispatch({type: actionTypes.NEW_SETTINGS_FILE, settingsFile})
-        //changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}),//forcing an update to the buttons
-
+        newSettingsFile: (settingsFile) => dispatch({type: actionTypes.NEW_SETTINGS_FILE, settingsFile}),
+        newTokenReturn: (tokenReturn) => dispatch({type: actionTypes.TOKEN_RETURN, tokenReturn}),
     }
 }
 

goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/apiSettingsTab.js

@@ -3,14 +3,18 @@ import ReactDOM from 'react-dom';
 import { withStyles } from 'material-ui/styles';
 import Paper from 'material-ui/Paper';
 import Grid from 'material-ui/Grid';
+import Button from 'material-ui/Button';
+import TextField from 'material-ui/TextField';
 
 import {connect} from 'react-redux';
+import * as actionTypes from '../../../../store/actions';
 
 
 const styles = theme => ({
     root: {
       flexGrow: 1,
       marginTop: 0,
+      padding: 10,
     },
     paper: {
       padding: 16,
@@ -23,19 +27,48 @@ const styles = theme => ({
 });
 
 
-class APISettingsTab extends React.PureComponent {
+class APISettingsTab extends React.Component {
 
+    state = {
+        clientName: "",
+      };
 
-    requestNewKey = (keyName) => {
+    generateKey = (event) => {
+      let newAuthTokenRequest = { 
+        MessageType: "newAuthToken",
+        Payload: {"ClientName": this.state.clientName}
+      }
+      console.log("Sending New Auth Request: ", newAuthTokenRequest);
+      ws.send(JSON.stringify(newAuthTokenRequest));
+      this.setState({clientName: ""})
+    } 
 
+    setClientName = (event) => {
+        this.setState({clientName: event.target.value})
     }
 
+    componentWillUnmount = () => {
+        this.props.newTokenReturn("")
+    }
 
     render() {
         const { classes } = this.props;
         return (
-            <div className={classes.root}>    
-            Not yet implemented!
+            <div className={classes.root}> 
+                <TextField style ={{width: '50%', paddingRight: '10px'}} id="clientName" type="text" label="Client Name" placeholder="Client Name associated with the key" onChange={this.setClientName} />
+                <Button variant="raised" color="primary" onClick={this.generateKey}>
+                    Generate Key
+                </Button>
+                <Paper style = {{padding: '10px'}}> <span className={classes.floatLeft}>{this.props.tokenReturn} </span></Paper>
+                <Grid container spacing={16}>
+                    
+                    <Grid item xs={12} sm={4}>
+                    
+                    
+                        
+                    
+                    </Grid>
+                </Grid>
             </div>
         );
     }
@@ -44,9 +77,15 @@ class APISettingsTab extends React.PureComponent {
 
 const mapStateToProps = state => {
     return {
-      settingsFile: state.settingsFile,
+      tokenReturn: state.tokenReturn,
     };
   }
 
-export default withStyles(styles)(connect(mapStateToProps)(APISettingsTab))
+  const mapDispatchToProps = dispatch => {
+    return {
+        newTokenReturn: (tokenReturn) => dispatch({type: actionTypes.TOKEN_RETURN, tokenReturn}),
+    }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(APISettingsTab))
 

goTorrentWebUI/src/store/actions.js

@@ -14,4 +14,5 @@ export const SETTINGS_MODAL_OPEN_STATE = 'SETTINGS_MODAL_OPEN_STATE';
 export const NEW_SETTINGS_FILE = 'NEW_SETTINGS_FILE';
 export const RSS_TORRENT_LIST = 'RSS_TORRENT_LIST';
 export const SERVER_MESSAGE = 'SERVER_MESSAGE';
-export const WEBSOCKET_STATE = 'WEBSOCKET_STATE';
+export const WEBSOCKET_STATE = 'WEBSOCKET_STATE';
+export const TOKEN_RETURN = 'TOKEN_RETURN';

goTorrentWebUI/src/store/reducer.js

@@ -129,6 +129,13 @@ const reducer = (state = initialState, action) => {
                 ...state,
                 serverPushMessage: action.serverPushMessage
             }
+        
+        case actionTypes.TOKEN_RETURN:
+            console.log("New token return", action.tokenReturn)
+            return {
+                ... state,
+                tokenReturn: action.tokenReturn
+            }
  
         case actionTypes.SET_BUTTON_STATE:
             if (action.buttonState.length === 0) { //if selection is empty buttons will be default and selectionHashes will be blanked out and pushed to redux