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

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

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>

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;

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*"],
 };

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 />
     </>

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>

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 />
+    </>
+  );
+}

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 />
+    </>
+  );
+}

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

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

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>
     </>
   );

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>
     </>
   );