1
0
mirror of https://github.com/MailHops/mailhops-plugin.git synced 2025-05-15 22:00:08 -07:00
This commit is contained in:
Andrew Van Tassel 2021-03-23 01:51:47 -06:00
parent 8b12a00e11
commit 3b26c08e07
9 changed files with 152 additions and 30 deletions

View File

@ -1,5 +1,11 @@
# Change Log # Change Log
## 4.2.0 - 2021-03-23
- Added dark/light mode option.
- Fixed display if html characters exist in ASN name.
- Changed default for travel_time_junk option to off.
## 4.1.0 - 2020-11-12 ## 4.1.0 - 2020-11-12
- Added daily message cache. - Added daily message cache.

View File

@ -5,10 +5,13 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>MailHops</title> <title>MailHops</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/styles.css" />
</head> </head>
<body> <body id="mh-body">
<div class="popup-page" style="max-width: 400px;"> <div class="popup-page" style="max-width: 405px;">
<div id="hop-message" class="ui message"> <div id="mh-pop-segment" class="ui segment">
<div id="hop-message" class="ui message" style="width: 100%;">
<div id="hop-message-header" class="header" style="text-align: center;"></div> <div id="hop-message-header" class="header" style="text-align: center;"></div>
</div> </div>
@ -23,6 +26,8 @@
<button type="button" class="ui blue button" id="mh-reload-button">Reload</button> <button type="button" class="ui blue button" id="mh-reload-button">Reload</button>
<button type="button" class="ui icon button" id="mh-options-button" style="float: right;">Options</button> <button type="button" class="ui icon button" id="mh-options-button" style="float: right;">Options</button>
</div> </div>
</div>
</div> </div>
<script src="/js/utils.js"></script> <script src="/js/utils.js"></script>

View File

@ -5,7 +5,10 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
</head> </head>
<body style="padding: 20px; margin-bottom: 20px; height: 100%;"> <body>
<div id="mh-main-segment" class="ui segment" style="padding: 20px; margin-bottom: 20px; height: 100%;">
<img src="/images/mailhops-logo.png" width="300"/> <img src="/images/mailhops-logo.png" width="300"/>
<div class="ui divider"></div> <div class="ui divider"></div>
@ -20,7 +23,7 @@
<p>There was a problem with your request. Please try again.</p> <p>There was a problem with your request. Please try again.</p>
</div> </div>
<div class="ui two top attached unstackable steps"> <div id="mh-steps" class="ui two top attached unstackable steps">
<div id="step_one" class="step active"> <div id="step_one" class="step active">
<i class="key icon"></i> <i class="key icon"></i>
<div class="content"> <div class="content">
@ -36,10 +39,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ui attached segment"> <div id="mh-segment" class="ui attached segment">
<div id="step_api_keys" class="content"> <div id="step_api_keys" class="content">
<form class="ui form"> <form id="mh-form" class="ui form">
<div class="field"> <div class="field">
<label>MailHops API Key</label> <label>MailHops API Key</label>
<input type="text" id="mailhop.api_key" placeholder="Enter your MailHops API Key"/> <input type="text" id="mailhop.api_key" placeholder="Enter your MailHops API Key"/>
@ -77,10 +80,26 @@
</p> </p>
</div> </div>
<div id="step_settings" style="display: none;"> <div id="step_settings" class="ui form" style="display: none;">
<div class="grouped fields"> <div class="grouped fields">
<label style="font-weight: bold;">Distance Unit</label>
<div class="field"> <div class="field">
<label>Theme Unit</label>
<div class="ui radio checkbox">
<input type="radio" id="theme_dark" name="theme" value="dark" />
<label for="theme_dark">Dark</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="theme_light" name="theme" value="light" />
<label for="theme_light">Light</label>
</div>
</div>
</div>
<br/>
<div class="grouped fields">
<div class="field">
<label>Distance Unit</label>
<div class="ui radio checkbox"> <div class="ui radio checkbox">
<input type="radio" id="unit_mi" name="unit" value="mi" /> <input type="radio" id="unit_mi" name="unit" value="mi" />
<label for="unit_mi">Miles and &deg;F</label> <label for="unit_mi">Miles and &deg;F</label>
@ -94,10 +113,9 @@
</div> </div>
</div> </div>
<br/> <br/>
<div class="grouped fields"> <div class="grouped fields">
<label style="font-weight: bold;">Travel Time Junk</label>
<p>Flag messages as junk if travel time takes longer than normal.</p>
<div class="field"> <div class="field">
<label>Travel Time Junk</label>
<div class="ui radio checkbox"> <div class="ui radio checkbox">
<input type="radio" id="travel_time_junk_on" name="travel_time_junk" value="on" /> <input type="radio" id="travel_time_junk_on" name="travel_time_junk" value="on" />
<label for="travel_time_junk_on">On</label> <label for="travel_time_junk_on">On</label>
@ -109,6 +127,7 @@
<label for="travel_time_junk_off">Off</label> <label for="travel_time_junk_off">Off</label>
</div> </div>
</div> </div>
<p>Flag messages as junk if travel time takes longer than normal.</p>
</div> </div>
<div style="text-align: center; padding: 10px;"> <div style="text-align: center; padding: 10px;">
<button class="ui primary button" id="mh-save-options">Save</button> <button class="ui primary button" id="mh-save-options">Save</button>
@ -117,6 +136,7 @@
</div> </div>
<script src="/js/preferences.js"></script> <script src="/js/preferences.js"></script>
</div>
</body> </body>
</html> </html>

