logged in / out index

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>
 

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>
   )
 }

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 }

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 }