ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rotimi Best
2023-09-14 12:47:26 +01:00
parent c07c119b5b
commit 14f58792f6
17 changed files with 320 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+31
View File
@@ -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
+82
View File
@@ -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/[hash]/+layout.server.ts → src/routes/invite/t/[hash]/+layout.server.ts
+13 -3
View File
@@ -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/[hash]/+page.svelte → src/routes/invite/t/[hash]/+page.svelte
+89 -60
View File
@@ -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
-4
View File
@@ -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
+2 -1
View File
@@ -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) {