[WIP] feat: Build Student Onboarding Workflow

components/ClassInviteTable.js

@@ -30,12 +30,11 @@ export default function ClassInviteTable({
   );
 
   const ref = useRef();
-  const userCurrentDomain = process.env.NEXTAUTH_URL;
 
   const copy = async () => {
     //Add the full URL to send to student
     await navigator.clipboard.writeText(
-      `${userCurrentDomain}/join/` + currentClass.classroomId
+      `${window.location.origin}/join/` + currentClass.classroomId
     );
 
     toast('Class code successfully copied', {

pages/join/[...joinCode].js

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import Link from 'next/link';
 import Navbar from '../../components/navbar';
 import { useState } from 'react';
 import { useRouter } from 'next/router';
@@ -7,16 +8,35 @@ import AuthButton from '../../components/authButton';
 import DisplayNotification from '../../components/displayNotification';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import prisma from '../../prisma/prisma';
 
 export async function getServerSideProps(ctx) {
   const userSession = await getSession(ctx);
+
+  const params = ctx.params || {};
+  const joinParam = params.joinCode || null;
+  const classroomId = Array.isArray(joinParam) ? joinParam[0] : joinParam;
+
+  let classroom = null;
+  if (classroomId) {
+    try {
+      classroom = await prisma.classroom.findUnique({
+        where: { classroomId },
+        select: { classroomName: true, description: true, classroomId: true }
+      });
+    } catch (err) {
+      classroom = null;
+    }
+  }
+
   return {
     props: {
-      userSession: userSession
+      userSession: userSession,
+      classroom
     }
   };
 }
-export default function JoinWithCode({ userSession }) {
+export default function JoinWithCode({ userSession, classroom }) {
   const [formData] = useState({});
   const router = useRouter();
   const { joinCode } = router.query;
@@ -61,57 +81,84 @@ export default function JoinWithCode({ userSession }) {
           <link rel='icon' href='/favicon.ico' />
         </Head>
         <Navbar />
-        {userSession ? (
+        {!userSession ? (
           <>
-            <div className='min-h-full flex items-center justify-center py-40 px-4 sm:px-6 lg:px-8'>
-              <div className='max-w-md w-full space-y-8'>
+            <div className='min-h-full flex items-center justify-center py-28 px-4 sm:px-6 lg:px-8'>
+              <div className='max-w-xl w-full space-y-12'>
                 <div>
-                  <h2 className='mt-6 text-center text-3xl font-extrabold text-gray-900'>
-                    Register for Classroom
+                  <h2 className='mt-6 text-center text-4xl font-extrabold text-gray-900'>
+                    Sign In with FreeCodeCamp
                   </h2>
                 </div>
-                <form className='mt-8 space-y-6' onSubmit={classroomRequest}>
-                  <div>
-                    <button
-                      type='submit'
-                      className='group relative w-full flex justify-center py-2 px-4 border border-fcc-gray-90 text-sm font-medium rounded-md text-black bg-fcc-gray-15 hover:bg-fcc-gray-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
-                    >
-                      <span className='absolute left-0 inset-y-0 flex items-center pl-3'>
-                        {/* <!-- Heroicon name: solid/lock-closed --> */}
-                        <svg
-                          className='h-5 w-5 text-fcc-gray-90 group-hover:text-white'
-                          xmlns='http://www.w3.org/2000/svg'
-                          viewBox='0 0 20 20'
-                          fill='currentColor'
-                          aria-hidden='true'
-                        >
-                          <path
-                            fillRule='evenodd'
-                            d='M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z'
-                            clipRule='evenodd'
-                          />
-                        </svg>
-                      </span>
-                      <span className='text-black group-hover:text-white'>
-                        Submit Reqest
-                      </span>
-                    </button>
-                  </div>
-                </form>
+                <div className='pl-2 min-h-full flex items-center justify-center'>
+                  <AuthButton></AuthButton>
+                </div>
               </div>
             </div>
           </>
+        ) : classroom === null ? (
+          <div className='min-h-full flex items-center justify-center py-28 px-4 sm:px-6 lg:px-8'>
+            <div className='max-w-xl w-full space-y-6 text-center'>
+              <h2 className='text-3xl font-extrabold text-gray-900'>
+                Classroom Not Found
+              </h2>
+              <p className='text-base text-gray-600'>
+                We could not find a classroom for this invite link. Please check
+                the link or ask your teacher to resend the invite.
+              </p>
+              <div className='flex justify-center space-x-4'>
+                <Link href='/' className='px-4 py-2 bg-gray-200 rounded'>
+                  Back to Home
+                </Link>
+              </div>
+            </div>
+          </div>
         ) : (
           <>
-            <div className='min-h-full flex items-center justify-center py-40 px-4 sm:px-6 lg:px-8'>
-              <div className='max-w-md w-full space-y-8'>
+            <div className='min-h-full flex items-center justify-center py-28 px-4 sm:px-6 lg:px-8'>
+              <div className='max-w-xl w-full space-y-12'>
                 <div>
-                  <h2 className='mt-6 text-center text-3xl font-extrabold text-gray-900'>
-                    Sign In with FreeCodeCamp
+                  <h2 className='mt-6 text-center text-4xl font-extrabold text-gray-900'>
+                    Join Classroom
                   </h2>
+                  {classroom && (
+                    <p className='mt-3 text-center text-lg text-gray-600'>
+                      Joining:{' '}
+                      <strong>
+                        {classroom.classroomName || classroom.classroomId}
+                      </strong>
+                    </p>
+                  )}
                 </div>
-                <div className='pl-2 min-h-full flex items-center justify-center'>
-                  <AuthButton></AuthButton>
+                <form className='mt-10 space-y-10' onSubmit={classroomRequest}>
+                  <div>
+                    <button
+                      type='submit'
+                      className='w-full shadow-lg border-solid border-color: inherit; border-[1px] px-6 py-4 text-lg font-medium bg-fcc-primary-yellow text-black hover:bg-[#ffbf00]'
+                    >
+                      Connect to Classroom
+                    </button>
+                  </div>
+                </form>
+                <div className='mt-6 text-center space-y-4'>
+                  <p className='text-base leading-7 text-gray-700'>
+                    If you have not enabled Classroom access on freeCodeCamp,
+                    please open your settings and enable it before connecting.
+                  </p>
+                  <div className='flex justify-center'>
+                    <a
+                      href='https://www.freecodecamp.org/settings'
+                      target='_blank'
+                      rel='noreferrer'
+                      className='px-6 py-3 text-base bg-fcc-gray-90 text-white rounded'
+                    >
+                      Open FCC Settings
+                    </a>
+                  </div>
+                  <p className='text-sm text-gray-500 leading-6'>
+                    Note: If you change the email on your freeCodeCamp account
+                    later, you may need to reconnect to this classroom.
+                  </p>
                 </div>
               </div>
             </div>

pages/join/index.js

@@ -1,21 +1,59 @@
 import Layout from '../../components/layout';
 import Head from 'next/head';
 import Navbar from '../../components/navbar';
+import Link from 'next/link';
+import AuthButton from '../../components/authButton';
+import { getSession } from 'next-auth/react';
 
-export default function Join() {
+export default function Join({ userSession }) {
   return (
     <Layout>
       <Head>
-        <title>Create Next App</title>
-        <meta name='description' content='Generated by create next app' />
+        <title>Join a Classroom</title>
+        <meta name='description' content='Join a freeCodeCamp Classroom' />
         <link rel='icon' href='/favicon.ico' />
       </Head>
-      <Navbar>
-        <li>
-          <p>Welcome</p>
-        </li>
-      </Navbar>
-      No code given
+      <Navbar />
+
+      <div className='pt-28 px-4 sm:px-6 lg:px-8 overflow-hidden'>
+        <div className='max-w-lg mx-auto w-full text-center'>
+          {!userSession ? (
+            <div className='space-y-6'>
+              <div className='space-y-4'>
+                <h2 className='text-2xl font-extrabold'>
+                  Sign In with FreeCodeCamp
+                </h2>
+                <div className='flex items-center justify-center'>
+                  <AuthButton />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div>
+              <h1 className='text-2xl font-bold mb-4'>No join code provided</h1>
+              <p className='mb-4'>
+                To join a Classroom, you must open the unique join link provided
+                by your instructor. The link should look like{' '}
+                <code>/join/&lt;classroomId&gt;</code>.
+              </p>
+              <Link href='/' legacyBehavior>
+                <a className='inline-block px-4 py-2 bg-fcc-gray-90 text-white rounded'>
+                  Return to Home
+                </a>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
     </Layout>
   );
 }
+
+export async function getServerSideProps(ctx) {
+  const session = await getSession(ctx);
+  return {
+    props: {
+      userSession: session || null
+    }
+  };
+}