Merge 636976f into 33d4671

openmrs · Jan 30, 2018 · b98f9bb · b98f9bb
2 parents 33d4671 + 636976f
commit b98f9bb
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 12 deletions.
diff --git a/app/js/Routes.jsx b/app/js/Routes.jsx
@@ -7,25 +7,27 @@
  * graphic logo is a trademark of OpenMRS Inc.
  */
 import React, { Component } from 'react';
-import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
+import { Router, Route, Link, IndexRoute, hashHistory, browserHistory} from 'react-router';
 import App from './components/App.jsx';
 
 import ManageApps from './components/manageApps/ManageApps.jsx';
 import ManageSettings from './components/manageApps/ManageSettings.jsx';
 import Addon from './components/manageApps/Addon.jsx';
 import Help from './components/manageApps/Help.jsx';
+import Login from './components/manageApps/Login.jsx';
 
 
 export default () => {
   return (
     <Router history={hashHistory}>
-      <Route path="/" component={App} >
-        <IndexRoute component={ManageApps} />
-        <Route path="manageSettings" component={ManageSettings} />
-        <Route path="help" component={Help} />
-        <Route path="addon/:addonName" component={Addon} />
-        <Route path="*" component={ManageApps} />
-      </Route>
+        <Route path="/login" component={Login}/>  
+        <Route path="/" component={App}>
+          <IndexRoute component={ManageApps} />
+          <Route path="manageSettings" component={ManageSettings} />
+          <Route path="help" component={Help}/>
+          <Route path="addon/:addonName" component={Addon} />
+          <Route path="*" component={ManageApps} />
+          </Route>
     </Router>
   );
 };
diff --git a/app/js/components/App.jsx b/app/js/components/App.jsx
@@ -7,6 +7,7 @@
  * graphic logo is a trademark of OpenMRS Inc.
  */
 import React from 'react';
+import { hashHistory } from 'react-router';
 import Header from '../components/common/Header.jsx';
 import { StickyContainer, Sticky } from 'react-sticky';
 import { ApiHelper } from '../helpers/apiHelper';
@@ -32,9 +33,7 @@ export default class App extends React.Component {
 
   checkLoginStatus(){
     this.fetchLocation('/v1/session').then((response) => {
-      !response.user ?
-        location.href = `${location.href.substr(0, location.href.indexOf(location.href.split('/')[4]))}login.htm` :
-        this.setState({loggedIn: true, routeChanged: false});
+      !response.authenticated ? hashHistory.push('/login') : this.setState({loggedIn: true, routeChanged: false});
     });
   }
 

diff --git a/app/js/components/manageApps/Login.jsx b/app/js/components/manageApps/Login.jsx
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { hashHistory } from 'react-router';
+import axios from 'axios';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import AppBar from 'material-ui/AppBar';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+class Login extends Component {
+constructor(props){
+  super(props);
+  this.state={
+  username:'',
+  password:''
+  }
+  this.handleLogin = this.handleLogin.bind(this);
+ }
+
+ handleLogin(){
+  const {username, password} = this.state;
+  const applicationDistribution = location.href.split('/')[2];
+  const urlPrefix = location.href.substr(0, location.href.indexOf('//'));
+  const url = location.href.split('/')[3];
+  const apiBaseUrl = `/${applicationDistribution}/${url}/ws/rest`;
+  const requestUrl = '/v1/session';
+  const auth = 'Basic ' + new Buffer(`${username}:${password}`).toString('base64');
+
+  axios({
+    url: `${urlPrefix}/${apiBaseUrl}/${requestUrl}`,
+    method: 'get',
+    headers: {
+      'Authorization': auth
+    }
+  }).then(response => {
+    console.log(response);
+    response.data.user ? hashHistory.push('/') : toastr.error('Invalid username or password');
+  })
+  .catch(error => {
+      toastr.error(error.message);
+  });
+    }
+
+render() {
+    return (
+      <div>
+        <MuiThemeProvider>
+          <div>
+          <AppBar
+          style={{
+              backgroundColor : "#00463f" 
+          }}
+             title="Login"
+           />
+
+           <TextField
+             hintText="Enter your Username"
+
+             floatingLabelText="Username"
+             onChange = {(event,newValue) => this.setState({username:newValue})}
+             />
+           <br/>
+             <TextField
+               type="password"
+               hintText="Enter your Password"
+               floatingLabelText="Password"
+               onChange = {(event,newValue) => this.setState({password:newValue})}
+               />
+             <br/>
+             <RaisedButton label="Submit" backgroundColor="#FFFFFF" onClick={(event) => this.handleLogin(event)}/>
+         </div>
+         </MuiThemeProvider>
+      </div>
+    );
+  }
+}
+
+export default Login;
diff --git a/app/js/components/manageApps/ManageApps.jsx b/app/js/components/manageApps/ManageApps.jsx
@@ -102,7 +102,7 @@ export default class ManageApps extends React.Component {
     this.setState({
       searchComplete: false
     });
-    const applicationDistribution = location.href.split('/')[2];
+    const applicationDistribution = location.href.split('/')[2];  
     const urlPrefix = location.href.substr(0, location.href.indexOf('//'));
     const url = location.href.split('/')[3];
     const apiBaseUrl = `/${applicationDistribution}/${url}/ws/rest`;

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "eslint-plugin-import": "^2.7.0",
     "extract-loader": "^1.0.1",
     "jszip": "^3.1.4",
+    "material-ui": "^0.20.0",
     "prop-types": "^15.6.0",
     "react": "^15.4.1",
     "react-bootstrap": "^0.31.2",