feat: restrict access to courses

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -31,11 +31,11 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import Analytics from './Submissions/index.svelte';
   import { t } from '$lib/utils/functions/translations';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let exerciseId = '';
   export let path = '';
   export let goBack = () => {};
-  export let isStudent = true;
   export let isFetching = false;
 
   let preview: boolean = false;
@@ -44,7 +44,7 @@
   let selectedIndex = 0;
 
   async function handleSave() {
-    if (isStudent) return;
+    if ($globalStore.isStudent) return;
 
     const errors = validateQuestionnaire($questionnaire.questions);
     if (Object.values(errors).length > 0) {
@@ -81,7 +81,7 @@
   $: $questionnaire?.questions?.length < 1 && handleAddQuestion();
 </script>
 
-<PageBody bind:isPageNavHidden={isStudent} padding="px-4 overflow-x-hidden">
+<PageBody bind:isPageNavHidden={$globalStore.isStudent} padding="px-4 overflow-x-hidden">
   <div class="bg-gray-100 dark:bg-neutral-800 top-0 z-10 sticky p-2 mb-3">
     <Breadcrumb noTrailingSlash>
       <BreadcrumbItem href={path}
@@ -154,7 +154,7 @@
     <RoleBasedSecurity allowedRoles={[1, 2]}>
       <UpdateDescription {preview} />
     </RoleBasedSecurity>
-    {#if !isStudent && !preview}
+    {#if !$globalStore.isStudent && !preview}
       <EditMode bind:shouldDeleteExercise {exerciseId} {goBack} />
     {:else}
       <ViewMode {preview} {exerciseId} isFetchingExercise={isFetching} />

apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte

@@ -18,11 +18,11 @@
   import type { ExerciseTemplate } from '$lib/utils/types';
   import { formatDate } from '$lib/utils/functions/routes/dashboard';
   import { t } from '$lib/utils/functions/translations';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let path = '';
   export let exerciseId = '';
   export let lessonId = '';
-  export let isStudent = true;
 
   let open = false;
   let isFetching = false;
@@ -151,7 +151,7 @@
 {/if}
 
 {#if exerciseId}
-  <Exercise {exerciseId} {goBack} bind:path bind:isStudent {isFetching} />
+  <Exercise {exerciseId} {goBack} bind:path {isFetching} />
 {:else}
   <NewExerciseModal
     bind:open
@@ -161,7 +161,7 @@
     bind:title={newExercise.title}
   />
 
-  <PageBody bind:isPageNavHidden={isStudent}>
+  <PageBody bind:isPageNavHidden={$globalStore.isStudent}>
     <slot:fragment slot="header">
       <Breadcrumb class="my-2">
         <BreadcrumbItem href={path}>{$t('course.navItem.lessons.exercises.heading')}</BreadcrumbItem
@@ -193,7 +193,7 @@
               {$t('course.navItem.lessons.exercises.no_exercises')}
             </h2>
             <p class="text-sm text-center text-slate-500">
-              {#if isStudent}
+              {#if $globalStore.isStudent}
                 {$t('course.navItem.lessons.exercises.no_assigned_exercises')}
                 <strong> {$t('course.navItem.lessons.exercises.chill')} :)</strong>
               {:else}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { Moon } from 'svelte-loading-spinners';
   import { browser } from '$app/environment';
   import Navigation from '../Course/components/Navigation/index.svelte';
@@ -10,6 +11,9 @@
   import { fetchCourse } from '$lib/utils/services/courses';
   import { globalStore } from '$lib/utils/store/app';
   import { lessons } from '../Course/components/Lesson/store/lessons';
+  import Modal from '$lib/components/Modal/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let courseId = '';
   export let path = '';
@@ -19,6 +23,7 @@
   export let containerClass = '';
 
   let prevCourseId = '';
+  let isPermitted = true;
 
   async function onCourseIdChange(courseId = '') {
     if (!courseId || prevCourseId === courseId || !browser || $course.id === courseId) return;
@@ -54,6 +59,9 @@
       $globalStore.isStudent = isStudent;
 
       filterPollsByStatus(isStudent);
+    } else if ($profile.id && $group.people.length) {
+      // Current User doesn't have permission to view
+      isPermitted = false;
     }
   } else {
     isStudent = $globalStore.isStudent;
@@ -70,13 +78,35 @@
   </Backdrop>
 {/if}
 
+<Modal open={!isPermitted} width="w-96" modalHeading={$t('course.not_permitted.header')}>
+  <div>
+    <p class="dark:text-white text-md text-center">
+      {$t('course.not_permitted.body')}
+    </p>
+
+    <div class="mt-5 flex justify-center">
+      <PrimaryButton
+        className="px-6 py-3"
+        label={$t('course.not_permitted.button')}
+        onClick={() => {
+          goto('/org/*');
+        }}
+      />
+    </div>
+  </div>
+</Modal>
+
 <div class="root">
   <Navigation {path} {isStudent} />
   <div class="rightBar {containerClass}" class:isMobile={$isMobile}>
     {#if isExercisePage}
       <Confetti />
     {/if}
-    <slot />
+
+    <!-- Show only if permitted -->
+    {#if isPermitted}
+      <slot />
+    {/if}
   </div>
 </div>
 

apps/dashboard/src/lib/components/RoleBasedSecurity/store.js

@@ -1 +0,0 @@
-import { writable } from 'svelte/store';

apps/dashboard/src/lib/utils/translations/de.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Zertifikate",
       "nav_landing_page": "Landingpage",
       "nav_settings": "Einstellungen"
+    },
+    "not_permitted": {
+      "header": "Keine Erlaubnis",
+      "body": "Leider haben Sie keinen Zugriff auf diesen Kurs.",
+      "button": "Nach Hause gehen"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/en.json

@@ -998,6 +998,12 @@
         "delete_text": "Delete this course,this action cannot be undone",
         "save": "Save Changes"
       }
+    },
+
+    "not_permitted": {
+      "header": "No Permission",
+      "body": "Unfortunately you don't have access to this course.",
+      "button": "Go home"
     }
   },
 

apps/dashboard/src/lib/utils/translations/es.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Certificados",
       "nav_landing_page": "Página de destino",
       "nav_settings": "Ajustes"
+    },
+    "not_permitted": {
+      "header": "Sin autorización",
+      "body": "Lamentablemente no tienes acceso a este curso.",
+      "button": "Vete a casa"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/fr.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Certificats",
       "nav_landing_page": "Page de destination",
       "nav_settings": "Paramètres"
+    },
+    "not_permitted": {
+      "header": "Aucune autorisation",
+      "body": "Malheureusement, vous n'avez pas accès à ce cours.",
+      "button": "rentrer chez soi"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/hi.json

@@ -755,6 +755,11 @@
       "nav_certificates": "प्रमाण पत्र",
       "nav_landing_page": "लैंडिंग पृष्ठ",
       "nav_settings": "समायोजन"
+    },
+    "not_permitted": {
+      "header": "अनुमति नहीं",
+      "body": "दुर्भाग्य से आपके पास इस पाठ्यक्रम तक पहुंच नहीं है।",
+      "button": "घर जाओ"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/pt.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Certificados",
       "nav_landing_page": "Página inicial",
       "nav_settings": "Configurações"
+    },
+    "not_permitted": {
+      "header": "Sem permissão",
+      "body": "Infelizmente você não tem acesso a este curso.",
+      "button": "Ir para casa"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/ru.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Сертификаты",
       "nav_landing_page": "Целевая страница",
       "nav_settings": "Настройки"
+    },
+    "not_permitted": {
+      "header": "Нет разрешения",
+      "body": "К сожалению, у вас нет доступа к этому курсу.",
+      "button": "Иди домой"
     }
   },
   "courses": {

apps/dashboard/src/lib/utils/translations/vi.json

@@ -755,6 +755,11 @@
       "nav_certificates": "Chứng chỉ",
       "nav_landing_page": "Trang đích",
       "nav_settings": "Cài đặt"
+    },
+    "not_permitted": {
+      "header": "Không cho phép",
+      "body": "Rất tiếc, bạn không có quyền truy cập vào khóa học này.",
+      "button": "Về nhà"
     }
   },
   "courses": {

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -13,6 +13,7 @@
     handleSaveLesson
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import PageBody from '$lib/components/PageBody/index.svelte';
+  import { globalStore } from '$lib/utils/store/app';
 
   import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
   import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
@@ -36,7 +37,6 @@
 
   let lessonEditing: string | undefined;
   let lessonToDelete: Lesson | undefined;
-  let isStudent: boolean = true;
   let openDeleteModal: boolean = false;
   let isFetching: boolean = false;
 
@@ -127,7 +127,7 @@
 </script>
 
 {#if $handleAddLessonWidget}
-  <NewLessonModal {isStudent} />
+  <NewLessonModal />
 {/if}
 
 <DeleteLessonConfirmation
@@ -136,8 +136,7 @@
   deleteLesson={() => handleDelete(lessonToDelete?.id)}
 />
 
-<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
-<CourseContainer bind:isFetching bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:isFetching bind:courseId={data.courseId}>
   <PageNav title={$t('course.navItem.lessons.heading')}>
     <div slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -168,7 +167,7 @@
         use:dndzone={{
           items: $lessons,
           flipDurationMs,
-          dragDisabled: isStudent,
+          dragDisabled: $globalStore.isStudent,
           dropTargetStyle: {
             border: '2px #1d4ed8 solid',
             'border-style': 'dashed'
@@ -204,10 +203,10 @@
               {:else}
                 <h3 class="m-0 flex items-center text-lg dark:text-white">
                   <a
-                    href={isStudent && !lesson.is_unlocked
+                    href={$globalStore.isStudent && !lesson.is_unlocked
                       ? $page.url.pathname
                       : '/courses/' + $course.id + '/lessons/' + lesson.id}
-                    class="font-medium text-black no-underline hover:underline dark:text-white {isStudent &&
+                    class="font-medium text-black no-underline hover:underline dark:text-white {$globalStore.isStudent &&
                     !lesson.is_unlocked
                       ? 'cursor-not-allowed'
                       : ''}"
@@ -299,7 +298,7 @@
               <RoleBasedSecurity allowedRoles={[1, 2]}>
                 <OverflowMenu size="xl" class={`absolute right-0 top-0`}>
                   <OverflowMenuItem
-                    disabled={isStudent}
+                    disabled={$globalStore.isStudent}
                     text={lesson.is_unlocked
                       ? $t('course.navItem.lessons.add_lesson.lock')
                       : $t('course.navItem.lessons.add_lesson.unlock')}

apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -7,6 +7,7 @@
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
+  import { globalStore } from '$lib/utils/store/app';
 
   import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
@@ -47,7 +48,6 @@
   let isMarkingComplete = false;
   let isLoading = false;
   let isSaving = false;
-  let isStudent = true;
   let isLessonComplete = false;
 
   function getLessonOrder(id: string) {
@@ -250,16 +250,14 @@
   $: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
 </script>
 
-<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
 <CourseContainer
-  bind:isStudent
   {path}
   isExercisePage={!data.isMaterialsTabActive && !!data.exerciseId}
   bind:courseId={data.courseId}
   containerClass="relative"
 >
   <PageNav
-    bind:hideOnMobile={isStudent}
+    bind:hideOnMobile={$globalStore.isStudent}
     navItems={[
       {
         label: $t('course.navItem.lessons.lesson_nav.materials'),
@@ -325,15 +323,10 @@
   </PageNav>
 
   {#if !data.isMaterialsTabActive}
-    <Exercises
-      bind:isStudent
-      lessonId={data.lessonId}
-      exerciseId={data.exerciseId}
-      path={`${path}/exercises`}
-    />
+    <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
   {:else if !!data.lessonId}
     <PageBody
-      bind:isPageNavHidden={isStudent}
+      bind:isPageNavHidden={$globalStore.isStudent}
       onClick={() => {
         $apps.open = false;
         $apps.dropdown = false;
@@ -348,10 +341,10 @@
         {prevMode}
         {toggleMode}
         bind:isSaving
-        {isStudent}
+        isStudent={$globalStore.isStudent}
       />
 
-      <!-- {#if isStudent}
+      <!-- {#if $globalStore.isStudent}
         <div class="w-full hidden lg:flex flex-row-reverse mt-10">
           <PrimaryButton
             onClick={() => markLessonComplete(data.lessonId)}
@@ -399,7 +392,7 @@
       <button
         class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center disabled:opacity-10 disabled:cursor-not-allowed"
         on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
-        disabled={isStudent && !$currentOrg.customization.apps.comments}
+        disabled={$globalStore.isStudent && !$currentOrg.customization.apps.comments}
       >
         <SendAlt size={24} class="carbon-icon" />
         <span class="ml-1">{$lesson.totalComments}</span>