Merge branch 'main' of https://github.com/classroomio/classroomio into feat/release-v2

apps/dashboard/src/hooks.server.ts

@@ -1,7 +1,7 @@
 import type { Handle } from '@sveltejs/kit';
 import { validateUser } from '$lib/utils/services/middlewares';
 
-const PUBLIC_ROUTES = [
+const PUBLIC_API_ROUTES = [
   '/api/completion',
   'student_prove_payment',
   'teacher_student_buycourse',
@@ -11,7 +11,7 @@ const PUBLIC_ROUTES = [
 ];
 
 function isPublicRoute(pathname: string) {
-  return PUBLIC_ROUTES.some((route) => pathname.includes(route));
+  return PUBLIC_API_ROUTES.some((route) => pathname.includes(route));
 }
 
 export const handle: Handle = async ({ event, resolve }) => {

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

@@ -2,8 +2,11 @@
   import get from 'lodash/get';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
-  import { isCourseFree } from '$lib/utils/functions/course';
-  import { getStudentInviteLink } from '$lib/utils/functions/course';
+  import {
+    isCourseFree,
+    getStudentInviteLink,
+    calcCourseDiscount
+  } from '$lib/utils/functions/course';
   import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
@@ -12,7 +15,6 @@
   import { ROLE } from '$lib/utils/constants/roles';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
   import { t } from '$lib/utils/functions/translations';
-  import { calcCourseDiscount } from '$lib/utils/functions/course';
 
   interface Props {
     className?: string;
@@ -48,8 +50,10 @@
       course_cost: courseData.cost,
       course_free: isFree
     });
+
     if (isFree) {
       const link = getStudentInviteLink(courseData, $currentOrg.siteName, $currentOrgDomain);
+
       goto(link);
     } else {
       openModal = true;

apps/dashboard/src/lib/components/Org/ProfileMenu/Menu.svelte

@@ -1,7 +1,7 @@
 <script>
   import { globalStore } from '$lib/utils/store/app';
-  import { user, profile, defaultProfileState, defaultUserState } from '$lib/utils/store/user';
-  import { currentOrg, orgs, defaultCurrentOrgState, currentOrgDomain, currentOrgPath } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg, currentOrgDomain, currentOrgPath } from '$lib/utils/store/org';
   import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
   import SettingsIcon from '@lucide/svelte/icons/settings';
   import Avatar from '$lib/components/Avatar/index.svelte';
@@ -9,31 +9,13 @@
   import LogOutIcon from '@lucide/svelte/icons/log-out';
   import RocketIcon from '@lucide/svelte/icons/rocket';
   import BellPlusIcon from '@lucide/svelte/icons/bell-plus';
-  import { goto } from '$app/navigation';
   import { profileMenu } from '../store';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { capturePosthogEvent } from '$lib/utils/services/posthog';
   import { t } from '$lib/utils/functions/translations';
-  import posthog from 'posthog-js';
-
-  async function logout() {
-    const { error } = await supabase.auth.signOut();
-
-    if (error) {
-      console.error('Error logging out: ', error);
-    }
-
-    currentOrg.set(defaultCurrentOrgState);
-    orgs.set([]);
-    user.set(defaultUserState);
-    profile.set(defaultProfileState);
-
-    capturePosthogEvent('user_logged_out');
-    posthog.reset();
+  import { logout } from '$lib/utils/functions/logout';
 
+  async function handleLogout() {
+    await logout();
     closeMenu();
-
-    goto('/login');
   }
 
   function closeMenu() {
@@ -153,7 +135,7 @@
     </div>
   {/if}
 
-  <button onclick={logout} class="w-full space-y-4 pt-3">
+  <button onclick={handleLogout} class="w-full space-y-4 pt-3">
     <span class="flex items-center gap-2">
       <LogOutIcon size={16} />
       <p class="text-sm font-semibold">{$t('settings.profile.logout')}</p>

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

@@ -1,7 +1,6 @@
 import posthog from 'posthog-js';
 import { supabase } from '$lib/utils/functions/supabase';
 import { capturePosthogEvent } from '$lib/utils/services/posthog';
-import { currentOrg, orgs, defaultCurrentOrgState } from '$lib/utils/store/org';
 import { user, profile, defaultProfileState, defaultUserState } from '$lib/utils/store/user';
 import { goto } from '$app/navigation';
 
@@ -12,8 +11,6 @@ export async function logout(redirect = true) {
     console.error('Error logging out: ', error);
   }
 
-  currentOrg.set(defaultCurrentOrgState);
-  orgs.set([]);
   user.set(defaultUserState);
   profile.set(defaultProfileState);
 

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

@@ -11,6 +11,13 @@ export const getSupabase = () => {
   return supabase;
 };
 
+export const hasSession = async () => {
+  const { data } = await getSupabase().auth.getSession();
+  console.log('has session', data);
+
+  return data.session !== null;
+};
+
 export const isSupabaseTokenInLocalStorage = () => {
   for (let i = 0; i < localStorage.length; i++) {
     const key = localStorage.key(i);

apps/dashboard/src/routes/+layout.server.ts

@@ -100,11 +100,9 @@ export const load = async ({ url, cookies, request }): Promise<LoadOutput> => {
       return response;
     }
 
-    const answer = !!subdomain;
-
     console.log('subdomain', subdomain);
 
-    response.isOrgSite = debugMode || answer;
+    response.isOrgSite = debugMode || !!subdomain;
     response.orgSiteName = debugMode ? _orgSiteName : subdomain;
     response.org = (await getCurrentOrg(response.orgSiteName, true)) || null;
 
@@ -172,11 +170,16 @@ function getBaseMetaTags(url: URL) {
 }
 
 function getSubdomain(url: URL) {
-  const host = url.host.replace('www.', '');
-  const parts = host?.split('.');
+  const host = url.hostname.replace('www.', '');
+  const parts = host.split('.');
+  const appHost = env.PRIVATE_APP_HOST;
 
-  if (host?.endsWith(env.PRIVATE_APP_HOST)) {
-    return parts?.length >= 3 ? parts[0] : null;
+  const appHostParts = appHost.split('.');
+  const isAppHost = parts.slice(-appHostParts.length).join('.') === appHost;
+
+  if (isAppHost) {
+    // Subdomain exists only if extra part(s) before main domain
+    return parts.length > appHostParts.length ? parts[0] : null;
   }
 
   return null;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
+  // import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import debounce from 'lodash/debounce';
 
@@ -28,11 +28,14 @@
   import { globalStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
   import { isMobile } from '$lib/utils/store/useMobile';
-  import { Theme } from 'carbon-components-svelte';
-  import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
+  // import { Theme } from 'carbon-components-svelte';
+  // import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
   import merge from 'lodash/merge';
   import { onMount } from 'svelte';
   import { MetaTags } from 'svelte-meta-tags';
+  import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
+  import { hasSession } from '$lib/utils/functions/supabase';
+  import { goto } from '$app/navigation';
 
   import { ModeWatcher } from '@cio/ui/base/dark-mode';
 
@@ -43,7 +46,7 @@
   let supabase = getSupabase();
   let path = $derived($page.url?.pathname?.replace('/', ''));
   let queryParam = $page.url?.search;
-  let carbonTheme: CarbonTheme = $derived($globalStore.isDark ? 'g100' : 'white');
+  // let carbonTheme: CarbonTheme = $derived($globalStore.isDark ? 'g100' : 'white');
 
   function handleResize() {
     isMobile.update(() => window.innerWidth <= 760);
@@ -51,33 +54,43 @@
 
   const getProfileDebounced = debounce(getProfile, 1000);
 
-  onMount(() => {
+  function pageSetup() {
     console.log(
       'Welcome to ClassroomIO, we are grateful you chose us.',
       $page.url.host,
-      `\nIs student domain: ${data.isOrgSite}`
+      `\nIs student domain: ${data.isOrgSite}`,
+      data
     );
 
-    if (browser) {
-      // Update theme - dark or light mode
-      // $globalStore.isDark = localStorage.getItem('mode') === 'dark';
-      // toggleBodyByMode($globalStore.isDark);
+    // $globalStore.isDark = localStorage.getItem('mode') === 'dark';
+    // toggleBodyByMode($globalStore.isDark);
 
-      if (data.isOrgSite && data.org?.theme) {
-        setTheme(data.org?.theme);
-      }
-    }
     setupAnalytics();
 
     handleResize();
 
-    // if (!isSupabaseTokenInLocalStorage() && !isPublicRoute($page.url?.pathname)) {
-    //   console.log('No auth token and is not a public route, redirect to login', path);
-    //   return goto('/login?redirect=/' + path);
-    // }
+    if (!data.isOrgSite || !data.org) return;
+
+    $globalStore.orgSiteName = data.orgSiteName;
+    $globalStore.isOrgSite = data.isOrgSite;
+
+    currentOrg.set(data.org);
+
+    // Setup internal analytics
+    initOrgAnalytics(data.orgSiteName);
+
+    setTheme(data.org?.theme);
+  }
+
+  onMount(() => {
+    pageSetup();
+
+    if (!hasSession() && !isPublicRoute($page.url?.pathname)) {
+      console.log('No auth token and is not a public route, redirect to login', path);
+      return goto('/login?redirect=/' + path);
+    }
 
     const { data: authListener } = supabase.auth.onAuthStateChange((event) => {
-      // Log key events
       console.log(`event`, event);
 
       if (path.includes('reset')) {
@@ -85,10 +98,8 @@
         return;
       }
 
-      // Skip Authentication
       if (data.skipAuth) return;
 
-      // Authentication Steps
       if (event === 'SIGNED_IN' || event === 'INITIAL_SESSION') {
         getProfileDebounced({
           path,
@@ -97,22 +108,8 @@
           orgSiteName: data.orgSiteName
         });
       }
-      // else if (!['TOKEN_REFRESHED'].includes(event)) {
-      //   console.log('not logged in, go to login');
-      //   return goto('/login');
-      // }
     });
 
-    if (data.isOrgSite && data.org && !$currentOrg.siteName) {
-      $globalStore.orgSiteName = data.orgSiteName;
-      $globalStore.isOrgSite = data.isOrgSite;
-
-      currentOrg.set(data.org);
-
-      // Setup internal analytics
-      initOrgAnalytics(data.orgSiteName);
-    }
-
     return () => {
       console.log('unsubscribed');
       authListener.subscription.unsubscribe();

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

@@ -110,6 +110,14 @@
   }
 
   onMount(async () => {
+    // check if user has session, if not redirect to sign up with redirect back to this page
+    const {
+      data: { session }
+    } = await supabase.auth.getSession();
+    if (!session) {
+      return goto(`/login?redirect=${$page.url?.pathname || ''}`);
+    }
+
     setTheme(data.currentOrg?.theme || '');
     setCurOrg(data.currentOrg as CurrentOrg);
   });