feat(Announcements): support announcements on registration page

components/registration/AuthForm.vue

@@ -11,6 +11,13 @@
     </p>
     <div class="mt-6 flex flex-col-reverse lg:flex-row lg:divide-x lg:divide-slate-200">
       <div class="basis-2/3 px-4 py-2">
+        <RegistrationAnnouncement
+          v-for="announcement in props.announcements"
+          :key="announcement.id"
+          :announcement="announcement"
+          rounded
+          class="mb-4"
+        />
         <form
           class="lg:mt-4"
           @submit="submitForm"
@@ -199,13 +206,16 @@
   import { useAxios } from '@renderer/useAxios';
   import LoadingIndicator from '@components/LoadingIndicator.vue';
   import PasswordStrengthMeter from '@components/PasswordStrengthMeter.vue';
+  import RegistrationAnnouncement from './RegistrationAnnouncement.vue';
   import { getPasswordStrength } from '@renderer/utils/auth';
+  import { Announcement } from '@server/models';
 
-  defineProps<{
+  const props = defineProps<{
     loginURL: string;
     recoveryURL: string;
     googleRegisterURL: string;
     microsoftRegisterURL: string;
+    announcements?: Announcement[]
   }>();
   const emit = defineEmits<{
     (e: 'register', email: string): void;

components/registration/RegistrationAnnouncement.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    :style="{ backgroundColor: $props.announcement.background_color, borderRadius: $props.rounded ? '0.375rem' : '0' }"
+    class="flex text-white px-4 py-2.5 w-full justify-center items-center"
+  >
+    <div
+      class="!text-white !text-sm !font-semibold"
+      v-html="cleanedContent"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Announcement } from "@server/models";
+import DOMPurify from "isomorphic-dompurify";
+
+const props = defineProps<{
+  announcement: Announcement;
+  rounded?: boolean;
+}>();
+
+const cleanedContent = DOMPurify.sanitize(props.announcement.content);
+</script>

pages/register/+Page.vue

@@ -42,6 +42,7 @@ import {
 import AuthForm from "@components/registration/AuthForm.vue";
 import { usePageContext } from "@renderer/usePageContext";
 import { usePageProps } from "@renderer/usePageProps";
+import { Announcement } from "@server/models";
 const VerifyEmail = defineAsyncComponent(
   () => import("@components/registration/VerifyEmail.vue")
 );
@@ -52,6 +53,7 @@ const props = usePageProps<{
   googleRegisterURL: string;
   microsoftRegisterURL: string;
   serviceURL?: string;
+  announcements?: Announcement[]
 }>();
 
 const stage = shallowRef(AuthForm);

pages/register/+onBeforeRender.ts

@@ -1,4 +1,5 @@
 import { buildLocalizedServerRedirectURL } from "@renderer/helpers";
+import { AnnouncementController } from "@server/controllers/AnnouncementController";
 import {
   getCASBaseURL,
   getProductionLoginURL,
@@ -24,6 +25,9 @@ export default async function onBeforeRender(pageContext: PageContextServer) {
     };
   }
 
+  const announcementController = new AnnouncementController();
+  const announcements = await announcementController.getAnnouncementsInternal(['registration']);
+
   const origSearchParams = pageContext.urlParsed.search;
   const searchParams = new URLSearchParams(origSearchParams);
   const redirectURI = searchParams.get("redirect_uri");
@@ -58,6 +62,7 @@ export default async function onBeforeRender(pageContext: PageContextServer) {
           serviceParam && isValidServiceURIForRedirect(serviceParam)
             ? serviceParam
             : undefined,
+        announcements,
       },
       loginURL: `${getProductionLoginURL()}${loginParams.toString()}`,
       recoveryURL: `/passwordrecovery?${recoveryParams.toString()}`,

server/models/Announcement.ts

@@ -17,6 +17,7 @@ export const ANNOUNCEMENT_SCOPES: AnnouncementScope[] = [
   "launchpad",
   "launchpad-instructors",
   "launchpad-students",
+  "registration",
 ];
 
 export const ANNOUNCEMENT_VARIANTS: AnnouncementVariant[] = [

server/types/announcements.ts

@@ -2,6 +2,7 @@ export type AnnouncementScope =
   | "global" // visible to all users, including registration and login pages
   | "launchpad" // visible to all users on Launchpad only
   | "launchpad-instructors" // visible to all instructors on Launchpad only
-  | "launchpad-students"; // visible to all students on Launchpad only
+  | "launchpad-students" // visible to all students on Launchpad only
+  | "registration"; // visible to all users on the registration page only
 
 export type AnnouncementVariant = "info" | "warning" | "critical";