CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support mainsail through an SSL proxy

Browse Source 
I like to run all my web services proxied through a single
 internet-accessible server, secured through SSL and authenticated
 against a single proxy server (nginx, in my case)

I found that mainsail hardcoded ws:// and many http:// addresses, so
 I've updated them to detect ws:// vs ws:///, and just use the protocol
 agnostic // prefix, which then sends the request over the same protocol
 the page is loaded under, either http or https.

Now i've got a nice SSL secured but publicly accessible URL for remote
 printer monitoring
This commit is contained in:
Franklyn 2020-09-15 07:33:26 +01:00
parent 98f7ceebd7
commit c386375e53
5 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/panels/Settings/ConfigFilesPanel.vue
View File

@ -320,7 +320,7 @@
this.editor.sourcecode = ""; this.editor.sourcecode = "";
this.editor.item = item; this.editor.item = item;
let url = 'http://'+this.hostname+':'+this.port+'/server/files'+this.currentPath+'/'+item.filename+'?time='+Date.now(); let url = '//'+this.hostname+':'+this.port+'/server/files'+this.currentPath+'/'+item.filename+'?time='+Date.now();
fetch(url, { cache: "no-cache" }).then(res => res.text()).then(file => { fetch(url, { cache: "no-cache" }).then(res => res.text()).then(file => {
this.editor.sourcecode = file; this.editor.sourcecode = file;
this.editor.show = true; this.editor.show = true;
@ -345,7 +345,7 @@
formData.append('root', 'config'); formData.append('root', 'config');
if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8)); if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8));
axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload',
formData, { formData, {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
} }
@ -371,7 +371,7 @@
let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let filename = (this.currentPath+"/"+this.contextMenu.item.filename);
let link = document.createElement("a"); let link = document.createElement("a");
link.download = name; link.download = name;
link.href = 'http://' + this.hostname + ':' + this.port + '/server/files/' + filename; link.href = '//' + this.hostname + ':' + this.port + '/server/files/' + filename;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
@ -399,7 +399,7 @@
formData.append('root', 'config'); formData.append('root', 'config');
if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8)); if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8));
axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload',
formData, { formData, {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
} }
@ -425,7 +425,7 @@
removeFile() { removeFile() {
let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let filename = (this.currentPath+"/"+this.contextMenu.item.filename);
axios.delete( axios.delete(
'http://'+ this.hostname + ':' + this.port +'/server/files/'+filename '//'+ this.hostname + ':' + this.port +'/server/files/'+filename
).then((result) => { ).then((result) => {
this.$toast.success(result.data.result+" successfully deleted."); this.$toast.success(result.data.result+" successfully deleted.");
}).catch(() => { }).catch(() => {

4
src/components/panels/Settings/SystemPanel.vue
View File

@ -8,8 +8,8 @@
</v-list-item> </v-list-item>
<v-divider class="my-2"></v-divider> <v-divider class="my-2"></v-divider>
<v-card-text class=" text-center text-lg-left"> <v-card-text class=" text-center text-lg-left">
<div><v-btn :href="'http://'+hostname+':'+port+'/server/files/klippy.log'" block color="primary"><v-icon class="mr-2">mdi-download</v-icon>Klipper Log</v-btn></div> <div><v-btn :href="'//'+hostname+':'+port+'/server/files/klippy.log'" block color="primary"><v-icon class="mr-2">mdi-download</v-icon>Klipper Log</v-btn></div>
<div><v-btn :href="'http://'+hostname+':'+port+'/server/files/moonraker.log'" block color="mt-3 primary"><v-icon class="mr-2">mdi-download</v-icon>Moonraker Log</v-btn></div> <div><v-btn :href="'//'+hostname+':'+port+'/server/files/moonraker.log'" block color="mt-3 primary"><v-icon class="mr-2">mdi-download</v-icon>Moonraker Log</v-btn></div>
<div><v-btn @click="doRestart" block :loading="loadingRestart" color="error" class="mt-3"><v-icon class="mr-2">mdi-cached</v-icon>Restart</v-btn></div> <div><v-btn @click="doRestart" block :loading="loadingRestart" color="error" class="mt-3"><v-icon class="mr-2">mdi-cached</v-icon>Restart</v-btn></div>
<div><v-btn @click="doRestartFirmware" block :loading="loadingRestartFirmware" class="mt-3" color="error"><v-icon class="mr-2">mdi-cached</v-icon>FW <span class="d-none d-sm-block">Restart</span></v-btn></div> <div><v-btn @click="doRestartFirmware" block :loading="loadingRestartFirmware" class="mt-3" color="error"><v-icon class="mr-2">mdi-cached</v-icon>FW <span class="d-none d-sm-block">Restart</span></v-btn></div>
<div><v-btn @click="doRebootHost" block :loading="loadingRebootHost" class="mt-3" color="error"><v-icon class="mr-2">mdi-cached</v-icon><span class="d-none d-sm-block">Host</span> Reboot</v-btn></div> <div><v-btn @click="doRebootHost" block :loading="loadingRebootHost" class="mt-3" color="error"><v-icon class="mr-2">mdi-cached</v-icon><span class="d-none d-sm-block">Host</span> Reboot</v-btn></div>

3
src/main.js
View File

@ -24,7 +24,8 @@ fetch('/config.json')
.then(file => { .then(file => {
store.commit('setSettings', file); store.commit('setSettings', file);
const socketClient = new WebSocketClient('ws://' + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', { const websocketProtocol = document.location.protocol === 'https:' ? 'wss://' : 'ws://';
const socketClient = new WebSocketClient(websocketProtocol + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', {
store: store, store: store,
reconnectEnabled: true, reconnectEnabled: true,
reconnectInterval: store.state.socket.reconnectInterval, reconnectInterval: store.state.socket.reconnectInterval,

6
src/pages/Files.vue
View File

@ -330,7 +330,7 @@
formData.append('file', file, (this.currentPath+"/"+filename).substring(7)); formData.append('file', file, (this.currentPath+"/"+filename).substring(7));
this.$store.commit('setLoading', { name: 'loadingGcodeUpload' }); this.$store.commit('setLoading', { name: 'loadingGcodeUpload' });
axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload',
formData, { formData, {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
} }
@ -404,7 +404,7 @@
let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let filename = (this.currentPath+"/"+this.contextMenu.item.filename);
let link = document.createElement("a"); let link = document.createElement("a");
link.download = name; link.download = name;
link.href = 'http://' + this.hostname + ':' + this.port + '/server/files/' + encodeURI(filename); link.href = '//' + this.hostname + ':' + this.port + '/server/files/' + encodeURI(filename);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
@ -436,7 +436,7 @@
removeFile() { removeFile() {
let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let filename = (this.currentPath+"/"+this.contextMenu.item.filename);
axios.delete( axios.delete(
'http://'+ this.hostname + ':' + this.port +'/server/files/' + encodeURI(filename) '//'+ this.hostname + ':' + this.port +'/server/files/' + encodeURI(filename)
).then((result) => { ).then((result) => {
this.$toast.success(result.data.result+" successfully deleted."); this.$toast.success(result.data.result+" successfully deleted.");
}).catch(() => { }).catch(() => {

4
src/store/actions.js
View File

@ -79,7 +79,7 @@ export default {
getDirectoryRoot({ commit }, data) { getDirectoryRoot({ commit }, data) {
if (data.files && data.files.filter((file) => file.filename === "gui.json")) { if (data.files && data.files.filter((file) => file.filename === "gui.json")) {
fetch('http://'+store.state.socket.hostname+':'+store.state.socket.port+'/server/files/gcodes/gui.json?time='+Date.now()) fetch('//'+store.state.socket.hostname+':'+store.state.socket.port+'/server/files/gcodes/gui.json?time='+Date.now())
.then(res => res.json()).then(file => { .then(res => res.json()).then(file => {
commit('setSettings', file); commit('setSettings', file);
}); });
@ -93,7 +93,7 @@ export default {
let formData = new FormData(); let formData = new FormData();
formData.append('file', file); formData.append('file', file);
axios.post('http://' + state.socket.hostname + ':' + state.socket.port + '/server/files/upload', axios.post('//' + state.socket.hostname + ':' + state.socket.port + '/server/files/upload',
formData, { formData, {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
} }