fix permissions, tests use instructor, refactor session store

Author: drdrew42

conf/permissions.dist.yml

@@ -35,9 +35,9 @@ db_permissions:
 
   Course:
     getCourses:
-      allowed_roles: ['*']
+      authenticated: true
     getCourse:
-      allowed_roles: ['*']
+      authenticated: true
     updateCourse:
       admin_required: true
     addCourse:

src/common/models/courses.ts

@@ -106,12 +106,12 @@ export class Course extends Model {
  */
 
 export interface ParseableUserCourse {
-	course_id?: number;
-	user_id?: number;
-	course_name?: string;
+	course_id: number;
+	user_id: number;
+	course_name: string;
 	username?: string;
 	visible?: boolean;
-	role?: string;
+	role: string;
 	course_dates?: ParseableCourseDates;
 }
 export class UserCourse extends Model {
@@ -126,6 +126,13 @@ export class UserCourse extends Model {
 	static ALL_FIELDS = ['course_id', 'course_name', 'visible', 'course_dates',
 		'user_id', 'username', 'role'];
 
+	static DEFAULT_VALUES = {
+		course_id: 0,
+		user_id: 0,
+		course_name: 'DEFAULT_USER_COURSE',
+		role: 'unknown',
+	};
+
 	get all_field_names(): string[] {
 		return UserCourse.ALL_FIELDS;
 	}
@@ -134,7 +141,7 @@ export class UserCourse extends Model {
 		return ['course_dates'];
 	}
 
-	constructor(params: ParseableUserCourse = {}) {
+	constructor(params: ParseableUserCourse = UserCourse.DEFAULT_VALUES) {
 		super();
 		this.set(params);
 	}
@@ -171,7 +178,8 @@ export class UserCourse extends Model {
 	set role(value: string) { this._role = value; }
 
 	clone(): UserCourse {
-		return new UserCourse(this.toObject());
+		// typescript does not recognize the getters as keys when converting with .toObject()
+		return new UserCourse(this.toObject() as unknown as ParseableUserCourse);
 	}
 
 	isValid(): boolean {

src/components/common/Login.vue

@@ -56,23 +56,21 @@ const login = async () => {
 	};
 	const session_info = await checkPassword(username_info);
 
-	if (!session_info.logged_in) {
+	if (!session_info.logged_in || !session_info.user.user_id) {
 		message.value = i18n.t('authentication.failure');
 	} else {
 		// success
 		session.updateSessionInfo(session_info);
 
 		// permissions require access to user courses and respective roles
-		await session.fetchUserCourses(session_info.user.user_id);
+		await session.fetchUserCourses();
 		await permission_store.fetchRoles();
 		await permission_store.fetchRoutePermissions();
 
-		if (session.user.user_id == undefined || session.user.user_id == 0) return;
-
 		let forward = localStorage.getItem('afterLogin');
 		forward ||= (session_info.user.is_admin) ?
 			'/admin' :
-			`/users/${session.user.user_id}/courses`;
+			`/users/${session_info.user.user_id}/courses`;
 		localStorage.removeItem('afterLogin');
 		void router.push(forward);
 	}

src/components/common/UserCourses.vue

@@ -41,41 +41,30 @@ import { logger } from 'src/boot/logger';
 const session_store = useSessionStore();
 const router = useRouter();
 
-const user_courses = computed(() => session_store.user_courses);
-
 const user = computed(() => session_store.user);
 
 // This is used to simplify the UI.
 const course_types = computed(() => [
-	{ name: 'Student', courses: user_courses.value.filter(c => c.role == 'student') },
-	{ name: 'Instructor', courses: session_store.instructor_user_courses }
+	{ name: 'Student', courses: session_store.user_courses.filter(c => c.role === 'student') },
+	{ name: 'Instructor', courses: session_store.user_courses.filter(c => c.role === 'instructor') }
 ]);
 
-const switchCourse = async (course_id?: number) => {
-	if (course_id == undefined || course_id === 0) {
+const switchCourse = (course_id?: number) => {
+	if (!course_id) {
 		logger.error('[UserCourses/switchCourse]: the course_id is 0 or undefined.');
+		return;
 	}
-	const student_course = session_store.student_user_courses.find(c => c.course_id === course_id);
-	const instructor_course = session_store.instructor_user_courses.find(c => c.course_id === course_id);
-	if (student_course) {
-		session_store.setCourse({
-			course_name: student_course.course_name ?? 'unknown',
-			course_id: student_course.course_id ?? 0,
-			role: 'student'
-		});
-		await router.push({
+	session_store.setCourse(course_id);
+
+	if (session_store.course.role === 'student') {
+		void router.push({
 			name: 'StudentDashboard',
-			params: { course_id: student_course.course_id }
-		});
-	} else if (instructor_course) {
-		session_store.setCourse({
-			course_name: instructor_course.course_name ?? 'unknown',
-			course_id: instructor_course.course_id ?? 0,
-			role: 'instructor'
+			params: { course_id }
 		});
-		await router.push({
+	} else if (session_store.course.role === 'instructor') {
+		void router.push({
 			name: 'InstructorDashboard',
-			params: { course_id: instructor_course.course_id }
+			params: { course_id }
 		});
 	}
 };

src/components/student/Student.vue

@@ -33,16 +33,7 @@ const loadStudentSets = async () => {
 };
 
 const course_id = parseRouteCourseID(route);
-const course = session_store.user_courses.find(c => c.course_id === course_id);
-if (course) {
-	session_store.setCourse({
-		course_id: course_id,
-		course_name: course.course_name ?? 'unknown'
-	});
-} else {
-	logger.warn(`Can't find ${course_id} in ${session_store.user_courses
-		.map((c) => c.course_id).join(', ')}`);
-}
+session_store.setCourse(course_id);
 await loadStudentSets();
 
 watch(() => session_store.course.course_id, async () => {

src/layouts/MenuBar.vue

@@ -29,7 +29,7 @@
 						<q-list>
 							<template v-for="course in user_courses" :key="course.course_id">
 								<q-item clickable v-close-popup
-									@click="changeCourse(course.course_id, course.course_name)">
+									@click="changeCourse(course.course_id)">
 									<q-item-section>
 										<q-item-label>{{course.course_name}}</q-item-label>
 									</q-item-section>
@@ -87,30 +87,17 @@ const full_name = computed(() => session.full_name);
 const user_courses = computed(() =>
 	session.user_courses.filter(course => course.course_name !== current_course_name.value));
 
-const changeCourse = (course_id?: number, course_name?: string) => {
-	logger.debug(`[MenuBar/changeCourse]: changing the course to ${course_name ?? 'unknown'}`);
-	const new_course = session.user_courses.find(course => course.course_name === course_name);
-	const new_course_id = new_course?.course_id ?? 0;
-	if (!new_course || new_course_id == 0) return;
-	const role = new_course?.role ?? 'unknown';
-
-	if (role == 'unknown') {
-		logger.error(['MenuBar/changeCourse: the role is not defined']);
-	}
+const changeCourse = (course_id: number) => {
+	logger.debug(`[MenuBar/changeCourse]: changing the course to #${course_id}`);
+	session.setCourse(course_id);
 
 	// This sets the path to the instructor or student dashboard.
 	// This only works currently for roles of student/instructor.  We'll need to think about
 	// the UI for other roles.
-
-	if (new_course != undefined) {
-		router.push(`/courses/${new_course_id}/${role}`).then(() => {
-			session.setCourse({
-				course_name: new_course.course_name ?? 'unknown',
-				course_id: new_course_id
-			});
-		}).catch(() => {
-			logger.error('[MenuBar/changeCourse]: Error occurred.');
-		});
+	if (!session.course.role || session.course.role == 'unknown') {
+		logger.error(`[MenuBar/changeCourse]: the role is not defined for course #${course_id}`);
+	} else {
+		void router.push(`/courses/${course_id}/${session.course.role}`);
 	}
 };
 
@@ -121,6 +108,6 @@ const availableLocales = computed(() =>
 const logout = async () => {
 	await endSession();
 	void session.logout();
-	void router.push('/login');
+	void router.push({ name: 'login' });
 };
 </script>

src/layouts/MenuSidebar.vue

@@ -13,21 +13,23 @@
 import { defineComponent, ref, computed } from 'vue';
 import { instructor_views, admin_views, student_views, ViewInfo } from 'src/common/views';
 import { useRouter, useRoute } from 'vue-router';
+import { useSessionStore } from 'src/stores/session';
 
 export default defineComponent({
 	name: 'MenuSidebar',
 	setup() {
 		const route = useRoute();
 		const router = useRouter();
+		const session = useSessionStore();
 		const sidebar_open = ref<boolean>(false);
 		return {
 			sidebar_open,
 			views: computed(() =>
 				/^\/admin/.exec(route.path)
 					? admin_views
-					: /^\/courses\/\d+\/instructor/.exec(route.path)
+					: session.course.role === 'instructor'
 						? instructor_views
-						: /^\/courses\/\d+\/student/.exec(route.path)
+						: session.course.role === 'student'
 							? student_views
 							: []
 			),

src/pages/instructor/Instructor.vue

@@ -30,17 +30,12 @@ const problem_sets = useProblemSetStore();
 const route = useRoute();
 
 const course_id = parseRouteCourseID(route);
-const course = session.user_courses.find(c => c.course_id === course_id);
-
-if (course) {
-	session.setCourse({
-		course_id,
-		course_name: course.course_name ?? 'unknown'
-	});
-} else {
-	logger.warn(`Can't find ${course_id} in ${session.user_courses
-		.map((c) => c.course_id).join(', ')}`);
+
+// allow the route to update the session's 'selected' course
+if (course_id !== session.course.course_id) {
+	session.setCourse(course_id);
 }
+
 await users.fetchGlobalCourseUsers(course_id);
 await users.fetchCourseUsers(course_id);
 await problem_sets.fetchProblemSets(course_id);

src/stores/session.ts

@@ -47,8 +47,6 @@ export const useSessionStore = defineStore('session', {
 	getters: {
 		full_name: (state): string => `${state.user?.first_name ?? ''} ${state.user?.last_name ?? ''}`,
 		getUser: (state): User => new User(state.user),
-		student_user_courses: (state) => state.user_courses.filter(c => c.role === 'student'),
-		instructor_user_courses: (state) => state.user_courses.filter(c => c.role === 'instructor'),
 	},
 	actions: {
 		updateExpiry(expiry: number): void {
@@ -68,16 +66,35 @@ export const useSessionStore = defineStore('session', {
 				this.user = new User({ username: 'logged_out' }).toObject();
 			}
 		},
-		setCourse(course: CourseInfo): void {
-			this.course = course;
-			this.course.role = this.user_courses.find((c) => c.course_id === course.course_id)?.role || '';
+		setCourse(course_id: number): void {
+			if (course_id === this.course.course_id) return;
+			const new_course = this.user_courses.find((c) => c.course_id === course_id);
+			if (!new_course) {
+				logger.error(`[session_store] Attempted to select course #${course_id} -- not found!`);
+				this.course = {
+					course_id: 0,
+					course_name: '',
+					role: 'unknown'
+				};
+				return;
+			}
+			// in order to be reactive, replace the entire `this.course` object
+			this.course = {
+				course_id,
+				course_name: new_course.course_name,
+				role: new_course.role
+			};
 		},
 		/**
 		 * fetch all User Courses for a given user.
 		 * @param {number} user_id
 		 */
-		async fetchUserCourses(user_id: number): Promise<void> {
-			const response = await api.get(`users/${user_id}/courses`);
+		async fetchUserCourses(): Promise<void> {
+			if (!this.user.user_id) throw {
+				message: 'No user has been authenticated',
+			} as ResponseError;
+
+			const response = await api.get(`users/${this.user.user_id}/courses`);
 			if (response.status === 200) {
 				this.user_courses = response.data as ParseableUserCourse[];
 			} else {

src/stores/set_problems.ts

@@ -106,9 +106,13 @@ export const useSetProblemStore = defineStore('set_problems', {
 		 * Fetch all set problems with given course_id.
 		 */
 		async fetchSetProblems(course_id: number): Promise<void> {
-			const response = await api.get(`courses/${course_id}/problems`);
-			const all_problems = response.data as Array<ParseableProblem>;
-			this.set_problems = all_problems.map((prob) => parseProblem(prob, 'Set') as SetProblem);
+			const response = await api.get(`courses/${course_id}/problems`)
+				.then((response) => {
+					// TODO: throw exceptions via axios hook instead
+					if (response.status !== 200) throw (response.data as Error);
+					return response.data as Array<ParseableProblem>;
+				});
+			if (response) this.set_problems = response.map((prob) => parseProblem(prob, 'Set') as SetProblem);
 		},
 
 		/**
@@ -118,7 +122,11 @@ export const useSetProblemStore = defineStore('set_problems', {
 		async addSetProblem(problem: LibraryProblem, set_id: number): Promise<SetProblem> {
 			if (!problem.isValid()) await invalidError(problem, 'The added problem is invalid');
 
-			const course_id = useSessionStore().course.course_id;
+			const session_store = useSessionStore();
+
+			const course_id = session_store.course.course_id;
+			if (!course_id) logger.error('[addSetProblem] cannot add problem when session course is not set');
+
 			const prob = new SetProblem({
 				problem_params: problem.location_params,
 				set_id: set_id
@@ -127,7 +135,8 @@ export const useSetProblemStore = defineStore('set_problems', {
 			// delete the render params.  Not in the database.
 			delete prob.render_params;
 			const response = await api.post(`/courses/${course_id}/sets/${set_id}/problems`, prob).
-				catch((e: Error) => logger.error(`[addSetProblem] ${JSON.stringify(prob)} failed with ${e.message}`));
+				catch((e: Error) =>
+					logger.error(`[addSetProblem] ${JSON.stringify(prob)} failed with ${e.message}`));
 
 			const new_problem = new SetProblem(response.data as ParseableSetProblem);
 			this.set_problems.push(new_problem);