mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 06:49:33 +07:00
Refactor Privacy to Overview, code cleanup
This commit is contained in:
Daniel
parent
f18bc24c1c
commit
3aa0ac4ebc
@ -81,13 +81,6 @@ Example:
|
||||
```
|
||||
|
||||
|
||||
## 🛡️ Privacy Panel
|
||||
|
||||
**How does it work?**
|
||||
- Checks how many listed services use `HTTPS` for secure connections
|
||||
- Checks if listed services are on the same origin (like domain, subdomain or IP address), otherwise are considered as third-party
|
||||
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
honey is built on top of [Vite.js](https://vitejs.dev/). This tool allows faster development and offers various optimizations.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import url(Privacy.css);
|
||||
@import url(Overview.css);
|
||||
@import url(Settings.css);
|
||||
|
||||
.subpages {
|
||||
|
||||
54
css/Pages/More/Overview.css
Normal file
54
css/Pages/More/Overview.css
Normal file
@ -0,0 +1,54 @@
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 640px;
|
||||
padding: 0 20px;
|
||||
margin: 128px auto 88px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.overview > i {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.overview .big {
|
||||
font-size: 64px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.overview .small {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.privacy-boxes {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.privacy-boxes > div {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 256px;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.privacy-boxes i {
|
||||
color: var(--color);
|
||||
text-shadow: 0 0 48px var(--color);
|
||||
padding: 16px;
|
||||
font-size: 28px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.privacy-boxes .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.privacy-boxes .subtitle {
|
||||
opacity: .5;
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
#report-boxes {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#report-boxes i::after {
|
||||
color: var(--color);
|
||||
text-shadow: 0 0 48px var(--color);
|
||||
padding: 16px;
|
||||
font-size: 28px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
#report-boxes .icon-https::after {
|
||||
--color: #0C7;
|
||||
content: "lock";
|
||||
}
|
||||
|
||||
#report-boxes .icon-rocket::after {
|
||||
--color: #68F;
|
||||
content: "rocket";
|
||||
}
|
||||
|
||||
#report-boxes .prewarn i::after {
|
||||
--color: #EA0;
|
||||
}
|
||||
|
||||
#report-boxes .warn i::after {
|
||||
--color: #F60;
|
||||
}
|
||||
|
||||
#report-boxes .error i::after {
|
||||
--color: #F22;
|
||||
}
|
||||
|
||||
#report-boxes > div {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 256px;
|
||||
flex: 1;
|
||||
padding: 20px 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#report-boxes .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#report-boxes .subtitle {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.security {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 540px;
|
||||
padding: 24px;
|
||||
margin: 120px auto 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.security i {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.security #report-score {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.security #report {
|
||||
opacity: .6;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.settings {
|
||||
#settings {
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.sub-switch {
|
||||
.subswitch {
|
||||
display: flex;
|
||||
background: var(--bg2);
|
||||
transition: background .2s;
|
||||
@ -94,7 +94,7 @@
|
||||
--id: inherit;
|
||||
}
|
||||
|
||||
.sub-switch::before {
|
||||
.subswitch::before {
|
||||
content: " ";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
@ -108,7 +108,7 @@
|
||||
transition: left .3s, background .3s;
|
||||
}
|
||||
|
||||
.sub-switch div {
|
||||
.subswitch div {
|
||||
padding: 12px;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
@ -16,6 +16,10 @@ body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
26
index.html
26
index.html
@ -15,9 +15,9 @@
|
||||
<div class="page home" p="home">
|
||||
<div class="wrapper">
|
||||
<div class="home">
|
||||
<img class="appicon" id="app-icon">
|
||||
<div class="appname" id="app-name"></div>
|
||||
<div class="appdesc" id="app-desc"></div>
|
||||
<img class="appicon">
|
||||
<div class="appname"></div>
|
||||
<div class="appdesc"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div id="theme-switcher">
|
||||
@ -52,28 +52,28 @@
|
||||
<div class="page" p="more">
|
||||
<div class="back"><i></i></div>
|
||||
<div class="wrapper">
|
||||
<div class="sub-switch" id="switch">
|
||||
<div>Privacy</div>
|
||||
<div class="subswitch">
|
||||
<div>Overview</div>
|
||||
<div>Settings</div>
|
||||
</div>
|
||||
<div class="subpages" id="subsettings">
|
||||
<div class="subpages">
|
||||
|
||||
<!-- Privacy report -->
|
||||
<!-- Overview -->
|
||||
<div>
|
||||
<div class="security">
|
||||
<i>shield</i>
|
||||
<div class="overview">
|
||||
<i>rocket_launch</i>
|
||||
<div>
|
||||
<div class="score"><b id="report-score"></b></div>
|
||||
<div id="report"></div>
|
||||
<div class="big"></div>
|
||||
<div class="small">Available services</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="report-boxes"></div>
|
||||
<div class="privacy-boxes"></div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div>
|
||||
<div id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div>
|
||||
<div class="settings" id="settings"></div>
|
||||
<div id="settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@ export default class Drawer {
|
||||
|
||||
importApps() {
|
||||
let apps = this.config.getServices()
|
||||
let applist = document.getElementById("app-list");
|
||||
let applist = document.querySelector("#app-list");
|
||||
for (let app of apps) {
|
||||
applist.innerHTML += `<a class="box" href="${app.href}">
|
||||
<img src="${app.icon}">
|
||||
|
||||
@ -16,7 +16,7 @@ export default class Home {
|
||||
}
|
||||
|
||||
initButtons() {
|
||||
let buttons = document.getElementsByClassName("buttons")[0].children
|
||||
let buttons = document.querySelector(".buttons").children
|
||||
for (let button of buttons) {
|
||||
let target = button.getAttribute("t")
|
||||
if (target) {
|
||||
@ -28,7 +28,7 @@ export default class Home {
|
||||
}
|
||||
|
||||
initBackButtons() {
|
||||
let backButtons = document.getElementsByClassName("back")
|
||||
let backButtons = document.querySelectorAll(".back")
|
||||
for (let button of backButtons) {
|
||||
button.addEventListener("click", () => {
|
||||
showPage("home")
|
||||
@ -37,17 +37,17 @@ export default class Home {
|
||||
}
|
||||
|
||||
initHomeUI() {
|
||||
let logo = document.getElementById("app-icon")
|
||||
let logo = document.querySelector(".appicon")
|
||||
logo.src = this.config.get("icon")
|
||||
logo.classList.add("notloaded")
|
||||
logo.addEventListener("load", () => {
|
||||
logo.classList.remove("notloaded")
|
||||
})
|
||||
|
||||
let name = document.getElementById("app-name")
|
||||
let name = document.querySelector(".appname")
|
||||
name.innerText = this.config.get("name")
|
||||
|
||||
let desc = document.getElementById("app-desc")
|
||||
let desc = document.querySelector(".appdesc")
|
||||
desc.innerText = this.config.get("desc")
|
||||
}
|
||||
}
|
||||
@ -9,12 +9,12 @@ export default class Main {
|
||||
|
||||
init() {
|
||||
document.title = this.config.get("name")
|
||||
document.getElementById("favicon").href = this.config.get("icon")
|
||||
document.querySelector("#favicon").href = this.config.get("icon")
|
||||
this.initBackgrounds()
|
||||
}
|
||||
|
||||
initBackgrounds() {
|
||||
this.backgrounds = document.getElementById("background")
|
||||
this.backgrounds = document.querySelector("#background")
|
||||
for (let i = 0; i < 2; i++) {
|
||||
let img = document.createElement("img")
|
||||
img.classList.add("notloaded")
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import App from "../../App";
|
||||
import Privacy from "./Privacy/Privacy";
|
||||
import Overview from "./Overview/Overview";
|
||||
import Settings from "./Settings/Settings";
|
||||
|
||||
|
||||
@ -7,21 +7,21 @@ export default class More {
|
||||
constructor() {
|
||||
this.app = new App()
|
||||
this.config = this.app.config
|
||||
this.privacy = new Privacy()
|
||||
this.overview = new Overview()
|
||||
this.settings = new Settings()
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.privacy.init()
|
||||
this.overview.init()
|
||||
this.settings.init()
|
||||
this.initPager()
|
||||
}
|
||||
|
||||
initPager() {
|
||||
let switcher = document.getElementById("switch")
|
||||
let switcher = document.querySelector(".subswitch")
|
||||
let buttons = switcher.children
|
||||
let subsettings = document.getElementById("subsettings")
|
||||
let subsettings = document.querySelector(".subpages")
|
||||
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
let button = buttons[i]
|
||||
|
||||
53
js/UI/More/Overview/Overview.js
Normal file
53
js/UI/More/Overview/Overview.js
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
18
js/UI/More/Overview/tiles.js
Normal file
18
js/UI/More/Overview/tiles.js
Normal file
@ -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
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
import App from "../../../App";
|
||||
import { analyzeService } from "./analyzer";
|
||||
import { privacyBox } from "./tiles";
|
||||
|
||||
|
||||
export default class Privacy {
|
||||
constructor() {
|
||||
this.app = new App()
|
||||
this.config = this.app.config
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initPrivacyPanel()
|
||||
}
|
||||
|
||||
initPrivacyPanel() {
|
||||
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
|
||||
}
|
||||
|
||||
let encryption = stats.secure / stats.total
|
||||
let encryption_t
|
||||
if (encryption == 1) encryption_t = "All"
|
||||
else if (encryption >= 0.9) encryption_t = "Most"
|
||||
else if (encryption > 0.5) encryption_t = "Many"
|
||||
else if (encryption > 0.2) encryption_t = "Some"
|
||||
else if (encryption > 0) encryption_t = "Few"
|
||||
else encryption_t = "No"
|
||||
encryption_t = `${encryption_t} listed services use secure connections.`
|
||||
|
||||
let indepencence = (stats.total - stats.thirdParties) / stats.total
|
||||
let indepencence_t
|
||||
if (indepencence == 1) indepencence_t = "no"
|
||||
else if (indepencence > 0.7) indepencence_t = "some"
|
||||
else if (indepencence > 0.4) indepencence_t = "many"
|
||||
else if (indepencence > 0) indepencence_t = "a lot of"
|
||||
else indepencence_t = "only"
|
||||
indepencence_t = `There are ${indepencence_t} 3rd-party services here.`
|
||||
|
||||
let score = (encryption + indepencence) / 2
|
||||
let score_t, score_d
|
||||
if (score == 1) {
|
||||
score_t = "Superb"
|
||||
score_d = "All data is sent securely and no 3rd-party services are involved."
|
||||
}
|
||||
else if (score >= 0.9) {
|
||||
score_t = "Great"
|
||||
score_d = "Awesome privacy practices, but still not perfect."
|
||||
}
|
||||
else if (score >= 0.6) {
|
||||
score_t = "Good"
|
||||
score_d = "Acceptable privacy practices, but still not perfect."
|
||||
}
|
||||
else if (score >= 0.3) {
|
||||
score_t = "Fair"
|
||||
score_d = "Definitely not a vault, but self-hosted at least."
|
||||
}
|
||||
else if (score > 0) {
|
||||
score_t = "Dangerous"
|
||||
score_d = "You should really pay attention what you're doing here."
|
||||
}
|
||||
else {
|
||||
score_t = ":0"
|
||||
score_d = "You're just testing, right?"
|
||||
}
|
||||
|
||||
document.getElementById("report-score").innerText = score_t
|
||||
document.getElementById("report").innerText = score_d
|
||||
|
||||
privacyBox("icon-https", "Encryption", encryption_t)
|
||||
privacyBox("icon-rocket", "Independence", indepencence_t)
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
export function privacyBox(icon, name, desc) {
|
||||
let item = document.createElement("div")
|
||||
item.innerHTML = `<i class="${icon}"></i>
|
||||
<div>
|
||||
<div class="title">${name}</div>
|
||||
<div class="subtitle">${desc}</div>
|
||||
</div>`
|
||||
|
||||
document.getElementById("report-boxes").appendChild(item)
|
||||
return item
|
||||
}
|
||||
@ -39,13 +39,13 @@ export default class Settings {
|
||||
"animations", EVENTS.onAnimationChange
|
||||
)
|
||||
|
||||
document.getElementById("theme-switcher").addEventListener("click", () => {
|
||||
document.querySelector("#theme-switcher").addEventListener("click", () => {
|
||||
darkMode.click()
|
||||
})
|
||||
}
|
||||
|
||||
checkLocalStorage() {
|
||||
let warn = document.getElementById("no-cookies").classList
|
||||
let warn = document.querySelector("#no-cookies").classList
|
||||
if (this.config.storageAvailable) warn.add("hidden")
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@ export function onThemeChange(config) {
|
||||
|
||||
export function onNewTabChange(config) {
|
||||
let openNewTab = config.get("open_new_tab")
|
||||
let appList = document.getElementById("app-list").children
|
||||
let appList = document.querySelector("#app-list").children
|
||||
|
||||
for (let app of appList) {
|
||||
if (openNewTab) app.setAttribute("target", "_blank")
|
||||
|
||||
@ -29,6 +29,6 @@ export function addOnOffTile(conf, icon, name, desc, key, func) {
|
||||
handleState()
|
||||
if (func) f()
|
||||
|
||||
document.getElementById("settings").appendChild(item)
|
||||
document.querySelector("#settings").appendChild(item)
|
||||
return item
|
||||
}
|
||||
@ -1,12 +1,13 @@
|
||||
export function showPage(target) {
|
||||
let bg = document.getElementById("background").classList
|
||||
let bg = document.querySelector("#background").classList
|
||||
if (target == "home") bg.add("scaled")
|
||||
else bg.remove("scaled")
|
||||
let pages = document.querySelectorAll(".page")
|
||||
|
||||
let pages = document.getElementsByClassName("page")
|
||||
for (let page of pages) {
|
||||
let p = page.getAttribute("p")
|
||||
if (p == target) page.classList.add("current")
|
||||
else page.classList.remove("current")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
9
js/Utils/StringUtils.js
Normal file
9
js/Utils/StringUtils.js
Normal file
@ -0,0 +1,9 @@
|
||||
export function s(number) {
|
||||
if (number == 1) return ""
|
||||
return "s"
|
||||
}
|
||||
|
||||
export function isare(number) {
|
||||
if (number == 1) return "is"
|
||||
return "are"
|
||||
}
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "vite-project",
|
||||
"version": "0.0.0",
|
||||
"name": "honey",
|
||||
"version": "2.2.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vite-project",
|
||||
"version": "0.0.0",
|
||||
"name": "honey",
|
||||
"version": "2.2.0",
|
||||
"devDependencies": {
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user