From efb0fd470b9c609393be9ebf72bfdcf5edbfcd0d Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sat, 3 Dec 2022 16:27:58 +0700
Subject: [PATCH] signup, login

---
 .../storyteller-stream-dashboard/src/App.scss |   4 +
 .../storyteller-stream-dashboard/src/App.tsx  |  39 +--
 .../src/layout/MustBeLoggedInView.tsx         |  25 ++
 .../src/layout/TopNav.tsx                     |  12 +-
 .../src/layout/TopNavSessionButton.tsx        |  65 +++--
 .../src/pages/dashboard/DashboardPage.tsx     |   9 +
 .../src/pages/login/LoginPage.tsx             | 147 +++-------
 .../src/pages/obs_configs/ObsConfigsPage.tsx  |  11 +-
 .../src/pages/signup/SignupPage.tsx           | 273 ++++++++++--------
 .../tts_configs/TtsConfigsDeleteRulePage.tsx  |  92 +++---
 .../pages/tts_configs/TtsConfigsIndexPage.tsx |   9 +-
 11 files changed, 365 insertions(+), 321 deletions(-)
 create mode 100644 packages/storyteller-stream-dashboard/src/layout/MustBeLoggedInView.tsx

diff --git a/packages/storyteller-stream-dashboard/src/App.scss b/packages/storyteller-stream-dashboard/src/App.scss
index af0f45dedc..d0b5aed855 100644
--- a/packages/storyteller-stream-dashboard/src/App.scss
+++ b/packages/storyteller-stream-dashboard/src/App.scss
@@ -823,6 +823,10 @@ span.word:after {
   font-size: 50px;
 }
 
