Refactor Privacy to Overview, code cleanup

js/UI/More/Overview/Overview.js

@@ -0,0 +1,53 @@
+import App from "../../../App";
+import { analyzeService } from "./analyzer";
+import { privacyBox } from "./tiles";
+import { s, isare } from "../../../Utils/StringUtils";
+
+
+export default class Overview {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.div = document.querySelector(".overview").parentNode
+	}
+
+	init() {
+		this.initPrivacyBoxes()
+	}
+
+	initPrivacyBoxes() {
+		let stats = {
+			total: 0,
+			secure: 0,
+			thirdParties: 0
+		}
+		for (let service of this.config.getServices()) {
+			let analysis = analyzeService(service.href)
+			stats.total++
+			stats.secure += analysis.isSecure
+			stats.thirdParties += analysis.isThirdParty
+		}
+		this.div.querySelector(".big").innerText = stats.total
+
+		let encryption_t
+		let donot = ""
+		if (stats.secure == stats.total) encryption_t = "All"
+		else if (stats.secure == 0) encryption_t = "None of"
+		else {
+			encryption_t = stats.total - stats.secure
+			donot = "do not"
+		}
+		encryption_t = `${encryption_t} service${s(encryption_t)} ${donot} use secure connections (HTTPS).`
+
+		let indepencence_t
+		if (stats.thirdParties == 0) indepencence_t =
+			"This server is free of 3rd party services."
+		else if (stats.thirdParties == stats.total) indepencence_t =
+			"It seems only 3rd-party services are listed."
+		else indepencence_t = 
+			`${stats.thirdParties} service${s(stats.thirdParties)} ${isare(stats.thirdParties)} provided by 3rd-parties.`
+
+		privacyBox("lock", "#0D6", "Encryption", encryption_t, stats.secure / stats.total)
+		privacyBox("home", "#68F", "Independence", indepencence_t, 1 - stats.thirdParties / stats.total)
+	}
+}

js/UI/More/Overview/analyzer.js

@@ -0,0 +1,32 @@
+export function analyzeService(url) {
+	let isSiteSecure = (
+		window.location.protocol == "https:" ||
+		window.location.hostname == "localhost"
+	)
+
+	let domain_base = window.location.hostname
+	let isSecure = false
+	let isThirdParty = true
+
+	if (url.startsWith("https://")) {
+		isSecure = true
+	}
+	else if (!["http", "https"].includes(url.split("://")[0])) {
+		isSecure = isSiteSecure
+	}
+
+	if (isThirdParty) {
+		let domain = url.split("://")
+		if (domain.length > 1) {
+			domain = domain[1]
+			domain = domain.split("/")[0]
+			domain = domain.split(":")[0]
+			isThirdParty = !domain.includes(domain_base)
+		}
+		else {
+			isThirdParty = false
+		}
+	}
+
+	return {isSecure, isThirdParty}
+}

js/UI/More/Overview/tiles.js

@@ -0,0 +1,18 @@
+export function privacyBox(icon, color, name, desc, pp) {
+	if (pp == 1) {}
+	else if (pp > 0.7) color = "#EA0"
+	else if (pp > 0.25) color = "#F72"
+	else color = "#F33"
+
+	let item = document.createElement("div")
+	item.setAttribute("style", `--color: ${color}`)
+
+	item.innerHTML = `<i>${icon}</i>
+		<div>
+			<div class="title">${name}</div>
+			<div class="subtitle">${desc}</div>
+		</div>`
+
+	document.querySelector(".privacy-boxes").appendChild(item)
+	return item
+}