Implement SessionStore

This wraps session-related state into a basic flux store. The localStorage item 'mx_pass' is the only thing managed by this store for now but it could easily be extended to track other items (like the teamToken which is passed around through props a lot)

src/Lifecycle.js

@@ -289,7 +289,6 @@ export function setLoggedIn(credentials) {
 
     // Resolves by default
     let teamPromise = Promise.resolve(null);
-    let isPasswordStored = false;
 
     // persist the session
     if (localStorage) {
@@ -312,8 +311,11 @@ export function setLoggedIn(credentials) {
             // The user registered as a PWLU (PassWord-Less User), the generated password
             // is cached here such that the user can change it at a later time.
             if (credentials.password) {
-                localStorage.setItem("mx_pass", credentials.password);
+                // Update SessionStore
-                isPasswordStored = true;
+                dis.dispatch({
+                    action: 'cached_password',
+                    cachedPassword: credentials.password,
+                });
             }
 
             console.log("Session persisted for %s", credentials.userId);
@@ -339,10 +341,10 @@ export function setLoggedIn(credentials) {
     MatrixClientPeg.replaceUsingCreds(credentials);
 
     teamPromise.then((teamToken) => {
-        dis.dispatch({action: 'on_logged_in', teamToken: teamToken, isPasswordStored});
+        dis.dispatch({action: 'on_logged_in', teamToken: teamToken});
     }, (err) => {
         console.warn("Failed to get team token on login", err);
-        dis.dispatch({action: 'on_logged_in', teamToken: null, isPasswordStored});
+        dis.dispatch({action: 'on_logged_in', teamToken: null});
     });
 
     startMatrixClient();

src/components/structures/LoggedInView.js

@@ -51,7 +51,7 @@ export default React.createClass({
 
         // Has the user generated a password that is stored in local storage?
         // (are they a PWLU?)
-        userHasGeneratedPassword: React.PropTypes.boolean,
+        userHasGeneratedPassword: React.PropTypes.bool,
 
         // and lots and lots of other stuff.
     },
@@ -216,7 +216,6 @@ export default React.createClass({
                     enableLabs={this.props.config.enableLabs}
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
-                    cachedPassword={this.props.cachedPassword}
                 />;
                 if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;

src/components/structures/MatrixChat.js

@@ -40,6 +40,8 @@ var PageTypes = require('../../PageTypes');
 var createRoom = require("../../createRoom");
 import * as UDEHandler from '../../UnknownDeviceErrorHandler';
 
+import getSessionStore from '../../stores/SessionStore';
+
 module.exports = React.createClass({
     displayName: 'MatrixChat',
 
@@ -139,8 +141,7 @@ module.exports = React.createClass({
             register_is_url: null,
             register_id_sid: null,
 
-            // Initially, use localStorage as source of truth
+            userHasGeneratedPassword: false,
-            userHasGeneratedPassword: localStorage && localStorage.getItem('mx_pass'),
         };
         return s;
     },
@@ -249,6 +250,10 @@ module.exports = React.createClass({
                 register_hs_url: paramHs,
             });
         }
+
+        this._sessionStore = getSessionStore();
+        this._sessionStore.on('update', this._setStateFromSessionStore);
+        this._setStateFromSessionStore();
     },
 
     componentDidMount: function() {
@@ -590,12 +595,6 @@ module.exports = React.createClass({
                     payload.releaseNotes
                 );
                 break;
-            case 'password_changed':
-                this.setState({
-                    userHasGeneratedPassword: false,
-                });
-                localStorage.removeItem("mx_pass");
-                break;
         }
     },
 
@@ -765,15 +764,11 @@ module.exports = React.createClass({
     /**
      * Called when a new logged in session has started
      */
-    _onLoggedIn: function(teamToken, isPasswordStored) {
+    _onLoggedIn: function(teamToken) {
         this.setState({
             guestCreds: null,
             loggedIn: true,
             loggingIn: false,
-            // isPasswordStored only true when ROU sets a username and becomes PWLU.
-            // (the password was randomly generated and stored in localStorage).
-            userHasGeneratedPassword:
-                this.state.userHasGeneratedPassword || isPasswordStored,
         });
 
         if (teamToken) {
@@ -902,6 +897,12 @@ module.exports = React.createClass({
         });
     },
 
+    _setStateFromSessionStore() {
+        this.setState({
+            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
+        });
+    },
+
     onFocus: function(ev) {
         dis.dispatch({action: 'focus_composer'});
     },
@@ -1182,8 +1183,6 @@ module.exports = React.createClass({
                     onUserSettingsClose={this.onUserSettingsClose}
                     onRegistered={this.onRegistered}
                     teamToken={this._teamToken}
-                    cachedPassword={this.state.userHasGeneratedPassword ?
-                        localStorage.getItem('mx_pass') : null}
                     {...this.props}
                     {...this.state}
                 />

src/components/structures/UserSettings.js

@@ -139,9 +139,6 @@ module.exports = React.createClass({
         // Team token for the referral link. If falsy, the referral section will
         // not appear
         teamToken: React.PropTypes.string,
-
-        // the user is a PWLU (/w password stashed in localStorage 'mx_pass')
-        cachedPassword: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -898,7 +895,6 @@ module.exports = React.createClass({
                         rowLabelClassName="mx_UserSettings_profileLabelCell"
                         rowInputClassName="mx_UserSettings_profileInputCell"
                         buttonClassName="mx_UserSettings_button mx_UserSettings_changePasswordButton"
-                        cachedPassword={this.props.cachedPassword}
                         onError={this.onPasswordChangeError}
                         onFinished={this.onPasswordChanged} />
             );

src/components/views/settings/ChangePassword.js

@@ -22,6 +22,8 @@ var Modal = require("../../../Modal");
 var sdk = require("../../../index");
 import AccessibleButton from '../elements/AccessibleButton';
 
+import getSessionStore from '../../../stores/SessionStore';
+
 module.exports = React.createClass({
     displayName: 'ChangePassword',
     propTypes: {
@@ -32,9 +34,6 @@ module.exports = React.createClass({
         rowLabelClassName: React.PropTypes.string,
         rowInputClassName: React.PropTypes.string,
         buttonClassName: React.PropTypes.string,
-
-        // user is a PWLU (/w password stashed in localStorage 'mx_pass')
-        cachedPassword: React.PropTypes.string,
     },
 
     Phases: {
@@ -63,10 +62,24 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            phase: this.Phases.Edit
+            phase: this.Phases.Edit,
+            cachedPassword: null,
         };
     },
 
+    componentWillMount: function() {
+        this.sessionStore = getSessionStore();
+        this.sessionStore.on('update', this.setStateFromSessionStore);
+
+        this.setStateFromSessionStore();
+    },
+
+    setStateFromSessionStore: function() {
+        this.setState({
+            cachedPassword: this.sessionStore.getCachedPassword(),
+        });
+    },
+
     changePassword: function(old_password, new_password) {
         var cli = MatrixClientPeg.get();
 
@@ -127,7 +140,7 @@ module.exports = React.createClass({
     },
 
     onClickChange: function() {
-        var old_password = this.props.cachedPassword || this.refs.old_input.value;
+        var old_password = this.state.cachedPassword || this.refs.old_input.value;
         var new_password = this.refs.new_input.value;
         var confirm_password = this.refs.confirm_input.value;
         var err = this.props.onCheckPassword(
@@ -148,7 +161,7 @@ module.exports = React.createClass({
         const buttonClassName = this.props.buttonClassName;
 
         let currentPassword = null;
-        if (!this.props.cachedPassword) {
+        if (!this.state.cachedPassword) {
             currentPassword = <div className={rowClassName}>
                 <div className={rowLabelClassName}>
                     <label htmlFor="passwordold">Current password</label>

src/stores/SessionStore.js

@@ -0,0 +1,63 @@
+import dis from '../dispatcher';
+import EventEmitter from 'events';
+
+/**
+ * A class for storing application state to do with the session. This is a simple flux
+ * store that listens for actions and updates its state accordingly, informing any
+ * listeners (views) of state changes via the 'update' event.
+ */
+function SessionStore() {
+    // Initialise state
+    this._state = {
+        cachedPassword: localStorage.getItem('mx_pass'),
+    };
+
+    dis.register(this._onAction.bind(this));
+}
+
+// Inherit from EventEmitter
+SessionStore.prototype = EventEmitter.prototype;
+
+SessionStore.prototype._update = function() {
+    // Persist state to localStorage
+    if (this._state.cachedPassword) {
+        localStorage.setItem('mx_pass', this._state.cachedPassword);
+    } else {
+        localStorage.removeItem('mx_pass', this._state.cachedPassword);
+    }
+
+    this.emit('update');
+};
+
+SessionStore.prototype._setState = function(newState) {
+    this._state = Object.assign(this._state, newState);
+    this._update();
+};
+
+SessionStore.prototype._onAction = function(payload) {
+    switch (payload.action) {
+        case 'cached_password':
+            this._setState({
+                cachedPassword: payload.cachedPassword,
+            });
+            break;
+        case 'password_changed':
+            this._setState({
+                cachedPassword: null,
+            });
+            break;
+    }
+};
+
+SessionStore.prototype.getCachedPassword = function() {
+    return this._state.cachedPassword;
+};
+
+// Export singleton getter
+let singletonSessionStore = null;
+export default function getSessionStore() {
+    if (!singletonSessionStore) {
+        singletonSessionStore = new SessionStore();
+    }
+    return singletonSessionStore;
+}