CLASSROOMIO-T-126: Invite teacher and teacher can login

src/app.html

@@ -6,6 +6,25 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
 	<meta name="theme-color" content="#333333">
 
+	<title>ClassroomIO –&nbsp;The LMS with Superpowers</title>
+	<meta name="description"
+		content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
+	<meta name="theme-color" content="#ffffff">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta property="og:title" content="ClassroomIO –&nbsp;The LMS with Superpowers">
+	<meta property="og:description"
+		content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
+	<meta property="og:type" content="website">
+	<meta property="og:image:type" content="image/png">
+	<meta property="og:image:width" content="1640">
+	<meta property="og:image:height" content="924">
+	<meta property="og:image:secure_url" content="https://app.classroomio.com/classroomio-opengraph-image.png">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:creator" content="@rotimi_best">
+	<meta name="twitter:title" content="ClassroomIO –&nbsp;The LMS with Superpowers">
+	<meta name="twitter:description"
+		content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
+
 	<!-- <link rel="stylesheet" href="global.css"> -->
 	<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
 	<link rel="icon" type="image/png" href="/favicon.ico">

src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -27,7 +27,6 @@
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
 
   export let exerciseId;
-  export let refetchExercise = () => {};
   export let goBack = () => {};
 
   let preview = false;

src/lib/components/Course/components/Lesson/Exercise/store.js

@@ -1,6 +1,4 @@
 import { writable } from 'svelte/store';
-import MODES from '$lib/utils/constants/mode.js';
-import { ROLE } from '$lib/utils/constants/roles';
 
 export const exerciseMode = writable({
   editMode: true

src/lib/components/Course/components/Lesson/Exercises/index.svelte

@@ -15,8 +15,6 @@
   import { QUESTION_TYPES } from '$lib/components/Question/constants';
   import { lesson } from '../store/lessons';
   import { questionnaire, isQuestionnaireFetching, handleAddQuestion } from '../store/exercise';
-  import MODES from '$lib/utils/constants/mode.js';
-  import { ROLE } from '$lib/utils/constants/roles';
   import { exerciseMode } from '../Exercise/store';
 
   export let path;
@@ -139,10 +137,10 @@
 {/if}
 
 {#if exerciseId}
-  <Exercise {exerciseId} {goBack} refetchExercise={() => getExercise(exerciseId)} />
+  <Exercise {exerciseId} {goBack} />
 {:else}
   <Modal onClose={handleCancelAddExercise} bind:open modalHeading="Create an Exercise" width="w-80">
-    <TextField bind:value={newExercise.title} autofocus={true} placeholder="Exercise name" />
+    <TextField bind:value={newExercise.title} autoFocus={true} placeholder="Exercise name" />
 
     <div class="mt-5 flex items-center">
       <PrimaryButton className="px-6 py-3" label="Submit" onClick={handleAddExercise} />

src/lib/components/Form/TextField.svelte

@@ -67,7 +67,8 @@
   {/if}
   <input
     use:typeAction
-    class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
+    class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} {isDisabled &&
+      'hover:cursor-not-allowed opacity-50'} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
       ? 'border-red-600'
       : ''}"
     on:keydown={onKeyDown}
@@ -111,7 +112,7 @@
   }
   .password-eye {
     position: absolute;
-    top: 23px;
+    top: 30px;
     right: 6px;
   }
 </style>

src/lib/components/Org/Settings/TeamMembers.svelte

@@ -1,11 +1,5 @@
 <script>
-  import {
-    Grid,
-    Row,
-    Column,
-    Select,
-    SelectItem,
-  } from 'carbon-components-svelte';
+  import { Grid, Row, Column, Select, SelectItem } from 'carbon-components-svelte';
   import { Moon } from 'svelte-loading-spinners';
   import TextField from '$lib/components/Form/TextField.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
@@ -21,6 +15,7 @@
   import { profile } from '$lib/utils/store/user';
   import { supabase } from '$lib/utils/functions/supabase';
   import SectionTitle from '../SectionTitle.svelte';
+  import { sendInvite } from './utils';
 
   let emailsStr = '';
   let errorMessage = '';
