From d119a2fab4880b303ba6ab60d61adc4ee4a2ce1b Mon Sep 17 00:00:00 2001
From: Robert Lippens <rlippens39@gmail.com>
Date: Tue, 8 Nov 2016 02:12:22 -0800
Subject: [PATCH 1/2] Adding token and username/password as login options

---
 app/components/Login/Login.jsx | 125 +++++++++++++++++++++++++++++----
 app/components/Login/login.css |   4 ++
 src/routeHandler.js            |   6 +-
 3 files changed, 119 insertions(+), 16 deletions(-)

diff --git a/app/components/Login/Login.jsx b/app/components/Login/Login.jsx
index de6bdef..56d688c 100644
--- a/app/components/Login/Login.jsx
+++ b/app/components/Login/Login.jsx
@@ -4,6 +4,8 @@ import TextField from 'material-ui/TextField';
 import IconButton from 'material-ui/IconButton';
 import Settings from 'material-ui/svg-icons/action/settings';
 import Dialog from 'material-ui/Dialog';
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
 import FlatButton from 'material-ui/FlatButton';
 import { browserHistory } from 'react-router';
 import axios from 'axios';
@@ -14,13 +16,18 @@ export default class Login extends React.Component {
       this.validateAuthToken = this.validateAuthToken.bind(this);
       this.submitVaultURL = this.submitVaultURL.bind(this);
       this.renderSettingsDialog = this.renderSettingsDialog.bind(this);
+      this.renderSelectedLoginOption = this.renderSelectedLoginOption.bind(this);
+      this.validateUsernamePassword = this.validateUsernamePassword.bind(this);
       this.state = {
           show: false,
           promptForVaultUrl: false,
           authToken: "",
           vaultUrl: "",
           tempVaultUrl: "",
-          errorMessage: ""
+          errorMessage: "",
+          username: "",
+          password: "",
+          loginMethodType: "GITHUB"
       };
     }
 
@@ -40,6 +47,39 @@ export default class Login extends React.Component {
         this.setState({ show: true});
     }
 
+    validateUsernamePassword(e) {
+        if (e.keyCode === 13) {
+            if (!window.localStorage.getItem("vaultUrl")) {
+                this.setState({errorMessage: "No Vault url specified.  Click the gear to edit your Vault url"});
+                return;
+            }
+            if (!this.state.username) {
+                this.setState({errorMessage: "No username provided."});
+                return;
+            }
+
+            if (!this.state.password) {
+                this.setState({errorMessage: "No password provided."});
+                return;
+            }
+            axios.post('/login', {
+                "VaultUrl": window.localStorage.getItem("vaultUrl"),
+                "Creds": {
+                    "Type": this.state.loginMethodType,
+                    "Username": this.state.username,
+                    "password": this.state.password
+                }
+            })
+            .then((resp) => {
+                //DJ fill in the blanks here
+            })
+            .catch((err) => {
+                console.error(err);
+                this.setState({errorMessage: err.response.data})
+            });
+        }
+    }
+
     validateAuthToken(e) {
         if (e.keyCode === 13) {
             console.log(`Validating auth token: ${this.state.authToken}`);
@@ -47,7 +87,11 @@ export default class Login extends React.Component {
                 this.setState({errorMessage: "No Vault url specified.  Click the gear to edit your Vault url"});
                 return;
             }
-            axios.post('/login', { "VaultUrl": window.localStorage.getItem("vaultUrl"), "Creds": {"Type": "GITHUB", "Token": this.state.authToken} })
+            if (!this.state.authToken) {
+                this.setState({errorMessage: "No auth token provided."});
+                return;
+            }
+            axios.post('/login', { "VaultUrl": window.localStorage.getItem("vaultUrl"), "Creds": {"Type": this.state.loginMethodType, "Token": this.state.authToken} })
             .then((resp) => {
 //                 { client_token: '145a495d-dc52-4539-1de8-94e819ba1317',
 //   accessor: '1275f43d-1287-7df2-d17a-6956181a5238',
@@ -61,14 +105,13 @@ export default class Login extends React.Component {
                     console.log(`Fetched token: ${accessToken}`);
                     window.location.href = '/';
                 } else {
-                    //No access token returned, error
+                    this.setState({errorMessage: "Auth token validation failed."})
                 }
             })
             .catch((err) => {
                 console.error(err.stack);
-                //something went wrong
+                this.setState({errorMessage: err.response.data})
             });
-            
         }
     }
 
