feat: announcement support html

[dreamhunter2333]

User description

#565

---

PR Type

Enhancement

---

Description

• Added HTML support for announcements.

• Integrated useNotification for displaying announcements.

• Updated getOpenSettings to use notifications.

• Modified UI components to display announcements.

---

Changes walkthrough 📝

	Relevant files
Enhancement	App.vue Add notification provider for HTML announcements                  frontend/src/App.vue Added n-notification-provider for HTML announcements. Nested n-message-provider within n-notification-provider. +20/-18  Header.vue Integrate notification in Header component                              frontend/src/views/Header.vue Imported and initialized useNotification. Updated getOpenSettings call to include notification. +2/-1      About.vue Display HTML announcement in About component                          frontend/src/views/common/About.vue Display announcement using v-html. Imported useGlobalState to access announcement. +3/-0      Login.vue Integrate notification in Login component                                frontend/src/views/common/Login.vue Imported and initialized useNotification. Updated getOpenSettings call to include notification. +2/-1      index.js Use notification for HTML announcements in API                      frontend/src/api/index.js Updated getOpenSettings to use notification for announcements. Used h function to render HTML content in notifications. +8/-5
Configuration changes	vite.config.js Auto-import useNotification in Vite config                              frontend/vite.config.js Auto-imported useNotification from naive-ui. +1/-0

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 565 - Partially compliant Fully compliant requirements: Add support for HTML in the announcement variable. Ensure the announcement can contain hyperlinks. Not compliant requirements: Improve the visual appearance with line breaks.

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🔒 Security concerns XSS vulnerability: The use of innerHTML in notification.info can introduce XSS vulnerabilities if the announcement content is not properly sanitized. Ensure that the content is sanitized before rendering it as HTML.

⚡ Recommended focus areas for review Possible Issue The notification.info function uses innerHTML which can potentially introduce XSS vulnerabilities if the announcement content is not properly sanitized. notification.info({ content: () => { return h("div", { innerHTML: announcement.value }); } });

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Security	Sanitize HTML to prevent XSS Ensure that the announcement variable is properly sanitized before rendering it with v-html to prevent potential XSS attacks. frontend/src/views/common/About.vue [10] -<div v-html="announcement"></div> +<div v-html="sanitizeHtml(announcement)"></div> Suggestion importance[1-10]: 10 Why: This suggestion addresses a critical security vulnerability by ensuring that the announcement variable is sanitized before being rendered with v-html, preventing potential XSS attacks.	10
General	Add error handling for notifications Add error handling for the notification.info call to ensure it does not break the application if it fails. frontend/src/api/index.js [93-99] -notification.info({ - content: () => { - return h("div", { - innerHTML: announcement.value - }); - } -}); +try { + notification.info({ + content: () => { + return h("div", { + innerHTML: announcement.value + }); + } + }); +} catch (notifyError) { + console.error("Notification error:", notifyError); +} Suggestion importance[1-10]: 7 Why: Adding error handling for the notification.info call improves the robustness of the application by ensuring that a failure in the notification system does not break the application.	7