From 1dfe37accc8b4a4c925887e1c0ae71c4ff4ded89 Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Tue, 19 Oct 2021 14:23:40 -0700
Subject: [PATCH] Automatically log in preview user (#2578)

* automatically logging in preview user

* fixed url check

* simplified logic
---
 changes/issue-2294-preview-login              |  1 +
 .../components/LoginRoutes/LoginRoutes.jsx    | 10 +++-
 .../components/forms/LoginForm/LoginForm.jsx  |  2 +-
 frontend/pages/LoginPage/PreviewLoginPage.tsx | 60 +++++++++++++++++++
 frontend/pages/LoginPage/index.ts             |  5 +-
 frontend/router/index.tsx                     |  1 +
 6 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 changes/issue-2294-preview-login
 create mode 100644 frontend/pages/LoginPage/PreviewLoginPage.tsx

diff --git a/changes/issue-2294-preview-login b/changes/issue-2294-preview-login
new file mode 100644
index 0000000000..27534d58ba
--- /dev/null
+++ b/changes/issue-2294-preview-login
@@ -0,0 +1 @@
+- Automatically logging in preview user
\ No newline at end of file
diff --git a/frontend/components/LoginRoutes/LoginRoutes.jsx b/frontend/components/LoginRoutes/LoginRoutes.jsx
index 382ddbd613..500af793eb 100644
--- a/frontend/components/LoginRoutes/LoginRoutes.jsx
+++ b/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,
   };
diff --git a/frontend/components/forms/LoginForm/LoginForm.jsx b/frontend/components/forms/LoginForm/LoginForm.jsx
index 5e5cbcb5a3..33e342e4f0 100644
--- a/frontend/components/forms/LoginForm/LoginForm.jsx
+++ b/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, {
diff --git a/frontend/pages/LoginPage/PreviewLoginPage.tsx b/frontend/pages/LoginPage/PreviewLoginPage.tsx
new file mode 100644
index 0000000000..c7a3248349
--- /dev/null
+++ b/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;
diff --git a/frontend/pages/LoginPage/index.ts b/frontend/pages/LoginPage/index.ts
index f815230888..58eb9928e6 100644
--- a/frontend/pages/LoginPage/index.ts
+++ b/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 };
diff --git a/frontend/router/index.tsx b/frontend/router/index.tsx
index 9b55d37d2d..719ecfe25e 100644
--- a/frontend/router/index.tsx
+++ b/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