From de869033bf9edf3c051d01c264637b3d286a65ae Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Tue, 27 Dec 2022 13:00:32 -0600
Subject: [PATCH] updated avatar component name, added ability to change
 username (only works server side for now), updated signin page, updated
 Footer

Still working on the account settings page but didn't want to get behind on commits.
---
 website/src/components/Footer.tsx             | 78 ++++++++++++++-----
 website/src/components/Header.tsx             |  8 +-
 .../components/{Avatar.tsx => UserMenu.tsx}   | 11 ++-
 website/src/middleware.ts                     |  2 +-
 website/src/pages/404.tsx                     | 32 +-------
 website/src/pages/_app.tsx                    |  2 +-
 website/src/pages/account/edit.tsx            | 64 +++++++++++++++
 website/src/pages/account/index.tsx           | 52 +++++++++++++
 website/src/pages/api/auth/[...nextauth].ts   |  3 +-
 website/src/pages/api/username.tsx            | 22 ++++++
 .../src/pages/auth/{signup.tsx => signin.tsx} | 41 ++++------
 website/src/pages/auth/verify.tsx             |  8 --
 12 files changed, 231 insertions(+), 92 deletions(-)
 rename website/src/components/{Avatar.tsx => UserMenu.tsx} (92%)
 create mode 100644 website/src/pages/account/edit.tsx
 create mode 100644 website/src/pages/account/index.tsx
 create mode 100644 website/src/pages/api/username.tsx
 rename website/src/pages/auth/{signup.tsx => signin.tsx} (75%)

diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index fa3d8c0d..90fca02f 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,35 +1,75 @@
 import Image from "next/image";
 import Link from "next/link";
 
+import { FaGithub, FaDiscord } from "react-icons/fa";
 import { Container } from "./Container";
-import { NavLinks } from "./NavLinks";
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
-      <Container className="">
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
-          <div>
-            <div className="flex items-center text-gray-900">
+    <footer className="border-t border-gray-200 bg-white">
+      <main>
+        <Container className="">
+          <div className="flex flex-wrap justify-between gap-y-12 py-10 lg:items-center lg:py-16">
+            <div className="flex items-center text-black pr-8">
               <Link href="/" aria-label="Home" className="flex items-center">
-                <Image
-                  src="/images/logos/CHAT-THOUGHT-LOGO.svg"
-                  className="mx-auto object-fill"
-                  width="50"
-                  height="50"
-                  alt="logo"
-                />
+                <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
               </Link>
 
-              <div className="ml-4">
-                <p className="text-base font-semibold">Open Assistant</p>
-                <p className="mt-1 text-sm">Conversational AI for everyone.</p>
+              <div className="ml-2">
+                <p className="text-base font-bold">Open Assistant</p>
+                <p className="text-sm">Conversational AI for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
+            <nav className="flex justify-center gap-20">
+              <div className="flex flex-col text-sm leading-7">
+                <b>Information</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                    Our Team
+                  </Link>
+                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                    Join Us
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Legal</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
+                    Privacy Policy
+                  </Link>
+                  <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
+                    Terms of Service
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Connect</b>
+                <div className="flex flex-col leading-5">
+                  <Link
+                    href="https://github.com/LAION-AI/Open-Assistant"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Privacy Policy"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Github
+                  </Link>
+                  <Link
+                    href="https://discord.gg/pXtnYk9c"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Terms of Service"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Discord
+                  </Link>
+                </div>
+              </div>
+            </nav>
           </div>
-        </div>
-      </Container>
+        </Container>
+      </main>
     </footer>
   );
 }
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index c47982a1..9913124a 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaUser, FaSignOutAlt } from "react-icons/fa";
 
-import { Avatar } from "./Avatar";
+import { UserMenu } from "./UserMenu";
 import { Container } from "./Container";
 import { NavLinks } from "./NavLinks";
 
@@ -45,9 +45,9 @@ function AccountButton() {
     return;
   }
   return (
-    <Link href="/auth/signup" aria-label="Home" className="flex items-center">
+    <Link href="/auth/signin" aria-label="Home" className="flex items-center">
       <Button variant="outline" leftIcon={<FaUser />}>
-        Log in
+        Sign in
       </Button>
     </Link>
   );
@@ -113,7 +113,7 @@ export function Header() {
               )}
             </Popover>
             <AccountButton />
-            <Avatar />
+            <UserMenu />
           </div>
         </Container>
       </nav>
diff --git a/website/src/components/Avatar.tsx b/website/src/components/UserMenu.tsx
similarity index 92%
rename from website/src/components/Avatar.tsx
rename to website/src/components/UserMenu.tsx
index 26bdec0b..e3b0d819 100644
--- a/website/src/components/Avatar.tsx
+++ b/website/src/components/UserMenu.tsx
@@ -5,7 +5,7 @@ import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
 
