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/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: localStorage && localStorage.getItem('mx_pass'),
+            userHasGeneratedPassword: false,
         };
         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>