jjsalinas/wireguard-gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial skeleton

Browse Source
This commit is contained in:
Jose Jimenez
2026-02-22 21:15:26 +01:00
parent b0aeb6232b
commit 141279ccc5
6 changed files with 176 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -13,7 +13,7 @@
"license": "MIT",
"author": "Jose Jimenez",
"type": "commonjs",
"main": "main.js",
"main": "src/main.js",
"scripts": {
"start": "electron .",
"test": "test",

102
src/gui/gui.html Normal file
View File

@@ -0,0 +1,102 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<link rel="stylesheet" href="styles.css" />
<title>Wireguard GUI</title>
</head>
<body>
<h1>Wireguard GUI!</h1>
<div id="gui-wrapper">
<div id="left-side-wrapper" class="side-wrapper">
<div class="conf-server-form">
<h2>Server Side</h2>
<form>
<label>Interface:</label>
<input value="iface0" />
<br />
<label>Server address:</label>
<input value="11.11.11.1/24" />
<br />
<label>Port:</label>
<input value="port-number" />
<br />
<label>Clients view each other as in LAN:</label>
<input value="true" />
<br />
<label>List of ports to enable traffic on:</label>
<input value="port1, port2" />
<br />
<label>Server private key:</label>
<input value="veryprivatekey" />
<br />
<label>Server public key:</label>
<input value="verypublickey" />
<br />
<label>Running in docker?:</label>
<input value="true" />
<br />
<label>Docker HOST interface:</label>
<input value="iface1" />
<br />
<button>Sync</button>
</form>
</div>
<div class="conf-server">
<form>
<label>SERVER CONF</label>
<br />
<input
class="conf-server-input"
value="COMPLETE WORKING CONF HERE"
/>
</form>
</div>
</div>
<div id="right-side-wrapper" class="side-wrapper">
<div class="conf-client-form">
<h2>Client Side</h2>
<form>
<label>Client picker</label>
<select name="Test">
<option value="1">Test A</option>
<option value="2">Test B</option>
</select>
<br />
<label>Internet traffic enabled:</label>
<input value="true" />
<br />
<label>Client private key:</label>
<input value="veryprivateclientkey" />
<br />
<label>Client private key:</label>
<input value="verypublicclientkey" />
<br />
</form>
</div>
<div class="conf-server">
<form>
<label>SERVER CONF</label>
<br />
<input
class="conf-server-input"
value="COMPLETE WORKING CONF HERE"
/>
</form>
</div>
</div>
</div>
<script type="module" src="gui.js"></script>
</body>
</html>

2
src/gui/gui.js Normal file
View File

@@ -0,0 +1,2 @@
console.log("GUI works");
// Complete Wireguard conf yielding

69
src/gui/styles.css Normal file
View File

@@ -0,0 +1,69 @@
#gui-wrapper {
width: 100%;
height: 80vh;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.side-wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 0.5rem;
border: 1px solid black;
gap: 2rem;
margin: 0.3rem;
}
#left-side-wrapper {
width: 100%;
height: 100%;
.conf-server-form {
width: 90%;
margin: 1rem;
> form {
display: flex;
flex-direction: column;
}
}
.conf-server {
height: 100%;
width: 90%;
margin: 1rem;
> form {
display: flex;
flex-direction: column;
}
}
}
#right-side-wrapper {
width: 60%;
.conf-client-form {
height: 100%;
width: 90%;
margin: 1rem;
> form {
display: flex;
flex-direction: column;
}
}
.conf-server {
height: 100%;
width: 90%;
margin: 1rem;
> form {
display: flex;
flex-direction: column;
}
}
}
.conf-server-input {
min-height: 100%;
}

1
index.html → src/index.html
View File

@@ -16,5 +16,6 @@
<body>
<h1>Trying out electron rendering for Wireguard GUI!</h1>
<p>👋</p>
<div id="component-wrapper"><p>CLICK</p></div>
</body>
</html>

2
main.js → src/main.js
View File

@@ -6,7 +6,7 @@ const createWindow = () => {
height: 600,
});
win.loadFile("index.html");
win.loadFile("src/gui/gui.html");
};
app.whenReady().then(() => {