Merge pull request #11 from Unleash/prompt_username

Show a dialog if the username cookie is not set.

frontend/src/component/app.jsx

@@ -3,6 +3,8 @@ import { Layout, Panel, NavDrawer, AppBar } from 'react-toolbox';
 import style from './styles.scss';
 import ErrorContainer from './error/error-container';
 
+import UserContainer from './user/user-container';
+
 import Navigation from './nav';
 
 export default class App extends Component {
@@ -28,6 +30,7 @@ export default class App extends Component {
                         </NavDrawer>
                         <Panel scrollY>
                             <div style={{ padding: '1.8rem' }}>
+                                <UserContainer />
                                 {this.props.children}
                             </div>
                         </Panel>

frontend/src/component/user/user-component.jsx

@@ -0,0 +1,48 @@
+import React, { PropTypes } from 'react';
+import Dialog from 'react-toolbox/lib/dialog';
+import Input from 'react-toolbox/lib/input';
+
+class ErrorComponent extends React.Component {
+    static propTypes () {
+        return {
+            user: PropTypes.object.isRequired,
+            updateUserName: PropTypes.func.isRequired,
+        };
+    }
+
+    handleSubmit = (evt) => {
+        evt.preventDefault();
+        this.props.save();
+    }
+
+    render () {
+        const actions = [
+            { label: 'Save', onClick: this.props.save },
+        ];
+
+        return (
+            <Dialog
+                active={this.props.user.showDialog}
+                title="Action required"
+                actions={actions}
+            >
+
+                <p>
+                    You hav to specify a username to use Unleash. This will allow us to track changes.
+                </p>
+                <form onSubmit={this.handleSubmit}>
+                    <Input
+                        type="text"
+                        label="USERNAME"
+                        name="username"
+                        required
+                        value={this.props.user.userName}
+                        onChange={(v) => this.props.updateUserName(v)}
+                    />
+                </form>
+            </Dialog>
+        );
+    }
+}
+
+export default ErrorComponent;

frontend/src/component/user/user-container.jsx

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import UserComponent from './user-component';
+import { updateUserName, save } from '../../store/user/actions';
+
+
+const mapDispatchToProps = {
+    updateUserName,
+    save,
+};
+
+const mapStateToProps = (state) =>  ({
+    user: state.user.toJS(),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserComponent);

frontend/src/store/index.js

@@ -10,6 +10,7 @@ import metrics from './metrics-store';
 import clientStrategies from './client-strategy-store';
 import clientInstances from './client-instance-store';
 import settings from './settings';
+import user from './user';
 
 const unleashStore = combineReducers({
     features,
@@ -23,6 +24,7 @@ const unleashStore = combineReducers({
     clientStrategies,
     clientInstances,
     settings,
+    user,
 });
 
 export default unleashStore;

frontend/src/store/user/actions.js

@@ -0,0 +1,11 @@
+export const USER_UPDATE_USERNAME = 'USER_UPDATE_USERNAME';
+export const USER_SAVE = 'USER_SAVE';
+
+export const updateUserName = (value) => ({
+    type: USER_UPDATE_USERNAME,
+    value,
+});
+
+export const save = () => ({
+    type: USER_SAVE,
+});

frontend/src/store/user/index.js

@@ -0,0 +1,57 @@
+import { Map as $Map } from 'immutable';
+import { USER_UPDATE_USERNAME, USER_SAVE } from './actions';
+
+const COOKIE_NAME = 'username';
+
+// Ref: http://stackoverflow.com/questions/10730362/get-cookie-by-name
+function readCookie () {
+    const nameEQ = `${COOKIE_NAME}=`;
+    const ca = document.cookie.split(';');
+    for (let i = 0;i < ca.length;i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') { // eslint-disable-line eqeqeq
+            c = c.substring(1, c.length);
+        }
+        if (c.indexOf(nameEQ) === 0) {
+            return c.substring(nameEQ.length, c.length);
+        }
+    }
+}
+
+function writeCookie (userName) {
+    document.cookie = `${COOKIE_NAME}=${userName}; expires=Thu, 18 Dec 2099 12:00:00 UTC`;
+}
+
+
+function getInitState () {
+    const userName = readCookie(COOKIE_NAME);
+    const showDialog = !userName;
+    return new $Map({ userName, showDialog });
+}
+
+function updateUserName (state, action) {
+    return state.set('userName', action.value);
+}
+
+function save (state) {
+    const userName = state.get('userName');
+    if (userName) {
+        writeCookie(userName);
+        return state.set('showDialog', false);
+    } else {
+        return state;
+    }
+}
+
+const settingStore = (state = getInitState(), action) => {
+    switch (action.type) {
+        case USER_UPDATE_USERNAME:
+            return updateUserName(state, action);
+        case USER_SAVE:
+            return save(state);
+        default:
+            return state;
+    }
+};
+
+export default settingStore;