Automatically log in preview user (#2578)

* automatically logging in preview user

* fixed url check

* simplified logic

changes/issue-2294-preview-login

@@ -0,0 +1 @@
+- Automatically logging in preview user

frontend/components/LoginRoutes/LoginRoutes.jsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 
 import { hideBackgroundImage } from "redux/nodes/app/actions";
 import { ssoSettings } from "redux/nodes/auth/actions";
-import LoginPage from "pages/LoginPage";
+import LoginPage, { PreviewLoginPage } from "pages/LoginPage";
 
 export class LoginRoutes extends Component {
   static propTypes = {
@@ -12,6 +12,7 @@ export class LoginRoutes extends Component {
     dispatch: PropTypes.func,
     isResetPassPage: PropTypes.bool,
     isForgotPassPage: PropTypes.bool,
+    isPreviewLoginPage: PropTypes.bool,
     pathname: PropTypes.string,
     token: PropTypes.string,
   };
@@ -35,10 +36,15 @@ export class LoginRoutes extends Component {
       children,
       isResetPassPage,
       isForgotPassPage,
+      isPreviewLoginPage,
       pathname,
       token,
     } = this.props;
 
+    if (isPreviewLoginPage) {
+      return <PreviewLoginPage />;
+    }
+
     return (
       <div className="login-routes">
         {children || (
@@ -62,10 +68,12 @@ const mapStateToProps = (state, ownProps) => {
 
   const isForgotPassPage = pathname.endsWith("/login/forgot");
   const isResetPassPage = pathname.endsWith("/login/reset");
+  const isPreviewLoginPage = pathname.endsWith("/previewlogin");
 
   return {
     isForgotPassPage,
     isResetPassPage,
+    isPreviewLoginPage,
     pathname,
     token,
   };

frontend/components/forms/LoginForm/LoginForm.jsx

@@ -74,7 +74,7 @@ class LoginForm extends Component {
       isHidden,
       ssoSettings,
     } = this.props;
-    const { sso_enabled: ssoEnabled } = ssoSettings;
+    const { sso_enabled: ssoEnabled } = ssoSettings || {};
     const { showSingleSignOnButton } = this;
 
     const loginFormClass = classnames(baseClass, {

frontend/pages/LoginPage/PreviewLoginPage.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useContext } from "react";
+import { useDispatch } from "react-redux";
+import { push } from "react-router-redux";
+
+import paths from "router/paths";
+import { AppContext } from "context/app";
+import { IUser } from "interfaces/user"; // @ts-ignore
+import { loginUser } from "redux/nodes/auth/actions"; // @ts-ignore
+import debounce from "utilities/debounce"; // @ts-ignore
+
+// @ts-ignore
+import LoginSuccessfulPage from "pages/LoginSuccessfulPage"; // @ts-ignore
+import AuthenticationFormWrapper from "components/AuthenticationFormWrapper"; // @ts-ignore
+import LoginForm from "components/forms/LoginForm"; // @ts-ignore
+
+interface ILoginData {
+  email: string;
+  password: string;
+}
+
+const PreviewLoginPage = () => {
+  const dispatch = useDispatch();
+  const { setCurrentUser } = useContext(AppContext);
+  const [loginVisible, setLoginVisible] = useState<boolean>(true);
+
+  const onSubmit = debounce((formData: ILoginData) => {
+    const { HOME } = paths;
+    const redirectTime = 1500;
+    return dispatch(loginUser(formData))
+      .then((returnedUser: IUser) => {
+        setLoginVisible(false);
+
+        // transitioning to context API - 9/1/21 MP
+        setCurrentUser(returnedUser);
+
+        setTimeout(() => {
+          return dispatch(push(HOME));
+        }, redirectTime);
+      })
+      .catch(() => false);
+  });
+
+  useEffect(() => {
+    if (window.location.origin === "http://localhost:1337") {
+      onSubmit({
+        email: "admin@example.com",
+        password: "admin123#",
+      });
+    }
+  }, []);
+
+  return (
+    <AuthenticationFormWrapper>
+      <LoginSuccessfulPage />
+      <LoginForm handleSubmit={onSubmit} isHidden={!loginVisible} />
+    </AuthenticationFormWrapper>
+  );
+};
+
+export default PreviewLoginPage;

frontend/pages/LoginPage/index.ts

@@ -1 +1,4 @@
-export { default } from "./LoginPage";
+import LoginPage from "./LoginPage";
+import PreviewLoginPage from "./PreviewLoginPage";
+
+export { LoginPage as default, PreviewLoginPage };

frontend/router/index.tsx

@@ -72,6 +72,7 @@ const routes = (
     <Router history={history}>
       <Route path={PATHS.ROOT} component={AppWrapper}>
         <Route path="setup" component={RegistrationPage} />
+        <Route path="previewlogin" component={LoginRoutes} />
         <Route path="login" component={LoginRoutes}>
           <Route path="invites/:invite_token" component={ConfirmInvitePage} />
           <Route