feat: Update Reset Password modal to a full page route

imports/plugins/core/accounts/client/components/login.js

@@ -54,9 +54,10 @@ class Login extends Component {
   }
 
   render() {
+    const currentRoute = Router.current().route;
+    const isOauthFlow = currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.oauthLoginFlow;
+    const idpFormClass = isOauthFlow ? "idp-form" : "";
     if (this.state.currentView === "loginFormSignInView" || this.state.currentView === "loginFormSignUpView") {
-      const currentRoute = Router.current().route;
-      const isOauthFlow = currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.oauthLoginFlow;
       if (isOauthFlow) {
         return (
           <Components.OAuthFormContainer
@@ -81,12 +82,14 @@ class Login extends Component {
       );
     } else if (this.state.currentView === "loginFormResetPasswordView") {
       return (
-        <Components.ForgotPassword
-          credentials={this.props.credentials}
-          uniqueId={this.props.uniqueId}
-          currentView={this.state.currentView}
-          onSignInClick={this.showSignInView}
-        />
+        <div className={idpFormClass}>
+          <Components.ForgotPassword
+            credentials={this.props.credentials}
+            uniqueId={this.props.uniqueId}
+            currentView={this.state.currentView}
+            onSignInClick={this.showSignInView}
+          />
+        </div>
       );
     }
   }

imports/plugins/core/accounts/client/components/updatePasswordOverlay.js → imports/plugins/core/accounts/client/components/updatePassword.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import { Components } from "@reactioncommerce/reaction-components";
 
-class UpdatePasswordOverlay extends Component {
+class UpdatePassword extends Component {
   static propTypes = {
     isDisabled: PropTypes.bool,
     isOpen: PropTypes.bool,
@@ -93,30 +93,27 @@ class UpdatePasswordOverlay extends Component {
 
     if (type === "setPassword") {
       return (
-        <div className="col-sm-6">
-          <Components.Button
-            className="btn-block"
-            primary={true}
-            bezelStyle="solid"
-            i18nKeyLabel="accountsUI.setPassword"
-            label="Set your password"
-            type="submit"
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div className="col-sm-6">
         <Components.Button
           className="btn-block"
           primary={true}
           bezelStyle="solid"
-          i18nKeyLabel="accountsUI.updatePasswordAndContinue"
-          label="Update and continue"
+          i18nKeyLabel="accountsUI.setPassword"
+          label="Set your password"
           type="submit"
         />
-      </div>
+      );
+    }
+
+    return (
+      <Components.Button
+        className="btn-block"
+        primary={true}
+        bezelStyle="solid"
+        i18nKeyLabel="accountsUI.submit"
+        label="Submit"
+        type="submit"
+        disabled={this.props.isDisabled}
+      />
     );
   }
 
@@ -138,7 +135,7 @@ class UpdatePasswordOverlay extends Component {
     }
 
     return (
-      <Components.Translation defaultValue="Update Your Password" i18nKey="accountsUI.updateYourPassword"/>
+      <Components.Translation defaultValue="Set New Password" i18nKey="accountsUI.updateYourPassword"/>
     );
   }
 
@@ -152,64 +149,42 @@ class UpdatePasswordOverlay extends Component {
     return (
       <div>
         {this.props.isOpen === true &&
-        <div>
-          <div className="modal-backdrop fade in" id={`modal-backdrop-${this.props.uniqueId}`}/>
-          <div className="modal fade in" id={`modal-${this.props.uniqueId}`} style={{ display: "block" }}>
-            <div className="modal-dialog">
-              {showSpinner ? this.renderSpinnerOnLoad() :
-                <form className="modal-content" onSubmit={this.handleSubmit}>
-                  <div className="modal-header">
-                    <h4 className="modal-title">
-                      {this.renderPasswordResetText()}
-                    </h4>
-                  </div>
-
-                  <div className="modal-body">
-                    <div className="login-form">
-
-                      {this.renderFormMessages()}
-
-                      <div className={passwordClasses}>
-                        <Components.TextField
-                          i18nKeyLabel="accountsUI.password"
-                          label="Password"
-                          name="password"
-                          type="password"
-                          id={`password-${this.props.uniqueId}`}
-                          value={this.state.password}
-                          onChange={this.handleFieldChange}
-                        />
-                        {this.renderPasswordErrors()}
-                      </div>
-
-                    </div>
-                  </div>
-
-                  <div className="modal-footer">
-                    {this.renderSpinnerOnWait()}
-
-                    <div className="col-sm-6">
-                      <Components.Button
-                        className="btn-block"
-                        status="danger"
-                        bezelStyle="solid"
-                        i18nKeyLabel="app.cancel"
-                        label="Cancel"
-                        type="button"
-                        onClick={this.handleCancel}
-                        disabled={this.props.isDisabled}
-                      />
-                    </div>
+          <div className="idp-form col-sm-4 col-sm-offset-4">
+            {showSpinner ? this.renderSpinnerOnLoad() :
+              <form onSubmit={this.handleSubmit}>
+                <div className="loginForm-title">
+                  <h2>
+                    {this.renderPasswordResetText()}
+                  </h2>
+                </div>
+                <div className="login-form">
+
+                  {this.renderFormMessages()}
+
+                  <div className={passwordClasses}>
+                    <Components.TextField
+                      i18nKeyLabel="accountsUI.password"
+                      label="Password"
+                      name="password"
+                      type="password"
+                      id={`password-${this.props.uniqueId}`}
+                      value={this.state.password}
+                      onChange={this.handleFieldChange}
+                    />
+                    {this.renderPasswordErrors()}
                   </div>
+                </div>
 
-                </form>
-              }
-            </div>
+                <div className="form-group">
+                  {this.renderSpinnerOnWait()}
+                </div>
+              </form>
+            }
           </div>
-        </div>}
+        }
       </div>
     );
   }
 }
 
-export default UpdatePasswordOverlay;
+export default UpdatePassword;

imports/plugins/core/accounts/client/containers/passwordOverlay.js → imports/plugins/core/accounts/client/containers/updatePassword.js

@@ -5,17 +5,16 @@ import Random from "@reactioncommerce/random";
 import { Accounts } from "meteor/accounts-base";
 import { Meteor } from "meteor/meteor";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
-import { Reaction } from "/client/api";
+import { Router } from "/client/api";
 import { LoginFormValidation } from "/lib/api";
-import UpdatePasswordOverlay from "../components/updatePasswordOverlay";
+import UpdatePassword from "../components/updatePassword";
 
 const wrapComponent = (Comp) => (
-  class UpdatePasswordOverlayContainer extends Component {
+  class UpdatePasswordContainer extends Component {
     static propTypes = {
       callback: PropTypes.func,
       formMessages: PropTypes.object,
       isOpen: PropTypes.bool,
-      token: PropTypes.string,
       type: PropTypes.string,
       uniqueId: PropTypes.string
     }
@@ -64,8 +63,8 @@ const wrapComponent = (Comp) => (
         });
         return;
       }
-
-      Accounts.resetPassword(this.props.token, password, (error) => {
+      const { token } = Router.current().params;
+      Accounts.resetPassword(token, password, (error) => {
         if (error) {
           this.setState({
             isDisabled: false,
@@ -76,15 +75,7 @@ const wrapComponent = (Comp) => (
         } else {
           // Now that Meteor.users is verified, we should do the same with the Accounts collection
           Meteor.call("accounts/verifyAccount");
-
-          this.props.callback();
-
-          this.setState({
-            isOpen: !this.state.isOpen
-          });
-
-          const shopId = Reaction.getUserPreferences("reaction", "activeShopId");
-          Reaction.setShopId(shopId);
+          Router.go(`${Router.current().route.fullPath}/completed`);
         }
       });
     }
@@ -111,6 +102,27 @@ const wrapComponent = (Comp) => (
     }
 
     render() {
+      const { status } = Router.current().params;
+      if (status === "completed") {
+        return (
+          <div className="idp-form col-sm-4 col-sm-offset-4">
+            <div className="loginForm-title">
+              <h3>
+                <Components.Translation
+                  defaultValue="Password Reset Successful"
+                  i18nKey="accountsUI.info.passwordResetDone"
+                />
+              </h3>
+            </div>
+            <p className="text-center">
+              <Components.Translation
+                defaultValue="Return to the app to continue"
+                i18nKey="accountsUI.info.passwordResetDoneText"
+              />
+            </p>
+          </div>
+        );
+      }
       return (
         <Comp
           uniqueId={this.props.uniqueId}
@@ -128,6 +140,6 @@ const wrapComponent = (Comp) => (
   }
 );
 
-registerComponent("UpdatePasswordOverlay", UpdatePasswordOverlay, wrapComponent);
+registerComponent("UpdatePassword", UpdatePassword, wrapComponent);
 
-export default wrapComponent(UpdatePasswordOverlay);
+export default wrapComponent(UpdatePassword);

imports/plugins/core/accounts/client/index.js

@@ -20,7 +20,7 @@ export { default as PermissionsList } from "./components/permissionsList";
 export { default as SignIn } from "./components/signIn";
 export { default as SignUp } from "./components/signUp";
 export { default as UpdateEmail } from "./containers/updateEmail";
-export { default as UpdatePasswordOverlay } from "./components/updatePasswordOverlay";
+export { default as UpdatePassword } from "./components/updatePassword";
 export { default as LoginInline } from "./components/loginInline";
 
 export { default as AccountsDashboardContainer } from "./containers/accountsDashboardContainer";
@@ -31,7 +31,7 @@ export { default as EditGroupContainer } from "./containers/editGroupContainer";
 export { default as ForgotPasswordContainer } from "./containers/forgotPassword";
 export { default as MainDropdownContainer } from "./containers/mainDropdown";
 export { default as MessagesContainer } from "./containers/messages";
-export { default as UpdatePasswordOverlayContainer } from "./containers/passwordOverlay";
+export { default as UpdatePasswordContainer } from "./containers/updatePassword";
 export { default as LoginInlineContainer } from "./containers/loginInline";
 export { default as VerifyAccount } from "./containers/verifyAccount";
 

imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.html

@@ -1,5 +1,5 @@
-<template name="loginFormUpdatePasswordOverlay">
-  <div class="loginFormUpdatePasswordOverlay">
+<template name="loginFormUpdatePassword">
+  <div class="loginFormUpdatePassword">
     {{> React component }}
   </div>
 </template>

imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.js

@@ -9,18 +9,6 @@ import { LoginFormSharedHelpers } from "../../helpers";
 import { getComponent } from "/imports/plugins/core/components/lib";
 import { LoginFormValidation } from "/lib/api";
 
-/**
- * Accounts Event: onResetPasswordLink When a user uses a password reset link
- */
-Accounts.onResetPasswordLink((token, done) => {
-  Blaze.renderWithData(Template.loginFormUpdatePasswordOverlay, {
-    token,
-    callback: done,
-    isOpen: true,
-    type: "updatePassword"
-  }, $("body").get(0));
-});
-
 /**
  * Accounts Event: onEnrollmentLink When a user uses an enrollment link
  */
@@ -36,14 +24,14 @@ Accounts.onEnrollmentLink((token, done) => {
 
 // ----------------------------------------------------------------------------
 // /**
-//  * Helpers: Login Form Update Password Overlay
+//  * Helpers: Login Form Update Password
 //  */
-Template.loginFormUpdatePasswordOverlay.helpers({
+Template.loginFormUpdatePassword.helpers({
   component() {
-    const currentData = Template.currentData() || {};
     return {
-      ...currentData,
-      component: getComponent("UpdatePasswordOverlay")
+      component: getComponent("UpdatePassword"),
+      isOpen: true,
+      type: "updatePassword"
     };
   }
 });

imports/plugins/core/accounts/register.js

@@ -65,6 +65,13 @@ Reaction.registerPackage({
     label: "Profile",
     icon: "fa fa-user",
     provides: ["userAccountDropdown"]
+  }, {
+    route: "/reset-password/:token/:status?",
+    template: "loginFormUpdatePassword",
+    workflow: "none",
+    meta: { noAdminControls: true },
+    name: "Reset Password",
+    label: "reset-password"
   }],
   layout: [{
     layout: "coreLayout",

imports/plugins/core/accounts/server/methods/sendResetPasswordEmail.js

@@ -9,6 +9,10 @@ import { Shops } from "/lib/collections";
 import Reaction from "/imports/plugins/core/core/server/Reaction";
 import ReactionError from "@reactioncommerce/reaction-error";
 
+Accounts.urls.resetPassword = function reset(token) {
+  return Meteor.absoluteUrl(`reset-password/${token}`);
+};
+
 /**
  * @method sendResetEmail
  * @memberof Core

imports/plugins/core/hydra-oauth/client/containers/auth.js

@@ -139,7 +139,7 @@ class OAuthFormContainer extends Component {
 
   render() {
     return (
-      <div>
+      <div className="idp-form">
         {this.renderAuthView()}
       </div>
     );

imports/plugins/core/hydra-oauth/register.js

@@ -14,7 +14,10 @@ Reaction.registerPackage({
     route: "/account/login",
     name: "OAuth Login",
     label: "oauth-login",
-    meta: { oauthLoginFlow: true },
+    meta: {
+      noAdminControls: true,
+      oauthLoginFlow: true
+    },
     description: "Oauth Login Provider Page",
     workflow: "hydraOauthLogin",
     template: "hydraOauthLoginForm"