+ );
+ }
+}
+
+export default ErrorComponent;
diff --git a/frontend/src/component/user/user-container.jsx b/frontend/src/component/user/user-container.jsx
new file mode 100644
index 0000000000..6723a4a879
--- /dev/null
+++ b/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);
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 8e75abe331..4b5025fa25 100644
--- a/frontend/src/store/index.js
+++ b/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;
diff --git a/frontend/src/store/user/actions.js b/frontend/src/store/user/actions.js
new file mode 100644
index 0000000000..786df071da
--- /dev/null
+++ b/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,
+});
diff --git a/frontend/src/store/user/index.js b/frontend/src/store/user/index.js
new file mode 100644
index 0000000000..c089abe067
--- /dev/null
+++ b/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;