@@ -84,8 +127,12 @@ export default class Login extends React.Component {
 
     renderSettingsDialog() {
         const actions = [
-            <FlatButton label="Cancel" primary={true} onTouchTap={() => this.setState({ promptForVaultUrl: false })}/>
+            <FlatButton label="Close" primary={true} onTouchTap={() => this.setState({ promptForVaultUrl: false })}/>
         ]
+        function handleSelectFieldChange(e,i,v) {
+            this.setState({ loginMethodType: v, errorMessage: ""});
+        }
+
         return (
             <Dialog
                 title="Settings"
@@ -101,10 +148,66 @@ export default class Login extends React.Component {
                     onKeyDown={this.submitVaultURL}
                     onChange={(e,v)=>this.setState({tempVaultUrl: v})}
                 />
+            <SelectField
+                value={this.state.loginMethodType}
+                onChange={handleSelectFieldChange.bind(this)}
+                floatingLabelText="Login Method">
+                <MenuItem value={"GITHUB"} primaryText="Github"/>
+                <MenuItem value={"TOKEN"} primaryText="Token"/>
+                <MenuItem value={"USERNAMEPASSWORD"} primaryText="Username & Password"/>
+            </SelectField>
             </Dialog>
         )
     }
 
+    renderSelectedLoginOption() {
+        switch (this.state.loginMethodType) {
+            case "GITHUB":
+                return (
+                    <TextField
+                        fullWidth={true}
+                        className="col-xs-12"
+                        errorText={this.state.errorMessage}
+                        hintText="Enter Github token"
+                        onKeyDown={this.validateAuthToken}
+                        onChange={(e,v)=>this.setState({authToken: v})}
+                    />
+                );
+            case "TOKEN":
+                return (
+                    <TextField
+                        fullWidth={true}
+                        className="col-xs-12"
+                        errorText={this.state.errorMessage}
+                        hintText="Enter token"
+                        onKeyDown={this.validateAuthToken}
+                        onChange={(e,v)=>this.setState({authToken: v})}
+                    />
+                );
+            case "USERNAMEPASSWORD":
+                return (
+                    <div>
+                        <TextField
+                            fullWidth={true}
+                            className="col-xs-12"
+                            hintText="Enter username"
+                            onKeyDown={this.validateUsernamePassword}
+                            onChange={(e,v)=>this.setState({username: v})}
+                        />
+                        <TextField
+                            fullWidth={true}
+                            className="col-xs-12"
+                            type="password"
+                            hintText="Enter password"
+                            onKeyDown={this.validateUsernamePassword}
+                            onChange={(e,v)=>this.setState({password: v})}
+                        />
+                    <div className={styles.error}>{this.state.errorMessage}</div>
+                    </div>
+                )
+        }
+    }
+
     render () {
         return (
             <div id={styles.root} className="row middle-xs center-xs">
@@ -113,14 +216,7 @@ export default class Login extends React.Component {
                     <div className="col-xs-12" id={styles.title}><img height="40" src="https://www.vaultproject.io/assets/images/favicon-16466d1a.png"></img>AULT</div>
                     <div className="row">
                         <div className="col-xs-11">
-                            <TextField
-                                fullWidth={true}
-                                className="col-xs-12"
-                                errorText={this.state.errorMessage}
-                                hintText="Enter authentication token"
-                                onKeyDown={this.validateAuthToken}
-                                onChange={(e,v)=>this.setState({authToken: v})}
-                            />
+                            {this.renderSelectedLoginOption()}
                         </div>
                         <div className="col-xs-1">
                             <IconButton tooltip="Settings" onTouchTap={() => this.setState({promptForVaultUrl: true})}>
@@ -133,4 +229,3 @@ export default class Login extends React.Component {
         );
     }
 }
-
diff --git a/app/components/Login/login.css b/app/components/Login/login.css
index 9415574..b3528fd 100644
--- a/app/components/Login/login.css
+++ b/app/components/Login/login.css
@@ -15,3 +15,7 @@
 #root {
     height: calc(100vh - 20px);
 }
+
+.error {
+    color:  rgb(244, 67, 54);
+}
diff --git a/src/routeHandler.js b/src/routeHandler.js
index 913612b..f317ad9 100644
--- a/src/routeHandler.js
+++ b/src/routeHandler.js
@@ -30,6 +30,9 @@ var login = function (req, res) {
             body = {
                 token: creds.Token
             };
+            break;
+        default:
+            res.status(400).send("Invalid auth method");
     }
     axios.post(`${_.get(req, "body.VaultUrl")}${endpoint}`, body)
         .then((resp) => {
@@ -37,6 +40,7 @@ var login = function (req, res) {
         })
         .catch((err) => {
             console.error(err.stack);
+            res.status(err.response.status).send("Authorization failed");
         });
 };
 
@@ -114,4 +118,4 @@ module.exports = (function () {
         getSecret: getSecret,
         writeSecret: writeSecret
     }
-})();
\ No newline at end of file
+})();

From 8310aa8a09c4f50de2ba47d3a19300f10102793f Mon Sep 17 00:00:00 2001
From: Robert Lippens <rlippens39@gmail.com>
Date: Tue, 8 Nov 2016 02:16:50 -0800
Subject: [PATCH 2/2] Dropdown menu was off by 8 pixels.  fixed it so that it
 lines up

---
 app/components/Login/Login.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Login/Login.jsx b/app/components/Login/Login.jsx
index 56d688c..74ad2f3 100644
--- a/app/components/Login/Login.jsx
+++ b/app/components/Login/Login.jsx
@@ -149,6 +149,7 @@ export default class Login extends React.Component {
                     onChange={(e,v)=>this.setState({tempVaultUrl: v})}
                 />
             <SelectField
+                style={{paddingLeft: 8}}
                 value={this.state.loginMethodType}
                 onChange={handleSelectFieldChange.bind(this)}
                 floatingLabelText="Login Method">