Implemented forgetting user.

actions/platform-actions.js

@@ -3,6 +3,7 @@ import platformApi from '../apis/platform-api';
 import {
 	SET_CREDENTIALS,
 	AUTHENTICATE,
+	LOGOUT,
 	GET_DEVICES,
 	GET_DEVICE,
 	GET_REALTIME_UPDATES,
@@ -43,6 +44,10 @@ export const authenticate = createAction(
 	platformApi.authenticate
 );
 
+export const logout = createAction(
+	LOGOUT
+);
+
 export const getRealtimeUpdates = (channel) => (dispatch) => {
 	dispatch(
 		createAction(GET_REALTIME_UPDATES)({

config/constants.js

@@ -1,6 +1,7 @@
 // platform
 export const SET_CREDENTIALS = 'SET_CREDENTIALS';
 export const AUTHENTICATE = 'AUTHENTICATE';
+export const LOGOUT = 'LOGOUT';
 export const GET_DEVICES = 'GET_DEVICES';
 export const GET_DEVICE = 'GET_DEVICE';
 export const GET_DEVICE_LATEST_MEASUREMENTS = 'GET_DEVICE_LATEST_MEASUREMENTS';

gfx/css/views/authentication-view.scss

@@ -1,5 +1,9 @@
 .authentication-view {
 	.login-button {
-		margin-top: 20px;
+		margin-top: 40px;
+	}
+	.forget-button {
+		margin-top: 10px !important;
+		min-width: 100% !important;
 	}
 }

reducers/authentication-reducer.js

@@ -2,12 +2,13 @@ import { handleActions } from 'redux-actions';
 import store from 'store';
 import keyMirror from 'keymirror';
 import { getDefaultAsyncState } from '../libs/redux-promise-loading-middleware';
-import { SET_CREDENTIALS, AUTHENTICATE } from '../config/constants';
+import { SET_CREDENTIALS, AUTHENTICATE, LOGOUT } from '../config/constants';
 
 const StoreKey = keyMirror({
 	AUTHENTICATION_TENANT: null,
 	AUTHENTICATION_USERNAME: null,
 	AUTHENTICATION_PASSWORD: null,
+	AUTHENTICATION_REMEMBERED: null,
 });
 
 const defaultState = {
@@ -16,6 +17,7 @@ const defaultState = {
 		tenant: store.get(StoreKey.AUTHENTICATION_TENANT, ''),
 		username: store.get(StoreKey.AUTHENTICATION_USERNAME, ''),
 		password: store.get(StoreKey.AUTHENTICATION_PASSWORD, ''),
+		isRemembered: store.get(StoreKey.AUTHENTICATION_REMEMBERED, false),
 		isLoggedIn: false,
 		isInvalidCredentials: false,
 	},
@@ -34,6 +36,7 @@ export default handleActions({
 			store.set(StoreKey.AUTHENTICATION_TENANT, state.info.tenant);
 			store.set(StoreKey.AUTHENTICATION_USERNAME, state.info.username);
 			store.set(StoreKey.AUTHENTICATION_PASSWORD, state.info.password);
+			store.set(StoreKey.AUTHENTICATION_REMEMBERED, true);
 		}
 
 		return {
@@ -46,4 +49,22 @@ export default handleActions({
 			},
 		};
 	},
+	[LOGOUT]: (state, action) => {
+		store.remove(StoreKey.AUTHENTICATION_TENANT);
+		store.remove(StoreKey.AUTHENTICATION_USERNAME);
+		store.remove(StoreKey.AUTHENTICATION_PASSWORD);
+		store.remove(StoreKey.AUTHENTICATION_REMEMBERED);
+
+		return {
+			...state,
+			info: {
+				tenant: '',
+				username: '',
+				password: '',
+				isRemembered: false,
+				isLoggedIn: false,
+				isInvalidCredentials: false,
+			},
+		};
+	},
 }, defaultState);

views/AuthenticationView.js

@@ -7,7 +7,7 @@ import CardTitle from 'material-ui/Card/CardTitle';
 import CardMedia from 'material-ui/Card/CardMedia';
 import CardText from 'material-ui/Card/CardText';
 import TextField from 'material-ui/TextField';
-import MenuItem from 'material-ui/MenuItem';
+import FlatButton from 'material-ui/FlatButton';
 import RaisedButton from 'material-ui/RaisedButton';
 import LinearProgress from 'material-ui/LinearProgress';
 
@@ -23,6 +23,7 @@ class AuthenticationView extends Component {
 
 		setCredentials: PropTypes.func.isRequired,
 		authenticate: PropTypes.func.isRequired,
+		logout: PropTypes.func.isRequired,
 	};
 
 	constructor(props) {
@@ -50,12 +51,12 @@ class AuthenticationView extends Component {
 		const isLoggedIn = authentication.info.isLoggedIn;
 		const isFormDisabled = isLoading || isLoggedIn;
 		const loaderStyle = {
-			visibility: isLoading ? 'visible' : 'hidden',
+			visibility: isLoading || isLoggedIn ? 'visible' : 'hidden',
 		};
 
 		return (
 			<div className="authentication-view">
-				<HeaderComponent title="Authentication" menus={this.renderHeaderMenus()} />
+				<HeaderComponent title="Authentication" />
 				<Card className="main-contents">
 					<CardMedia
 						overlay={
@@ -106,6 +107,7 @@ class AuthenticationView extends Component {
 							disabled={isFormDisabled}
 							onTouchTap={() => this.handleLogin()}
 						/>
+						{this.renderForgetButton()}
 					</CardText>
 				</Card>
 			</div>
@@ -136,10 +138,18 @@ class AuthenticationView extends Component {
 		return <MessageComponent {...messageProps} />;
 	}
 
-	renderHeaderMenus() {
-		return [
-			<MenuItem key={1} onTouchTap={() => this.handleLogout()}>Logout</MenuItem>,
-		];
+	renderForgetButton() {
+		if (!this.props.authentication.info.isRemembered) {
+			return null;
+		}
+
+		return (
+			<FlatButton
+				label="Forget user"
+				className="forget-button"
+				onTouchTap={() => this.handleLogout()}
+			/>
+		);
 	}
 
 	handleLogin() {
@@ -153,7 +163,13 @@ class AuthenticationView extends Component {
 	}
 
 	handleLogout() {
-		console.log('logout');
+		this.props.logout();
+
+		this.setState({
+			tenant: '',
+			username: '',
+			password: '',
+		});
 	}
 
 	handleTextFieldChange(event) {
@@ -168,7 +184,7 @@ class AuthenticationView extends Component {
 
 			setTimeout(() => {
 				browserHistory.replace('/devices');
-			}, 2000);
+			}, 1000);
 		}
 	}
 }