PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Implement SessionStore

Browse source 
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)
This commit is contained in:
Luke Barnard 2017-05-12 12:02:45 +01:00
parent 8725ef3863
commit 1176573f39
6 changed files with 104 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/Lifecycle.js
View file

@ -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);
isPasswordStored = true;
// Update SessionStore
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();

3
src/components/structures/LoggedInView.js
View file

@ -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;

29
src/components/structures/MatrixChat.js
View file

@ -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}
/>

4
src/components/structures/UserSettings.js
View file

@ -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} />
);

25
src/components/views/settings/ChangePassword.js
View file

@ -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>

63
src/stores/SessionStore.js Normal file
View file

@ -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;
}