fix: auth flow bug on joining course

apps/dashboard/src/lib/components/AuthUI/index.svelte

@@ -47,9 +47,11 @@
             height="h-10"
             className="mr-2"
           />
-          <h4 class="dark:text-white text-xl mt-0">
-            {$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
-          </h4>
+          <a href="/">
+            <h4 class="dark:text-white text-xl mt-0">
+              {$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
+            </h4>
+          </a>
         </div>
       {/if}
       <form

apps/dashboard/src/lib/components/Buttons/Logout/index.svelte

@@ -5,25 +5,17 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { supabase } from '$lib/utils/functions/supabase';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
-  import { currentOrg, orgs } from '$lib/utils/store/org';
+  import { currentOrg, orgs, defaultCurrentOrgState } from '$lib/utils/store/org';
+  import { user, profile, defaultProfileState, defaultUserState } from '$lib/utils/store/user';
 
   async function logout() {
     const { error } = await supabase.auth.signOut();
     console.error('Error logging out: ', error);
 
-		// Reset organization values, TODO: consider abstracting if needed in other places
-		currentOrg.set({
-	    id: '',
-	    name: '',
-	    shortName: '',
-	    siteName: '',
-	    avatar_url: '',
-	    memberId: '',
-	    role_id: '',
-	    landingpage: {},
-	    theme: ''
-	  })
-  	orgs.set([]);
+    currentOrg.set(defaultCurrentOrgState);
+    orgs.set([]);
+    user.set(defaultUserState);
+    profile.set(defaultProfileState);
 
     capturePosthogEvent('user_logged_out');
     posthog.reset();

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/index.svelte

@@ -5,6 +5,7 @@
   import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import ArrowUpRightIcon from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
+  import { currentOrgDomain } from '$lib/utils/store/org';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
@@ -128,12 +129,9 @@
     loading = false;
     syncCourseStore(course);
   }
-  /**
-   * 1. Use all you have for editing now
-   * 2. Make course one interface we might need to computation
-   */
+
   async function handlePreview() {
-    const link = `${window.location.origin}/course/${course.slug}`;
+    const link = `${$currentOrgDomain}/course/${course.slug}`;
     window.open(link, '_blank');
   }
 </script>

apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte

@@ -4,7 +4,7 @@
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
   import { isCourseFree } from '$lib/utils/functions/course';
   import { getStudentInviteLink } from '$lib/utils/functions/course';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
   import PaymentModal from './PaymentModal.svelte';
   import type { Course } from '$lib/utils/types';
@@ -17,6 +17,7 @@
   export let startCoursePayment = false;
   export let mobile = false;
 
+  let openModal = false;
   let calculatedCost = 0;
   let discount = 0;
   let formatter: Intl.NumberFormat | undefined;
@@ -39,11 +40,13 @@
       course_free: isFree
     });
     if (isFree) {
-      const link = getStudentInviteLink(courseData, $currentOrg.siteName);
+      const link = getStudentInviteLink(courseData, $currentOrg.siteName, $currentOrgDomain);
       goto(link);
     } else {
-      startCoursePayment = true;
+      openModal = true;
     }
