Password reset flow for auth IDP

reactioncommerce · Sep 18, 2018 · 27bf047 · 27bf047
1 parent 9e3920f
commit 27bf047
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 57 deletions.
diff --git a/imports/plugins/core/accounts/client/components/updatePasswordOverlay.js b/imports/plugins/core/accounts/client/components/updatePasswordOverlay.js
@@ -3,6 +3,9 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import { Components } from "@reactioncommerce/reaction-components";
 
+/* eslint-disable require-jsdoc */
+/* eslint-disable react/no-deprecated */
+
 class UpdatePasswordOverlay extends Component {
   static propTypes = {
     isDisabled: PropTypes.bool,
@@ -93,7 +96,7 @@ class UpdatePasswordOverlay extends Component {
 
     if (type === "setPassword") {
       return (
-        <div className="col-sm-6">
+        <div>
           <Components.Button
             className="btn-block"
             primary={true}
@@ -107,14 +110,15 @@ class UpdatePasswordOverlay extends Component {
     }
 
     return (
-      <div className="col-sm-6">
+      <div>
         <Components.Button
           className="btn-block"
           primary={true}
           bezelStyle="solid"
-          i18nKeyLabel="accountsUI.updatePasswordAndContinue"
-          label="Update and continue"
+          i18nKeyLabel="accountsUI.submit"
+          label="Submit"
           type="submit"
+          disabled={this.props.isDisabled}
         />
       </div>
     );
@@ -152,19 +156,16 @@ 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">
+          <div>
+            <div className="col-sm-4 col-sm-offset-4">
               {showSpinner ? this.renderSpinnerOnLoad() :
-                <form className="modal-content" onSubmit={this.handleSubmit}>
-                  <div className="modal-header">
-                    <h4 className="modal-title">
+                <form onSubmit={this.handleSubmit}>
+                  <div className="loginForm-title">
+                    <h2>
                       {this.renderPasswordResetText()}
-                    </h4>
+                    </h2>
                   </div>
-
-                  <div className="modal-body">
+                  <div>
                     <div className="login-form">
 
                       {this.renderFormMessages()}
@@ -181,32 +182,17 @@ class UpdatePasswordOverlay extends Component {
                         />
                         {this.renderPasswordErrors()}
                       </div>
-
                     </div>
                   </div>
 
-                  <div className="modal-footer">
+                  <div className="form-group">
                     {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>
-
                 </form>
               }
             </div>
           </div>
-        </div>}
+        }
       </div>
     );
   }

diff --git a/imports/plugins/core/accounts/client/containers/passwordOverlay.js b/imports/plugins/core/accounts/client/containers/passwordOverlay.js
@@ -5,7 +5,7 @@ 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, i18next } from "/client/api";
 import { LoginFormValidation } from "/lib/api";
 import UpdatePasswordOverlay from "../components/updatePasswordOverlay";
 
@@ -15,7 +15,7 @@ const wrapComponent = (Comp) => (
       callback: PropTypes.func,
       formMessages: PropTypes.object,
       isOpen: PropTypes.bool,
-      token: PropTypes.string,
+      // token: PropTypes.string,
       type: PropTypes.string,
       uniqueId: PropTypes.string
     }
@@ -64,8 +64,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 +76,15 @@ 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
+            isLoading: false,
+            isDisabled: true,
+            formMessages: {
+              info: [{
+                reason: i18next.t("accountsUI.info.passwordResetDone") || "Password reset complete."
+              }]
+            }
           });
-
-          const shopId = Reaction.getUserPreferences("reaction", "activeShopId");
-          Reaction.setShopId(shopId);
         }
       });
     }

diff --git a/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.js b/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
  */
@@ -40,7 +28,10 @@ Accounts.onEnrollmentLink((token, done) => {
 //  */
 Template.loginFormUpdatePasswordOverlay.helpers({
   component() {
-    const currentData = Template.currentData() || {};
+    let currentData = { isOpen: true, type: "updatePassword" }; // TODO: Edit
+    if (Object.keys(Template.currentData()).length) {
+      currentData = Template.currentData();
+    }
     return {
       ...currentData,
       component: getComponent("UpdatePasswordOverlay")

diff --git a/imports/plugins/core/accounts/register.js b/imports/plugins/core/accounts/register.js
@@ -65,6 +65,13 @@ Reaction.registerPackage({
     label: "Profile",
     icon: "fa fa-user",
     provides: ["userAccountDropdown"]
+  }, {
+    route: "/reset-password/:token",
+    template: "loginFormUpdatePasswordOverlay",
+    workflow: "none",
+    meta: { noAdminControls: true },
+    name: "Reset Password",
+    label: "reset-password"
   }],
   layout: [{
     layout: "coreLayout",

diff --git a/imports/plugins/core/accounts/server/methods/sendResetPasswordEmail.js b/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

diff --git a/imports/plugins/core/ui/client/components/app/app.js b/imports/plugins/core/ui/client/components/app/app.js
@@ -47,6 +47,11 @@ class App extends Component {
     return this.props.hasDashboardAccess;
   }
 
+  get noAdmin() {
+    const currentRoute = this.props.currentRoute.route;
+    return currentRoute && currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.noAdminControls;
+  }
+
   get isOauthProvider() {
     const currentRoute = this.props.currentRoute.route;
     return currentRoute && currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.oauthLoginFlow;
@@ -115,7 +120,7 @@ class App extends Component {
     const { currentRoute } = this.props;
     const layout = currentRoute && currentRoute.route && currentRoute.route.options && currentRoute.route.options.layout;
 
-    if (this.isAdminApp && layout !== "printLayout" && !this.isOauthProvider) {
+    if (this.isAdminApp && layout !== "printLayout" && !this.isOauthProvider && !this.noAdmin) {
       return this.renderAdminApp();
     }
 

diff --git a/private/data/i18n/en.json b/private/data/i18n/en.json
@@ -642,7 +642,7 @@
         "signUpWithYourEmailAddress": "Register with your email address",
         "terms": "Terms of use",
         "updateYourPassword": "Update your password",
-        "updatePasswordAndContinue": "Update and continue",
+        "updatePasswordAndContinue": "Update",
         "updatedServiceConfiguration": "Updated service configuration for {{service}}",
         "username": "Username",
         "usernameOrEmail": "Username or email",
@@ -658,6 +658,7 @@
           "passwordChanged": "Password changed",
           "passwordReset": "Password reset",
           "passwordResetSend": "Email with password reset link has been sent.",
+          "passwordResetDone": "Password reset complete. Please return to app.",
           "invitationSent": "Invitation sent",
           "sendInvitation": "Send invitation"
         },