From b75d330521591e9c9b08585500da2a1c80878b2c Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Sat, 24 Dec 2022 11:40:01 -0600
Subject: [PATCH] added 404 and email confirmation pages, changed discord and
 github buttons to show conditionally

also removed unused imports, fixed one spelling error, and minor styling changes
---
 website/src/components/AuthLayout.tsx       |  4 +-
 website/src/components/CallToAction.tsx     |  4 +-
 website/src/pages/404.tsx                   | 45 ++++++++++
 website/src/pages/_app.tsx                  |  3 +
 website/src/pages/api/auth/[...nextauth].ts |  2 +
 website/src/pages/auth/signup.tsx           | 91 ++++++++++++---------
 website/src/pages/auth/verify.tsx           | 38 +++++++++
 7 files changed, 143 insertions(+), 44 deletions(-)
 create mode 100644 website/src/pages/404.tsx
 create mode 100644 website/src/pages/auth/verify.tsx

diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx
index 569a1e8b..04110253 100644
--- a/website/src/components/AuthLayout.tsx
+++ b/website/src/components/AuthLayout.tsx
@@ -3,9 +3,9 @@ import Image from "next/image";
 
 export function AuthLayout({ children }) {
   return (
-    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28">
+    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-extrabold text-black">
+        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-bold text-black">
           <Image src="/images/logos/logo.svg" width="100" height="100" alt="Open Assistant Logo" /> Open Assistant
         </Link>
         <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-20">
diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index 35949645..2fd91c79 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -12,7 +12,7 @@ export function CallToAction() {
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">Join Us</h2>
           <p className="mt-4 text-lg text-gray-300">
             All open source projects begin with people like you. Open source is the belief that if we collaborate we can
-            together gift our knoweledge and technology to the world for the benefit of humanity. Are you in? Find us
+            together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
             here:
           </p>
           <div className="mt-8 flex justify-center">
@@ -27,7 +27,7 @@ export function CallToAction() {
                     d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
                   />
                 </svg>
-                <span className="text-lg ml-3">DISCORD</span>
+                <span className="text-lg ml-3">Discord</span>
               </button>
             </a>
 
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
new file mode 100644
index 00000000..efbbbdb2
--- /dev/null
+++ b/website/src/pages/404.tsx
@@ -0,0 +1,45 @@
+import { useSession } from "next-auth/react";
+import { Footer } from "../components/Footer";
+import { Header } from "../components/Header";
+import Head from "next/head";
+import Link from "next/link";
+
+export default function Error() {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return (
+      <>
+        <Head>
+          <title>Open Assistant</title>
+          <meta name="404" content="Sorry, this page doesn't exist." />
+        </Head>
+        <Header />
+        <main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
+          Sorry, the page you're looking for doesn't exist.
+        </main>
+        <Footer />
+      </>
+    );
+  }
+  return (
+    <>
+      <Head>
+        <title>Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+      <Header />
+      <main>
+        <h2>Open Chat Gpt</h2>
+
+        <p>You are logged in</p>
+
+        <Link href="/grading/grade-output">~Rate a prompt and output now~</Link>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index 830dd267..18e3315f 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -14,6 +14,9 @@ const inter = Inter({
 const theme = extendTheme({
   styles: {
     global: {
+      body: {
+        bg: "white",
+      },
       main: {
         fontFamily: "Inter",
       },
diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts
index 148b620d..f823ed41 100644
--- a/website/src/pages/api/auth/[...nextauth].ts
+++ b/website/src/pages/api/auth/[...nextauth].ts
@@ -38,6 +38,8 @@ export const authOptions: AuthOptions = {
   providers,
   pages: {
     signIn: "/auth/signup",
+    verifyRequest: "/auth/verify",
+    // error: "/auth/error", -Will be used later
   },
   session: {
     strategy: "jwt",
diff --git a/website/src/pages/auth/signup.tsx b/website/src/pages/auth/signup.tsx
index e07ebe01..4afc3102 100644
--- a/website/src/pages/auth/signup.tsx
+++ b/website/src/pages/auth/signup.tsx
@@ -1,6 +1,6 @@
-import { Box, Button, ButtonGroup, Input, Stack } from "@chakra-ui/react";
+import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
-import { FaDiscord, FaEnvelope, FaGithub, FaMagic } from "react-icons/fa";
+import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
 import { useRef } from "react";
 import Link from "next/link";
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { AuthLayout } from "src/components/AuthLayout";
 
 export default function Signin({ csrfToken, providers }) {
-  const { discord, email } = providers;
+  const { discord, email, github } = providers;
   const emailEl = useRef(null);
   const signinWithEmail = () => {
     signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
@@ -36,45 +36,56 @@ export default function Signin({ csrfToken, providers }) {
               </Button>
             </Stack>
           )}
-          {/* {discord && ( */}
-          <Button
-            bg="#5865F2"
-            _hover={{ bg: "#4A57E3" }}
-            _active={{
-              bg: "#454FBF",
-            }}
-            // Uses official Discord 'Blurple' colors
-            size="lg"
-            // isDisabled="true"
-            leftIcon={<FaDiscord />}
-            color="white"
-            // onClick={() => signIn(discord.id, { callbackUrl: "/" })}
-          >
-            Continue with Discord
-          </Button>
-          {/* )} */}
-          <Button
-            bg="#333333"
-            _hover={{ bg: "#181818" }}
-            _active={{
-              bg: "#101010",
-            }}
-            size={"lg"}
-            // isDisabled="true"
-            leftIcon={<FaGithub />}
-            colorScheme="blue"
-          >
-            Continue with Github
-          </Button>
+          {discord && (
+            <Button
+              bg="#5865F2"
+              _hover={{ bg: "#4A57E3" }}
+              _active={{
+                bg: "#454FBF",
+              }}
+              size="lg"
+              leftIcon={<FaDiscord />}
+              color="white"
+              onClick={() => signIn(discord, { callbackUrl: "/" })}
+              // isDisabled="false"
+            >
+              Continue with Discord
+            </Button>
+          )}
+          {github && (
+            <Button
+              bg="#333333"
+              _hover={{ bg: "#181818" }}
+              _active={{
+                bg: "#101010",
+              }}
+              size={"lg"}
+              leftIcon={<FaGithub />}
+              colorScheme="blue"
+              // isDisabled="false"
+            >
+              Continue with Github
+            </Button>
+          )}
         </Stack>
+        <div className="pt-10 text-center">
+          By signing up you agree to our <br></br>
+          <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-4">
+            <b>Terms of Service</b>
+          </Link>{" "}
+          and{" "}
+          <Link href="#" aria-label="Terms of Use" className="hover:underline underline-offset-4">
+            <b>Privacy Policy</b>
+          </Link>
+          .
+        </div>
         <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
-        <Link
-          href="#"
-          aria-label="Log In"
-          className="flex justify-center font-medium text-black hover:underline underline-offset-4"
-        >
-          Already have an account? Log In
-        </Link>
+        <div className="text-center">
+          Already have an account?{" "}
+          <Link href="#" aria-label="Log In" className="hover:underline underline-offset-4">
+            <b>Log In</b>
+          </Link>
+        </div>
       </AuthLayout>
     </>
   );
diff --git a/website/src/pages/auth/verify.tsx b/website/src/pages/auth/verify.tsx
new file mode 100644
index 00000000..b2638e6d
--- /dev/null
+++ b/website/src/pages/auth/verify.tsx
@@ -0,0 +1,38 @@
+import Head from "next/head";
+import { getCsrfToken, getProviders, signIn } from "next-auth/react";
+import Link from "next/link";
+
+import { AuthLayout } from "src/components/AuthLayout";
+
+export default function Verify() {
+  return (
+    <>
+      <Head>
+        <title>Sign Up - Open Assistant</title>
+        <meta name="Sign Up" content="Sign up to access Open Assistant" />
+      </Head>
+      <AuthLayout>
+        <h1 className="text-lg">A sign-in link has been sent to your email address.</h1>
+        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
+        <Link
+          href="#"
+          aria-label="Log In"
+          className="flex justify-center font-medium text-black hover:underline underline-offset-4"
+        >
+          Already have an account? Log In
+        </Link>
+      </AuthLayout>
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const csrfToken = await getCsrfToken();
+  const providers = await getProviders();
+  return {
+    props: {
+      csrfToken,
+      providers,
+    },
+  };
+}