mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-06-07 00:46:58 +03:00
Initial email settings UI commit
Added email settings page, settings now save in database, ability to send an email to client when it's created
This commit is contained in:
Arminas
GitHub
parent
f8a10417ea
commit
c31636b66e
9 changed files with 568 additions and 25 deletions
|
|
@ -134,6 +134,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{.basePath}}/email-settings" class="nav-link {{if eq .baseData.Active "email-settings" }}active{{end}}">
|
||||
<i class="nav-icon fas fa-cog"></i>
|
||||
<p>
|
||||
Email Settings
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{.basePath}}/users-settings" class="nav-link {{if eq .baseData.Active "users-settings" }}active{{end}}">
|
||||
<i class="nav-icon fas fa-cog"></i>
|
||||
|
|
@ -226,6 +234,14 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="icheck-primary d-inline">
|
||||
<input type="checkbox" id="send_email_after_creation" {{ if .client_defaults.EnableAfterCreation }}checked{{ end }}>
|
||||
<label for="send_email_after_creation">
|
||||
Send email after creation
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<details>
|
||||
<summary><strong>Public and Preshared Keys</strong>
|
||||
<i class="fas fa-info-circle" data-toggle="tooltip"
|
||||
|
|
@ -399,6 +415,7 @@
|
|||
success: function(resp) {
|
||||
$("#modal_new_client").modal('hide');
|
||||
toastr.success('Created new client successfully');
|
||||
sendEmailAfterCreation(resp.id, resp.email);
|
||||
// Update the home page (clients page) after adding successfully
|
||||
if (window.location.pathname === "{{.basePath}}/") {
|
||||
populateClient(resp.id);
|
||||
|
|
@ -431,6 +448,31 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sendEmailAfterCreation(client_id, client_email) {
|
||||
console.log("Do you even try?");
|
||||
if ($("#send_email_after_creation").is(':checked')) {
|
||||
if (client_email !== "" && client_id) {
|
||||
const data = {"id": client_id, "email": client_email};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/email-client',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (resp) {
|
||||
toastr.success('Sent email to client successfully');
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
//Initialize Select2 Elements
|
||||
|
|
|
|||
364
templates/email_settings.html
Normal file
364
templates/email_settings.html
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
{{define "title"}}
|
||||
Email Settings
|
||||
{{end}}
|
||||
|
||||
{{define "top_css"}}
|
||||
{{end}}
|
||||
|
||||
{{define "username"}}
|
||||
{{ .username }}
|
||||
{{end}}
|
||||
|
||||
{{define "page_title"}}
|
||||
Email 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">Email Settings</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<!-- form start -->
|
||||
<form role="form" id="frm_email_settings" name="frm_email_settings">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sendgrid_api_key">Sendgrid API Key (If provided, overrules SMTP
|
||||
settings)</label>
|
||||
<input type="text" class="form-control" id="sendgrid_api_key"
|
||||
name="sendgrid_api_key" value="{{ .emailSettings.SendgridApiKey }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email_from_name">Email From Name</label>
|
||||
<input type="text" class="form-control" id="email_from_name"
|
||||
name="email_from_name" placeholder="E.g. WireGuard UI"
|
||||
value="{{ .emailSettings.EmailFromName }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email_from">Email From</label>
|
||||
<input type="text" class="form-control" id="email_from"
|
||||
name="email_from" placeholder="E.g. system@wireguard.com"
|
||||
value="{{ .emailSettings.EmailFrom }}">
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="form-group" style="width: 48%;">
|
||||
<label for="smtp_hostname">SMTP Hostname</label>
|
||||
<input type="text" class="form-control" id="smtp_hostname"
|
||||
name="smtp_hostname" placeholder="E.g. 127.0.0.1"
|
||||
value="{{ .emailSettings.SmtpHostname }}">
|
||||
</div>
|
||||
<div class="form-group" style="width: 48%; margin-left: 4%">
|
||||
<label for="smtp_port">SMTP Port</label>
|
||||
<input type="text" class="form-control" id="smtp_port"
|
||||
name="smtp_port" placeholder="E.g. 25"
|
||||
value="{{ .emailSettings.SmtpPort }}">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="form-group" style="width: 48%;">
|
||||
<label for="smtp_username">SMTP Username</label>
|
||||
<input type="text" class="form-control" id="smtp_username"
|
||||
name="smtp_username" placeholder="E.g. system@wireguard.com"
|
||||
value="{{ .emailSettings.SmtpUsername }}">
|
||||
</div>
|
||||
<div class="form-group" style="width: 48%; margin-left: 4%">
|
||||
<label for="smtp_password">SMTP Password</label>
|
||||
<input type="text" class="form-control" id="smtp_password"
|
||||
name="smtp_password" placeholder="E.g. *******"
|
||||
value="{{ .emailSettings.SmtpPassword }}">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="form-group" style="width: 48%;">
|
||||
<label for="smtp_auth_type">SMTP Auth Type</label>
|
||||
<input type="text" class="form-control" id="smtp_auth_type"
|
||||
name="smtp_auth_type" placeholder="NONE/LOGIN/PLAIN"
|
||||
value="{{ .emailSettings.SmtpAuthType }}">
|
||||
</div>
|
||||
<div class="form-group" style="width: 48%; margin-left: 4%">
|
||||
<label for="smtp_encryption">SMTP Encryption</label>
|
||||
<input type="text" class="form-control" id="smtp_encryption"
|
||||
name="smtp_encryption" placeholder="SSL/SSLTLS/TLS/STARTTLS"
|
||||
value="{{ .emailSettings.SmtpEncryption }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="icheck-primary d-inline">
|
||||
<input type="checkbox" id="smtp_no_tls_check" {{if .emailSettings.SmtpNoTLSCheck
|
||||
}}checked{{end}}>
|
||||
<label for="smtp_no_tls_check">
|
||||
SMTP No TLS Check
|
||||
</label>
|
||||
</div>
|
||||
</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">Email Template</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<form role="form" id="frm_email_settings2" name="frm_email_settings2">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="default_email_subject">Email Subject</label>
|
||||
<input type="text" class="form-control" id="default_email_subject"
|
||||
name="default_email_subject" placeholder="Your Wireguard configuration"
|
||||
value="{{ .emailSettings.DefaultEmailSubject }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="default_email_content">Email Content</label>
|
||||
<textarea class="form-control" id="default_email_content"
|
||||
name="default_email_content" rows="10" style="white-space: pre-wrap;">{{ .emailSettings.DefaultEmailContent }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-success">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{end}}
|
||||
|
||||
{{define "bottom_js"}}
|
||||
<script>
|
||||
function submitEmailSettings() {
|
||||
|
||||
const sendgrid_api_key = $("#sendgrid_api_key").val();
|
||||
const email_from_name = $("#email_from_name").val();
|
||||
const email_from = $("#email_from").val();
|
||||
const smtp_hostname = $("#smtp_hostname").val();
|
||||
let smtp_port = 0;
|
||||
if ($("#smtp_port").val().length !== 0) {
|
||||
smtp_port = parseInt($("#smtp_port").val());
|
||||
}
|
||||
const smtp_username = $("#smtp_username").val();
|
||||
const smtp_password = $("#smtp_password").val();
|
||||
const smtp_auth_type = $("#smtp_auth_type").val();
|
||||
const smtp_encryption = $("#smtp_encryption").val();
|
||||
let smtp_no_tls_check = false;
|
||||
if ($("#smtp_no_tls_check").is(':checked')) {
|
||||
smtp_no_tls_check = true;
|
||||
}
|
||||
|
||||
const data = {
|
||||
"sendgrid_api_key": sendgrid_api_key,
|
||||
"email_from_name": email_from_name,
|
||||
"email_from": email_from,
|
||||
"smtp_hostname": smtp_hostname,
|
||||
"smtp_port": smtp_port,
|
||||
"smtp_username": smtp_username,
|
||||
"smtp_password": smtp_password,
|
||||
"smtp_no_tls_check": smtp_no_tls_check,
|
||||
"smtp_auth_type": smtp_auth_type,
|
||||
"smtp_encryption": smtp_encryption
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/email-settings',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success('Updated email settings successfully');
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function submitEmailSettings2() {
|
||||
|
||||
const default_email_subject = $("#default_email_subject").val();
|
||||
const default_email_content = $("#default_email_content").val();
|
||||
|
||||
|
||||
const data = {
|
||||
"default_email_content": default_email_content,
|
||||
"default_email_subject": default_email_subject
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/email-settings',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success('Updated email default message settings successfully');
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
// submitHandler
|
||||
function submitHandler(form) {
|
||||
const formId = $(form).attr('id');
|
||||
if (formId === "frm_email_settings") {
|
||||
submitEmailSettings();
|
||||
} else if (formId === "frm_email_settings2") {
|
||||
submitEmailSettings2();
|
||||
}
|
||||
}
|
||||
|
||||
// Global setting form validation
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function (form) {
|
||||
submitHandler(form);
|
||||
}
|
||||
});
|
||||
$("#frm_email_settings").validate({
|
||||
rules: {
|
||||
email_from_name: {
|
||||
required: true
|
||||
},
|
||||
email_from: {
|
||||
required: true
|
||||
},
|
||||
smtp_hostname: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
}
|
||||
},
|
||||
smtp_port: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
},
|
||||
digits: true,
|
||||
range: [0, 65535]
|
||||
},
|
||||
smtp_username: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
}
|
||||
},
|
||||
smtp_password: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
}
|
||||
},
|
||||
smtp_no_tls_check: {
|
||||
digits: true
|
||||
},
|
||||
smtp_auth_type: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
}
|
||||
},
|
||||
smtp_encryption: {
|
||||
required: function () {
|
||||
return $("#sendgrid_api_key").val() === "";
|
||||
}
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
email_from_name: {
|
||||
required: "Field is mandatory"
|
||||
},
|
||||
email_from: {
|
||||
required: "Field is mandatory"
|
||||
},
|
||||
smtp_hostname: {
|
||||
required: "No Sendgrid API key, this field is mandatory"
|
||||
},
|
||||
smtp_port: {
|
||||
required: "No Sendgrid API key, this field is mandatory",
|
||||
digits: "Port must be an integer",
|
||||
range: "Port must be in range 0..65535"
|
||||
},
|
||||
smtp_username: {
|
||||
required: "No Sendgrid API key, this field is mandatory"
|
||||
},
|
||||
smtp_password: {
|
||||
required: "No Sendgrid API key, this field is mandatory"
|
||||
},
|
||||
smtp_auth_type: {
|
||||
required: "No Sendgrid API key, this field is mandatory"
|
||||
},
|
||||
smtp_encryption: {
|
||||
required: "No Sendgrid API key, this field is mandatory"
|
||||
}
|
||||
},
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
$("#frm_email_settings2").validate({
|
||||
rules: {
|
||||
default_email_subject: {
|
||||
required: true
|
||||
},
|
||||
default_email_content: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
default_email_subject: {
|
||||
required: "Field is mandatory"
|
||||
},
|
||||
default_email_content: {
|
||||
required: "Field is mandatory"
|
||||
}
|
||||
},
|
||||
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}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue