feat: admin login discord setup (#244)

ivanms1 · Aug 19, 2023 · bdb8b96 · bdb8b96 · vercel · Aug 19, 2023
1 parent 4ff60df
commit bdb8b96
Show file tree

Hide file tree

Showing 17 changed files with 307 additions and 67 deletions.
diff --git a/apps/admin/next.config.js b/apps/admin/next.config.js
@@ -22,6 +22,7 @@ module.exports = withTM({
       'loremflickr.com',
       'github.com',
       'github.githubassets.com',
+      'cdn.discordapp.com',
     ],
   },
 });
diff --git a/apps/admin/pages/api/auth/[...nextauth].ts b/apps/admin/pages/api/auth/[...nextauth].ts
@@ -2,6 +2,7 @@ import { initializeApollo } from 'apollo';
 import { LoginAsAdminMutation } from 'apollo-hooks';
 import NextAuth from 'next-auth';
 import GithubProvider from 'next-auth/providers/github';
+import DiscordProvider from 'next-auth/providers/discord';
 
 import MUTATION_LOGIN_AS_ADMIN from './mutationLoginAsAdmin.graphql';
 
@@ -16,6 +17,15 @@ export default NextAuth({
       clientId: process.env.GITHUB_CLIENT_ID,
       clientSecret: process.env.GITHUB_CLIENT_SECRET,
     }),