-export function Avatar() {
+export function UserMenu() {
   const { data: session } = useSession();
 
   if (!session) {
@@ -16,7 +16,7 @@ export function Avatar() {
     const accountOptions = [
       {
         name: "Account Settings",
-        href: "#",
+        href: "/account",
         desc: "Account Settings",
         icon: FaCog,
         //For future use
@@ -35,8 +35,7 @@ export function Avatar() {
                   height="40"
                   className="rounded-full"
                 ></Image>
-                <p className="hidden lg:flex">{email}</p>
-                {/* Will be changed to username once it is implemented */}
+                <p className="hidden lg:flex">{session.user.name || session.user.email}</p>
               </div>
             </Popover.Button>
             <AnimatePresence initial={false}>
@@ -72,7 +71,7 @@ export function Avatar() {
                       ))}
                       <a
                         className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut()}
+                        onClick={() => signOut({ callbackUrl: "/" })}
                       >
                         <div className="p-4">
                           <FaSignOutAlt />
@@ -93,4 +92,4 @@ export function Avatar() {
   }
 }
 
-export default Avatar;
+export default UserMenu;
diff --git a/website/src/middleware.ts b/website/src/middleware.ts
index b383586b..fdaa071c 100644
--- a/website/src/middleware.ts
+++ b/website/src/middleware.ts
@@ -4,5 +4,5 @@ export { default } from "next-auth/middleware";
  * Guards all pages under `/grading` and redirects them to the sign in page.
  */
 export const config = {
-  matcher: ["/grading/:path*"],
+  matcher: ["/grading/:path*", "/account/:path*", "/summarize/:path*"],
 };
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index 0b7a5c9b..32fb60a8 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -5,39 +5,15 @@ 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 does not 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."
-        />
+        <title>404 - Open Assistant</title>
+        <meta name="404" content="Sorry, this page doesn't exist." />
       </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 className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
+        "Sorry, the page you're looking for does not exist."
       </main>
       <Footer />
     </>
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index 18e3315f..c4463d00 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -30,7 +30,7 @@ const theme = extendTheme({
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <ChakraProvider theme={theme}>
-      <SessionProvider session={session}>
+      <SessionProvider session={pageProps.session}>
         <Component {...pageProps} />
       </SessionProvider>
     </ChakraProvider>
diff --git a/website/src/pages/account/edit.tsx b/website/src/pages/account/edit.tsx
new file mode 100644
index 00000000..3ed83d82
--- /dev/null
+++ b/website/src/pages/account/edit.tsx
@@ -0,0 +1,64 @@
+import Head from "next/head";
+import Link from "next/link";
+import Router from "next/router";
+import React, { useState } from "react";
+import { getSession, useSession } from "next-auth/react";
+import { PrismaClient, User } from "@prisma/client";
+import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Footer } from "../../components/Footer";
+import { Header } from "../../components/Header";
+
+import styles from "../styles/Home.module.css";
+
+export default function Account() {
+  const { data: session } = useSession();
+  const [username, setUsername] = useState("");
+  const updateUser = async (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    try {
+      const body = { username };
+      await fetch("../api/username", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      await Router.push("/account");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!session) {
+    return;
+  }
+  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 className="h-3/4 z-0 bg-white flex flex-col items-center justify-center">
+        <p>{session.user.name || "No username"}</p>
+        <form onSubmit={updateUser}>
+          <InputGroup>
+            <Input
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Edit Username"
+              type="text"
+              value={username}
+            ></Input>
+            <Button disabled={!username} type="submit" value="Change">
+              Submit
+            </Button>
+          </InputGroup>
+        </form>
+        <p>{session.user.email}</p>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
new file mode 100644
index 00000000..276236bc
--- /dev/null
+++ b/website/src/pages/account/index.tsx
@@ -0,0 +1,52 @@
+import Head from "next/head";
+import Link from "next/link";
+import Router from "next/router";
+import React, { useEffect, useState } from "react";
+import { getSession, useSession } from "next-auth/react";
+import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Footer } from "../../components/Footer";
+import { Header } from "../../components/Header";
+
+import styles from "../styles/Home.module.css";
+import { getSystemErrorName } from "util";
+
+export default function Account() {
+  const { data: session } = useSession();
+  const [username, setUsername] = useState("null");
+
+  const handleUpdate = async () => {
+    const response = await fetch("../api/update", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ username }),
+    });
+    const { name } = await response.json();
+    setUsername(name);
+  };
+
+  if (!session) {
+    return;
+  }
+  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 className="h-3/4 z-0 bg-white flex flex-col items-center justify-center">
+        <p>{username}</p>
+        <Button>
+          <Link href="/account/edit">Edit Username</Link>
+        </Button>
+        <p>{session.user.email}</p>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts
index f823ed41..a4e23275 100644
--- a/website/src/pages/api/auth/[...nextauth].ts
+++ b/website/src/pages/api/auth/[...nextauth].ts
@@ -1,5 +1,6 @@
 import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
+import { NextApiHandler } from "next";
 import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
@@ -37,7 +38,7 @@ export const authOptions: AuthOptions = {
   adapter: PrismaAdapter(prisma),
   providers,
   pages: {
-    signIn: "/auth/signup",
+    signIn: "/auth/signin",
     verifyRequest: "/auth/verify",
     // error: "/auth/error", -Will be used later
   },
diff --git a/website/src/pages/api/username.tsx b/website/src/pages/api/username.tsx
new file mode 100644
index 00000000..e2e41e25
--- /dev/null
+++ b/website/src/pages/api/username.tsx
@@ -0,0 +1,22 @@
+import { getSession } from "next-auth/react";
+import { Prisma } from "@prisma/client";
+import Email from "next-auth/providers/email";
+
+// POST /api/post
+// Required fields in body: title
+// Optional fields in body: content
+export default async function handle(req, res) {
+  const { username } = req.body;
+  const { email } = req.body;
+
+  const session = await getSession({ req });
+  const result = await prisma.user.update({
+    where: {
+      email: session?.user?.email,
+    },
+    data: {
+      name: username,
+    },
+  });
+  res.json({ name: result.name });
+}
diff --git a/website/src/pages/auth/signup.tsx b/website/src/pages/auth/signin.tsx
similarity index 75%
rename from website/src/pages/auth/signup.tsx
rename to website/src/pages/auth/signin.tsx
index 4afc3102..458a3d57 100644
--- a/website/src/pages/auth/signup.tsx
+++ b/website/src/pages/auth/signin.tsx
@@ -1,9 +1,9 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
+import Link from "next/link";
+import { useRef } from "react";
 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";
 
 import { AuthLayout } from "src/components/AuthLayout";
 
@@ -13,25 +13,25 @@ export default function Signin({ csrfToken, providers }) {
   const signinWithEmail = () => {
     signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
   };
+  const signinWithDiscord = () => {
+    signIn(discord.id, { callbackUrl: "/" });
+  };
+  const signinWithGithub = () => {
+    signIn(github.id, { callbackUrl: "/" });
+  };
 
   return (
     <>
       <Head>
-        <title>Sign Up - Open Assistant</title>
-        <meta name="Sign Up" content="Sign up to access Open Assistant" />
+        <title>Sign In - Open Assistant</title>
+        <meta name="Sign In" content="Sign in to access Open Assistant" />
       </Head>
       <AuthLayout>
         <Stack spacing="2">
           {email && (
-            <Stack>
+            <Stack className="mb-4">
               <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
-              <Button
-                size={"lg"}
-                leftIcon={<FaEnvelope />}
-                colorScheme="gray"
-                onClick={signinWithEmail}
-                // isDisabled="false"
-              >
+              <Button size={"lg"} leftIcon={<FaEnvelope />} colorScheme="gray" onClick={signinWithEmail}>
                 Continue with Email
               </Button>
             </Stack>
@@ -46,8 +46,7 @@ export default function Signin({ csrfToken, providers }) {
               size="lg"
               leftIcon={<FaDiscord />}
               color="white"
-              onClick={() => signIn(discord, { callbackUrl: "/" })}
-              // isDisabled="false"
+              onClick={signinWithDiscord}
             >
               Continue with Discord
             </Button>
@@ -62,14 +61,15 @@ export default function Signin({ csrfToken, providers }) {
               size={"lg"}
               leftIcon={<FaGithub />}
               colorScheme="blue"
-              // isDisabled="false"
+              onClick={signinWithGithub}
             >
               Continue with Github
             </Button>
           )}
         </Stack>
-        <div className="pt-10 text-center">
-          By signing up you agree to our <br></br>
+        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
+        <div className="text-center">
+          By continuing 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>{" "}
@@ -79,13 +79,6 @@ export default function Signin({ csrfToken, providers }) {
           </Link>
           .
         </div>
-        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
-        <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
index b2638e6d..f22bea2d 100644
--- a/website/src/pages/auth/verify.tsx
+++ b/website/src/pages/auth/verify.tsx
@@ -13,14 +13,6 @@ export default function Verify() {
       </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>
     </>
   );