From 36cc3b74caee62ba4ba4ea7ba422c94a78d0cccd Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 27 Feb 2022 03:20:59 -0500
Subject: [PATCH] logged in / out index

---
 packages/storyteller/src/App.tsx              |  4 +-
 .../storyteller/src/pages/index/IndexPage.tsx | 54 +++++++------------
 .../pages/index/subpages/LoggedInIndex.tsx    | 46 ++++++++++++++++
 .../pages/index/subpages/LoggedOutIndex.tsx   | 37 +++++++++++++
 4 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 packages/storyteller/src/pages/index/subpages/LoggedInIndex.tsx
 create mode 100644 packages/storyteller/src/pages/index/subpages/LoggedOutIndex.tsx

diff --git a/packages/storyteller/src/App.tsx b/packages/storyteller/src/App.tsx
index 93281e02a8..6fe1f00f3b 100644
--- a/packages/storyteller/src/App.tsx
+++ b/packages/storyteller/src/App.tsx
@@ -177,7 +177,9 @@ class App extends React.Component<Props, State> {
                 <ObsLayerPage />
               </Route>
               <Route exact={true} path="/">
-                <IndexPage />
+                <IndexPage 
+                  sessionWrapper={this.state.sessionWrapper}
+                  />
               </Route>
             </Switch>
 
diff --git a/packages/storyteller/src/pages/index/IndexPage.tsx b/packages/storyteller/src/pages/index/IndexPage.tsx
index b6afce3e0b..8f700c075f 100644
--- a/packages/storyteller/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller/src/pages/index/IndexPage.tsx
@@ -2,10 +2,26 @@ import { faTwitch } from '@fortawesome/free-brands-svg-icons';
 import { faCogs, faVideo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink';
+import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { LoggedInIndex } from './subpages/LoggedInIndex';
+import { LoggedOutIndex } from './subpages/LoggedOutIndex';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+}
+
+function IndexPage(props: Props) {
+
+  let indexComponent = <></>;
+
+  if (props.sessionWrapper.isLoggedIn()) {
+    indexComponent  = <LoggedInIndex />
+  } else {
+    indexComponent = <LoggedOutIndex />
+  }
 
-function IndexPage() {
   return (
     <div>
 
@@ -39,42 +55,8 @@ function IndexPage() {
         </div>
       </section>
 
-      <section className="section">
-        <div className="container">
+      {indexComponent}
 
-          <div className="content">
-          </div>
-
-          <a
-            href="https://api.jungle.horse/twitch/oauth_enroll_redirect"
-            className="button is-large is-info is-fullwidth"
-            >
-              Link to Your Twitch&nbsp;<FontAwesomeIcon icon={faTwitch} />
-          </a>
-
-          <br />
-
-          <Link
-            to="/tts_configs"
-            className="button is-large is-info is-fullwidth"
-            >
-              Configure TTS&nbsp;<FontAwesomeIcon icon={faCogs} />
-          </Link>
-
-          <br />
-
-          <Link
-            to="/obs_info"
-            className="button is-large is-info is-fullwidth"
-            >
-              Configure OBS&nbsp;<FontAwesomeIcon icon={faVideo} />
-          </Link>
-
-
-
-
-        </div>
-      </section>
     </div>
   )
 }
diff --git a/packages/storyteller/src/pages/index/subpages/LoggedInIndex.tsx b/packages/storyteller/src/pages/index/subpages/LoggedInIndex.tsx
new file mode 100644
index 0000000000..7a025637c3
--- /dev/null
+++ b/packages/storyteller/src/pages/index/subpages/LoggedInIndex.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCogs, faVideo } from '@fortawesome/free-solid-svg-icons';
+import { faTwitch } from '@fortawesome/free-brands-svg-icons';
+
+function LoggedInIndex() {
+  return (
+    <div>
+
+      <section className="section">
+        <div className="container">
+
+          <a
+            href="https://api.jungle.horse/twitch/oauth_enroll_redirect"
+            className="button is-large is-info is-fullwidth"
+            >
+              Link to Your Twitch&nbsp;<FontAwesomeIcon icon={faTwitch} />
+          </a>
+
+          <br />
+
+          <Link
+            to="/tts_configs"
+            className="button is-large is-info is-fullwidth"
+            >
+              Configure TTS&nbsp;<FontAwesomeIcon icon={faCogs} />
+          </Link>
+
+          <br />
+
+          <Link
+            to="/obs_info"
+            className="button is-large is-info is-fullwidth"
+            >
+              Configure OBS&nbsp;<FontAwesomeIcon icon={faVideo} />
+          </Link>
+
+        </div>
+      </section>
+
+    </div>
+  )
+}
+
+export { LoggedInIndex }
\ No newline at end of file
diff --git a/packages/storyteller/src/pages/index/subpages/LoggedOutIndex.tsx b/packages/storyteller/src/pages/index/subpages/LoggedOutIndex.tsx
new file mode 100644
index 0000000000..027131d790
--- /dev/null
+++ b/packages/storyteller/src/pages/index/subpages/LoggedOutIndex.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faRocket, faSignInAlt } from '@fortawesome/free-solid-svg-icons';
+
+function LoggedOutIndex() {
+  return (
+    <div>
+      <section className="section">
+        <div className="container">
+
+          <h1 className="title is-4"> <FontAwesomeIcon icon={faRocket} /> You'll need an account to continue&hellip;</h1>
+          <Link
+            to="/signup"
+            className="button is-large is-info is-fullwidth"
+            >
+              Sign Up&nbsp;<FontAwesomeIcon icon={faSignInAlt} />
+          </Link>
+
+          <br />
+
+          <Link
+            to="/login"
+            className="button is-large is-info is-outlined is-fullwidth"
+            >
+              Log In&nbsp;<FontAwesomeIcon icon={faSignInAlt} />
+          </Link>
+
+          <br />
+
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export { LoggedOutIndex }
\ No newline at end of file