Skip to content

Commit

Permalink
Create Login page for Add-On Manager (#131)
Browse files Browse the repository at this point in the history
  • Loading branch information
Annettesunday authored and dkayiwa committed Feb 8, 2018
1 parent d2682c2 commit b284e1d
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 9 deletions.
74 changes: 74 additions & 0 deletions app/css/openmrs-addonmanager.css
Original file line number Diff line number Diff line change
Expand Up @@ -845,3 +845,77 @@ body.loading .waiting-modal {
text-align: center;
padding: 4%;
}
.style{
background-color: #00463f;
}
.text-box{
width: 30%;
}
.well {
flex-grow: 1;
max-width: 500px;
margin: 0 auto;
text-align: center;
box-shadow: none;
background: rgba(0, 70, 63, 0.9);
box-shadow: 0px 6px 60px 0px rgba(38, 51, 64, 0.08);
border: none;
border-radius: 6px;
padding: 50px 60px;
margin-top: 10%;
}
h2 {
font-size: 24px;
font-weight: 300;
margin-top: 0;
margin-bottom: 40px;
color: #263340;
}
.form-group {
position: relative;
margin-top: 25px;
margin-bottom: 20px;
}
input[type="text"].form-control,
input[type="password"].form-control,
{
height: 48px;
background: none;
border-radius: 0;
box-shadow: none;
font-weight: 300;
color: #263340;
padding-left: 0;
padding-right: 0;
border: none;
border-bottom: 1px solid #ddd;
transition: all .1s ease-in-out;
position: relative;
z-index: 2;
}
.btn-login {
font-size: 12px;
text-transform: uppercase;
font-weight: 300;
padding: 14px 40px;
min-width: 170px;
border: none;
border-radius: 30px;
background: #ec5418;
transition: all .2s ease-in-out;
margin-top: 30px;
}
.helper-text {
font-size: 15px;
font-weight: 300;
margin-top: 20px;
color: #fff;
}

.signinHelp {
text-decoration: underline;
}

.signinHelp:hover {
color: black;
}
8 changes: 5 additions & 3 deletions app/js/Routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,22 @@
* Copyright (C) OpenMRS Inc. OpenMRS is a registered trademark and the OpenMRS
* graphic logo is a trademark of OpenMRS Inc.
*/
import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import React, { Component } from 'react';
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} >
<Route path="/login" component={Login} />
<Route path="/" component={App}>
<IndexRoute component={ManageApps} />
<Route path="manageSettings" component={ManageSettings} />
<Route path="help" component={Help} />
Expand Down
5 changes: 2 additions & 3 deletions app/js/components/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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});
});
}

Expand Down
15 changes: 13 additions & 2 deletions app/js/components/common/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
*/

import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { ApiHelper } from '../../helpers/apiHelper';
import BreadCrumbComponent from '../breadCrumb/BreadCrumbComponent';
import axios from 'axios';
Expand All @@ -32,6 +33,7 @@ export default class Header extends Component {
this.fetchLocation = this.fetchLocation.bind(this);
this.getOpenmrsUrl = this.getOpenmrsUrl.bind(this);
this.setOpenMRSLocation = this.setOpenMRSLocation.bind(this);
this.logOut = this.logOut.bind(this);
}

componentWillMount() {
Expand Down Expand Up @@ -85,7 +87,7 @@ export default class Header extends Component {
let url = location.links[0].uri;
let arrUrl = url.split("/");
let applicationInUse = arrUrl[3].search('http:') == -1 ? arrUrl[3] : arrUrl[3].replace('http:', '');
let customUrl = `/${applicationInUse}/appui/header/logout.action?successUrl=${applicationInUse}`;
let customUrl = `/${applicationInUse}/logout`;
this.setState((prevState, props) => {
return {
currentLogOutUrl: customUrl
Expand Down Expand Up @@ -174,6 +176,15 @@ export default class Header extends Component {
return menuDisplay;
}

logOut(event){
axios.get(this.state.currentLogOutUrl).then((response) => {
hashHistory.push('/login')
})
.catch(error => {
toastr.error(error.messsage);
});
}

render() {
return (
<div style={{...this.props.style, zIndex: 1}}>
Expand Down Expand Up @@ -208,7 +219,7 @@ export default class Header extends Component {
</ul>
</li>
<li>
<a href={this.state.currentLogOutUrl}>Logout {' '}
<a onClick={(event) => this.logOut(event)}>Logout {' '}
<span className="glyphicon glyphicon-log-out"/></a>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion app/js/components/manageApps/Addon.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ class Addon extends Component {
});
});
}).catch((error) => {
error && error.response && error.response.status === 401 ? location.href = `${location.href.substr(0, location.href.indexOf(location.href.split('/')[4]))}login.htm` : null;
error.response.status === 401 ? location.href = `${location.href.substr(0, location.href.indexOf(location.href.split('/')[4]))}login.htm` : null;
this.setState({ loadingComplete: true });
});

Expand Down
95 changes: 95 additions & 0 deletions app/js/components/manageApps/Login.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import axios from 'axios';
import { Form, Button, FormControl, FormGroup, Col, ControlLabel, Checkbox, Nav, Modal } from 'react-bootstrap';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
show: false
}
this.handleLogin = this.handleLogin.bind(this);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}

handleLogin(event) {
event.preventDefault();
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 => {
(response.data.authenticated) ? hashHistory.push('/') : toastr.error('Invalid username or password');
})
.catch(error => {
toastr.error(error.message);
});
}

render() {
return (
<div className="well">
<a href="../../">
<img src="img/openmrs-with-title-small.png" />
</a>
<div className='form-group'>
<Form className='material-form' onSubmit={(event) => this.handleLogin(event)}>
<FormGroup controlId="formHorizontalUsername">
<FormControl
input type="text"
placeholder="Username"
onChange={event => this.setState({ username: event.target.value })}
/>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<FormControl
input type="password"
placeholder="Password"
floatingLabelText="Password"
onChange={(event) => this.setState({ password: event.target.value })}
/>
</FormGroup>
<FormGroup>
<Button className="btn-login btn-primary btn-lg"
type="submit"
>Log in</Button>
</FormGroup>
<p className="helper-text">Having trouble logging in? <a className="signinHelp" onClick={(event) => this.handleShow} >Click here</a> for help.</p>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>OpenMRS login</Modal.Title>
</Modal.Header>
<Modal.Body>
Please contact system administrator
</Modal.Body>
<Modal.Footer>
<Button onClick={(event) => this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</Form >
</div>
</div>
);
}
}

export default Login;

0 comments on commit b284e1d

Please sign in to comment.