417 lines
12 KiB
Svelte
417 lines
12 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { MetaTags } from 'svelte-meta-tags';
|
|
import { goto } from '$app/navigation';
|
|
import { browser, dev } from '$app/environment';
|
|
import { page } from '$app/stores';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
import merge from 'lodash/merge';
|
|
import { Theme } from 'carbon-components-svelte';
|
|
import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
|
|
import LandingNavigation from '$lib/components/Navigation/index.svelte';
|
|
import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
|
|
import OrgNavigation from '$lib/components/Navigation/app.svelte';
|
|
import LMSNavigation from '$lib/components/Navigation/lms.svelte';
|
|
import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
|
|
import Snackbar from '$lib/components/Snackbar/index.svelte';
|
|
import Restricted from '$lib/components/Page/Restricted.svelte';
|
|
import Apps from '$lib/components/Apps/index.svelte';
|
|
import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
|
|
import { course } from '$lib/components/Course/store';
|
|
import { isCoursesPage, isOrgPage, isLMSPage } from '$lib/utils/functions/app';
|
|
import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
|
|
import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
|
|
import { user, profile } from '$lib/utils/store/user';
|
|
import { getSupabase } from '$lib/utils/functions/supabase';
|
|
import { isMobile } from '$lib/utils/store/useMobile';
|
|
import { ROUTE } from '$lib/utils/constants/routes';
|
|
import { getOrganizations } from '$lib/utils/services/org';
|
|
import { toggleBodyByMode } from '$lib/utils/functions/app';
|
|
import { globalStore } from '$lib/utils/store/app';
|
|
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
|
|
import { setTheme } from '$lib/utils/functions/theme';
|
|
import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
|
|
import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
|
|
import { identifyPosthogUser, initPosthog } from '$lib/utils/services/posthog';
|
|
import { initSentry, setSentryUser } from '$lib/utils/services/sentry';
|
|
import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
|
|
import { handleLocaleChange } from '$lib/utils/functions/translations';
|
|
|
|
import '../app.postcss';
|
|
import { ROLE } from '$lib/utils/constants/roles';
|
|
|
|
export let data;
|
|
|
|
let supabase = getSupabase();
|
|
let path = $page.url?.pathname?.replace('/', '');
|
|
let queryParam = $page.url?.search;
|
|
let carbonTheme: CarbonTheme = 'white';
|
|
|
|
function setupAnalytics() {
|
|
// Set up sentry
|
|
initSentry();
|
|
|
|
// Set up posthog
|
|
initPosthog();
|
|
|
|
// Disable umami on localhost
|
|
if (dev) {
|
|
localStorage.setItem('umami.disabled', '1');
|
|
}
|
|
}
|
|
|
|
function setAnalyticsUser() {
|
|
if ($profile.id) {
|
|
setSentryUser({
|
|
id: $profile.id,
|
|
username: $profile.username,
|
|
email: $profile.email,
|
|
fullname: $profile.fullname
|
|
});
|
|
|
|
identifyPosthogUser($profile.id, { email: $profile.email, name: $profile.fullname });
|
|
}
|
|
}
|
|
|
|
async function getProfile() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
// Get user profile
|
|
const {
|
|
data: { session }
|
|
} = await supabase.auth.getSession();
|
|
const { user: authUser } = session || {};
|
|
console.log('Get user', authUser);
|
|
|
|
if (!authUser && !isPublicRoute($page.url?.pathname)) {
|
|
return goto('/login?redirect=/' + path + queryParam);
|
|
}
|
|
|
|
// Skip refetching profile, if already in store
|
|
if ($profile.id) return;
|
|
|
|
// Check if user has profile
|
|
let {
|
|
data: profileData,
|
|
error,
|
|
status
|
|
} = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();
|
|
console.log('Get profile', profileData);
|
|
|
|
if (error && !profileData && status === 406 && authUser) {
|
|
// User wasn't found, create profile
|
|
console.log(`User wasn't found, create profile`);
|
|
|
|
const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
|
|
|
|
const isGoogleAuth = !!authUser.app_metadata?.providers?.includes('google');
|
|
|
|
const { data: newProfileData, error } = await supabase
|
|
.from('profile')
|
|
.insert({
|
|
id: authUser.id,
|
|
username: regexUsernameMatch[1] + `${new Date().getTime()}`,
|
|
fullname: regexUsernameMatch[1],
|
|
email: authUser.email,
|
|
is_email_verified: isGoogleAuth,
|
|
verified_at: isGoogleAuth ? new Date().toDateString() : undefined
|
|
})
|
|
.select();
|
|
|
|
// Profile created, go to onboarding or lms
|
|
if (!error && newProfileData) {
|
|
$user.fetchingUser = false;
|
|
$user.isLoggedIn = true;
|
|
$user.currentSession = authUser;
|
|
|
|
profile.set(newProfileData[0]);
|
|
|
|
setAnalyticsUser();
|
|
|
|
// Fetch language
|
|
handleLocaleChange($profile.locale);
|
|
|
|
if (data.isOrgSite) {
|
|
const { data, error } = await supabase
|
|
.from('organizationmember')
|
|
.insert({
|
|
organization_id: $currentOrg.id,
|
|
profile_id: $profile.id,
|
|
role_id: 3
|
|
})
|
|
.select();
|
|
if (error) {
|
|
console.error('Error adding user to organisation', error);
|
|
} else {
|
|
console.log('Success adding user to organisation', data);
|
|
const memberId = data?.[0]?.id || '';
|
|
|
|
$currentOrg.memberId = memberId;
|
|
}
|
|
|
|
if (params.get('redirect')) {
|
|
goto(params.get('redirect') || '');
|
|
} else {
|
|
goto('/lms');
|
|
}
|
|
return;
|
|
}
|
|
|
|
// On invite page, don't go to onboarding
|
|
if (!path.includes('invite')) {
|
|
goto(ROUTE.ONBOARDING);
|
|
}
|
|
}
|
|
$user.fetchingUser = false;
|
|
} else if (profileData) {
|
|
// Profile exists, go to profile page
|
|
$user.fetchingUser = false;
|
|
$user.isLoggedIn = true;
|
|
$user.currentSession = authUser;
|
|
profile.set(profileData);
|
|
|
|
// Set user in sentry
|
|
setAnalyticsUser();
|
|
|
|
// Fetch language
|
|
handleLocaleChange($profile.locale);
|
|
|
|
const orgRes = await getOrganizations(profileData.id, data.isOrgSite, data.orgSiteName);
|
|
|
|
const isStudentAccount = orgRes.currentOrg.role_id == ROLE.STUDENT;
|
|
|
|
// student redirect
|
|
if (data.isOrgSite) {
|
|
if (params.has('redirect')) {
|
|
goto(params.get('redirect') || '');
|
|
} else if (shouldRedirectOnAuth(path)) {
|
|
goto('/lms');
|
|
}
|
|
} else {
|
|
if (isStudentAccount) {
|
|
// Check if the student logged into the dashboard.
|
|
console.log('Student logged into dashboard');
|
|
if (dev) {
|
|
goto('/lms');
|
|
} else {
|
|
window.location.replace(`${$currentOrgDomain}/lms`);
|
|
}
|
|
} else if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
|
|
// Not on invite page or no org, go to onboarding
|
|
goto(ROUTE.ONBOARDING);
|
|
} else if (params.has('redirect')) {
|
|
goto(params.get('redirect') || '');
|
|
} else if (shouldRedirectOnAuth(path)) {
|
|
// By default redirect to first organization
|
|
goto(`/org/${orgRes.currentOrg.siteName}`);
|
|
}
|
|
}
|
|
|
|
setTheme(orgRes?.currentOrg?.theme);
|
|
}
|
|
|
|
if (!profileData && !isPublicRoute($page.url?.pathname)) {
|
|
goto('/login?redirect=/' + path);
|
|
}
|
|
}
|
|
|
|
function handleResize() {
|
|
isMobile.update(() => window.innerWidth <= 760);
|
|
}
|
|
|
|
onMount(() => {
|
|
console.log(
|
|
'Welcome to ClassroomIO, we are grateful you chose us.',
|
|
$page.url.host,
|
|
`\nIs student domain: ${data.isOrgSite}`
|
|
);
|
|
|
|
if (browser) {
|
|
// Update theme - dark or light mode
|
|
$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);
|
|
// }
|
|
|
|
const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
|
|
// Log key events
|
|
console.log(`event`, event);
|
|
|
|
if (path.includes('reset')) {
|
|
console.log('Dont change auth when on reset page');
|
|
return;
|
|
}
|
|
|
|
// Skip Authentication
|
|
if (data.skipAuth || $user.fetchingUser) return;
|
|
|
|
// Authentication Steps
|
|
if (event === 'SIGNED_IN' || event === 'INITIAL_SESSION') {
|
|
$user.fetchingUser = true;
|
|
getProfile().then(() => {
|
|
$user.fetchingUser = false;
|
|
});
|
|
}
|
|
// else if (!['TOKEN_REFRESHED'].includes(event)) {
|
|
// console.log('not logged in, go to login');
|
|
// return goto('/login');
|
|
// }
|
|
});
|
|
|
|
if (data.isOrgSite && data.org) {
|
|
$globalStore.orgSiteName = data.orgSiteName;
|
|
$globalStore.isOrgSite = data.isOrgSite;
|
|
|
|
currentOrg.set(data.org);
|
|
}
|
|
|
|
return () => {
|
|
console.log('unsubscribed');
|
|
authListener.subscription.unsubscribe();
|
|
};
|
|
});
|
|
|
|
$: path = $page.url?.pathname?.replace('/', '');
|
|
$: carbonTheme = $globalStore.isDark ? 'g100' : 'white';
|
|
$: metaTags = merge(data.baseMetaTags, $page.data.pageMetaTags);
|
|
</script>
|
|
|
|
<svelte:window on:resize={handleResize} />
|
|
|
|
<MetaTags {...metaTags} />
|
|
|
|
<Theme bind:theme={carbonTheme} />
|
|
|
|
<UpgradeModal />
|
|
<Snackbar />
|
|
|
|
{#if data.org?.is_restricted || $currentOrg.is_restricted}
|
|
<Restricted />
|
|
{:else if data.skipAuth}
|
|
<PlayQuiz />
|
|
{:else if data.isOrgSite && !path}
|
|
<OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
|
|
{:else}
|
|
<main class="dark:bg-black">
|
|
{#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)}
|
|
<LMSNavigation />
|
|
{:else}
|
|
<LandingNavigation
|
|
isOrgSite={data.isOrgSite}
|
|
logo={data.isOrgSite ? $currentOrg.avatar_url : undefined}
|
|
orgName={data.isOrgSite ? $currentOrg.name : undefined}
|
|
disableSignup={false}
|
|
/>
|
|
{/if}
|
|
|
|
<PageLoadProgressBar textColorClass="text-neutral-700" />
|
|
{/if}
|
|
|
|
<div class={path.includes('home') ? '' : 'flex justify-between'}>
|
|
<slot />
|
|
|
|
{#if showAppsSideBar(path)}
|
|
<Apps />
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
{/if}
|
|
|
|
<style>
|
|
main {
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:global(a:hover) {
|
|
text-decoration: underline;
|
|
}
|
|
:global(:root) {
|
|
--main-primary-color: rgba(29, 78, 216, 1);
|
|
--border-color: #eaecef;
|
|
--app-background-color: #fafbfc;
|
|
--app-background: radial-gradient(
|
|
circle at 10% 20%,
|
|
rgb(239, 246, 249) 0%,
|
|
rgb(206, 239, 253) 90%
|
|
);
|
|
--dark-app-background: radial-gradient(circle at 10% 20%, rgb(0 0 0) 0%, rgb(27 60 74) 90%);
|
|
}
|
|
|
|
:global(.app-background) {
|
|
background: var(--app-background);
|
|
}
|
|
:global(.dark .app-background) {
|
|
background: var(--dark-app-background);
|
|
}
|
|
|
|
:global(.bx--data-table-container) {
|
|
width: 100%;
|
|
}
|
|
|
|
:global(.dark svg.dark) {
|
|
fill: #fff;
|
|
}
|
|
|
|
:global(.border-c) {
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
:global(.border-bottom-c) {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
:global(.bx--search-close > svg) {
|
|
fill: black;
|
|
}
|
|
|
|
:global(.dark .bx--search-close:hover > svg) {
|
|
fill: #fff;
|
|
}
|
|
|
|
:global(.plyr__controls) {
|
|
background:
|
|
url(/logo-192.png) 99% 70% no-repeat,
|
|
linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) !important;
|
|
background-size:
|
|
50px auto,
|
|
auto !important;
|
|
}
|
|
|
|
:global(.cards-container) {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
column-gap: 12px;
|
|
row-gap: 12px;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
:global(.cards-container) {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
column-gap: 12px;
|
|
row-gap: 12px;
|
|
}
|
|
}
|
|
</style>
|