From 97a9aa82523d842337b5484d268229e1019c95f0 Mon Sep 17 00:00:00 2001
From: Jake Turner <jturner@cosmistack.com>
Date: Tue, 20 Jan 2026 22:46:09 -0800
Subject: [PATCH] feat(Announcements): support announcements on registration
 page

---
 components/registration/AuthForm.vue          | 12 +++++++++-
 .../registration/RegistrationAnnouncement.vue | 23 +++++++++++++++++++
 pages/register/+Page.vue                      |  2 ++
 pages/register/+onBeforeRender.ts             |  5 ++++
 server/models/Announcement.ts                 |  1 +
 server/types/announcements.ts                 |  3 ++-
 6 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 components/registration/RegistrationAnnouncement.vue

diff --git a/components/registration/AuthForm.vue b/components/registration/AuthForm.vue
index 0e02fc6..4b7c524 100644
--- a/components/registration/AuthForm.vue
+++ b/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;
diff --git a/components/registration/RegistrationAnnouncement.vue b/components/registration/RegistrationAnnouncement.vue
new file mode 100644
index 0000000..c0c2d6b
--- /dev/null
+++ b/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>
diff --git a/pages/register/+Page.vue b/pages/register/+Page.vue
index c6ee4c7..bacecd6 100644
--- a/pages/register/+Page.vue
+++ b/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);
diff --git a/pages/register/+onBeforeRender.ts b/pages/register/+onBeforeRender.ts
index bf85337..5436344 100644
--- a/pages/register/+onBeforeRender.ts
+++ b/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()}`,
diff --git a/server/models/Announcement.ts b/server/models/Announcement.ts
index 643cdb0..8e5032d 100644
--- a/server/models/Announcement.ts
+++ b/server/models/Announcement.ts
@@ -17,6 +17,7 @@ export const ANNOUNCEMENT_SCOPES: AnnouncementScope[] = [
   "launchpad",
   "launchpad-instructors",
   "launchpad-students",
+  "registration",
 ];
 
 export const ANNOUNCEMENT_VARIANTS: AnnouncementVariant[] = [
diff --git a/server/types/announcements.ts b/server/types/announcements.ts
index 77bd27d..d17938c 100644
--- a/server/types/announcements.ts
+++ b/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";