diff --git a/package.json b/package.json index 1386cbc0..359a6222 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ }, "dependencies": { "@types/color": "^3.0.4", + "@types/dompurify": "^3.0.5", "@types/react": "^18.2.21", "@types/sortablejs": "^1.15.7", "@types/webextension-polyfill": "^0.10.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a7c5d4c6..40cbb681 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@types/color': specifier: ^3.0.4 version: 3.0.6 + '@types/dompurify': + specifier: ^3.0.5 + version: 3.0.5 '@types/react': specifier: ^18.2.21 version: 18.2.40 @@ -323,6 +326,12 @@ packages: '@types/color-convert': 2.0.3 dev: false + /@types/dompurify@3.0.5: + resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==} + dependencies: + '@types/trusted-types': 2.0.7 + dev: false + /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: @@ -382,6 +391,10 @@ packages: resolution: {integrity: sha512-PvgWCx1Lbgm88FdQ6S7OGvLIjWS66mudKPlfdrWil0TjsO5zmoZmzoKiiwRShs1dwPgrlkr0N4ewuy0/+QUXYQ==} dev: false + /@types/trusted-types@2.0.7: + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + dev: false + /@types/webextension-polyfill@0.10.7: resolution: {integrity: sha512-10ql7A0qzBmFB+F+qAke/nP1PIonS0TXZAOMVOxEUsm+lGSW6uwVcISFNa0I4Oyj0884TZVWGGMIWeXOVSNFHw==} dev: false diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 49582f4d..cacc3807 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -1197,7 +1197,7 @@ async function AddBetterSEQTAElements(toggle: any) { // Load darkmode state const result1 = browser.storage.local.get(['DarkMode']) - function open (result) { + function open (result: any) { DarkMode = result.DarkMode; } result1.then(open, onError) @@ -1205,12 +1205,12 @@ async function AddBetterSEQTAElements(toggle: any) { var titlebar = document.createElement('div'); titlebar.classList.add('titlebar'); let container = document.getElementById('content'); - container.append(titlebar); + container!.append(titlebar); var NewButtonStr = '
    • '; var NewButton = stringToHTML(NewButtonStr); var menu = document.getElementById('menu'); - var List = menu.firstChild; - List.insertBefore(NewButton.firstChild, List.firstChild); + var List = menu!.firstChild; + List!.insertBefore((NewButton.firstChild!), List!.firstChild); fetch(`${location.origin}/seqta/student/login`, { method: 'POST', @@ -1231,16 +1231,16 @@ async function AddBetterSEQTAElements(toggle: any) { titlebar.append( stringToHTML( '
    ', - ).firstChild, + ).firstChild!, ); var userinfostr = `

    ${info.userDesc}

    ${UserInitalCode}

    `; var userinfo = stringToHTML(userinfostr).firstChild; - titlebar.append(userinfo); + titlebar.append(userinfo!); var logoutbutton = document.getElementsByClassName('logout')[0]; var userInfosvgdiv = document.getElementById('logouttooltip'); - userInfosvgdiv.appendChild(logoutbutton); + userInfosvgdiv!.appendChild(logoutbutton); fetch(`${location.origin}/seqta/student/load/message/people`, { method: 'POST', @@ -1252,15 +1252,16 @@ async function AddBetterSEQTAElements(toggle: any) { .then((result) => result.json()) .then((response) => { let students = response.payload; - var index = students.findIndex(function (person) { + var index = students.findIndex(function (person: any) { return ( person.firstname == info.userDesc.split(' ')[0] && person.surname == info.userDesc.split(' ')[1] ); }); - let houseelement = + let houseelement1 = document.getElementsByClassName('userInfohouse')[0]; + const houseelement = houseelement1 as HTMLElement if (students[index]?.house) { houseelement.style.background = students[index].house_colour; try { @@ -1288,7 +1289,7 @@ async function AddBetterSEQTAElements(toggle: any) { var NewsButtonStr = '
    • '; var NewsButton = stringToHTML(NewsButtonStr); - List.appendChild(NewsButton.firstChild); + List!.appendChild(NewsButton.firstChild!); editmenu = document.createElement('div'); editmenu.classList.add('editmenu'); @@ -1296,33 +1297,33 @@ async function AddBetterSEQTAElements(toggle: any) { let svg = stringToHTML( '', ); - editmenu.append(svg.firstChild); + editmenu.append(svg.firstChild!); - menu.appendChild(editmenu); + menu!.appendChild(editmenu); let a = document.createElement('div'); a.classList.add('icon-cover'); a.id = 'icon-cover'; - menu.appendChild(a); + menu!.appendChild(a); var editmenu = document.querySelector('#editmenu'); - editmenu.addEventListener('click', function () { + editmenu!.addEventListener('click', function () { if (!MenuOptionsOpen) { OpenMenuOptions(); } }); var menuCover = document.querySelector('#icon-cover'); - menuCover.addEventListener('click', function () { + menuCover!.addEventListener('click', function () { location.href = '../#?page=/home'; SendHomePage(); - document - .getElementById('menu') - .firstChild.classList.remove('noscroll'); + (document! + .getElementById('menu')! + .firstChild! as HTMLElement).classList.remove('noscroll'); }); // Creates the home container when the menu button is pressed var homebutton = document.getElementById('homebutton'); - homebutton.addEventListener('click', function () { + homebutton!.addEventListener('click', function () { if (!MenuOptionsOpen) { SendHomePage(); } @@ -1330,7 +1331,7 @@ async function AddBetterSEQTAElements(toggle: any) { // Creates the news container when the menu button is pressed var newsbutton = document.getElementById('newsbutton'); - newsbutton.addEventListener('click', function () { + newsbutton!.addEventListener('click', function () { if (!MenuOptionsOpen) { SendNewsPage(); } @@ -1347,14 +1348,14 @@ async function AddBetterSEQTAElements(toggle: any) { '', ); var ContentDiv = document.getElementById('content'); - ContentDiv.append(SettingsButton.firstChild); + ContentDiv!.append(SettingsButton.firstChild!); - const result = await new Promise(resolve => { + const result: any = await new Promise(resolve => { const result = browser.storage.local.get(); result.then(resolve, onError) }); - const DarkMode = result.DarkMode; + const DarkMode = result!.DarkMode; const tooltipString = GetLightDarkModeString(DarkMode); const svgContent = DarkMode ? '' : ''; @@ -1366,34 +1367,34 @@ async function AddBetterSEQTAElements(toggle: any) { `); - ContentDiv.append(LightDarkModeButton.firstChild); + ContentDiv!.append(LightDarkModeButton.firstChild!); updateAllColors(DarkMode, result.selectedColor); - document.getElementById('LightDarkModeButton').addEventListener('click', async () => { - const result = await new Promise(resolve => { + document.getElementById('LightDarkModeButton')!.addEventListener('click', async () => { + const result: any = await new Promise(resolve => { const result = browser.storage.local.get(); result.then(resolve, onError) }); - const newDarkMode = !result.DarkMode; + const newDarkMode = !result!.DarkMode; browser.storage.local.set({ DarkMode: newDarkMode }); updateAllColors(newDarkMode, result.selectedColor); const darklightText = document.getElementById('darklighttooliptext'); - darklightText.innerText = GetLightDarkModeString(newDarkMode); + darklightText!.innerText = GetLightDarkModeString(newDarkMode); }); // Locate the menuToggle element const menuToggle = document.getElementById('menuToggle'); - menuToggle.innerHTML = ''; + menuToggle!.innerHTML = ''; // Create three divs to act as lines of the hamburger icon for (let i = 0; i < 3; i++) { const line = document.createElement('div'); line.className = 'hamburger-line'; - menuToggle.appendChild(line); + menuToggle!.appendChild(line); } } else { // Creates settings and dashboard buttons next to alerts @@ -1401,7 +1402,7 @@ async function AddBetterSEQTAElements(toggle: any) { '', ); ContentDiv = document.getElementById('content'); - ContentDiv.append(SettingsButton.firstChild); + ContentDiv!.append(SettingsButton.firstChild!); } var AddedSettings = document.getElementById('AddedSettings'); diff --git a/src/seqta/utils/stringToHTML.ts b/src/seqta/utils/stringToHTML.ts index 4941620b..37449f60 100644 --- a/src/seqta/utils/stringToHTML.ts +++ b/src/seqta/utils/stringToHTML.ts @@ -1,6 +1,6 @@ import DOMPurify from 'dompurify'; -export default function stringToHTML(str, styles = false) { +export default function stringToHTML(str: string, styles = false) { var parser = new DOMParser(); str = DOMPurify.sanitize(str, { ADD_ATTR: ['onclick'] }); var doc = parser.parseFromString(str, 'text/html');