From 9f8cc50f821fab7e1a419392878f9f5e80b79d4e Mon Sep 17 00:00:00 2001
From: Seun Martins <seundotme@gmail.com>
Date: Tue, 18 Sep 2018 22:04:04 +0000
Subject: [PATCH 1/4] Password reset flow for auth IDP

---
 ...tePasswordOverlay.js => updatePassword.js} | 119 +++++++-----------
 .../{passwordOverlay.js => updatePassword.js} |  40 +++---
 imports/plugins/core/accounts/client/index.js |   4 +-
 .../updatePassword/updatePassword.html        |   4 +-
 .../updatePassword/updatePassword.js          |  22 +---
 imports/plugins/core/accounts/register.js     |   7 ++
 .../server/methods/sendResetPasswordEmail.js  |   4 +
 private/data/i18n/en.json                     |   4 +-
 8 files changed, 93 insertions(+), 111 deletions(-)
 rename imports/plugins/core/accounts/client/components/{updatePasswordOverlay.js => updatePassword.js} (55%)
 rename imports/plugins/core/accounts/client/containers/{passwordOverlay.js => updatePassword.js} (76%)

diff --git a/imports/plugins/core/accounts/client/components/updatePasswordOverlay.js b/imports/plugins/core/accounts/client/components/updatePassword.js
similarity index 55%
rename from imports/plugins/core/accounts/client/components/updatePasswordOverlay.js
rename to imports/plugins/core/accounts/client/components/updatePassword.js
index bb595cffc4e..90681491d21 100644
--- a/imports/plugins/core/accounts/client/components/updatePasswordOverlay.js
+++ b/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}
+      />
     );
   }
 
@@ -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="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;
diff --git a/imports/plugins/core/accounts/client/containers/passwordOverlay.js b/imports/plugins/core/accounts/client/containers/updatePassword.js
similarity index 76%
rename from imports/plugins/core/accounts/client/containers/passwordOverlay.js
rename to imports/plugins/core/accounts/client/containers/updatePassword.js
index 5cc3e42ae52..b7895fbb618 100644
--- a/imports/plugins/core/accounts/client/containers/passwordOverlay.js
+++ b/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, i18next } 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,21 @@ const wrapComponent = (Comp) => (
     }
 
     render() {
+      const { status } = Router.current().params;
+      if (status === "completed") {
+        return (
+          <div className="col-sm-4 col-sm-offset-4">
+            <div className="loginForm-title">
+              <h3>
+                {i18next.t("accountsUI.info.passwordResetDone")}
+              </h3>
+            </div>
+            <p className="text-center">
+              {i18next.t("accountsUI.info.passwordResetDoneText")}
+            </p>
+          </div>
+        );
+      }
       return (
         <Comp
           uniqueId={this.props.uniqueId}
@@ -128,6 +134,6 @@ const wrapComponent = (Comp) => (
   }
 );
 
-registerComponent("UpdatePasswordOverlay", UpdatePasswordOverlay, wrapComponent);
+registerComponent("UpdatePassword", UpdatePassword, wrapComponent);
 
-export default wrapComponent(UpdatePasswordOverlay);
+export default wrapComponent(UpdatePassword);
diff --git a/imports/plugins/core/accounts/client/index.js b/imports/plugins/core/accounts/client/index.js
index 489f74301fa..a6aca83c6e2 100644
--- a/imports/plugins/core/accounts/client/index.js
+++ b/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";
 
diff --git a/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.html b/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.html
index 8ceba9961fc..5ab5c3b7909 100644
--- a/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.html
+++ b/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>
diff --git a/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.js b/imports/plugins/core/accounts/client/templates/updatePassword/updatePassword.js
index 16bc22b7351..1f78fc4d6f7 100644
--- 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
  */
@@ -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"
     };
   }
 });