@@ -30,11 +25,7 @@
   let isRemoving = false;
 
   async function onSendInvite() {
-    const {
-      hasError,
-      error: _error,
-      emails,
-    } = validateEmailInString(emailsStr);
+    const { hasError, error: _error, emails } = validateEmailInString(emailsStr);
 
     if (hasError) {
       errorMessage = _error;
@@ -51,13 +42,14 @@
           organization_id: $currentOrg.id,
           email,
           role_id: role,
-          verified: false,
+          verified: false
         })
         .select();
       console.log('data', data);
 
       if (error) {
         apiError = error;
+
         console.error('onSendInvite:', error);
         $snackbarStore.open = true;
         $snackbarStore.message = `Failed to send invite, please try again`;
@@ -67,7 +59,6 @@
         return;
       }
       const [newMember] = data || [];
-
       if (newMember) {
         orgTeam.update((team) => [
           {
@@ -75,12 +66,19 @@
             email: newMember?.email,
             verified: newMember?.verified,
             role: ROLE_LABEL[newMember?.role_id] || '',
-            isAdmin: newMember?.role_id === ROLE.ADMIN,
+            isAdmin: newMember?.role_id === ROLE.ADMIN
           },
-          ...team,
+          ...team
         ]);
       }
 
+      // Send email invite
+      sendInvite(email, {
+        id: $currentOrg.id,
+        name: $currentOrg.name,
+        siteName: $currentOrg.siteName
+      });
+
       const isLast = index === emails.length - 1;
       if (isLast) {
         $snackbarStore.open = true;
@@ -94,20 +92,17 @@
   }
 
   async function onRemove(id) {
-    console.error('onRemove called');
+    console.log('onRemove called');
     isRemoving = true;
-    const { data, error } = await supabase
-      .from('organizationmember')
-      .delete()
-      .match({ id });
+    const { data, error } = await supabase.from('organizationmember').delete().match({ id });
 
     if (error) {
       console.error('onRemove:', error);
       $snackbarStore.open = true;
       $snackbarStore.message = `Failed to remove user, please try again`;
       $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
-    } else if (data) {
-      orgTeam.update((team) => team.filter((member) => member.id !== id));
+    } else {
+      orgTeam.update((team) => [...team.filter((member) => member.id !== id)]);
     }
 
     isRemoving = false;
@@ -122,9 +117,7 @@
   };
 
   const isTeamMemberAdmin = (members, profileId) => {
-    return members.some(
-      (member) => member.profileId === profileId && member.isAdmin
-    );
+    return members.some((member) => member.profileId === profileId && member.isAdmin);
   };
 
   $: fetchTeam($currentOrg.id);
@@ -132,13 +125,10 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4} class="text-lg"
-      ><SectionTitle>Add</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4} class="text-lg"><SectionTitle>Add</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       <p class="text-md text-gray-500 dark:text-white mb-5">
-        Add your team mates or collaborators to your organization. Start working
-        together
+        Add your team mates or collaborators to your organization. Start working together
       </p>
 
       <div class="">
@@ -166,9 +156,7 @@
   </Row>
 
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4} class="text-lg"
-      ><SectionTitle>Members</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4} class="text-lg"><SectionTitle>Members</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       {#if isFetching}
         <Moon />
@@ -179,11 +167,7 @@
               <p class="text-sm text-gray-500 dark:text-white mr-3">
                 {teamMember.email}
               </p>
-              <TextChip
-                value={teamMember.role}
-                className="text-xs mr-3"
-                size="sm"
-              />
+              <TextChip value={teamMember.role} className="text-xs mr-3" size="sm" />
               {#if !teamMember.verified}
                 <TextChip
                   value="Invite Sent"

src/lib/components/Org/Settings/utils.ts

@@ -0,0 +1,28 @@
+import { supabase } from '$lib/utils/functions/supabase';
+
+export async function sendInvite(email: string, org: any) {
+  const { data } = await supabase.auth.getSession();
+  const accessToken = data.session?.access_token || '';
+
+  try {
+    const response = await fetch('/api/email/invite', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: accessToken
+      },
+      body: JSON.stringify({
+        email,
+        org
+      })
+    });
+    if (!response.ok) {
+      throw new Error(await response.text());
+    }
+    const result = await response.json();
+
+    console.log('Sent invite email', result);
+  } catch (error) {
+    console.error('Error sending invite email', error);
+  }
+}

