jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-07-25 19:54:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added branding settings page

Browse source 
Added branding settings page, where you can change favicon, brand name and brand logo from UI.
This commit is contained in:
Arminas 2023-02-18 07:31:37 +02:00 • committed by GitHub
parent 46ac9ef2c1
commit 12d0dc6288
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 384 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

12
templates/base.html
View file

@ -78,7 +78,9 @@
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="{{.basePath}}" class="brand-link">
<span class="brand-text">&nbsp; WIREGUARD UI</span>
<img src="{{.basePath}}/brand-logo" style="width: 100%">
</br>
<span class="brand-text">&nbsp; {{.baseData.BrandName}}</span>
</a>
<!-- Sidebar -->
@ -126,6 +128,14 @@
</p>
</a>
</li>
<li class="nav-item">
<a href="{{.basePath}}/branding-settings" class="nav-link {{if eq .baseData.Active "branding-settings" }}active{{end}}">
<i class="nav-icon fas fa-cog"></i>
<p>
Branding Settings
</p>
</a>
</li>
<li class="nav-header">UTILITIES</li>
<li class="nav-item">
<a href="{{.basePath}}/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}">

202
templates/branding_settings.html Normal file
View file

@ -0,0 +1,202 @@
{{define "title"}}
Branding Settings
{{end}}
{{define "top_css"}}
{{end}}
{{define "username"}}
{{ .username }}
{{end}}
{{define "page_title"}}
Branding Settings
{{end}}
{{define "page_content"}}
<section class="content">
<div class="container-fluid">
<!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
<div class="row">
<!-- left column -->
<div class="col-md-6">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Wireguard-UI Branding Settings</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form role="form" id="frm_branding_settings" name="frm_branding_settings">
<div class="card-body">
<div class="form-group">
<label for="favicon">Favicon</label>
<div class="input-group input-group">
<input type="text" class="form-control" id="favicon" name="favicon" disabled>
<span class="input-group-append">
<label class="btn btn-default">Select favicon<input type="file"
id="favicon_input"
accept=".ico" hidden>
</label>
</span>
</div>
</div>
<div class="form-group">
<label for="brand_logo">Brand logo</label>
<div class="input-group input-group">
<input type="text" class="form-control" id="brand_logo" name="brand_logo" disabled>
<span class="input-group-append">
<label class="btn btn-default">Select logo<input type="file"
id="brand_logo_input" accept=".png,.jpg,.jpeg,.gif,.ico" hidden>
</label>
</span>
</div>
</div>
<div class="form-group">
<label for="brand_name">Brand name</label>
<input type="text" class="form-control" id="brand_name"
name="brand_name" placeholder="WIREGUARD UI"
value="{{if .baseData.BrandName }}{{ .baseData.BrandName }}{{end}}">
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<div class="col-md-6">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Help</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<dl>
<dt>1. Favicon</dt>
<dd>Formats accepted: <code>.ico</code></dd>
<dd>Optional - leave blank or clear to continue using current favicon.</dd>
<dt>2. Brand logo</dt>
<dd>The logo, displayed in the upper left corner.</dd>
<dd>Formats accepted: <code>.png</code>, <code>.jpg</code>, <code>.jpeg</code>, <code>.gif</code>, <code>.ico</code></dd>
<dd>Optional - leave blank or clear to continue using current brand logo.</dd>
<dt>3. Brand name</dt>
<dd>The name, displayed in the upper left corner.</dd>
<dd>Mandatory - must contain at least one symbol.</dd>
</dl>
</div>
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div>
</section>
{{end}}
{{define "bottom_js"}}
<script>
function submitBrandingSettings() {
var data = new FormData();
data.append("brand_name", $("#brand_name").val());
var count = 1;
if (typeof document.getElementById("favicon_input").files[0] !== 'undefined') {
readFile(data, 'favicon', "favicon_input");
count++;
}
if (typeof document.getElementById("brand_logo_input").files[0] !== 'undefined') {
readFile(data, 'logo', "brand_logo_input");
count++;
}
function waitForRead() {
var temp = 0;
for (const pair of data.entries()) {
temp++;
}
if (temp !== count) {
setTimeout(() => waitForRead(), 50);
} else {
$.ajax({
url: "{{.basePath}}/update-branding",
data: data,
processData: false,
contentType: false,
type: "POST",
success: function(data) {
toastr.success('Updated branding successfully');
},
error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
};
waitForRead();
}
function readFile(data, name, element) {
var image = document.getElementById(element).files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(image);
reader.onloadend = function () {
data.append(name, image);
};
}
</script>
<script>
$("#favicon_input").on('change', function () {
$("#favicon").val($("#favicon_input").val());
});
$("#brand_logo_input").on('change', function () {
$("#brand_logo").val($("#brand_logo_input").val());
});
// Form validation
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function () {
submitBrandingSettings();
}
});
$("#frm_branding_settings").validate({
rules: {
brand_name: {
required: true
}
},
messages: {
brand_name: {
required: "Please enter a brand name"
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
</script>
{{end}}