Merge pull request #220 from matrix-org/matthew/cancellable-upgrade

allow registration and login from guest to be cancellable
matrix-org · Mar 16, 2016 · 74aad34 · 74aad34
2 parents b58a170 + 90aa422
commit 74aad34
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
@@ -233,10 +233,14 @@ module.exports = React.createClass({
         switch (payload.action) {
             case 'logout':
                 if (window.localStorage) {
+                    var hsUrl = this.getCurrentHsUrl();
+                    var isUrl = this.getCurrentIsUrl();
                     window.localStorage.clear();
                     // preserve our HS & IS URLs for convenience
-                    window.localStorage.setItem("mx_hs_url", this.getCurrentHsUrl());
-                    window.localStorage.setItem("mx_is_url", this.getCurrentIsUrl());
+                    // N.B. we cache them in hsUrl/isUrl and can't really inline them
+                    // as getCurrentHsUrl() may call through to localStorage.
+                    window.localStorage.setItem("mx_hs_url", hsUrl);
+                    window.localStorage.setItem("mx_is_url", isUrl);
                 }
                 Notifier.stop();
                 UserActivity.stop();
@@ -282,11 +286,31 @@ module.exports = React.createClass({
                     screen: 'post_registration'
                 });
                 break;
+            case 'start_login_from_guest':
+                this.replaceState({
+                    screen: 'login',
+                    guestCreds: { // stash our guest creds so we can backout if needed
+                        userId: MatrixClientPeg.get().credentials.userId,
+                        accessToken: MatrixClientPeg.get().getAccessToken(),
+                        homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
+                        identityServerUrl: MatrixClientPeg.get().getIdentityServerUrl(),
+                        guest: true
+                    }
+                });
+                this.notifyNewScreen('login');
+                break;            
             case 'start_upgrade_registration':
                 this.replaceState({
                     screen: "register",
                     upgradeUsername: MatrixClientPeg.get().getUserIdLocalpart(),
-                    guestAccessToken: MatrixClientPeg.get().getAccessToken()
+                    guestAccessToken: MatrixClientPeg.get().getAccessToken(),
+                    guestCreds: { // stash our guest creds so we can backout if needed
+                        userId: MatrixClientPeg.get().credentials.userId,
+                        accessToken: MatrixClientPeg.get().getAccessToken(),
+                        homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
+                        identityServerUrl: MatrixClientPeg.get().getIdentityServerUrl(),
+                        guest: true
+                    }
                 });
                 this.notifyNewScreen('register');
                 break;
@@ -865,6 +889,12 @@ module.exports = React.createClass({
         this.showScreen("forgot_password");
     },
 
+    onReturnToGuestClick: function() {
+        // reanimate our guest login
+        this.onLoggedIn(this.state.guestCreds);
+        this.setState({ guestCreds: null });
+    },
+
     onRegistered: function(credentials) {
         this.onLoggedIn(credentials);
         // do post-registration stuff
@@ -1048,7 +1078,9 @@ module.exports = React.createClass({
                     registrationUrl={this.props.registrationUrl}
                     onLoggedIn={this.onRegistered}
                     onLoginClick={this.onLoginClick}
-                    onRegisterClick={this.onRegisterClick} />
+                    onRegisterClick={this.onRegisterClick}
+                    onCancelClick={ this.state.guestCreds ? this.onReturnToGuestClick : null }
+                    />
             );
         } else if (this.state.screen == 'forgot_password') {
             return (
@@ -1071,6 +1103,7 @@ module.exports = React.createClass({
                     customIsUrl={this.getCurrentIsUrl()}
                     onForgotPasswordClick={this.onForgotPasswordClick} 
                     onLoginAsGuestClick={this.props.enableGuest && this.props.config && this.props.config.default_hs_url ? this._registerAsGuest.bind(this, true) : undefined}
+                    onCancelClick={ this.state.guestCreds ? this.onReturnToGuestClick : null }
                     />
             );
         }

diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
@@ -42,6 +42,7 @@ module.exports = React.createClass({displayName: 'Login',
         // login shouldn't care how password recovery is done.
         onForgotPasswordClick: React.PropTypes.func,
         onLoginAsGuestClick: React.PropTypes.func,
+        onCancelClick: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -211,6 +212,15 @@ module.exports = React.createClass({displayName: 'Login',
                     Login as guest
                 </a>
         }
+
+        var returnToAppJsx;
+        if (this.props.onCancelClick) {
+            returnToAppJsx = 
+                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
+                    Return to app
+                </a>
+        }
+
         return (
             <div className="mx_Login">
                 <div className="mx_Login_box">
@@ -235,6 +245,7 @@ module.exports = React.createClass({displayName: 'Login',
                             Create a new account
                         </a>
                         { loginAsGuestJsx }
+                        { returnToAppJsx }
                         <LoginFooter />
                     </div>
                 </div>

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
@@ -44,7 +44,8 @@ module.exports = React.createClass({
         username: React.PropTypes.string,
         guestAccessToken: React.PropTypes.string,
         // registration shouldn't know or care how login is done.
-        onLoginClick: React.PropTypes.func.isRequired
+        onLoginClick: React.PropTypes.func.isRequired,
+        onCancelClick: React.PropTypes.func
     },
 
     getInitialState: function() {
@@ -238,6 +239,15 @@ module.exports = React.createClass({
                 <Spinner />
             );
         }
+
+        var returnToAppJsx;
+        if (this.props.onCancelClick) {
+            returnToAppJsx = 
+                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
+                    Return to app
+                </a>
+        }
+
         return (
             <div>
                 <h2>Create an account</h2>
@@ -258,6 +268,7 @@ module.exports = React.createClass({
                 <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
                     I already have an account
                 </a>
+                { returnToAppJsx }
             </div>
         );
     },