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/lib/components/AuthUI/index.svelte
+16 -10
View File
@@ -1,17 +1,20 @@
<script>
<script lang="ts">
import { page } from '$app/stores';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import { currentOrg } from '$lib/utils/store/org';
import type { SupabaseClient } from '@supabase/supabase-js';
export let supabase;
export let handleSubmit;
export let supabase: SupabaseClient;
export let handleSubmit = () => {};
export let isLogin = true;
export let showOnlyContent = false;
export let isLoading = false;
export let showLogo = false;
export let formRef;
export let hideGoogleAuth = false;
async function signInWithGoogle() {
if (isLoading) {
@@ -19,12 +22,11 @@
}
try {
console.log('signInWithGoogle');
const { user, session, error } = await supabase.auth.signInWithOAuth({
const { error, data } = await supabase.auth.signInWithOAuth({
provider: 'google'
});
console.log('user', user);
console.log('session', session);
console.log('data', data);
console.log('error', error);
} catch (error) {
console.log('catch error', error);
@@ -57,7 +59,7 @@
>
<slot />
</form>
{#if !showOnlyContent}
{#if !showOnlyContent && !hideGoogleAuth}
<div class="w-10/12 mb-3">
<p class="dark:text-white text-sm mb-5">or sign up with:</p>
<PrimaryButton
@@ -75,10 +77,14 @@
{#if !showOnlyContent}
<div class="w-full p-6 border-t border-grey text-center">
{#if isLogin}
Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
Not registered yet? <a
class="hover:underline text-primary-700"
href="/signup{$page.url.search}">Sign up</a
>
{:else}
Already have an account? <a class="hover:underline text-primary-700" href="/login"
>Log In</a
Already have an account? <a
class="hover:underline text-primary-700"
href="/login{$page.url.search}">Log In</a
>
{/if}
</div>
src/lib/components/Course/components/People/InviationModal.svelte
+60 -44
View File
@@ -1,27 +1,20 @@
<script lang="ts">
import { Popover } from 'carbon-components-svelte';
import Link from 'carbon-icons-svelte/lib/Link.svelte';
import Modal from '$lib/components/Modal/index.svelte';
import copy from 'copy-to-clipboard';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextArea from '$lib/components/Form/TextArea.svelte';
import { ROLE } from '$lib/utils/constants/roles';
import { addGroupMember, fetchGroup } from '$lib/utils/services/courses';
import { invitationModal, resetForm } from './store';
import { validateForm } from '$lib/components/Courses/functions';
import { course, setCourse } from '$lib/components/Course/store';
import { MultiSelect, Loading } from 'carbon-components-svelte';
import { currentOrg } from '$lib/utils/store/org';
import { getOrgTeam } from '$lib/utils/services/org';
import type { OrgTeamMember } from '$lib/utils/types/org';
import { sendTeacherCourseWelcome } from './utils';
let errors: {
students: string;
tutors: string;
title?: string;
description?: string;
} = {
students: '',
tutors: ''
};
import type { Course } from '$lib/utils/types';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
interface Tutor {
id: number;
@@ -33,6 +26,8 @@
let selectedIds: Array<number> = [];
let selectedTutors: Tutor[] = [];
let isLoadingTutors = false;
let link = '';
let copied = false;
function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
return value !== null && value !== undefined;
@@ -41,28 +36,14 @@
i.length === 0 ? [] : i.map((id) => tutors.find((tutor) => tutor.id === id)).filter(notEmpty);
function onSubmit() {
const { hasError, fieldErrors, students } = validateForm({
...$invitationModal,
title: 'sfdsd',
description: 'dsfdsf',
tutors: 'sgsg'
});
errors = fieldErrors;
if (hasError) return;
if (!selectedTutors.length) {
resetForm();
return;
}
let membersStack = [];
console.log(`$course`, $course);
// Create groupmemebers from group_id and add teachers and students
for (const studentEmail of students) {
membersStack.push({
email: studentEmail,
group_id: $course.group?.id,
role_id: ROLE.STUDENT
});
}
for (const tutor of selectedTutors) {
membersStack.push({
profile_id: tutor.profileId,
@@ -128,12 +109,37 @@
isLoadingTutors = false;
}
function getInviteLink(_course: Course, siteName: string) {
const hash = encodeURIComponent(
btoa(
JSON.stringify({
groupId: _course.group?.id,
name: _course.title,
description: _course.description,
orgSiteName: siteName
})
)
);
return `https://${siteName}.classroomio.com/invite/s/${hash}`;
}
function copyLink() {
copy(link);
copied = true;
setTimeout(() => {
copied = false;
}, 1000);
}
$: {
selectedTutors = formatSelected(selectedIds);
console.log('selectedTutors', selectedTutors);
}
$: setTutors($currentOrg.id, $invitationModal.open);
$: link = getInviteLink($course, $currentOrg.siteName);
</script>
<Modal
@@ -144,8 +150,8 @@
modalHeading="Invite people"
>
<form on:submit|preventDefault={onSubmit}>
<div class="mb-4">
<p class="text-base mb-1">Invite Tutors</p>
<div class="mb-8">
<p class="text-base mb-1 font-semibold">Invite Tutors</p>
<MultiSelect
disabled={isLoadingTutors}
label="Select tutors in organization..."
@@ -169,19 +175,29 @@
{/if}
</div>
<TextArea
label="Invite Students"
labelClassName="text-base"
bind:value={$invitationModal.students}
rows="2"
maxRows={3}
placeholder="[email protected], john@gmail.com"
helperMessage="To invite people, add their emails separated by a comma"
errorMessage={errors.students}
className="mb-4"
/>
<div class="mb-8 w-[90%] flex justify-between items-center">
<div class="w-3/5">
<p class="text-base mb-1 font-semibold">Invite Students</p>
<p class=" text-sm">You can invite students via an invite link</p>
</div>
<div class="mt-5 flex items-center">
<div class="relative">
<PrimaryButton
disablePadding={true}
className="text-sm py-2 px-3"
variant={VARIANTS.OUTLINED}
onClick={copyLink}
>
<Link size={16} class="mr-1" />
Copy link
</PrimaryButton>
<Popover caret open={copied} align="bottom">
<div style="padding: 5px">Copied Successfully</div>
</Popover>
</div>
</div>
<div class="mt-5 flex items-center flex-row-reverse">
<PrimaryButton className="px-6 py-3" label="Finish" type="submit" />
</div>
</form>
src/lib/components/Course/components/People/store.js
+2 -4
View File
@@ -5,12 +5,10 @@ export const deleteMemberModal = writable({
});
export const invitationModal = writable({
open: false,
students: ''
open: false
});
export const resetForm = () =>
invitationModal.update(() => ({
open: false,
students: ''
open: false
}));
src/lib/components/Course/store.ts
+1
View File
@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
description: '',
cost: 0,
currency: '',
status: 'ACTIVE',
is_certificate_downloadable: false,
certificate_theme: 'professional',
metadata: {
src/lib/components/Org/SideBar.svelte
+5 -5
View File
@@ -19,12 +19,12 @@
const menuItems = [
{
path: '',
label: 'Home'
},
{
path: '/quiz',
label: 'Quizzes'
label: 'Dashboard'
},
// {
// path: '/quiz',
// label: 'Quizzes'
// },
{
path: '/courses',
label: 'Courses'
src/lib/components/PrimaryButton/constants.js
+2
View File
@@ -7,6 +7,7 @@ export const VARIANTS = {
CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
OUTLINED: 'OUTLINED',
NONE: 'NONE',
LINK: 'LINK',
TEXT: 'TEXT',
TEXT_DANGER: 'TEXT_DANGER'
};
@@ -25,6 +26,7 @@ export const VARIANTS_CLASS = {
[VARIANTS.NONE]:
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
[VARIANTS.TEXT]: 'text-black hover:underline',
[VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
[VARIANTS.TEXT_DANGER]:
'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300'
};
src/lib/utils/constants/routes.ts
+5 -3
View File
@@ -7,7 +7,8 @@ export const ROUTE = {
COURSE: '/course',
LOGIN: '/login',
SIGN_UP: '/signup',
INVITE_SIGNUP: '/invite',
INVITE_TEACHER: '/invite/t',
INVITE_STUDENT: '/invite/s',
PROFILE: '/profile',
PEOPLE: '/people',
DISCUSSIONS: '/discussions',
@@ -20,7 +21,7 @@ export const PUBLIC_ROUTES = [
`^${ROUTE.HOME}$`,
ROUTE.LOGIN,
ROUTE.SIGN_UP,
`^${ROUTE.INVITE_SIGNUP}/.*`,
`^${ROUTE.INVITE_TEACHER}/.*`,
ROUTE.FORGOT,
ROUTE.RESET,
`^${ROUTE.PAGES}/.*`,
@@ -31,7 +32,8 @@ export const PUBLIC_ROUTES = [
export const ROUTES_TO_HIDE_NAV = [
ROUTE.LOGIN,
ROUTE.SIGN_UP,
`^${ROUTE.INVITE_SIGNUP}/.*`,
`^${ROUTE.INVITE_TEACHER}/.*`,
`^${ROUTE.INVITE_STUDENT}/.*`,
ROUTE.FORGOT,
ROUTE.RESET,
ROUTE.ONBOARDING
src/lib/utils/functions/user.ts
+8
View File
@@ -0,0 +1,8 @@
import { supabase } from '$lib/utils/functions/supabase';
import type { Profile } from '$lib/components/Course/components/People/types';
export async function getProfile(email: string): Promise<Profile | null> {
const { data } = await supabase.from('profile').select('*').eq('email', email).single();
console.log('getProfile data', data);
return data;
}
src/lib/utils/types/index.ts
+1
View File
@@ -64,6 +64,7 @@ export interface Group {
updated_at?: string;
organization_id?: string /* foreign key to organization.id */;
organization?: Organization;
tutors: Profile[];
}
export interface Role {