diff --git a/imports/plugins/core/accounts/register.js b/imports/plugins/core/accounts/register.js
index 6621eda1b46..e39215d81e4 100644
--- 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/:status?",
+    template: "loginFormUpdatePassword",
+    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
index bb43c6dc9b5..7ddea0db33b 100644
--- 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/private/data/i18n/en.json b/private/data/i18n/en.json
index 60848154620..99c181dd02a 100644
--- 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,8 @@
           "passwordChanged": "Password changed",
           "passwordReset": "Password reset",
           "passwordResetSend": "Email with password reset link has been sent.",
+          "passwordResetDone": "Password reset complete.",
+          "passwordResetDoneText": "Please return to app to continue.",
           "invitationSent": "Invitation sent",
           "sendInvitation": "Send invitation"
         },

From ea133377a2bab48fc10705cd67e069c7b6cbb808 Mon Sep 17 00:00:00 2001
From: Seun Martins <seundotme@gmail.com>
Date: Tue, 18 Sep 2018 22:06:32 +0000
Subject: [PATCH 2/4] Rename route meta field to be more descriptive

---
 imports/plugins/core/hydra-oauth/register.js         | 5 ++++-
 imports/plugins/core/ui/client/components/app/app.js | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/imports/plugins/core/hydra-oauth/register.js b/imports/plugins/core/hydra-oauth/register.js
index 426f30a419c..4cd29c5a0a4 100644
--- a/imports/plugins/core/hydra-oauth/register.js
+++ b/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"
diff --git a/imports/plugins/core/ui/client/components/app/app.js b/imports/plugins/core/ui/client/components/app/app.js
index a19f2ba9aa8..d1faa9a45d3 100644
--- a/imports/plugins/core/ui/client/components/app/app.js
+++ b/imports/plugins/core/ui/client/components/app/app.js
@@ -47,9 +47,9 @@ class App extends Component {
     return this.props.hasDashboardAccess;
   }
 
-  get isOauthProvider() {
+  get noAdminControls() {
     const currentRoute = this.props.currentRoute.route;
-    return currentRoute && currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.oauthLoginFlow;
+    return currentRoute && currentRoute.options && currentRoute.options.meta && currentRoute.options.meta.noAdminControls;
   }
 
   handleViewContextChange = (event, value) => {
@@ -115,7 +115,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.noAdminControls) {
       return this.renderAdminApp();
     }
 

From c9a07d2e45be3a6fa9767fe318d3f1e47e8e9b8d Mon Sep 17 00:00:00 2001
From: Seun Martins <seundotme@gmail.com>
Date: Wed, 19 Sep 2018 15:05:12 +0000
Subject: [PATCH 3/4] Fix translation; Update text for password reset form

---
 .../accounts/client/components/updatePassword.js   |  4 ++--
 .../accounts/client/containers/updatePassword.js   | 14 ++++++++++----
 .../client/styles/accounts/accounts.less           |  5 ++++-
 private/data/i18n/en.json                          |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/imports/plugins/core/accounts/client/components/updatePassword.js b/imports/plugins/core/accounts/client/components/updatePassword.js
index 90681491d21..3c64970b62a 100644
--- a/imports/plugins/core/accounts/client/components/updatePassword.js
+++ b/imports/plugins/core/accounts/client/components/updatePassword.js
@@ -135,7 +135,7 @@ class UpdatePassword extends Component {
     }
 
     return (
-      <Components.Translation defaultValue="Update Your Password" i18nKey="accountsUI.updateYourPassword"/>
+      <Components.Translation defaultValue="Set New Password" i18nKey="accountsUI.updateYourPassword"/>
     );
   }
 