+
+    startCoursePayment = false;
   }
 
   function setFormatter(currency: string | undefined) {
@@ -62,10 +65,11 @@
   $: discount = get(courseData, 'metadata.discount', 0);
   $: calculatedCost = calcDisc(discount, courseData.cost || 0, !!courseData.metadata.showDiscount);
   $: isFree = isCourseFree(calculatedCost);
+  $: startCoursePayment && handleJoinCourse();
 </script>
 
 <PaymentModal
-  bind:open={startCoursePayment}
+  bind:open={openModal}
   paymentLink={get(courseData, 'metadata.paymentLink', '')}
   courseName={courseData.title}
   teacherEmail={getTeacherEmail(courseData.group)}

apps/dashboard/src/lib/components/LMS/SideBar.svelte

@@ -66,8 +66,10 @@
           height="h-20"
         />
 
-        <div class="mt-5">
-          <p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
+        <div class="mt-5 flex justify-center w-full">
+          <p
+            class="dark:text-white text-lg font-bold whitespace-nowrap truncate max-w-[80%] text-center"
+          >
             {$profile.fullname}
           </p>
         </div>

apps/dashboard/src/lib/utils/functions/course.ts

@@ -3,7 +3,7 @@ import type { Course } from '../types';
 
 export const isCourseFree = (cost: number) => !(Number(cost) > 0);
 
-export const getStudentInviteLink = (_course: Course, orgSiteName: string) => {
+export const getStudentInviteLink = (_course: Course, orgSiteName: string, origin: string) => {
   const hash = encodeURIComponent(
     btoa(
       JSON.stringify({
@@ -15,7 +15,7 @@ export const getStudentInviteLink = (_course: Course, orgSiteName: string) => {
     )
   );
 
-  return `https://${orgSiteName}.classroomio.com/invite/s/${hash}`;
+  return `${origin}/invite/s/${hash}`;
 };
 
 export const getTextFromHTML = (html: string): string => {
@@ -27,7 +27,7 @@ export const getTextFromHTML = (html: string): string => {
   return dummyDiv.textContent?.trim() || '';
 };
 
-const tagsToReplace = {
+const tagsToReplace: { [k: string]: string } = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;'

apps/dashboard/src/lib/utils/store/org.ts

@@ -6,8 +6,7 @@ import type { CurrentOrg, OrgTeamMember, OrgAudience } from '../types/org';
 import { ROLE } from '$lib/utils/constants/roles';
 import type { UserLessonDataType } from '$lib/utils/types';
 
-export const orgs = writable<CurrentOrg[]>([]);
-export const currentOrg: Writable<CurrentOrg> = writable({
+export const defaultCurrentOrgState: CurrentOrg = {
   id: '',
   name: '',
   shortName: '',
@@ -17,7 +16,10 @@ export const currentOrg: Writable<CurrentOrg> = writable({
   role_id: '',
   landingpage: {},
   theme: ''
-});
+};
+
+export const orgs = writable<CurrentOrg[]>([]);
+export const currentOrg: Writable<CurrentOrg> = writable(defaultCurrentOrgState);
 export const orgAudience = writable<OrgAudience[]>([]);
 export const orgTeam = writable<OrgTeamMember[]>([]);
 export const isOrgAdmin = derived(

apps/dashboard/src/lib/utils/store/user.ts

@@ -1,21 +1,15 @@
 import { writable } from 'svelte/store';
 import type { User } from '@supabase/supabase-js';
 
-export const user = writable<{
+interface UserStore {
   openAuthModal: boolean;
   fetchingUser: boolean;
   isLoggedIn: boolean;
   currentSession: User | undefined;
   expiresAt: number;
-}>({
-  openAuthModal: false,
-  fetchingUser: false,
-  isLoggedIn: false,
-  currentSession: undefined,
-  expiresAt: 0
-});
+}
 
-export const profile = writable<{
+interface ProfileStore {
   id: string | undefined;
   fullname: string;
   avatar_url: string;
@@ -27,7 +21,17 @@ export const profile = writable<{
   goal: string;
   source: string;
   telegram_chat_id: number | null;
-}>({
+}
+
+export const defaultUserState: UserStore = {
+  openAuthModal: false,
+  fetchingUser: false,
+  isLoggedIn: false,
+  currentSession: undefined,
+  expiresAt: 0
+};
+
+export const defaultProfileState: ProfileStore = {
   id: undefined,
   fullname: '',
   avatar_url: 'https://pbs.twimg.com/profile_images/1416443682157473795/dGtFbtht_normal.jpg',
@@ -38,4 +42,8 @@ export const profile = writable<{
   goal: '',
   source: '',
   telegram_chat_id: null
-});
+};
+
+export const user = writable<UserStore>(defaultUserState);
+
+export const profile = writable<ProfileStore>(defaultProfileState);

apps/dashboard/src/routes/+layout.svelte

@@ -80,8 +80,8 @@
     const { user: authUser } = session || {};
     console.log('Get user', authUser);
 
-    if (!authUser) {
-      goto('/login?redirect=/' + path);
+    if (!authUser && !isPublicRoute($page.url.pathname)) {
+      return goto('/login?redirect=/' + path);
     }
 
     // Check if user has profile
@@ -185,7 +185,7 @@
       }
     }
 
-    if (!profileData) {
+    if (!profileData && !isPublicRoute($page.url.pathname)) {
       goto('/login?redirect=/' + path);
     }
   }
@@ -239,10 +239,10 @@
       if (data.skipAuth) return;
 
       // Authentication Steps
-      if (event === 'SIGNED_IN') {
+      if (event === 'SIGNED_IN' || event === 'INITIAL_SESSION') {
         $user.fetchingUser = true;
         getProfile();
-      } else if (!['INITIAL_SESSION', 'TOKEN_REFRESHED'].includes(event)) {
+      } else if (!['TOKEN_REFRESHED'].includes(event)) {
         console.log('not logged in, go to login');
         return goto('/login');
       }

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

@@ -16,29 +16,22 @@
   } from '$lib/utils/services/notification/notification';
   import { snackbar } from '$lib/components/Snackbar/store.js';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
+  import { page } from '$app/stores';
 
   export let data;
 
   let supabase = getSupabase();
   let loading = false;
-  let refresh = false;
 
   let disableSubmit = false;
   let formRef: HTMLFormElement;
 
   async function handleSubmit() {
     loading = true;
 
-    if (refresh) {
-      window.location.reload();
-      refresh = false;
-      return;
-    }
-
     if (!$profile.id || !$profile.email) {
       console.log('Profile not found', $profile);
-      refresh = true;
-      return;
+      return goto(`/signup?redirect=${$page.url?.pathname || ''}`);
     }
 
     const member = {
@@ -124,19 +117,13 @@
   bind:formRef
 >
   <div class="mt-0 w-full">
-    {#if refresh}
-      <p class="dark:text-white text-sm font-light text-center">
-        Something went wrong, please try again.
-      </p>
-    {:else}
-      <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>
-    {/if}
+    <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={refresh ? 'Try again' : 'Join Course'}
+      label="Join Course"
       type="submit"
       isDisabled={disableSubmit || loading}
       isLoading={loading}

apps/dashboard/src/routes/lms/+page.svelte

@@ -13,7 +13,7 @@
   let hasFetched = false;
   let progressPercentage = 0;
   let totalLessons = 0;
-  let totalComPleted = 0;
+  let totalCompleted = 0;
 
   async function getCourses(userId: string | undefined, orgId: string) {
     if (hasFetched || !userId || !orgId) {
@@ -32,10 +32,10 @@
   }
 
   function calcTotalProgress(courses: Course[]) {
-    totalComPleted = courses.reduce((acc, cur) => acc + (cur.progress_rate || 0), 0);
+    totalCompleted = courses.reduce((acc, cur) => acc + (cur.progress_rate || 0), 0);
     totalLessons = courses.reduce((acc, cur) => acc + (cur.total_lessons || 0), 0);
 
-    progressPercentage = Math.round((totalComPleted / totalLessons) * 100);
+    progressPercentage = Math.round((totalCompleted / totalLessons) * 100) || 0;
   }
 
   $: getCourses($profile.id, $currentOrg.id);
@@ -93,7 +93,7 @@
               </p>
               {#if totalLessons > 0}
                 <p class="text-xs font-normal text-[#656565] dark:text-white">
-                  {totalComPleted}/{totalLessons} lessons completed
+                  {totalCompleted}/{totalLessons} lessons completed
                 </p>
               {:else}
                 <p class="text-xs font-normal text-[#656565] dark:text-white">No courses started</p>

apps/dashboard/src/routes/login/+page.svelte

@@ -7,16 +7,14 @@
   import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
-  import { onDestroy } from 'svelte';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
 
-  let formRef;
+  let formRef: HTMLFormElement;
   let supabase = getSupabase();
   let fields = Object.assign({}, LOGIN_FIELDS);
   let submitError: string;
   let loading = false;
-  let errors = {};
-  // let reloadTimeout: NodeJS.Timeout;
+  let errors = Object.assign({}, LOGIN_FIELDS);
 
   let query = new URLSearchParams($page.url.search);
   let redirect = query.get('redirect');
@@ -39,12 +37,6 @@
       console.log('data', data);
       if (error) throw error;
 
-      // reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run sometimes
-      // reloadTimeout = setTimeout(() => {
-      //   console.log('Forcing full page reload for auth listener');
-      //   window.location.reload();
-      // }, 1500);
-
       capturePosthogEvent('login', {
         email: fields.email
       });
@@ -54,10 +46,6 @@
       loading = false;
     }
   }
-
-  // onDestroy(() => {
-  //   clearTimeout(reloadTimeout);
-  // });
 </script>
 
 <svelte:head>