+    DiscordProvider({
+      clientId: process.env.DISCORD_CLIENT_ID!,
+      clientSecret: process.env.DISCORD_CLIENT_SECRET!,
+      authorization: {
+        params: {
+          scope: 'identify email',
+        },
+      },
+    }),
   ],
   callbacks: {
     async signIn({ account }) {
@@ -25,6 +35,7 @@ export default NextAuth({
         mutation: MUTATION_LOGIN_AS_ADMIN,
         variables: {
           token: account.access_token,
+          provider: account?.provider,
         },
       });
       if (account) {

diff --git a/apps/admin/pages/api/auth/mutationLoginAsAdmin.graphql b/apps/admin/pages/api/auth/mutationLoginAsAdmin.graphql
@@ -1,3 +1,3 @@
-mutation LoginAsAdmin($token: String!) {
-  loginAsAdmin(token: $token)
+mutation LoginAsAdmin($token: String!, $provider: Providers!) {
+  loginAsAdmin(token: $token, provider: $provider)
 }
diff --git a/apps/admin/pages/styles.css b/apps/admin/pages/styles.css
@@ -1,3 +1,54 @@
+@layer ui, base, application;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  * {
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #fff;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    line-height: 1.5;
+    tab-size: 4;
+    scroll-behavior: smooth;
+  }
+  body {
+    font-family: inherit;
+    line-height: inherit;
+    margin: 0;
+    position: relative;
+  }
+  h1,
+  h2,
+  p,
+  pre {
+    margin: 0;
+  }
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+  h1,
+  h2 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+}
diff --git a/apps/admin/public/assets/icons/discord.svg b/apps/admin/public/assets/icons/discord.svg
diff --git a/apps/admin/public/assets/icons/github.svg b/apps/admin/public/assets/icons/github.svg
diff --git a/apps/admin/public/assets/images/login-bg.jpg b/apps/admin/public/assets/images/login-bg.jpg
diff --git a/apps/admin/public/assets/shelf.png b/apps/admin/public/assets/shelf.png
diff --git a/apps/admin/src/pages/Dashboard/Dashboard.tsx b/apps/admin/src/pages/Dashboard/Dashboard.tsx
@@ -9,13 +9,13 @@ const Dashboard = () => {
   const { data: projectsAdminData } = useGetProjectsAdminQuery();
 
   return (
-    <div className='w-full h-full  flex flex-col border-2'>
+    <div className='flex h-full  w-full flex-col border-2'>
       <div className=' flex flex-row gap-[100px] pb-10'>
-        <div className=' h-[266px] w-[232px] py-5 px-14 bg-white flex flex-col items-center justify-center gap-5 rounded-t-md border-2 border-[#72767C]-200'>
-          <span className='w-10 h-10 rounded-circle flex items-center justify-center bg-red-200 ' />
+        <div className=' border-[#72767C]-200 flex h-[266px] w-[232px] flex-col items-center justify-center gap-5 rounded-t-md border-2 bg-white py-5 px-14'>
+          <span className='flex h-10 w-10 items-center justify-center rounded-circle bg-red-200 ' />
 
           <div className='flex flex-col items-center gap-2.5 '>
-            <span className='text-2xl text-dark-blue text-center'>
+            <span className='text-center text-2xl text-dark-blue'>
               Total Users
             </span>
             <span className='text-2xl text-dark-blue '>
@@ -24,11 +24,11 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className=' h-[266px] w-[232px] py-5 px-14 bg-white flex flex-col items-center justify-center gap-5 rounded-t-md border-2 border-[#72767C]-200'>
-          <span className='w-10 h-10 rounded-circle flex items-center justify-center bg-red-200 ' />
+        <div className=' border-[#72767C]-200 flex h-[266px] w-[232px] flex-col items-center justify-center gap-5 rounded-t-md border-2 bg-white py-5 px-14'>
+          <span className='flex h-10 w-10 items-center justify-center rounded-circle bg-red-200 ' />
 
-          <div className='flex flex-col gap-2.5 items-center'>
-            <span className='text-5 text-dark-blue text-center'>
+          <div className='flex flex-col items-center gap-2.5'>
+            <span className='text-5 text-center text-dark-blue'>
               Banned Users
             </span>
             <span className='text-2xl text-dark-blue '>
@@ -37,11 +37,11 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className=' h-[266px] w-[232px] py-5 px-14 bg-white flex flex-col items-center justify-center gap-5 rounded-t-md border-2 border-[#72767C]-200'>
-          <span className='w-10 h-10 rounded-circle flex items-center justify-center bg-red-200 ' />
+        <div className=' border-[#72767C]-200 flex h-[266px] w-[232px] flex-col items-center justify-center gap-5 rounded-t-md border-2 bg-white py-5 px-14'>
+          <span className='flex h-10 w-10 items-center justify-center rounded-circle bg-red-200 ' />
 
-          <div className='flex flex-col gap-2.5 items-center'>
-            <span className='text-5 text-dark-blue text-center'>
+          <div className='flex flex-col items-center gap-2.5'>
+            <span className='text-5 text-center text-dark-blue'>
               Total Projects
             </span>
             <span className='text-2xl text-dark-blue'>
@@ -51,18 +51,18 @@ const Dashboard = () => {
         </div>
       </div>
 
-      <div className='flex flex-row gap-12 h-full w-full '>
-        <div className='flex flex-col h-full w-full gap-5 bg-white rounded-t-md py-[22px] px-6'>
-          <div className='flex flex-row text-dark-blue text-5 '>
+      <div className='flex h-full w-full flex-row gap-12 '>
+        <div className='flex h-full w-full flex-col gap-5 rounded-t-md bg-white py-[22px] px-6'>
+          <div className='text-5 flex flex-row text-dark-blue '>
             <span className='font-bold'>
               User <span className='font-normal'>Statistics</span>
             </span>
           </div>
           <BarGraph fillColor='#FF764C' />
         </div>
 
-        <div className='flex flex-col h-full w-full gap-5 bg-white rounded-t-md py-[22px] px-6'>
-          <div className='flex flex-row text-dark-blue text-5 '>
+        <div className='flex h-full w-full flex-col gap-5 rounded-t-md bg-white py-[22px] px-6'>
+          <div className='text-5 flex flex-row text-dark-blue '>
             <span className='font-bold'>
               Project <span className='font-normal'>Statistics</span>
             </span>
@@ -71,7 +71,25 @@ const Dashboard = () => {
         </div>
       </div>
 
-      <NextSeo title='Dashboard' />
+      <NextSeo
+        title='Admin | Dashboard'
+        description='Admin dashboard page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Dashboard',
+          description:
+            'Control the users status, project and ban them if necessary',
+          site_name: 'Admin dashboard page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 };

diff --git a/apps/admin/src/pages/Home/Home.tsx b/apps/admin/src/pages/Home/Home.tsx
@@ -5,7 +5,25 @@ import { NextSeo } from 'next-seo';
 const Home = () => {
   return (
     <div className='bg-gray-200'>
-      <NextSeo title='Admin | Home' />
+      <NextSeo
+        title='Admin | Home'
+        description='Admin home page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Home',
+          description:
+            'Control the users status, project and ban them if necessary',
+          site_name: 'Admin home page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 };

diff --git a/apps/admin/src/pages/Login/Login.tsx b/apps/admin/src/pages/Login/Login.tsx
@@ -4,15 +4,67 @@ import { NextSeo } from 'next-seo';
 
 import { Button } from 'ui';
 
+import GithubIcon from '@/public/assets/icons/github.svg';
+import DiscordIcon from '@/public/assets/icons/discord.svg';
+import Image from 'next/future/image';
+
 const Login = () => {
   return (
-    <div className='h-screen flex justify-center items-center'>
-      <div className='flex flex-col'>
-        <span className='text-gray-900 text-[30px] font-bold'>Get Started</span>
-        <Button onClick={() => signIn('github')}>Login</Button>
-      </div>
+    <div className='flex h-screen   bg-black'>
+      <div className='flex flex-1  flex-row '>
+        <div className='flex w-full flex-col items-center justify-center '>
+          <div className='flex flex-col gap-4 '>
+            <span className='text-center text-[30px] font-medium text-white'>
+              Log In
+            </span>
+            <Button
+              className='flex w-80 items-center justify-center gap-2'
+              size='small'
+              onClick={() => signIn('discord')}
+            >
+              <DiscordIcon className='h-8 fill-white' />
+              Discord
+            </Button>
+            <Button
+              className='flex w-80 items-center justify-center gap-2'
+              size='small'
+              onClick={() => signIn('github')}
+            >
+              <GithubIcon className='h-7 fill-white' />
+              Github
+            </Button>
+          </div>
+        </div>
 
-      <NextSeo title='Login | Admin' />
+        <div className='hidden w-full sm:hidden lg:flex'>
+          <div className='relative w-full'>
+            <Image
+              priority
+              src='/assets/images/login-bg.jpg'
+              fill
+              alt='library'
+            />
+          </div>
+        </div>
+      </div>
+      <NextSeo
+        title='Admin | Login'
+        description='Admin Login page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Login',
+          description: 'Login into project shelf as an Admin',
+          site_name: 'Admin Login page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 };

diff --git a/apps/admin/src/pages/Projects/Projects.tsx b/apps/admin/src/pages/Projects/Projects.tsx
@@ -267,7 +267,25 @@ const Projects = () => {
           <Button onClick={() => setDeleteProjectId(null)}>No</Button>
         </div>
       </Modal>
-      <NextSeo title='Projects' />
+      <NextSeo
+        title='Admin | Projects'
+        description='Admin projects page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Projects',
+          description:
+            'Control the users status, project and ban them if necessary',
+          site_name: 'Admin projects page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 };

diff --git a/apps/admin/src/pages/Reports/Reports.tsx b/apps/admin/src/pages/Reports/Reports.tsx
@@ -233,7 +233,25 @@ const Reports = () => {
           <Button onClick={() => setDeleteReportId(null)}>No</Button>
         </div>
       </Modal>
-      <NextSeo title='Reports' />
+      <NextSeo
+        title='Admin | Reports'
+        description='Admin reports page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Reports',
+          description:
+            'See who has reported a project in the project shelf project',
+          site_name: 'Admin reports page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 };

diff --git a/apps/admin/src/pages/Settings/Settings.tsx b/apps/admin/src/pages/Settings/Settings.tsx
@@ -4,9 +4,27 @@ import { NextSeo } from 'next-seo';
 
 function Index() {
   return (
-    <div className='w-full h-full bg-white p-[30px]'>
-      <p className='text-gray-900 text-3xl font-bold'>Settings</p>
-      <NextSeo title='Settings' />
+    <div className='h-full w-full bg-white p-[30px]'>
+      <p className='text-3xl font-bold text-gray-900'>Settings</p>
+      <NextSeo
+        title='Admin | Settings'
+        description='Admin settings page'
+        openGraph={{
+          type: 'website',
+          title: 'Admin | Settings',
+          description:
+            'Control the users status, project and ban them if necessary',
+          site_name: 'Admin Settings page',
+          images: [
+            {
+              url: 'https://project-shelf-dev.netlify.app/assets/images/shelf.png',
+              width: 200,
+              height: 200,
+              alt: 'Project Shelf',
+            },
+          ],
+        }}
+      />
     </div>
   );
 }