header and login

frontend/src/components/Header.tsx

@@ -0,0 +1,37 @@
+import { Box, Flex, Heading } from "@chakra-ui/layout";
+import { Text } from "@chakra-ui/react";
+import React, { FC } from "react";
+
+const Header: FC = ({ children }) => {
+  return (
+    <Flex
+      as="header"
+      position="fixed"
+      w="100%"
+      justifyContent="space-between"
+      outline="1"
+      padding="1"
+    >
+      <Flex
+        alignSelf="flex-start"
+        bgGradient="linear(to-l, #7928CA, #FF0080)"
+        bgClip="text"
+        height="100%"
+      >
+        <Heading fontSize="2rem">Watch Together</Heading>
+        <Text
+          fontStyle="italic"
+          ml="2"
+          mt="1"
+          fontSize="2xl"
+          fontWeight="semibold"
+        >
+          admin
+        </Text>
+      </Flex>
+      {children}
+    </Flex>
+  );
+};
+
+export default Header;

frontend/src/components/UserData.tsx

@@ -0,0 +1,21 @@
+import { Avatar } from "@chakra-ui/avatar";
+import { Box, Flex, Text } from "@chakra-ui/layout";
+import { Session } from "next-auth";
+import React, { FC } from "react";
+
+interface UserDataProps {
+  user: Session["user"];
+}
+
+const UserData: FC<UserDataProps> = ({ user: { name, image } }) => {
+  return (
+    <Flex alignSelf="flex-end" mr="2" mt="1">
+      <Avatar src={image} />
+      <Box ml="3" mt="2">
+        <Text fontWeight="bold">{name}</Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default UserData;

frontend/src/pages/admin/index.tsx

@@ -0,0 +1,70 @@
+import { Text } from "@chakra-ui/layout";
+import { Flex as Box } from "@chakra-ui/react";
+import { GetServerSideProps, NextPage } from "next";
+import { Session } from "next-auth";
+import { getSession } from "next-auth/react";
+import React from "react";
+import { Container } from "../../components/Container";
+import Header from "../../components/Header";
+import UserData from "../../components/UserData";
+
+interface AdminPageProps {
+  isAuthed: boolean;
+  isAdmin: boolean;
+  session?: Session;
+}
+
+const AdminPage: NextPage<AdminPageProps> = ({
+  isAuthed,
+  isAdmin,
+  session,
+}) => {
+  console.log(session);
+  return (
+    <>
+      <Container height="100vh">
+        <Header>
+          <UserData user={session.user} />
+        </Header>
+        <Container
+          height="30vh"
+          mt="5rem"
+          backgroundColor="gray.700"
+          width="100vw"
+        >
+          <Text>Hello</Text>
+        </Container>
+      </Container>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context);
+  if (session) {
+    const isAdmin = session.user.name.includes("qpixel");
+    if (!isAdmin) {
+      return {
+        redirect: {
+          destination: "/",
+          permanent: false,
+        },
+      };
+    }
+    return {
+      props: {
+        isAuthed: true,
+        isAdmin: isAdmin,
+        session: session,
+      } as AdminPageProps,
+    };
+  }
+  return {
+    props: {
+      isAdmin: false,
+      isAuthed: false,
+    } as AdminPageProps,
+  };
+};
+
+export default AdminPage;

frontend/src/pages/admin/signout.tsx

@@ -0,0 +1,54 @@
+import { GetServerSideProps, NextPage } from "next";
+import React, { useEffect } from "react";
+import { Container } from "../../components/Container";
+import { Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import {
+  getSession,
+  signOut,
+  SignOutResponse,
+  useSession,
+} from "next-auth/react";
+
+const SignOutPage: NextPage = () => {
+  const router = useRouter();
+  const session = useSession();
+  let data: SignOutResponse | null;
+  const signout = async () => {
+    data = await signOut({ redirect: false, callbackUrl: "/" });
+  };
+  if (session) {
+    useEffect(() => {
+      signout();
+      setTimeout(() => {
+        if (data) {
+          router.push(data.url);
+        } else {
+          router.push("/");
+        }
+      }, 600);
+    }, []);
+  }
+  return (
+    <Container height="100vh">
+      <Text>Signing out!</Text>
+    </Container>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context);
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: {},
+  };
+};
+
+export default SignOutPage;

frontend/src/pages/index.tsx

@@ -28,8 +28,9 @@ const Index: NextPage = () => {
 };
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const session = getSession(context);
-  if (session) {
+  const session = await getSession(context);
+  const isDev = true;
+  if (session && !isDev) {
     return {
       redirect: {
         destination: "/player",

frontend/src/pages/player.tsx

@@ -1,10 +1,15 @@
-import { NextPage } from "next";
+import { GetServerSideProps, NextPage } from "next";
+import { getSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import React from "react";
 import { Container } from "../components/Container";
 
 const Player = dynamic(() => import("../components/Player"));
 
+interface PlayerPage {
+  id: string;
+}
+
 const PlayerPage: NextPage = () => {
   return (
     <Container height="100vh">
@@ -13,4 +18,21 @@ const PlayerPage: NextPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = getSession(context);
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: {
+      id: "BELLE",
+    },
+  };
+};
+
 export default PlayerPage;