jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-04-21 20:12:33 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update client page using jax

Browse source
This commit is contained in:
Khanh Ngo 2020-06-01 22:38:12 +07:00
parent e3fac242bb
commit ec2b447b7b
No known key found for this signature in database
GPG key ID: 29077342AA5648F6
8 changed files with 133 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Dockerfile
View file

@ -35,6 +35,9 @@ RUN mkdir -p assets/plugins && \
/build/node_modules/jquery-tags-input/ \
assets/plugins/
# Move custom assets
RUN cp -r /build/custom/ assets/
# Get go modules and build tool
RUN go mod download && \
go get github.com/GeertJohan/go.rice/rice

59
custom/js/helper.js Normal file
View file

@ -0,0 +1,59 @@
function renderClientList(data) {
$.each(data, function(index, obj) {
// render client status css tag style
let clientStatusHtml = '>'
if (obj.Client.enabled) {
clientStatusHtml = `style="visibility: hidden;">`
}
// render client allocated ip addresses
let allocatedIpsHtml = "";
$.each(obj.Client.allocated_ips, function(index, obj) {
allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
})
// render client allowed ip addresses
let allowedIpsHtml = "";
$.each(obj.Client.allowed_ips, function(index, obj) {
allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
})
// render client html content
let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
<div class="info-box">
<div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
+ `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
</div>
<img src="${obj.QRCode}" />
<div class="info-box-content">
<div class="btn-group">
<button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
class="btn btn-outline-success btn-sm">Download</button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#modal_edit_client">Edit</button>
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Disable</button>
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Remove</button>
</div>
<hr>
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
<span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
<span class="info-box-text"><i class="fas fa-clock"></i>
${obj.Client.created_at}</span>
<span class="info-box-text"><i class="fas fa-history"></i>
${obj.Client.updated_at}</span>
<span class="info-box-text"><strong>IP Allocation</strong></span>`
+ allocatedIpsHtml
+ `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
+ allowedIpsHtml
+`</div>
</div>
</div>`
// add the client html elements to the list
$('#client-list').append(html);
});
}

21
handler/routes.go
View file

@ -107,6 +107,22 @@ func GetClients() echo.HandlerFunc {
}
}
// GetClient handler return a of Wireguard client data
func GetClient() echo.HandlerFunc {
return func(c echo.Context) error {
// access validation
validSession(c)
clientID := c.Param("id")
clientData, err := util.GetClientByID(clientID, true)
if err != nil {
return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Client not found"})
}
return c.JSON(http.StatusOK, clientData)
}
}
// NewClient handler
func NewClient() echo.HandlerFunc {
return func(c echo.Context) error {
@ -215,15 +231,16 @@ func DownloadClient() echo.HandlerFunc {
return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Missing clientid parameter"})
}
client, err := util.GetClientByID(clientID)
clientData, err := util.GetClientByID(clientID, false)
if err != nil {
log.Errorf("Cannot generate client id %s config file for downloading: %v", clientID, err)
return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Client not found"})
}
// build config
server, _ := util.GetServer()
globalSettings, _ := util.GetGlobalSettings()
config := util.BuildClientConfig(client, server, globalSettings)
config := util.BuildClientConfig(*clientData.Client, server, globalSettings)
// create io reader from string
reader := strings.NewReader(config)

1
main.go
View file

@ -58,6 +58,7 @@ func main() {
app.GET("/global-settings", handler.GlobalSettings())
app.POST("/global-settings", handler.GlobalSettingSubmit())
app.GET("/api/clients", handler.GetClients())
app.GET("/api/client/:id", handler.GetClient())
app.GET("/api/machine-ips", handler.MachineIPAddresses())
app.GET("/api/suggest-client-ips", handler.SuggestIPAllocation())
app.GET("/api/apply-wg-config", handler.ApplyServerConfig(tmplBox))

3
prepare_assets.sh
View file

@ -11,6 +11,9 @@ mkdir -p "${DIR}/assets/dist/js" "${DIR}/assets/dist/css" && \
cp -r "${DIR}/node_modules/admin-lte/dist/js/adminlte.min.js" "${DIR}/assets/dist/js/adminlte.min.js" && \
cp -r "${DIR}/node_modules/admin-lte/dist/css/adminlte.min.css" "${DIR}/assets/dist/css/adminlte.min.css"
# Copy helper js
cp -r "${DIR}/custom" "${DIR}/assets"
# Copy plugins
mkdir -p "${DIR}/assets/plugins" && \
cp -r "${DIR}/node_modules/admin-lte/plugins/jquery" \

30
templates/base.html
View file

@ -246,7 +246,28 @@
<script src="static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.js"></script>
<!-- AdminLTE App -->
<script src="static/dist/js/adminlte.min.js"></script>
<!-- Custom js -->
<script src="static/custom/js/helper.js"></script>
<script>
// populateClient function for render new client info
// on the client page.
function populateClient(client_id) {
$.ajax({
cache: false,
method: 'GET',
url: '/api/client/' + client_id,
dataType: 'json',
contentType: "application/json",
success: function (resp) {
renderClientList([resp]);
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
// submitNewClient function for new client form submission
function submitNewClient() {
const name = $("#client_name").val();
@ -261,7 +282,6 @@
const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
"enabled": enabled};
console.log(data);
$.ajax({
cache: false,
@ -270,12 +290,12 @@
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function(data) {
success: function(resp) {
$("#modal_new_client").modal('hide');
toastr.success('Created new client successfully');
// Refresh the home page (clients page) after adding successfully
// Update the home page (clients page) after adding successfully
if (window.location.pathname === "/") {
location.reload();
populateClient(resp.id);
}
},
error: function(jqXHR, exception) {
@ -377,6 +397,8 @@
// New Client modal event
$(document).ready(function () {
$("#modal_new_client").on('shown.bs.modal', function (e) {
$("#client_name").val("");
$("#client_email").val("");
$("#client_allocated_ips").importTags('');
updateIPAllocationSuggestion();
});

66
templates/clients.html
View file

@ -125,71 +125,7 @@ Wireguard Clients
{{end}}
{{define "bottom_js"}}
<script type="text/html" id="template">
</script>
<script>
function renderClient(data) {
$.each(data, function(index, obj) {
// render client status css tag style
let clientStatusHtml = '>'
if (obj.Client.enabled) {
clientStatusHtml = `style="visibility: hidden;">`
}
// render client allocated ip addresses
let allocatedIpsHtml = "";
$.each(obj.Client.allocated_ips, function(index, obj) {
allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
})
// render client allowed ip addresses
let allowedIpsHtml = "";
$.each(obj.Client.allowed_ips, function(index, obj) {
allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
})
// render client html content
let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
<div class="info-box">
<div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
+ `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
</div>
<img src="${obj.QRCode}" />
<div class="info-box-content">
<div class="btn-group">
<button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
class="btn btn-outline-success btn-sm">Download</button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#modal_edit_client">Edit</button>
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Disable</button>
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Remove</button>
</div>
<hr>
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
<span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
<span class="info-box-text"><i class="fas fa-clock"></i>
${obj.Client.created_at}</span>
<span class="info-box-text"><i class="fas fa-history"></i>
${obj.Client.updated_at}</span>
<span class="info-box-text"><strong>IP Allocation</strong></span>`
+ allocatedIpsHtml
+ `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
+ allowedIpsHtml
+`</div>
</div>
</div>`
// add the client html elements to the list
$('#client-list').append(html);
});
}
function populateClientList() {
$.ajax({
cache: false,
@ -198,7 +134,7 @@ Wireguard Clients
dataType: 'json',
contentType: "application/json",
success: function (data) {
renderClient(data);
renderClientList(data);
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);

26
util/db.go
View file

@ -209,7 +209,7 @@ func GetClients(hasQRCode bool) ([]model.ClientData, error) {
server, _ := GetServer()
globalSettings, _ := GetGlobalSettings()
png, _ := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
png, err := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
if err == nil {
clientData.QRCode = "data:image/png;base64," + base64.StdEncoding.EncodeToString([]byte(png))
} else {
@ -226,18 +226,34 @@ func GetClients(hasQRCode bool) ([]model.ClientData, error) {
}
// GetClientByID func to query a client from the database
func GetClientByID(clientID string) (model.Client, error) {
func GetClientByID(clientID string, hasQRCode bool) (model.ClientData, error) {
client := model.Client{}
clientData := model.ClientData{}
db, err := DBConn()
if err != nil {
return client, err
return clientData, err
}
// read client information
if err := db.Read("clients", clientID, &client); err != nil {
return client, err
return clientData, err
}
return client, nil
// generate client qrcode image in base64
if hasQRCode {
server, _ := GetServer()
globalSettings, _ := GetGlobalSettings()
png, err := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
if err == nil {
clientData.QRCode = "data:image/png;base64," + base64.StdEncoding.EncodeToString([]byte(png))
} else {
fmt.Print("Cannot generate QR code: ", err)
}
}
clientData.Client = &client
return clientData, nil
}