+.text-red {
+  color: $primary;
+}
+
 @media (min-width: 768px) {
   .container-panel {
     width: 100%;
diff --git a/packages/storyteller-stream-dashboard/src/App.tsx b/packages/storyteller-stream-dashboard/src/App.tsx
index 2cc85a3f2a..c30a87260e 100644
--- a/packages/storyteller-stream-dashboard/src/App.tsx
+++ b/packages/storyteller-stream-dashboard/src/App.tsx
@@ -2,6 +2,7 @@
 import "./App.scss";
 
 import React from "react";
+import { Link } from "react-router-dom";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 // import { GitSha } from "@storyteller/components/src/elements/GitSha";
 import {
@@ -190,39 +191,19 @@ class App extends React.Component<Props, State> {
               <hr />
             </div>
 
-            <footer className="d-flex flex-column container py-5 gap-4">
-              <div className="text-center align-items-center justify-content-center gap-3">
-                <a className="footer-link" href="#">
+            <footer className="d-flex flex-column container py-5 gap-5">
+              <div className="text-center align-items-center justify-content-center d-flex gap-2">
+                <Link className="footer-link" to="/tts_configs">
                   TTS Configs
-                </a>
-                &nbsp;|&nbsp;
-                <a className="footer-link" href="#">
+                </Link>
+                |
+                <Link className="footer-link" to="#">
                   OBS Configs
-                </a>
-                &nbsp;|&nbsp;
-                <a className="footer-link" href="#">
-                  Terms
-                </a>
-              </div>
-              <div className="d-flex justify-content-center gap-4">
-                <a className="social-icon" href="#">
-                  <i className="fa-brands fa-discord"></i>
-                </a>
-                <a className="social-icon" href="#">
-                  <i className="fa-brands fa-twitch"></i>
-                </a>
-                <a className="social-icon" href="#">
-                  <i className="fa-brands fa-twitter"></i>
-                </a>
-                <a className="social-icon" href="#">
-                  <i className="fa-brands fa-facebook"></i>
-                </a>
-                <a className="social-icon" href="#">
-                  <i className="fa-brands fa-patreon"></i>
-                </a>
+                </Link>
               </div>
+
               <div className="d-flex justify-content-center">
-                © 2022 Storyteller Stream.
+                © 2022 PowerStream.
               </div>
             </footer>
           </div>
diff --git a/packages/storyteller-stream-dashboard/src/layout/MustBeLoggedInView.tsx b/packages/storyteller-stream-dashboard/src/layout/MustBeLoggedInView.tsx
new file mode 100644
index 0000000000..c53794944f
--- /dev/null
+++ b/packages/storyteller-stream-dashboard/src/layout/MustBeLoggedInView.tsx
@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+function MustBeLoggedInView() {
+  return (
+    <div className="pt-5 container pb-2 text-center">
+      <img
+        src="/assets/hero-kitsune.png"
+        className="img-fluid mt-4"
+        width="380"
+        alt="Kitsune Mascot"
+      />
+      <h1 className="mt-5 mb-5 fw-bold">You must to be logged in to view.</h1>
+      <div className="d-flex gap-3 justify-content-center">
+        <Link to="/signup" className="btn btn-primary mb-5">
+          Sign Up
+        </Link>
+        <Link to="/login" className="btn btn-secondary mb-5">
+          Login
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export { MustBeLoggedInView };
diff --git a/packages/storyteller-stream-dashboard/src/layout/TopNav.tsx b/packages/storyteller-stream-dashboard/src/layout/TopNav.tsx
index a1a2c14c42..2fad76aca9 100644
--- a/packages/storyteller-stream-dashboard/src/layout/TopNav.tsx
+++ b/packages/storyteller-stream-dashboard/src/layout/TopNav.tsx
@@ -1,8 +1,7 @@
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { Logout } from "@storyteller/components/src/api/session/Logout";
-import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
+import { TopNavSessionButton } from "./TopNavSessionButton";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -81,13 +80,20 @@ function TopNav(props: Props) {
                   </Link>
                 </li>
               </ul>
-              <div className="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
+              {/* <div className="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
                 <Link className="nav-login me-3" to="/login">
                   Login
                 </Link>
                 <button type="button" className="btn btn-primary">
                   Sign up
                 </button>
+              </div> */}
+              <div>
+                <TopNavSessionButton
+                  sessionWrapper={props.sessionWrapper}
+                  enableAlpha={true}
+                  querySessionAction={props.querySessionCallback}
+                />
               </div>
             </div>
           </div>
diff --git a/packages/storyteller-stream-dashboard/src/layout/TopNavSessionButton.tsx b/packages/storyteller-stream-dashboard/src/layout/TopNavSessionButton.tsx
index 26872802ab..6759e7c2c2 100644
--- a/packages/storyteller-stream-dashboard/src/layout/TopNavSessionButton.tsx
+++ b/packages/storyteller-stream-dashboard/src/layout/TopNavSessionButton.tsx
@@ -1,29 +1,28 @@
-import React from 'react';
-import { Link, useHistory } from 'react-router-dom';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { Logout } from '@storyteller/components/src/api/session/Logout';
-import { t } from 'i18next';
-import { Gravatar } from '@storyteller/components/src/elements/Gravatar';
+import React from "react";
+import { Link, useHistory } from "react-router-dom";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { Logout } from "@storyteller/components/src/api/session/Logout";
+import { t } from "i18next";
+import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 
 interface Props {
-  sessionWrapper: SessionWrapper,
-  enableAlpha: boolean,
-  querySessionAction: () => void,
-  closeHamburgerAction: () => void,
+  sessionWrapper: SessionWrapper;
+  enableAlpha: boolean;
+  querySessionAction: () => void;
 }
 
 function TopNavSessionButton(props: Props) {
   let history = useHistory();
 
   if (!props.enableAlpha) {
-    return <nav />
+    return <nav />;
   }
 
   const logoutHandler = async () => {
     await Logout();
     props.querySessionAction();
-    history.push('/');
-  }
+    history.push("/");
+  };
 
   let loggedIn = props.sessionWrapper.isLoggedIn();
   let displayName = props.sessionWrapper.getDisplayName();
@@ -31,11 +30,11 @@ function TopNavSessionButton(props: Props) {
   let gravatar = <span />;
 
   if (displayName === undefined) {
-    displayName = 'My Account';
+    displayName = "My Account";
   }
 
   if (gravatarHash !== undefined) {
-    gravatar = <Gravatar email_hash={gravatarHash} size={15} />
+    gravatar = <Gravatar email_hash={gravatarHash} size={15} />;
   }
 
   let sessionLink = <span />;
@@ -48,31 +47,39 @@ function TopNavSessionButton(props: Props) {
         href={url}
         target="_blank"
         rel="noreferrer"
-        onClick={() => props.closeHamburgerAction()}
-        className="button is-alert is-inverted is-pulled-right"
-        > {gravatar}&nbsp; {displayName} (FakeYou)</a>
+        className="btn btn-secondary"
+      >
+        {" "}
+        {gravatar}&nbsp; {displayName} (FakeYou)
+      </a>
     );
-    logoutLink = <button
-        className="button is-alert is-inverted is-pulled-right"
+    logoutLink = (
+      <button
+        className="btn btn-destructive"
         onClick={async () => {
           await logoutHandler();
-          props.closeHamburgerAction();
         }}
-      >{t('common.logout')}</button>;
+      >
+        {t("common.logout")}
+      </button>
+    );
   } else {
     sessionLink = (
-      <Link
-        to="/signup"
-        className="button is-danger is-pulled-right"
-        onClick={() => props.closeHamburgerAction()}
-        >{t('common.signUpLogin')}</Link>
+      <>
+        <Link to="/login" className="nav-login me-2">
+          Login
+        </Link>
+        <Link to="/signup" className="btn btn-primary">
+          Sign Up
+        </Link>
+      </>
     );
   }
 
   return (
-    <span>
-      {logoutLink}
+    <span className="d-flex gap-3 align-items-center">
       {sessionLink}
+      {logoutLink}
     </span>
   );
 }
diff --git a/packages/storyteller-stream-dashboard/src/pages/dashboard/DashboardPage.tsx b/packages/storyteller-stream-dashboard/src/pages/dashboard/DashboardPage.tsx
index f2944ed061..f7e44ae77b 100644
--- a/packages/storyteller-stream-dashboard/src/pages/dashboard/DashboardPage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/dashboard/DashboardPage.tsx
@@ -8,12 +8,21 @@ import {
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
 import { Link } from "react-router-dom";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
 }
 
 function DashboardPage(props: Props) {
+  if (!props.sessionWrapper.isLoggedIn()) {
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
+  }
+
   return (
     <div>
       <div className="py-lg-5" id="dashboard">
diff --git a/packages/storyteller-stream-dashboard/src/pages/login/LoginPage.tsx b/packages/storyteller-stream-dashboard/src/pages/login/LoginPage.tsx
index 941dcf6956..a0a5c72318 100644
--- a/packages/storyteller-stream-dashboard/src/pages/login/LoginPage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/login/LoginPage.tsx
@@ -81,110 +81,59 @@ function LoginPage(props: Props) {
 
   return (
     <div>
-      <section className="section">
-        <div className="container">
-          <h1 className="title is-1"> Login </h1>
-          <h1 className="subtitle is-6">
-            (If you have a FakeYou.com account, it'll work here too.)
-          </h1>
+      <div className="container pt-5">
+        <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
+            <h1 className="panel-title fw-bold">Login</h1>
+            <div className="py-6">
+              {errorWarning}
 
-          {errorWarning}
-
-          <form onSubmit={handleFormSubmit}>
-            <div className="field">
-              <label className="label">Username or Email</label>
-              <div className="control has-icons-left has-icons-right">
-                <input
-                  className="input"
-                  type="text"
-                  placeholder="Username or Email"
-                  value={usernameOrEmail}
-                  onChange={handleUsernameOrEmailChange}
-                />
-                <span className="icon is-small is-left">
-                  <FontAwesomeIcon icon={iconUser} />
-                </span>
-              </div>
-              {/*<p className="help"></p>*/}
-            </div>
-
-            <div className="field">
-              <label className="label">Password</label>
-              <div className="control has-icons-left has-icons-right">
-                <input
-                  className="input"
-                  type="password"
-                  placeholder="Password"
-                  value={password}
-                  onChange={handlePasswordChange}
-                />
-                <span className="icon is-small is-left">
-                  <FontAwesomeIcon icon={iconPasswordField} />
-                </span>
-              </div>
-              {/*<p className="help"></p>*/}
-            </div>
-
-            <br />
-
-            <button className="button is-link is-large is-fullwidth">
-              Login
-            </button>
-          </form>
-        </div>
-      </section>
-
-      <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
-        <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
-          <h1 className="panel-title fw-bold">Login</h1>
-          <div className="py-6">
-            {errorWarning}
-
-            <form onSubmit={handleFormSubmit}>
-              <div className="d-flex flex-column gap-4">
-                <div>
-                  <label className="sub-title">Username or Email</label>
-                  <div className="form-group input-icon">
-                    <span className="form-control-feedback">
-                      <FontAwesomeIcon icon={faUser} />
-                    </span>
-                    <input
-                      className="form-control"
-                      type="text"
-                      placeholder="Username or Email"
-                      value={usernameOrEmail}
-                      onChange={handleUsernameOrEmailChange}
-                    />
+              <form onSubmit={handleFormSubmit}>
+                <div className="d-flex flex-column gap-4">
+                  <div>
+                    <label className="sub-title">Username or Email</label>
+                    <div className="form-group input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={faUser} />
+                      </span>
+                      <input
+                        className="form-control"
+                        type="text"
+                        placeholder="Username or Email"
+                        value={usernameOrEmail}
+                        onChange={handleUsernameOrEmailChange}
+                      />
+                    </div>
+                    {/*<p className="help"></p>*/}
                   </div>
-                  {/*<p className="help"></p>*/}
-                </div>
 
-                <div>
-                  <label className="sub-title">Password</label>
-                  <div className="form-group input-icon">
-                    <span className="form-control-feedback">
-                      <FontAwesomeIcon icon={faKey} />
-                    </span>
-                    <input
-                      className="form-control"
-                      type="password"
-                      placeholder="Password"
-                      value={password}
-                      onChange={handlePasswordChange}
-                    />
+                  <div>
+                    <label className="sub-title">Password</label>
+                    <div className="form-group input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={faKey} />
+                      </span>
+                      <input
+                        className="form-control"
+                        type="password"
+                        placeholder="Password"
+                        value={password}
+                        onChange={handlePasswordChange}
+                      />
+                    </div>
+                    {/*<p className="help"></p>*/}
                   </div>
-                  {/*<p className="help"></p>*/}
-                </div>
 
-                <button className="btn btn-primary w-100 mt-2">Login</button>
-                <p>
-                  Don’t have an account? &nbsp;
-                  <Link to="/signup" className="text-link">
-                    Create an account now.
-                  </Link>
-                </p>
-              </div>
-            </form>
+                  <button className="btn btn-primary w-100 mt-2">Login</button>
+                  <p>
+                    Don’t have an account? &nbsp;
+                    <Link to="/signup" className="text-link">
+                      Create an account now.
+                    </Link>
+                  </p>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/storyteller-stream-dashboard/src/pages/obs_configs/ObsConfigsPage.tsx b/packages/storyteller-stream-dashboard/src/pages/obs_configs/ObsConfigsPage.tsx
index 806e8caab4..add2bb19a0 100644
--- a/packages/storyteller-stream-dashboard/src/pages/obs_configs/ObsConfigsPage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/obs_configs/ObsConfigsPage.tsx
@@ -9,6 +9,7 @@ import {
 } from "@storyteller/components/src/api/storyteller/twitch_oauth/CheckTwitchOauth";
 import { StorytellerUrlConfig } from "@storyteller/components/src/urls/StorytellerUrlConfig";
 import { faExternalLinkAlt, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -31,7 +32,11 @@ function ObsConfigsPage(props: Props) {
   }, [checkTwitchOauth]);
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   const username = !!maybeTwitchUsername
@@ -46,10 +51,10 @@ function ObsConfigsPage(props: Props) {
         <h1 className="fw-bold mt-5 pt-lg-5">
           <span className="word">OBS Setup</span>
         </h1>
-        <h3>Ready to Broadcast!</h3>
+        <h3>Set up your OBS</h3>
       </div>
 
-      <div className="container pt-5 d-flex flex-column gap-3">
+      <div className="container pt-5 d-flex flex-column gap-3 pb-5">
         <h2 className="fw-bold">Your OBS Browser Source</h2>
         <div className="panel p-3 p-lg-4">
           <p className="pb-3">
diff --git a/packages/storyteller-stream-dashboard/src/pages/signup/SignupPage.tsx b/packages/storyteller-stream-dashboard/src/pages/signup/SignupPage.tsx
index ec81752c69..ae724525f9 100644
--- a/packages/storyteller-stream-dashboard/src/pages/signup/SignupPage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/signup/SignupPage.tsx
@@ -1,9 +1,17 @@
-import React, { useState } from 'react';
-import { CreateAccount, CreateAccountIsError, CreateAccountIsSuccess } from '@storyteller/components/src/api/user/CreateAccount';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { iconEmailField, iconPasswordField, iconUser } from '@storyteller/components/src/icons/SemanticIcons';
+import React, { useState } from "react";
+import {
+  CreateAccount,
+  CreateAccountIsError,
+  CreateAccountIsSuccess,
+} from "@storyteller/components/src/api/user/CreateAccount";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "react-router-dom";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import {
+  iconEmailField,
+  iconUser,
+} from "@storyteller/components/src/icons/SemanticIcons";
+import { faKey } from "@fortawesome/free-solid-svg-icons";
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -12,27 +20,31 @@ enum FieldTriState {
 }
 
 interface Props {
-  sessionWrapper: SessionWrapper,
-  querySessionCallback : () => void,
+  sessionWrapper: SessionWrapper;
+  querySessionCallback: () => void;
 }
 
 function SignupPage(props: Props) {
-
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState("");
   const [usernameValid, setUsernameValid] = useState(FieldTriState.EMPTY_FALSE);
-  const [usernameInvalidReason, setUsernameInvalidReason] = useState('');
+  const [usernameInvalidReason, setUsernameInvalidReason] = useState("");
 
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
   const [emailValid, setEmailValid] = useState(FieldTriState.EMPTY_FALSE);
-  const [emailInvalidReason, setEmailInvalidReason] = useState('');
+  const [emailInvalidReason, setEmailInvalidReason] = useState("");
 
-  const [password, setPassword] = useState('');
+  const [password, setPassword] = useState("");
   const [passwordValid, setPasswordValid] = useState(FieldTriState.EMPTY_FALSE);
-  const [passwordInvalidReason, setPasswordInvalidReason] = useState('');
+  const [passwordInvalidReason, setPasswordInvalidReason] = useState("");
 
-  const [passwordConfirmation, setPasswordConfirmation] = useState('');
-  const [passwordConfirmationValid, setPasswordConfirmationValid] = useState(FieldTriState.EMPTY_FALSE);
-  const [passwordConfirmationInvalidReason, setPasswordConfirmationInvalidReason] = useState('');
+  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+  const [passwordConfirmationValid, setPasswordConfirmationValid] = useState(
+    FieldTriState.EMPTY_FALSE
+  );
+  const [
+    passwordConfirmationInvalidReason,
+    setPasswordConfirmationInvalidReason,
+  ] = useState("");
 
   const handleUsernameChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
@@ -59,7 +71,7 @@ function SignupPage(props: Props) {
     setUsernameInvalidReason(usernameInvalidReason);
 
     return false;
-  }
+  };
 
   const handleEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
@@ -86,7 +98,7 @@ function SignupPage(props: Props) {
     setEmailInvalidReason(emailInvalidReason);
 
     return false;
-  }
+  };
 
   const handlePasswordChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
@@ -112,7 +124,6 @@ function SignupPage(props: Props) {
       } else {
         passwordConfirmationValid = FieldTriState.TRUE;
         passwordConfirmationInvalidReason = "";
-
       }
     }
 
@@ -120,12 +131,14 @@ function SignupPage(props: Props) {
     setPasswordValid(passwordValid);
     setPasswordInvalidReason(passwordInvalidReason);
     setPasswordConfirmationValid(passwordConfirmationValid);
-    setPasswordConfirmationInvalidReason(passwordConfirmationInvalidReason)
+    setPasswordConfirmationInvalidReason(passwordConfirmationInvalidReason);
 
     return false;
-  }
+  };
 
-  const handlePasswordConfirmationChange = (ev: React.FormEvent<HTMLInputElement>) => {
+  const handlePasswordConfirmationChange = (
+    ev: React.FormEvent<HTMLInputElement>
+  ) => {
     ev.preventDefault();
 
     const newPasswordConfirmation = (ev.target as HTMLInputElement).value;
@@ -134,14 +147,12 @@ function SignupPage(props: Props) {
     let passwordConfirmationInvalidReason = "";
 
     if (newPasswordConfirmation.length > 1) {
-
       if (newPasswordConfirmation !== password) {
         passwordConfirmationValid = FieldTriState.FALSE;
         passwordConfirmationInvalidReason = "passwords do not match";
       } else {
         passwordConfirmationValid = FieldTriState.TRUE;
         passwordConfirmationInvalidReason = "";
-
       }
     }
 
@@ -150,16 +161,20 @@ function SignupPage(props: Props) {
     setPasswordConfirmationInvalidReason(passwordConfirmationInvalidReason);
 
     return false;
-  }
+  };
 
-  const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
+  const handleFormSubmit = async (
+    ev: React.FormEvent<HTMLFormElement>
+  ): Promise<boolean> => {
     ev.preventDefault();
 
-    if (!usernameValid || 
-      !emailValid || 
-      !passwordValid || 
-      !passwordConfirmationValid) {
-        return false;
+    if (
+      !usernameValid ||
+      !emailValid ||
+      !passwordValid ||
+      !passwordConfirmationValid
+    ) {
+      return false;
     }
 
     const request = {
@@ -172,32 +187,31 @@ function SignupPage(props: Props) {
     const response = await CreateAccount(request);
 
     if (CreateAccountIsError(response)) {
-      if ('email_address' in response.error_fields) {
+      if ("email_address" in response.error_fields) {
         setEmailValid(FieldTriState.FALSE);
-        setEmailInvalidReason(response.error_fields['email_address'] || "");
+        setEmailInvalidReason(response.error_fields["email_address"] || "");
       }
-      if ('username' in response.error_fields) {
+      if ("username" in response.error_fields) {
         setUsernameValid(FieldTriState.FALSE);
-        setUsernameInvalidReason(response.error_fields['username'] || "");
+        setUsernameInvalidReason(response.error_fields["username"] || "");
       }
     } else if (CreateAccountIsSuccess(response)) {
-      console.log('querying new session');
+      console.log("querying new session");
       props.querySessionCallback();
 
       // TODO: Switch to functional component.
-      window.location.href = '/';
+      window.location.href = "/";
     }
 
     return false;
-  }
-
+  };
 
   if (props.sessionWrapper.isLoggedIn()) {
     return <div>Invalid view for logged in users.</div>;
   }
 
-  let usernameInputClass = "input";
-  let usernameHelpClass = "help";
+  let usernameInputClass = "form-control";
+  let usernameHelpClass = "form-text text-red mt-2";
   switch (usernameValid) {
     case FieldTriState.EMPTY_FALSE:
       break;
@@ -211,8 +225,8 @@ function SignupPage(props: Props) {
       break;
   }
 
-  let emailInputClass = "input";
-  let emailHelpClass = "help";
+  let emailInputClass = "form-control";
+  let emailHelpClass = "form-text text-red mt-2";
   switch (emailValid) {
     case FieldTriState.EMPTY_FALSE:
       break;
@@ -226,8 +240,8 @@ function SignupPage(props: Props) {
       break;
   }
 
-  let passwordInputClass = "input";
-  let passwordHelpClass = "help";
+  let passwordInputClass = "form-control";
+  let passwordHelpClass = "form-text text-red mt-2";
   switch (passwordValid) {
     case FieldTriState.EMPTY_FALSE:
       break;
@@ -241,8 +255,8 @@ function SignupPage(props: Props) {
       break;
   }
 
-  let passwordConfirmationInputClass = "input";
-  let passwordConfirmationHelpClass = "help";
+  let passwordConfirmationInputClass = "form-control";
+  let passwordConfirmationHelpClass = "form-text text-red mt-2";
   switch (passwordConfirmationValid) {
     case FieldTriState.EMPTY_FALSE:
       break;
@@ -258,74 +272,105 @@ function SignupPage(props: Props) {
 
   return (
     <div>
-      <h1 className="title is-1"> Sign Up </h1>
+      <div className="container pt-5">
+        <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
+            <h1 className="panel-title fw-bold">Sign Up</h1>
+            <div className="py-6">
+              <form onSubmit={handleFormSubmit}>
+                <div className="d-flex flex-column gap-4">
+                  <div className="field">
+                    <label className="sub-title">Username</label>
+                    <div className="input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={iconUser} />
+                      </span>
+                      <input
+                        className={usernameInputClass}
+                        type="text"
+                        placeholder="Username"
+                        value={username}
+                        onChange={handleUsernameChange}
+                      />
+                    </div>
+                    <p className={usernameHelpClass}>{usernameInvalidReason}</p>
+                  </div>
 
-      <form onSubmit={handleFormSubmit}>
-        <div className="field">
-          <label className="label">Username</label>
-          <div className="control has-icons-left has-icons-right">
-            <input className={usernameInputClass} type="text" placeholder="Username" value={username} onChange={handleUsernameChange} />
-            <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconUser} />
-            </span>
+                  <div className="field">
+                    <label className="sub-title">Email</label>
+                    <div className="input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={iconEmailField} />
+                      </span>
+                      <input
+                        className={emailInputClass}
+                        type="email"
+                        placeholder="Email"
+                        value={email}
+                        onChange={handleEmailChange}
+                      />
+                    </div>
+                    <p className={emailHelpClass}>{emailInvalidReason}</p>
+                  </div>
+
+                  <div className="field">
+                    <label className="sub-title">Password</label>
+                    <div className="input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={faKey} />
+                      </span>
+                      <input
+                        className={passwordInputClass}
+                        type="password"
+                        placeholder="Password"
+                        value={password}
+                        onChange={handlePasswordChange}
+                      />
+                    </div>
+                    <p className={passwordHelpClass}>{passwordInvalidReason}</p>
+                  </div>
+
+                  <div className="field">
+                    <label className="sub-title">Password Confirmation</label>
+                    <div className="input-icon">
+                      <span className="form-control-feedback">
+                        <FontAwesomeIcon icon={faKey} />
+                      </span>
+                      <input
+                        className={passwordConfirmationInputClass}
+                        type="password"
+                        placeholder="Password confirmation"
+                        value={passwordConfirmation}
+                        onChange={handlePasswordConfirmationChange}
+                      />
+                    </div>
+                    <p className={passwordConfirmationHelpClass}>
+                      {passwordConfirmationInvalidReason}
+                    </p>
+                  </div>
+                  <div className="alert alert-warning mt-2">
+                    <strong>Remember your password!</strong> We don't have
+                    password reset currently, and it'll be a few more weeks
+                    before it's added (there are more important features to work
+                    on). If you lose your password, please let us know in
+                    Discord.
+                  </div>
+
+                  <button className="btn btn-primary w-100">Sign up</button>
+                  <p>
+                    Already have an account? &nbsp;
+                    <Link to="/login" className="text-link">
+                      Log in instead!
+                    </Link>
+                  </p>
+                </div>
+              </form>
+            </div>
           </div>
-          <p className={usernameHelpClass}>{usernameInvalidReason}</p>
         </div>
-
-        <div className="field">
-          <label className="label">Email</label>
-          <div className="control has-icons-left has-icons-right">
-            <input className={emailInputClass} type="email" placeholder="Email" value={email} onChange={handleEmailChange} />
-            <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconEmailField} />
-            </span>
-          </div>
-          <p className={emailHelpClass}>{emailInvalidReason}</p>
-        </div>
-
-        <div className="field">
-          <label className="label">Password</label>
-          <div className="control has-icons-left has-icons-right">
-            <input className={passwordInputClass} type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
-            <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconPasswordField} />
-            </span>
-          </div>
-          <p className={passwordHelpClass}>{passwordInvalidReason}</p>
-        </div>
-
-        <div className="field">
-          <label className="label">Password Confirmation</label>
-          <div className="control has-icons-left has-icons-right">
-            <input className={passwordConfirmationInputClass} type="password" placeholder="Password confirmation" value={passwordConfirmation} onChange={handlePasswordConfirmationChange} />
-            <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconPasswordField} />
-            </span>
-          </div>
-          <p className={passwordConfirmationHelpClass}>
-            {passwordConfirmationInvalidReason}
-          </p>
-        </div>
-
-        <br />
-
-        <div className="notification is-warning">
-          <strong>Remember your password!</strong> We don't have password reset currently, and it'll be a 
-          few more weeks before it's added (there are more important features to work on). If you lose your
-          password, please let us know in Discord.
-        </div>
-
-        <button className="button is-link is-large is-fullwidth">Sign up</button>
-      </form>
-
-      <br />
-
-      <Link to="/login"
-        className="button is-info is-large is-fullwidth is-inverted"
-        >Already have an account? Log in instead!</Link>
-
+      </div>
     </div>
-  )
+  );
 }
 
-export { SignupPage };
\ No newline at end of file
+export { SignupPage };
diff --git a/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx b/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx
index 6e6bdbe1e5..ac8e79c552 100644
--- a/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx
@@ -1,31 +1,38 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { GetTwitchEventRule, GetTwitchEventRuleIsError, GetTwitchEventRuleIsOk, TwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/GetTwitchEventRule';
-import { DeleteTwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/DeleteTwitchEventRule';
-import { TwitchEventRuleElement } from './rule_cards/TwitchEventRuleElement';
-import { Link, useHistory, useParams } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
+import React, { useCallback, useEffect, useState } from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import {
+  GetTwitchEventRule,
+  GetTwitchEventRuleIsError,
+  GetTwitchEventRuleIsOk,
+  TwitchEventRule,
+} from "@storyteller/components/src/api/storyteller/twitch_event_rules/GetTwitchEventRule";
+import { DeleteTwitchEventRule } from "@storyteller/components/src/api/storyteller/twitch_event_rules/DeleteTwitchEventRule";
+import { TwitchEventRuleElement } from "./rule_cards/TwitchEventRuleElement";
+import { Link, useHistory, useParams } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 
 interface Props {
-  sessionWrapper: SessionWrapper,
-  allTtsModelsByToken: Map<string, TtsModelListItem>,
+  sessionWrapper: SessionWrapper;
+  allTtsModelsByToken: Map<string, TtsModelListItem>;
 }
 
 function TtsConfigsDeleteRulePage(props: Props) {
-  const { token } : { token : string } = useParams();
+  const { token }: { token: string } = useParams();
 
   const history = useHistory();
 
-  const [twitchEventRule, setTwitchEventRule] = useState<TwitchEventRule|undefined>(undefined);
+  const [twitchEventRule, setTwitchEventRule] = useState<
+    TwitchEventRule | undefined
+  >(undefined);
 
   const getTwitchEventRule = useCallback(async (token: string) => {
     const response = await GetTwitchEventRule(token);
 
     if (GetTwitchEventRuleIsOk(response)) {
       setTwitchEventRule(response.twitch_event_rule);
-    } else if (GetTwitchEventRuleIsError(response))  {
+    } else if (GetTwitchEventRuleIsError(response)) {
       // TODO
     }
   }, []);
@@ -34,9 +41,11 @@ function TtsConfigsDeleteRulePage(props: Props) {
     getTwitchEventRule(token);
   }, [getTwitchEventRule, token]);
 
-  const indexLink = '/tts_configs';
+  const indexLink = "/tts_configs";
 
-  const handleDeleteFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
+  const handleDeleteFormSubmit = async (
+    ev: React.FormEvent<HTMLFormElement>
+  ): Promise<boolean> => {
     ev.preventDefault();
 
     const result = await DeleteTwitchEventRule(token);
@@ -45,8 +54,7 @@ function TtsConfigsDeleteRulePage(props: Props) {
     }
 
     return false;
-  }
-
+  };
 
   if (!props.sessionWrapper.isLoggedIn()) {
     return <h1>Must Log In</h1>;
@@ -58,35 +66,35 @@ function TtsConfigsDeleteRulePage(props: Props) {
 
   return (
     <>
-      <div className="section">
-        <h1 className="title"> Delete Rule ? </h1>
+      <div className="pt-5 container pb-2">
+        <h1 className="fw-bold mt-5 pt-lg-5">
+          <span className="word">Delete Rule?</span>
+        </h1>
       </div>
 
-      <br />
-
-      <div className="content">
-        <TwitchEventRuleElement 
-          rule={twitchEventRule} 
-          hideButtons={true} 
-          allTtsModelsByToken={props.allTtsModelsByToken} />
+      <div className="container pt-5">
+        <TwitchEventRuleElement
+          rule={twitchEventRule}
+          hideButtons={true}
+          allTtsModelsByToken={props.allTtsModelsByToken}
+        />
       </div>
 
-      <br />
-
-      <form onSubmit={handleDeleteFormSubmit}>
-        <button className="button is-large is-fullwidth is-danger">
-          <FontAwesomeIcon icon={faTrash} />&nbsp;Delete
-        </button>
-      </form>
-      
-      <br />
-
-      <Link to={indexLink} className="button is-large is-fullwidth is-info is-outlined">
-        <FontAwesomeIcon icon={faAngleLeft} />&nbsp;Cancel / Go Back
-      </Link>
+      <div className="container mt-3">
+        <form onSubmit={handleDeleteFormSubmit}>
+          <button className="btn btn-primary w-100">
+            <FontAwesomeIcon icon={faTrash} className="me-2" />
+            Delete
+          </button>
+        </form>
 
+        <Link to={indexLink} className="btn btn-secondary mt-3 mb-5">
+          <FontAwesomeIcon icon={faAngleLeft} />
+          &nbsp;Cancel / Go Back
+        </Link>
+      </div>
     </>
-  )
+  );
 }
 
-export { TtsConfigsDeleteRulePage }
\ No newline at end of file
+export { TtsConfigsDeleteRulePage };
diff --git a/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsIndexPage.tsx b/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsIndexPage.tsx
index ccac8cc2af..84b32da00c 100644
--- a/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsIndexPage.tsx
+++ b/packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsIndexPage.tsx
@@ -17,6 +17,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { Link } from "react-router-dom";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -43,7 +44,11 @@ function TtsConfigsIndexPage(props: Props) {
   }, [listTwitchEventRules]);
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   const cheerEventRules = twitchEventRules.filter(
@@ -102,7 +107,7 @@ function TtsConfigsIndexPage(props: Props) {
         })}
       </div>
 
-      <div className="container pt-5">
+      <div className="container pt-5 mb-5">
         <h2 className="fw-bold">
           <FontAwesomeIcon icon={faBox} className="text-red me-3" />
           Channel Points / Rewards