Allow viewing of message content on Synergy

src/lib/synergy.ts

@@ -1,4 +1,5 @@
 import type { Attendance } from '$lib/types/Attendance';
+import type { AuthToken } from '$lib/types/AuthToken';
 import type { DocumentsList } from '$lib/types/DocumentsList';
 import type { Gradebook } from '$lib/types/Gradebook';
 import type { Message } from '$lib/types/Message';
@@ -36,7 +37,7 @@ export class StudentAccount {
 		this.password = password;
 	}
 
-	async request(methodName: string, params: unknown = {}) {
+	async soapRequest(operation: string, methodName: string, params: unknown = {}) {
 		const paramStr = builder
 			.build({ Params: params })
 			.replaceAll('<', '&lt;')
@@ -48,29 +49,54 @@ export class StudentAccount {
 			body: `<?xml version="1.0" encoding="utf-8"?>
             <soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
                 <soap12:Body>
-                    <ProcessWebServiceRequest xmlns="http://edupoint.com/webservices/">
+                    <${operation} xmlns="http://edupoint.com/webservices/">
                         <userID>${this.userID}</userID>
                         <password>${this.password}</password>
                         <skipLoginLog>true</skipLoginLog>
                         <parent>false</parent>
                         <webServiceHandleName>PXPWebServices</webServiceHandleName>
                         <methodName>${methodName}</methodName>
                         <paramStr>${paramStr}</paramStr>
-                    </ProcessWebServiceRequest>
+                    </${operation}>
                 </soap12:Body>
             </soap12:Envelope>`
 		});
 
-		return parser.parse(
-			parser.parse(await res.text())['soap:Envelope']['soap:Body'].ProcessWebServiceRequestResponse
-				.ProcessWebServiceRequestResult
+		const result = parser.parse(
+			parser.parse(await res.text())['soap:Envelope']['soap:Body'][operation + 'Response'][
+				operation + 'Result'
+			]
 		);
+
+		if (result.RT_ERROR) throw new Error(result.RT_ERROR._ERROR_MESSAGE);
+
+		return result;
+	}
+
+	async request(methodName: string, params: unknown = {}) {
+		return this.soapRequest('ProcessWebServiceRequest', methodName, params);
+	}
+
+	async requestMultiWeb(methodName: string, params: unknown = {}) {
+		return this.soapRequest('ProcessWebServiceRequestMultiWeb', methodName, params);
 	}
 
 	async checkLogin() {
-		const res = await this.request('StudentInfo');
+		await this.request('StudentInfo');
+	}
 
-		if (res.RT_ERROR) throw new Error(res.RT_ERROR._ERROR_MESSAGE);
+	async getAuthToken(): Promise<AuthToken> {
+		return (
+			await this.requestMultiWeb('GenerateAuthToken', {
+				Username: this.userID,
+				TokenForClassWebSite: true,
+				Usertype: 0,
+				IsParentStudent: 0,
+				DataString: '',
+				DocumentID: 1,
+				AssignmentID: 1
+			})
+		).AuthToken;
 	}
 
 	async grades(reportPeriod?: number): Promise<Gradebook> {

src/lib/types/AuthToken.d.ts

@@ -0,0 +1,3 @@
+export interface AuthToken {
+	_EncyToken: string;
+}

src/routes/(authed)/messages/+page.svelte

@@ -3,31 +3,66 @@
 	import { loadMessages } from '$lib/cache';
 	import DateBadge from '$lib/components/DateBadge.svelte';
 	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
-	import { messages, messagesLoaded } from '$lib/stores';
-	import { Badge, Card } from 'flowbite-svelte';
-	import { UserOutline } from 'flowbite-svelte-icons';
+	import { messages, messagesLoaded, studentAccount } from '$lib/stores';
+	import { Badge, Button, Card } from 'flowbite-svelte';
+	import { ArrowUpRightFromSquareOutline, UserOutline } from 'flowbite-svelte-icons';
 
 	if (!$messages && browser) loadMessages();
+
+	let authenticating = false;
+
+	async function generateMessagesURL() {
+		if (!$studentAccount) return;
+
+		authenticating = true;
+
+		const token = (await $studentAccount.getAuthToken())._EncyToken;
+
+		const url = new URL(`https://${$studentAccount.domain}/PXP2_Messages.aspx`);
+
+		const queryParams = url.searchParams;
+		queryParams.append('token', token);
+		queryParams.append('LNG', '00');
+		queryParams.append('regenerateSessionId', 'True');
+		queryParams.append('mobile', 'False');
+
+		open(url.toString(), '_blank');
+
+		authenticating = false;
+	}
 </script>
 
 <svelte:head>
 	<title>Messages - GradeVue</title>
 </svelte:head>
 
 <LoadingBanner show={!$messagesLoaded} loadingMsg="Loading messages..." />
+<LoadingBanner show={authenticating} loadingMsg="Authenticating..." />
 
 {#if $messages}
 	<ol class="p-4 space-y-4">
 		{#each $messages as message}
 			<li>
-				<Card class="dark:text-white max-w-none flex flex-row items-center gap-2 flex-wrap">
-					<h2 class="text-md">{message._SubjectNoHTML}</h2>
-					<Badge color="blue">
-						<UserOutline size="xs" class="focus:outline-none mr-1" />
-						{message._Email}
-					</Badge>
-					<DateBadge date={new Date(message._BeginDate)} />
-					<Badge color="dark">{message._Type}</Badge>
+				<Card class="dark:text-white max-w-none flex flex-row justify-between gap-2">
+					<div class="flex flex-col gap-2">
+						<h2 class="text-xl">{message._SubjectNoHTML}</h2>
+						<div class="flex flex-row items-center gap-2 flex-wrap">
+							<Badge color="blue">
+								<UserOutline size="xs" class="focus:outline-none mr-1" />
+								{message._Email}
+							</Badge>
+							<DateBadge date={new Date(message._BeginDate)} />
+							<Badge color="dark">{message._Type}</Badge>
+						</div>
+					</div>
+					<Button
+						on:click={generateMessagesURL}
+						color="alternative"
+						class="my-auto whitespace-nowrap"
+					>
+						<ArrowUpRightFromSquareOutline size="sm" class="focus:outline-none mr-1" />
+						View <span class="hidden lg:inline">&nbsp;on Synergy</span>
+					</Button>
 				</Card>
 			</li>
 		{/each}

src/routes/login/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
+	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
+	import { studentAccount } from '$lib/stores';
 	import { StudentAccount } from '$lib/synergy';
 	import {
 		Accordion,
@@ -17,7 +19,7 @@
 		EyeSlashOutline,
 		InfoCircleOutline
 	} from 'flowbite-svelte-icons';
-	import { studentAccount } from '../../lib/stores';
+	import { fly } from 'svelte/transition';
 
 	if (browser && localStorage.getItem('token')) {
 		if (!$studentAccount) {
@@ -35,12 +37,19 @@
 	let loginErrorShown = false;
 	let loginError: string;
 
+	let loggingIn = false;
+
 	async function login() {
+		if (loggingIn) return;
+		loggingIn = true;
+
 		const loginAccount = new StudentAccount(domain, username, password);
 
 		try {
 			await loginAccount.checkLogin();
 		} catch (e) {
+			loggingIn = false;
+
 			loginErrorShown = true;
 			loginError = e instanceof Error ? e.message : 'An unknown error occurred';
 			return;
@@ -50,6 +59,8 @@
 
 		localStorage.setItem('token', JSON.stringify({ username, password, domain }));
 
+		loggingIn = false;
+
 		goto('/grades');
 	}
 </script>
@@ -58,12 +69,14 @@
 	<title>Log In - Gradevue</title>
 </svelte:head>
 
+<LoadingBanner show={loggingIn} loadingMsg="Logging you in..." />
+
 {#if loginErrorShown}
-	<div class="fixed w-full p-4 top-0 left-0">
-		<Alert class="w-full" color="red">
+	<div in:fly={{ y: -50, duration: 200 }} class="fixed w-full p-4 top-0 left-0 flex justify-center">
+		<Alert color="red">
 			<ExclamationCircleSolid slot="icon" />
 			<span class="font-bold">Couldn't log in</span>
-			{loginError}
+			<p>{loginError}</p>
 		</Alert>
 	</div>
 {/if}