src/lib/components/QuestionContainer/index.svelte

@@ -25,7 +25,7 @@
 
 <div
   bind:this={ref}
-  class="bg-white dark:bg-gray-800 border {hasError
+  class="bg-white dark:bg-gray-800 border-2 {hasError
     ? 'border-red-700'
     : 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
 >

src/lib/utils/constants/app.js

@@ -3,6 +3,7 @@ export const blockedSubdomain = [
   'apps',
   'play',
   'support',
+  'demo',
   'help',
   'teachers',
   'church',
@@ -21,5 +22,5 @@ export const blockedSubdomain = [
   'groups',
   'academy',
   'schools',
-  'training',
+  'training'
 ];

src/lib/utils/constants/authentication.js

@@ -1,19 +1,20 @@
 export const SIGNUP_FIELDS = {
+  name: '',
   email: '',
   password: '',
-  confirmPassword: '',
+  confirmPassword: ''
 };
 
 export const RESET_FIELDS = {
   password: '',
-  confirmPassword: '',
+  confirmPassword: ''
 };
 
 export const LOGIN_FIELDS = {
   email: '',
-  password: '',
+  password: ''
 };
 
 export const FORGOT_PASSWORD_FIELDS = {
-  email: '',
+  email: ''
 };

src/lib/utils/constants/routes.ts

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

src/lib/utils/functions/routes/hideNavByRoute.ts

@@ -0,0 +1,8 @@
+import { ROUTES_TO_HIDE_NAV } from '$lib/utils/constants/routes';
+
+export default (route: string): boolean => {
+  return ROUTES_TO_HIDE_NAV.some((publicRoute) => {
+    const regex = new RegExp(publicRoute, 'g');
+    return regex.test(route);
+  });
+};

src/lib/utils/functions/validator.js

@@ -96,7 +96,7 @@ const onboardingValidationSchema = {
 export const getConfirmPasswordError = ({ password, confirmPassword }) => {
   return password > 6 && confirmPassword > 6 && password !== confirmPassword
     ? 'Does not match password'
-    : null;
+    : undefined;
 };
 
 export const processErrors = (error, mapToId) => {

src/lib/utils/services/org/index.js

@@ -54,6 +54,7 @@ export async function getOrganizations(userId) {
       `
       id,
       profile_id,
+      role_id,
       organization!organizationmember_organization_id_fkey (
         id,
         name,
@@ -67,6 +68,7 @@ export async function getOrganizations(userId) {
     .eq('profile_id', userId);
 
   const orgsArray = [];
+
   if (Array.isArray(data) && data.length) {
     data.forEach((orgMember) => {
       orgsArray.push({
@@ -77,6 +79,7 @@ export async function getOrganizations(userId) {
         theme: orgMember?.organization?.theme,
         avatar_url: orgMember?.organization?.avatar_url,
         memberId: orgMember?.id,
+        role_id: orgMember?.role_id,
         landingpage: orgMember?.organization?.landingpage
       });
     });
@@ -173,7 +176,7 @@ export async function getCurrentOrg(siteName, justGet = false) {
 
   if (!justGet) {
     currentOrg.set(data[0]);
-  } else {
+  } else if (!isEmpty(data)) {
     return data[0];
   }
 }

src/lib/utils/services/sendgrid.ts

@@ -3,6 +3,7 @@ import type { MailService } from '@sendgrid/mail';
 import { SENDGRID_API_KEY } from '$env/static/private';
 
 export const SENDGRID_FROM = 'Rotimi Best <[email protected]>';
+export const SENDGRID_FROM_HELP = 'ClassroomIO <[email protected]>';
 
 export let sendgrid: MailService;
 

src/lib/utils/store/org.ts

@@ -1,14 +1,17 @@
 import { writable, derived } from 'svelte/store';
 import { STEPS } from '../constants/quiz';
+import type { Writable } from 'svelte/store';
+import type { CurrentOrg } from '../types/org';
 
 export const orgs = writable([]);
-export const currentOrg = writable({
+export const currentOrg: Writable<CurrentOrg> = writable({
   id: '',
   name: '',
   shortName: '',
   siteName: '',
   avatar_url: '',
   memberId: '',
+  role_id: '',
   landingpage: {},
   theme: ''
 });

src/lib/utils/types/org.ts

@@ -0,0 +1,11 @@
+export interface CurrentOrg {
+  id: string;
+  name: string;
+  shortName: string;
+  siteName: string;
+  avatar_url: string;
+  memberId: string;
+  role_id: string;
+  landingpage: {};
+  theme: string;
+}

src/routes/+layout.svelte

@@ -29,7 +29,7 @@
   import { user, profile } from '$lib/utils/store/user';
   import { getSupabase } from '$lib/utils/functions/supabase';
   import { isMobile } from '$lib/utils/store/useMobile';
-  import { ROUTES_TO_HIDE_NAV, ROUTE } from '$lib/utils/constants/routes';
+  import { ROUTE } from '$lib/utils/constants/routes';
   import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
   import { appStore } from '$lib/utils/store/app';
@@ -37,6 +37,7 @@
   import { setTheme } from '$lib/utils/functions/theme';
 
   import '../app.postcss';
+  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
 
   export let data;
 
@@ -98,13 +99,13 @@
         .from('profile')
         .insert({
           id: authUser.id,
-          username: regexUsernameMatch[1] + '1669991321770',
+          username: regexUsernameMatch[1] + `${new Date().getTime()}`,
           fullname: regexUsernameMatch[1],
           email: authUser.email
         })
         .select();
 
-      // Profile created, go to profile page
+      // Profile created, go to onboarding or lms
       if (!error && data) {
         $user.fetchingUser = false;
         $user.isLoggedIn = true;
@@ -141,7 +142,10 @@
           return;
         }
 
-        goto(ROUTE.ONBOARDING);
+        // On invite page, don't go to onboarding
+        if (!path.includes('invite')) {
+          goto(ROUTE.ONBOARDING);
+        }
       }
       $user.fetchingUser = false;
     } else if (profileData) {
@@ -164,17 +168,20 @@
           goto('/lms');
         }
       } else {
-        if (isEmpty(orgRes.orgs)) {
+        // Not on invite page or no org, go to onboarding
+        if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
           goto(ROUTE.ONBOARDING);
         } else if (
-          ['login', 'signup', 'onboarding'].some((r) => path.includes(r)) ||
+          ['login', 'signup', 'onboarding', 'invite'].some((r) => path.includes(r)) ||
           path === '' // for home page
         ) {
           // By default redirect to first organization
           goto(`/org/${orgRes.currentOrg.siteName}`);
         }
 
-        setTheme(orgRes.currentOrg.theme);
+        if (typeof orgRes?.currentOrg?.theme === 'string') {
+          setTheme(orgRes.currentOrg.theme);
+        }
       }
     }
   }
@@ -282,7 +289,7 @@
         <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
       </Backdrop>
     {/if}
-    {#if !ROUTES_TO_HIDE_NAV.includes($page.url.pathname)}
+    {#if !hideNavByRoute($page.url.pathname)}
       {#if isOrgPage($page.url.pathname) || $page.url.pathname.includes('profile') || isCoursesPage(path)}
         <OrgNavigation bind:title={$course.title} isCoursePage={isCoursesPage(path)} />
       {:else if isLMSPage($page.url.pathname)}

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

@@ -0,0 +1,68 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import TeacherInviteTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM_HELP } from '$lib/utils/services/sendgrid';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+const sendgrid = getSendgrid();
+const supabase = getSupabase();
+
+// API to send invite to teacher
+export async function POST({ request }) {
+  const body = await request.json();
+  const { org, email } = body;
+
+  const accessToken = request.headers.get('Authorization');
+  console.log('/POST api/email/invite', body);
+
+  if (!org || !Object.keys(org) || !email) {
+    return json(
+      { success: false, message: 'Org data and Teacher name are required' },
+      { status: 400 }
+    );
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  console.log('user', user);
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  const { id, name, siteName } = org;
+
+  const origin = request.headers.get('origin');
+  const inviteData = JSON.stringify({
+    email,
+    orgId: id,
+    orgSiteName: siteName
+  });
+  const inviteLink = `${origin}/invite/${encodeURIComponent(btoa(inviteData))}`;
+  console.log('inviteData', inviteData);
+
+  const options = {
+    from: SENDGRID_FROM_HELP,
+    to: email,
+    subject: `Join ${name} on ClassroomIO`,
+    html: render({
+      template: TeacherInviteTemplate,
+      props: {
+        orgName: name,
+        inviteLink
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}

src/routes/api/email/invite/invitation.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { Text, Section, Button, Link } from 'svelte-email';
+
+  export let orgName = '';
+  export let inviteLink = '';
+
+  const fontFamily =
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+
+  const paragraph = {
+    fontFamily,
+    fontSize: '16px',
+    lineHeight: '26px'
+  };
+  const paragraphContent = {
+    ...paragraph,
+    margin: '20px 0'
+  };
+
+  const footerParagraph = {
+    ...paragraph,
+    margin: '0px'
+  };
+
+  const btnContainer = {
+    textAlign: 'center' as const
+  };
+
+  const button = {
+    fontFamily,
+    backgroundColor: '#1d4ee2',
+    borderRadius: '5px',
+    color: '#fff',
+    fontSize: '16px',
+    textDecoration: 'none',
+    textAlign: 'center' as const,
+    display: 'block'
+  };
+
+  const linkStyle = {
+    color: '#1d4ee2'
+  };
+</script>
+
+<Text style={paragraph}>Hey there,</Text>
+<Text style={paragraphContent}>
+  You have been invited to join {orgName} on ClassroomIO.
+</Text>
+
+<Section style={btnContainer}>
+  <Button pX={12} pY={12} style={button} href={inviteLink}>Accept Invitation</Button>
+</Section>
+<Text style={footerParagraph}>Best regards</Text>
+<Text style={footerParagraph}>Rotimi Best</Text>
+<Text style={footerParagraph}
+  ><Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link></Text
+>

src/routes/api/email/invite/template.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import Invitation from './invitation.svelte';
+
+  export let orgName = '';
+  export let inviteLink = '';
+</script>
+
+<EmailTemplate
+  children={Invitation}
+  props={{
+    orgName,
+    inviteLink
+  }}
+/>

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

@@ -1,7 +0,0 @@
-import { json } from '@sveltejs/kit';
-
-export async function GET({ url }) {
-  // Get org data from request
-  // Get teacher email
-  // Generate
-}

src/routes/courses/[id]/lessons/+page.svelte

@@ -109,7 +109,10 @@
       isStudent = user.role_id === 3;
     }
   }
-  $: $exerciseMode.editMode = !isStudent;
+  $: {
+    console.log('isStudent', isStudent);
+    $exerciseMode.editMode = !isStudent;
+  }
 </script>
 
 <CourseContainer bind:isStudent>

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

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit';
+import { getCurrentOrg } from '$lib/utils/services/org';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+export const load = async ({ params = { hash: '' } }) => {
+  try {
+    const hashData = atob(decodeURIComponent(params.hash));
+    console.log('hashData', hashData);
+
+    const { orgId, email, orgSiteName } = JSON.parse(hashData);
+
+    getSupabase();
+    const _currentOrg = await getCurrentOrg(orgSiteName, true);
+
+    return {
+      orgId,
+      email,
+      currentOrg: _currentOrg
+    };
+  } catch (error) {
+    console.error('Error decoding invite params.hash', error);
+    throw redirect(301, '/404');
+  }
+};

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

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import {
+    authValidation,
+    getConfirmPasswordError,
+    getDisableSubmit
+  } 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 { setTheme } from '$lib/utils/functions/theme';
+  import type { CurrentOrg } from '$lib/utils/types/org.js';
+  import { onMount } from 'svelte';
+  import Error from '../../+error.svelte';
+
+  export let data;
+
+  let supabase = getSupabase();
+  let fields = Object.assign({}, SIGNUP_FIELDS);
+  let loading = false;
+
+  let errors: {
+    name?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+  } = {};
+
+  let submitError: string;
+  let disableSubmit = false;
+  let formRef: HTMLFormElement;
+
+  async function handleSubmit() {
+    const validationRes = authValidation(fields);
+    console.log('validationRes', validationRes);
+
+    if (Object.keys(validationRes).length) {
+      errors = Object.assign(errors, validationRes);
+      return;
+    }
+
+    try {
+      loading = true;
+      // Signup
+      const { data: signupData, error } = await supabase.auth.signUp({
+        email: data.email,
+        password: fields.password
+      });
+
+      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;
+      }
+
+      const profile = profileRes.data[0] || {};
+
+      if (!profile.id) {
+        throw 'Unable to create profile';
+      }
+
+      // Update member response
+      const updateMemberRes = await supabase
+        .from('organizationmember')
+        .update({
+          verified: true,
+          profile_id: profile.id
+        })
+        .match({ email: data.email, organization_id: data.currentOrg?.id });
+
+      console.log('Update member response', updateMemberRes);
+      formRef?.reset();
+
+      return goto('/login');
+    } catch (error) {
+      if (error instanceof Error) {
+        submitError = error.message;
+      }
+    } finally {
+      loading = false;
+    }
+  }
+
+  function setCurOrg(cOrg: CurrentOrg) {
+    if (!cOrg) return;
+    currentOrg.set(cOrg);
+  }
+
+  onMount(() => {
+    setTheme(data.currentOrg?.theme || '');
+  });
+
+  $: errors.confirmPassword = getConfirmPasswordError(fields);
+  $: disableSubmit = getDisableSubmit(fields);
+
+  $: setCurOrg(data.currentOrg as CurrentOrg);
+</script>
+
+<svelte:head>
+  <title>Join ClassroomIO</title>
+</svelte:head>
+
+<AuthUI
+  {supabase}
+  isLogin={false}
+  {handleSubmit}
+  isLoading={loading}
+  showOnlyContent={true}
+  showLogo={true}
+  bind:formRef
+>
+  <div class="mt-4 w-full">
+    <p class="dark:text-white text-lg font-semibold mb-6">Create a free account</p>
+    <TextField
+      label="Your Email"
+      value={data.email}
+      type="email"
+      placeholder="[email protected]"
+      className="mb-6"
+      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
+    />
+    <TextField
+      label="Your Password"
+      bind:value={fields.password}
+      type="password"
+      placeholder="************"
+      className="mb-6"
+      inputClassName="w-full"
+      isDisabled={loading}
+      errorMessage={errors.password}
+      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 submitError}
+      <p class="text-sm text-red-500">{submitError}</p>
+    {/if}
+  </div>
+
+  <div class="my-4 w-full flex justify-end items-center">
+    <PrimaryButton
+      label="Create and Join"
+      type="submit"
+      className="sm:w-full w-full"
+      isDisabled={disableSubmit || loading}
+      isLoading={loading}
+    />
+  </div>
+</AuthUI>

src/routes/onboarding/+page.svelte

@@ -11,6 +11,7 @@
   import { welcomeModalStore } from '$lib/components/WelcomeModal/store';
   import { getOrganizations } from '$lib/utils/services/org';
   import { sendWelcomeEmail } from './utils';
+  import { currentOrg } from '$lib/utils/store/org';
 
   interface OnboardingField {
     fullname?: string;
@@ -200,6 +201,10 @@
     ?.replace(/\s+/g, '-')
     ?.replace(/[^a-zA-Z0-9-]/g, '');
   $: setOrgSiteName(fields.orgName, isSiteNameTouched);
+
+  $: {
+    console.log('currentOrg', $currentOrg);
+  }
 </script>
 
 {#if $profile.id}

src/routes/org/[slug]/courses/+page.svelte

@@ -8,7 +8,7 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
   import { setProfileIdOfGroupMember } from '$lib/utils/services/courses';
-  import { currentOrg } from '$lib/utils/store/org.js';
+  import { currentOrg } from '$lib/utils/store/org';
 
   export let data;
   let { allCourses, cantFetch } = data;