7
css/styles.css Normal file
View File

@ -0,0 +1,7 @@
#mh-body {
background-color: #FFF;
}
#mh-body.inverted {
background-color: #121212;
}

View File

@ -10,16 +10,17 @@ const MailHops = {
loading: false, loading: false,
previousId: null, previousId: null,
options: { options: {
version: 'MailHops Plugin 4.1.1', version: 'MailHops Plugin 4.2.0',
api_key: '', api_key: '',
owm_key: '', owm_key: '',
lang: 'en', lang: 'en',
unit: 'mi', unit: 'mi',
theme: 'light',
api_http: 'https://', api_http: 'https://',
api_host: 'api.Mailhops.com', api_host: 'api.Mailhops.com',
debug: false, debug: false,
country_tag: false, country_tag: false,
travel_time_junk: true, travel_time_junk: false,
country_filter: [] country_filter: []
}, },
message: { message: {
@ -66,7 +67,10 @@ MailHops.init = function(id, headers)
} }
if (data.unit) { if (data.unit) {
MailHops.options.unit = data.unit; MailHops.options.unit = data.unit;
} }
if (data.theme) {
MailHops.options.theme = data.theme;
}
if (typeof data.travel_time_junk != 'undefined') { if (typeof data.travel_time_junk != 'undefined') {
MailHops.options.travel_time_junk = data.travel_time_junk == 'on' ? true : false; MailHops.options.travel_time_junk = data.travel_time_junk == 'on' ? true : false;
} }

View File

@ -17,6 +17,7 @@ function updateContent(msg) {
document.getElementById("mh-reload-button").addEventListener("click", async function () { document.getElementById("mh-reload-button").addEventListener("click", async function () {
let data = await browser.storage.local.get('messages'); let data = await browser.storage.local.get('messages');
if (data.messages && data.messages.list[msg.message.hash]) { if (data.messages && data.messages.list[msg.message.hash]) {
console.log(data.messages);
delete data.messages.list[msg.message.hash]; delete data.messages.list[msg.message.hash];
browser.storage.local.set({ browser.storage.local.set({
messages: data.messages messages: data.messages
@ -38,9 +39,33 @@ function updateContent(msg) {
const route = msg.response.route || []; const route = msg.response.route || [];
const sender = msg.message.sender || null; const sender = msg.message.sender || null;
const unit = msg.options.unit || "mi"; const unit = msg.options.unit || "mi";
const theme = msg.options.theme || "light";
let client = null; let client = null;
let items = []; let items = [];
// update theme
if (theme == "dark") {
if (!document.getElementById("hop-message").classList.contains("inverted")) {
document.getElementById('mh-body').classList.add('inverted');
document.getElementById('hop-message').classList.add('brown');
document.getElementById('hop-list').classList.add('inverted');
document.getElementById('mh-pop-segment').classList.add('inverted');
document.getElementById('mh-map-button').classList.add('inverted');
document.getElementById('mh-reload-button').classList.add('inverted');
document.getElementById('mh-options-button').classList.add('inverted');
}
} else {
if (document.getElementById("hop-message").classList.contains("inverted")) {
document.getElementById('mh-body').classList.remove('inverted');
document.getElementById('hop-message').classList.remove('brown');
document.getElementById('hop-list').classList.remove('inverted');
document.getElementById('mh-pop-segment').classList.remove('inverted');
document.getElementById('mh-map-button').classList.remove('inverted');
document.getElementById('mh-reload-button').classList.remove('inverted');
document.getElementById('mh-options-button').classList.remove('inverted');
}
}
for (var i = 0; i < route.length; i++) { for (var i = 0; i < route.length; i++) {
var header = 'Private'; var header = 'Private';
var icon = '/images/local.png'; var icon = '/images/local.png';
@ -72,9 +97,9 @@ function updateContent(msg) {
if (route[i].host) if (route[i].host)
description += route[i].host; description += route[i].host;
if (route[i].whois && route[i].whois.descr) if (route[i].whois && route[i].whois.descr)
description += route[i].whois.descr; description += MailHopsUtils.htmlEncode(route[i].whois.descr);
if (route[i].whois && route[i].whois.netname) if (route[i].whois && route[i].whois.netname)
description += route[i].whois.netname; description += MailHopsUtils.htmlEncode(route[i].whois.netname);
var weather = ''; var weather = '';
if (route[i].weather) { if (route[i].weather) {
@ -85,7 +110,7 @@ function updateContent(msg) {
var asn = ''; var asn = '';
if (route[i].asn) { if (route[i].asn) {
asn = '<br/>ASN Org: ' + route[i].asn.autonomous_system_organization; asn = '<br/>ASN Org: ' + MailHopsUtils.htmlEncode(route[i].asn.autonomous_system_organization);
asn += ' (<a href="https://dnschecker.org/asn-whois-lookup.php?query='+route[i].asn.autonomous_system_number+'" target="_blank" title="ASN Lookup">' + route[i].asn.autonomous_system_number + '</a>)' asn += ' (<a href="https://dnschecker.org/asn-whois-lookup.php?query='+route[i].asn.autonomous_system_number+'" target="_blank" title="ASN Lookup">' + route[i].asn.autonomous_system_number + '</a>)'
} }
@ -99,12 +124,7 @@ function updateContent(msg) {
} }
} }
// append child // append child
items.push('<div class="item">\ items.push('<div class="item"><div class="content"><div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div><div class="description">'+ description + asn + '</div></div></div>');
<div class="content">\
<div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div>\
<div class="description">'+ description + asn + '</div>\
</div>\
</div>');
} }
// header // header
document.getElementById('hop-message-header').innerHTML = `${route.length} Hops`; document.getElementById('hop-message-header').innerHTML = `${route.length} Hops`;

View File

@ -2,6 +2,7 @@ const MailHopPreferences = {
api_key: '', //api key api_key: '', //api key
valid_api_key: false, valid_api_key: false,
unit: 'mi', unit: 'mi',
theme: 'light',
owm_key: '', //OpenWeatherMap.org api key owm_key: '', //OpenWeatherMap.org api key
init: async function(){ init: async function(){
@ -9,6 +10,8 @@ const MailHopPreferences = {
this.api_key = document.getElementById("mailhop.api_key"); this.api_key = document.getElementById("mailhop.api_key");
this.owm_key = document.getElementById("mailhop.owm_key"); this.owm_key = document.getElementById("mailhop.owm_key");
if (!this.api_key) return;
document.getElementById("mh-save").addEventListener("click", function (event) { document.getElementById("mh-save").addEventListener("click", function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -60,14 +63,44 @@ const MailHopPreferences = {
document.getElementById("unit_km").setAttribute('checked', 'checked'); document.getElementById("unit_km").setAttribute('checked', 'checked');
} else { } else {
document.getElementById("unit_mi").setAttribute('checked', 'checked'); document.getElementById("unit_mi").setAttribute('checked', 'checked');
} }
if (data.theme) {
if (data.theme == "dark")
document.getElementById("theme_dark").setAttribute('checked', 'checked');
else
document.getElementById("theme_light").setAttribute('checked', 'checked');
} else {
document.getElementById("theme_light").setAttribute('checked', 'checked');
}
if (typeof data.travel_time_junk != 'undefined') { if (typeof data.travel_time_junk != 'undefined') {
if (data.travel_time_junk == 'on') if (data.travel_time_junk == 'on')
document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked'); document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked');
else else
document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked'); document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
} else { } else {
document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked'); document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
}
if (data.theme && data.theme == "dark") {
if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.add("inverted");
document.getElementById("mh-steps").classList.add("inverted");
document.getElementById("mh-segment").classList.add("inverted");
document.getElementById("mh-form").classList.add("inverted");
document.getElementById("step_settings").classList.add("inverted");
document.getElementById("mh-save").classList.add("inverted");
document.getElementById("mh-save-options").classList.add("inverted");
}
} else {
if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.remove("inverted");
document.getElementById("mh-steps").classList.remove("inverted");
document.getElementById("mh-segment").classList.remove("inverted");
document.getElementById("mh-form").classList.remove("inverted");
document.getElementById("step_settings").classList.remove("inverted");
document.getElementById("mh-save").classList.remove("inverted");
document.getElementById("mh-save-options").classList.remove("inverted");
}
} }
await this.saveAPIKey(true); await this.saveAPIKey(true);
@ -98,10 +131,34 @@ const MailHopPreferences = {
api_key: self.api_key.value.trim(), api_key: self.api_key.value.trim(),
owm_key: self.owm_key.value.trim(), owm_key: self.owm_key.value.trim(),
unit: document.querySelector('input[name="unit"]:checked').value, unit: document.querySelector('input[name="unit"]:checked').value,
theme: document.querySelector('input[name="theme"]:checked').value,
travel_time_junk: document.querySelector('input[name="travel_time_junk"]:checked').value, travel_time_junk: document.querySelector('input[name="travel_time_junk"]:checked').value,
}); });
if(!init) if(!init)
document.getElementById("saved_message").style.display = 'block'; document.getElementById("saved_message").style.display = 'block';
this.theme = document.querySelector('input[name="theme"]:checked').value
if (this.theme == "dark") {
if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.add("inverted");
document.getElementById("mh-steps").classList.add("inverted");
document.getElementById("mh-segment").classList.add("inverted");
document.getElementById("mh-form").classList.add("inverted");
document.getElementById("step_settings").classList.add("inverted");
document.getElementById("mh-save").classList.add("inverted");
document.getElementById("mh-save-options").classList.add("inverted");
}
} else {
if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.remove("inverted");
document.getElementById("mh-steps").classList.remove("inverted");
document.getElementById("mh-segment").classList.remove("inverted");
document.getElementById("mh-form").classList.remove("inverted");
document.getElementById("step_settings").classList.remove("inverted");
document.getElementById("mh-save").classList.remove("inverted");
document.getElementById("mh-save-options").classList.remove("inverted");
}
}
return true; return true;
}, },

View File

@ -192,5 +192,8 @@ getDistance: function(from, to, unit) {
} }
} }
return null; return null;
},
htmlEncode: function (text) {
return text.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
} }
}; };

View File

@ -2,7 +2,7 @@
"manifest_version": 2, "manifest_version": 2,
"name": "__MSG_appName__", "name": "__MSG_appName__",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"version": "4.1.1", "version": "4.2.0",
"author": "Hopsware LLC", "author": "Hopsware LLC",
"developer": { "developer": {
"name": "Andrew Van Tassel", "name": "Andrew Van Tassel",