@@ -149,7 +149,7 @@ class UpdatePassword extends Component {
     return (
       <div>
         {this.props.isOpen === true &&
-          <div className="col-sm-4 col-sm-offset-4">
+          <div className="idp-form col-sm-4 col-sm-offset-4">
             {showSpinner ? this.renderSpinnerOnLoad() :
               <form onSubmit={this.handleSubmit}>
                 <div className="loginForm-title">
diff --git a/imports/plugins/core/accounts/client/containers/updatePassword.js b/imports/plugins/core/accounts/client/containers/updatePassword.js
index b7895fbb618..5ce089f9f1c 100644
--- a/imports/plugins/core/accounts/client/containers/updatePassword.js
+++ b/imports/plugins/core/accounts/client/containers/updatePassword.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 { Router, i18next } from "/client/api";
+import { Router } from "/client/api";
 import { LoginFormValidation } from "/lib/api";
 import UpdatePassword from "../components/updatePassword";
 
@@ -105,14 +105,20 @@ const wrapComponent = (Comp) => (
       const { status } = Router.current().params;
       if (status === "completed") {
         return (
-          <div className="col-sm-4 col-sm-offset-4">
+          <div className="idp-form col-sm-4 col-sm-offset-4">
             <div className="loginForm-title">
               <h3>
-                {i18next.t("accountsUI.info.passwordResetDone")}
+                <Components.Translation
+                  defaultValue="Password Reset Successful"
+                  i18nKey="accountsUI.info.passwordResetDone"
+                />
               </h3>
             </div>
             <p className="text-center">
-              {i18next.t("accountsUI.info.passwordResetDoneText")}
+              <Components.Translation
+                defaultValue="Return to the app to continue"
+                i18nKey="accountsUI.info.passwordResetDoneText"
+              />
             </p>
           </div>
         );
diff --git a/imports/plugins/included/default-theme/client/styles/accounts/accounts.less b/imports/plugins/included/default-theme/client/styles/accounts/accounts.less
index c0aba198bcd..fd0d3a6e4e8 100644
--- a/imports/plugins/included/default-theme/client/styles/accounts/accounts.less
+++ b/imports/plugins/included/default-theme/client/styles/accounts/accounts.less
@@ -4,6 +4,9 @@
   margin-bottom: 40px;
 }
 
+.idp-form {
+  margin-top: 100px;
+}
 
 // ----------------------------------------------------------------------------
 // Login Dropdown
@@ -57,7 +60,7 @@
 .profile-image-display-name,
 .profile-image-email {
   display: block;
-  font-size: 1.8rem;  
+  font-size: 1.8rem;
   margin-top: 10px;
 }
 
diff --git a/private/data/i18n/en.json b/private/data/i18n/en.json
index 99c181dd02a..7e8063f86c8 100644
--- a/private/data/i18n/en.json
+++ b/private/data/i18n/en.json
@@ -641,7 +641,7 @@
         "signupCode": "Registration code",
         "signUpWithYourEmailAddress": "Register with your email address",
         "terms": "Terms of use",
-        "updateYourPassword": "Update your password",
+        "updateYourPassword": "Set New password",
         "updatePasswordAndContinue": "Update",
         "updatedServiceConfiguration": "Updated service configuration for {{service}}",
         "username": "Username",

From 48db7cb4fee863a5c65ef7c06fbad08afd4a7201 Mon Sep 17 00:00:00 2001
From: Seun Martins <seundotme@gmail.com>
Date: Wed, 19 Sep 2018 15:18:49 +0000
Subject: [PATCH 4/4] Add margin class for login provider forms

---
 .../core/accounts/client/components/login.js  | 19 +++++++++++--------
 .../hydra-oauth/client/containers/auth.js     |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/imports/plugins/core/accounts/client/components/login.js b/imports/plugins/core/accounts/client/components/login.js
index 1c1ea208cce..c86ca93f923 100644
--- a/imports/plugins/core/accounts/client/components/login.js
+++ b/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>
       );
     }
   }
diff --git a/imports/plugins/core/hydra-oauth/client/containers/auth.js b/imports/plugins/core/hydra-oauth/client/containers/auth.js
index c52f9405d5a..b73435c24fc 100644
--- a/imports/plugins/core/hydra-oauth/client/containers/auth.js
+++ b/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>
     );