CLASSROOMIO-T-152: Student can join any course via invite link

src/lib/components/AuthUI/index.svelte

@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
+  import { page } from '$app/stores';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
+  import type { SupabaseClient } from '@supabase/supabase-js';
 
-  export let supabase;
-  export let handleSubmit;
+  export let supabase: SupabaseClient;
+  export let handleSubmit = () => {};
   export let isLogin = true;
   export let showOnlyContent = false;
   export let isLoading = false;
   export let showLogo = false;
   export let formRef;
+  export let hideGoogleAuth = false;
 
   async function signInWithGoogle() {
     if (isLoading) {
@@ -19,12 +22,11 @@
     }
     try {
       console.log('signInWithGoogle');
-      const { user, session, error } = await supabase.auth.signInWithOAuth({
+      const { error, data } = await supabase.auth.signInWithOAuth({
         provider: 'google'
       });
 
-      console.log('user', user);
-      console.log('session', session);
+      console.log('data', data);
       console.log('error', error);
     } catch (error) {
       console.log('catch error', error);
@@ -57,7 +59,7 @@
       >
         <slot />
       </form>
-      {#if !showOnlyContent}
+      {#if !showOnlyContent && !hideGoogleAuth}
         <div class="w-10/12 mb-3">
           <p class="dark:text-white text-sm mb-5">or sign up with:</p>
           <PrimaryButton
@@ -75,10 +77,14 @@
     {#if !showOnlyContent}
       <div class="w-full p-6 border-t border-grey text-center">
         {#if isLogin}
-          Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
+          Not registered yet? <a
+            class="hover:underline text-primary-700"
+            href="/signup{$page.url.search}">Sign up</a
+          >
         {:else}
-          Already have an account? <a class="hover:underline text-primary-700" href="/login"
-            >Log In</a
+          Already have an account? <a
+            class="hover:underline text-primary-700"
+            href="/login{$page.url.search}">Log In</a
           >
         {/if}
       </div>

src/lib/components/Course/components/People/InviationModal.svelte

@@ -1,27 +1,20 @@
 <script lang="ts">
+  import { Popover } from 'carbon-components-svelte';
+  import Link from 'carbon-icons-svelte/lib/Link.svelte';
   import Modal from '$lib/components/Modal/index.svelte';
+  import copy from 'copy-to-clipboard';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import TextArea from '$lib/components/Form/TextArea.svelte';
   import { ROLE } from '$lib/utils/constants/roles';
   import { addGroupMember, fetchGroup } from '$lib/utils/services/courses';
   import { invitationModal, resetForm } from './store';
-  import { validateForm } from '$lib/components/Courses/functions';
   import { course, setCourse } from '$lib/components/Course/store';
   import { MultiSelect, Loading } from 'carbon-components-svelte';
   import { currentOrg } from '$lib/utils/store/org';
   import { getOrgTeam } from '$lib/utils/services/org';
   import type { OrgTeamMember } from '$lib/utils/types/org';
   import { sendTeacherCourseWelcome } from './utils';
-
-  let errors: {
-    students: string;
-    tutors: string;
-    title?: string;
-    description?: string;
-  } = {
-    students: '',
-    tutors: ''
-  };
+  import type { Course } from '$lib/utils/types';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
 
   interface Tutor {
     id: number;
@@ -33,6 +26,8 @@
   let selectedIds: Array<number> = [];
   let selectedTutors: Tutor[] = [];
   let isLoadingTutors = false;
+  let link = '';
+  let copied = false;
 
   function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
     return value !== null && value !== undefined;
@@ -41,28 +36,14 @@
     i.length === 0 ? [] : i.map((id) => tutors.find((tutor) => tutor.id === id)).filter(notEmpty);
 
   function onSubmit() {
-    const { hasError, fieldErrors, students } = validateForm({
-      ...$invitationModal,
-      title: 'sfdsd',
-      description: 'dsfdsf',
-      tutors: 'sgsg'
-    });
-
-    errors = fieldErrors;
-    if (hasError) return;
+    if (!selectedTutors.length) {
+      resetForm();
+      return;
+    }
 
     let membersStack = [];
     console.log(`$course`, $course);
 
-    // Create groupmemebers from group_id and add teachers and students
-    for (const studentEmail of students) {
-      membersStack.push({
-        email: studentEmail,
-        group_id: $course.group?.id,
-        role_id: ROLE.STUDENT
-      });
-    }
-
     for (const tutor of selectedTutors) {
       membersStack.push({
         profile_id: tutor.profileId,
@@ -128,12 +109,37 @@
     isLoadingTutors = false;
   }
 
+  function getInviteLink(_course: Course, siteName: string) {
+    const hash = encodeURIComponent(
+      btoa(
+        JSON.stringify({
+          groupId: _course.group?.id,
+          name: _course.title,
+          description: _course.description,
+          orgSiteName: siteName
+        })
+      )
+    );
+
+    return `https://${siteName}.classroomio.com/invite/s/${hash}`;
+  }
+
+  function copyLink() {
+    copy(link);
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 1000);
+  }
+
   $: {
     selectedTutors = formatSelected(selectedIds);
     console.log('selectedTutors', selectedTutors);
   }
 
   $: setTutors($currentOrg.id, $invitationModal.open);
+
+  $: link = getInviteLink($course, $currentOrg.siteName);
 </script>
 
 <Modal
@@ -144,8 +150,8 @@
   modalHeading="Invite people"
 >
   <form on:submit|preventDefault={onSubmit}>
-    <div class="mb-4">
-      <p class="text-base mb-1">Invite Tutors</p>
+    <div class="mb-8">
+      <p class="text-base mb-1 font-semibold">Invite Tutors</p>
       <MultiSelect
         disabled={isLoadingTutors}
         label="Select tutors in organization..."
@@ -169,19 +175,29 @@
       {/if}
     </div>
 
-    <TextArea
-      label="Invite Students"
-      labelClassName="text-base"
-      bind:value={$invitationModal.students}
-      rows="2"
-      maxRows={3}
-      placeholder="[email protected], john@gmail.com"
-      helperMessage="To invite people, add their emails separated by a comma"
-      errorMessage={errors.students}
-      className="mb-4"
-    />
+    <div class="mb-8 w-[90%] flex justify-between items-center">
+      <div class="w-3/5">
+        <p class="text-base mb-1 font-semibold">Invite Students</p>
+        <p class=" text-sm">You can invite students via an invite link</p>
+      </div>
 
-    <div class="mt-5 flex items-center">
+      <div class="relative">
+        <PrimaryButton
+          disablePadding={true}
+          className="text-sm py-2 px-3"
+          variant={VARIANTS.OUTLINED}
+          onClick={copyLink}
+        >
+          <Link size={16} class="mr-1" />
+          Copy link
+        </PrimaryButton>
+        <Popover caret open={copied} align="bottom">
+          <div style="padding: 5px">Copied Successfully</div>
+        </Popover>
+      </div>
+    </div>
+
+    <div class="mt-5 flex items-center flex-row-reverse">
       <PrimaryButton className="px-6 py-3" label="Finish" type="submit" />
     </div>
   </form>

src/lib/components/Course/components/People/store.js

@@ -5,12 +5,10 @@ export const deleteMemberModal = writable({
 });
 
 export const invitationModal = writable({
-  open: false,
-  students: ''
+  open: false
 });
 
 export const resetForm = () =>
   invitationModal.update(() => ({
-    open: false,
-    students: ''
+    open: false
   }));

src/lib/components/Course/store.ts

@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
+  status: 'ACTIVE',
   is_certificate_downloadable: false,
   certificate_theme: 'professional',
   metadata: {

src/lib/components/Org/SideBar.svelte

@@ -19,12 +19,12 @@
   const menuItems = [
     {
       path: '',
-      label: 'Home'
-    },
-    {
-      path: '/quiz',
-      label: 'Quizzes'
+      label: 'Dashboard'
     },
+    // {
+    //   path: '/quiz',
+    //   label: 'Quizzes'
+    // },
     {
       path: '/courses',
       label: 'Courses'

src/lib/components/PrimaryButton/constants.js

@@ -7,6 +7,7 @@ export const VARIANTS = {
   CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
   OUTLINED: 'OUTLINED',
   NONE: 'NONE',
+  LINK: 'LINK',
   TEXT: 'TEXT',
   TEXT_DANGER: 'TEXT_DANGER'
 };
@@ -25,6 +26,7 @@ export const VARIANTS_CLASS = {
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',
+  [VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
   [VARIANTS.TEXT_DANGER]:
     'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300'
 };

src/lib/utils/constants/routes.ts

@@ -7,7 +7,8 @@ export const ROUTE = {
   COURSE: '/course',
   LOGIN: '/login',
   SIGN_UP: '/signup',
-  INVITE_SIGNUP: '/invite',
+  INVITE_TEACHER: '/invite/t',
+  INVITE_STUDENT: '/invite/s',
   PROFILE: '/profile',
   PEOPLE: '/people',
   DISCUSSIONS: '/discussions',
@@ -20,7 +21,7 @@ export const PUBLIC_ROUTES = [
   `^${ROUTE.HOME}$`,
   ROUTE.LOGIN,
   ROUTE.SIGN_UP,
-  `^${ROUTE.INVITE_SIGNUP}/.*`,
+  `^${ROUTE.INVITE_TEACHER}/.*`,
   ROUTE.FORGOT,
   ROUTE.RESET,
   `^${ROUTE.PAGES}/.*`,
@@ -31,7 +32,8 @@ export const PUBLIC_ROUTES = [
 export const ROUTES_TO_HIDE_NAV = [
   ROUTE.LOGIN,
   ROUTE.SIGN_UP,
-  `^${ROUTE.INVITE_SIGNUP}/.*`,
+  `^${ROUTE.INVITE_TEACHER}/.*`,
+  `^${ROUTE.INVITE_STUDENT}/.*`,
   ROUTE.FORGOT,
   ROUTE.RESET,
   ROUTE.ONBOARDING

src/lib/utils/functions/user.ts

@@ -0,0 +1,8 @@
+import { supabase } from '$lib/utils/functions/supabase';
+import type { Profile } from '$lib/components/Course/components/People/types';
+
+export async function getProfile(email: string): Promise<Profile | null> {
+  const { data } = await supabase.from('profile').select('*').eq('email', email).single();
+  console.log('getProfile data', data);
+  return data;
+}

src/lib/utils/types/index.ts

@@ -64,6 +64,7 @@ export interface Group {
   updated_at?: string;
   organization_id?: string /* foreign key to organization.id */;
   organization?: Organization;
+  tutors: Profile[];
 }
 
 export interface Role {

src/routes/+layout.svelte

@@ -81,7 +81,7 @@
     console.log('Get user profile', authUser);
 
     if (!authUser) {
-      goto('/login');
+      goto('/login?redirect=/' + path);
     }
 
     // Check if user has profile

src/routes/api/email/invite/+server.js

@@ -15,7 +15,7 @@ export async function POST({ request }) {
   const accessToken = request.headers.get('Authorization');
   console.log('/POST api/email/invite', body);
 
-  if (!org || !Object.keys(org) || !email) {
+  if (!org || !Object.keys(org) || !email || !accessToken) {
     return json(
       { success: false, message: 'Org data and Teacher name are required' },
       { status: 400 }
@@ -43,7 +43,7 @@ export async function POST({ request }) {
     orgId: id,
     orgSiteName: siteName
   });
-  const inviteLink = `${origin}/invite/${encodeURIComponent(btoa(inviteData))}`;
+  const inviteLink = `${origin}/invite/t/${encodeURIComponent(btoa(inviteData))}`;
   console.log('inviteData', inviteData);
 
   const options = {

src/routes/invite/s/[hash]/+layout.server.ts

@@ -0,0 +1,31 @@
+import { redirect } from '@sveltejs/kit';
+import { getSupabase, supabase } from '$lib/utils/functions/supabase';
+import { getCurrentOrg } from '$lib/utils/services/org';
+
+if (!supabase) {
+  getSupabase();
+}
+
+export const load = async ({ params = { hash: '' } }) => {
+  try {
+    const courseHashData = atob(decodeURIComponent(params.hash));
+    console.log('courseHashData', courseHashData);
+
+    const { groupId, name, description, orgSiteName } = JSON.parse(courseHashData);
+
+    if (!groupId || !name || !description || !orgSiteName) {
+      throw 'Validation failed';
+    }
+    const currentOrg = await getCurrentOrg(orgSiteName, true);
+
+    return {
+      groupId,
+      name,
+      description,
+      currentOrg
+    };
+  } catch (error) {
+    console.error('Error decoding course invite params.hash', error);
+    throw redirect(301, '/404');
+  }
+};

src/routes/invite/s/[hash]/+page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import AuthUI from '$lib/components/AuthUI/index.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { addGroupMember } from '$lib/utils/services/courses';
+  import type { CurrentOrg } from '$lib/utils/types/org.js';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { profile } from '$lib/utils/store/user.js';
+
+  export let data;
+
+  let supabase = getSupabase();
+  let loading = false;
+
+  let disableSubmit = false;
+  let formRef: HTMLFormElement;
+
+  async function handleSubmit() {
+    loading = true;
+
+    const member = {
+      profile_id: $profile.id,
+      group_id: data.groupId,
+      role_id: ROLE.STUDENT
+    };
+    addGroupMember(member).then((addedMember) => {
+      loading = false;
+      if (addedMember.error) {
+        console.error('Error adding student to group', data.groupId);
+        return;
+      }
+
+      // Send notification to teacher(s) that a student has joined the course.
+      // also send welcome email to students when they join the course
+      // go to lms
+      return goto('/lms');
+    });
+  }
+
+  function setCurOrg(cOrg: CurrentOrg) {
+    if (!cOrg) return;
+    currentOrg.set(cOrg);
+  }
+
+  onMount(() => {
+    setTheme(data.currentOrg?.theme || '');
+  });
+
+  $: setCurOrg(data.currentOrg as CurrentOrg);
+</script>
+
+<svelte:head>
+  <title>Join {data.name} on ClassroomIO</title>
+</svelte:head>
+
+<AuthUI
+  {supabase}
+  isLogin={false}
+  {handleSubmit}
+  isLoading={loading}
+  showOnlyContent={true}
+  showLogo={true}
+  bind:formRef
+>
+  <div class="mt-0 w-full">
+    <h3 class="dark:text-white text-lg font-medium mt-0 mb-4 text-center">{data.name}</h3>
+    <p class="dark:text-white text-sm font-light text-center">{data.description}</p>
+  </div>
+
+  <div class="my-4 w-full flex justify-center items-center">
+    <PrimaryButton
+      label="Join Course"
+      type="submit"
+      isDisabled={disableSubmit || loading}
+      isLoading={loading}
+    />
+  </div>
+</AuthUI>

src/routes/invite/t/[hash]/+layout.server.ts

@@ -1,7 +1,14 @@
 import { redirect } from '@sveltejs/kit';
 import { getCurrentOrg } from '$lib/utils/services/org';
-import { getSupabase } from '$lib/utils/functions/supabase';
+import { getSupabase, supabase } from '$lib/utils/functions/supabase';
+import { getProfile } from '$lib/utils/functions/user';
 
+if (!supabase) {
+  getSupabase();
+}
+
+// we need to know if the email exists or not.
+// with this we can only ask the user to accept
 export const load = async ({ params = { hash: '' } }) => {
   try {
     const hashData = atob(decodeURIComponent(params.hash));
@@ -9,13 +16,16 @@ export const load = async ({ params = { hash: '' } }) => {
 
     const { orgId, email, orgSiteName } = JSON.parse(hashData);
 
-    getSupabase();
     const _currentOrg = await getCurrentOrg(orgSiteName, true);
 
+    const profile = await getProfile(email);
+    console.log('profile data', profile);
+
     return {
       orgId,
       email,
-      currentOrg: _currentOrg
+      currentOrg: _currentOrg,
+      profile
     };
   } catch (error) {
     console.error('Error decoding invite params.hash', error);

src/routes/invite/t/[hash]/+page.svelte

@@ -10,11 +10,11 @@
   } from '$lib/utils/functions/validator';
   import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
   import type { CurrentOrg } from '$lib/utils/types/org.js';
   import { onMount } from 'svelte';
-  import Error from '../../+error.svelte';
+  import type { Profile } from '$lib/components/Course/components/People/types';
 
   export let data;
 
@@ -34,7 +34,10 @@
   let formRef: HTMLFormElement;
 
   async function handleSubmit() {
-    const validationRes = authValidation(fields);
+    const validationRes = authValidation({
+      ...fields,
+      email: '[email protected]' // validation for this ema
+    });
     console.log('validationRes', validationRes);
 
     if (Object.keys(validationRes).length) {
@@ -44,40 +47,44 @@
 
     try {
       loading = true;
-      // Signup
-      const { data: signupData, error } = await supabase.auth.signUp({
-        email: data.email,
-        password: fields.password
-      });
+      let profile: Profile | null = data.profile;
 
-      console.log('Signup', signupData);
-      if (error) throw error;
+      if (!data.profile) {
+        // Signup
+        const { data: signupData, error } = await supabase.auth.signUp({
+          email: data.email,
+          password: fields.password
+        });
 
-      if (!signupData.user) {
-        throw 'User cannot be created ';
+        console.log('Signup', signupData);
+        if (error) throw error;
+
+        if (!signupData.user) {
+          throw 'User cannot be created ';
+        }
+
+        // Insert profile
+        const userId = signupData.user.id;
+        const profileRes = await supabase
+          .from('profile')
+          .insert({
+            id: userId,
+            username: fields.name.toLowerCase().replace(' ', '-') + new Date().getTime(),
+            fullname: fields.name,
+            email: data.email
+          })
+          .select();
+
+        console.log('Insert profile', profileRes.data);
+
+        if (profileRes.error) {
+          throw profileRes.error;
+        }
+
+        profile = profileRes.data[0] || {};
       }
 
-      // Insert profile
-      const userId = signupData.user.id;
-      const profileRes = await supabase
-        .from('profile')
-        .insert({
-          id: userId,
-          username: fields.name.toLowerCase().replace(' ', '-') + new Date().getTime(),
-          fullname: fields.name,
-          email: data.email
-        })
-        .select();
-
-      console.log('Insert profile', profileRes.data);
-
-      if (profileRes.error) {
-        throw profileRes.error;
-      }
-
-      const profile = profileRes.data[0] || {};
-
-      if (!profile.id) {
+      if (!profile?.id) {
         throw 'Unable to create profile';
       }
 
@@ -91,12 +98,23 @@
         .match({ email: data.email, organization_id: data.currentOrg?.id });
 
       console.log('Update member response', updateMemberRes);
-      formRef?.reset();
 
-      return goto('/login');
+      const res = await supabase.auth.signInWithPassword({
+        email: data.email,
+        password: fields.password
+      });
+
+      if (res.error) {
+        throw res.error;
+      }
+
+      formRef?.reset();
+      return goto($currentOrgPath);
     } catch (error) {
       if (error instanceof Error) {
         submitError = error.message;
+      } else {
+        submitError = error?.toString() || '';
       }
     } finally {
       loading = false;
@@ -116,6 +134,7 @@
   $: disableSubmit = getDisableSubmit(fields);
 
   $: setCurOrg(data.currentOrg as CurrentOrg);
+  $: console.log('data.profile', data.profile);
 </script>
 
 <svelte:head>
@@ -132,7 +151,13 @@
   bind:formRef
 >
   <div class="mt-4 w-full">
-    <p class="dark:text-white text-lg font-semibold mb-6">Create a free account</p>
+    <p class="dark:text-white text-lg font-semibold mb-6">
+      {#if data.profile}
+        Log in to join
+      {:else}
+        Create a free account to join
+      {/if}
+    </p>
     <TextField
       label="Your Email"
       value={data.email}
@@ -142,18 +167,20 @@
       inputClassName="w-full"
       isDisabled={true}
     />
-    <TextField
-      label="Full Name"
-      bind:value={fields.name}
-      type="text"
-      autoFocus={true}
-      placeholder="e.g Joke Silva"
-      className="mb-6"
-      inputClassName="w-full"
-      isDisabled={loading}
-      errorMessage={errors.name}
-      isRequired
-    />
+    {#if !data.profile}
+      <TextField
+        label="Full Name"
+        bind:value={fields.name}
+        type="text"
+        autoFocus={true}
+        placeholder="e.g Joke Silva"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.name}
+        isRequired
+      />
+    {/if}
     <TextField
       label="Your Password"
       bind:value={fields.password}
@@ -166,17 +193,19 @@
       helperMessage="Password must be more than 6 characters"
       isRequired
     />
-    <TextField
-      label="Confirm Password"
-      bind:value={fields.confirmPassword}
-      type="password"
-      placeholder="************"
-      className="mb-6"
-      inputClassName="w-full"
-      isDisabled={loading}
-      errorMessage={errors.confirmPassword}
-      isRequired
-    />
+    {#if !data.profile}
+      <TextField
+        label="Confirm Password"
+        bind:value={fields.confirmPassword}
+        type="password"
+        placeholder="************"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.confirmPassword}
+        isRequired
+      />
+    {/if}
     {#if submitError}
       <p class="text-sm text-red-500">{submitError}</p>
     {/if}
@@ -184,7 +213,7 @@
 
   <div class="my-4 w-full flex justify-end items-center">
     <PrimaryButton
-      label="Create and Join"
+      label="Accept Invite"
       type="submit"
       className="sm:w-full w-full"
       isDisabled={disableSubmit || loading}

src/routes/onboarding/+page.svelte

@@ -199,10 +199,6 @@
   $: progress = Math.round((step / maxSteps) * 100);
   $: fields.siteName = generateSitename(fields.siteName || '');
   $: setOrgSiteName(fields.orgName, isSiteNameTouched);
-
-  $: {
-    console.log('currentOrg', $currentOrg);
-  }
 </script>
 
 {#if $profile.id}

src/routes/signup/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
@@ -40,7 +41,7 @@
 
       formRef?.reset();
 
-      return goto('/login');
+      return goto('/login' + $page.url.search);
       // success = true;
       // fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {