mirror of
https://github.com/RaspAP/raspap-webgui.git
synced 2024-11-25 17:10:26 +00:00
Add certificate option to openvpn GUI
add JS code to display options and selected ovpn file
This commit is contained in:
Christian Zeitnitz
parent
b2b19cd159
commit
720e6c3e77
4 changed files with 77 additions and 30 deletions
|
|
@ -281,6 +281,22 @@ $('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
|
||||||
$('.btn-activate', this).data('recordId', data.recordId);
|
$('.btn-activate', this).data('recordId', data.recordId);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
|
||||||
|
// e.stopPropagation();
|
||||||
|
if (this.id == 'ovpn-userpw') {
|
||||||
|
$('#PanelCerts').hide();
|
||||||
|
$('#PanelUserPW').show();
|
||||||
|
} else if (this.id == 'ovpn-certs') {
|
||||||
|
$('#PanelUserPW').hide();
|
||||||
|
$('#PanelCerts').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the following code if you want the name of the file appear on select
|
||||||
|
$(".custom-file-input").on("change", function() {
|
||||||
|
var fileName = $(this).val().split("\\").pop();
|
||||||
|
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Sets the wirelss channel select options based on hw_mode and country_code.
|
Sets the wirelss channel select options based on hw_mode and country_code.
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ function DisplayOpenVPNConfig()
|
||||||
$authUser = current($auth);
|
$authUser = current($auth);
|
||||||
$authPassword = next($auth);
|
$authPassword = next($auth);
|
||||||
}
|
}
|
||||||
$clients = preg_grep('~\login.(conf)$~', scandir(pathinfo(RASPI_OPENVPN_CLIENT_LOGIN, PATHINFO_DIRNAME)));
|
$clients = preg_grep('/client.(conf)$/', scandir(pathinfo(RASPI_OPENVPN_CLIENT_CONFIG, PATHINFO_DIRNAME)));
|
||||||
|
|
||||||
$logEnable = 0;
|
$logEnable = 0;
|
||||||
if (!empty($_POST) && !isset($_POST['log-openvpn'])) {
|
if (!empty($_POST) && !isset($_POST['log-openvpn'])) {
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@
|
||||||
</p>
|
</p>
|
||||||
<div class="openvpn-configs js-openvpn-configs-container">
|
<div class="openvpn-configs js-openvpn-configs-container">
|
||||||
<?php foreach ($clients as $client) :
|
<?php foreach ($clients as $client) :
|
||||||
if ($client == "login.conf") {
|
if ($client == "client.conf") {
|
||||||
$label = file_get_meta(RASPI_OPENVPN_CLIENT_LOGIN,'#\sfilename\s(.*)');
|
$label = file_get_meta(RASPI_OPENVPN_CLIENT_CONFIG,'#\sfilename\s(.*)');
|
||||||
$btn_class = "active";
|
$btn_class = "active";
|
||||||
} else {
|
} else {
|
||||||
$label = trim(pathinfo($client, PATHINFO_FILENAME), "_login");
|
$label = preg_replace('/_client$/','',pathinfo($client, PATHINFO_FILENAME));
|
||||||
$client = $label;
|
$client = $label;
|
||||||
$btn_class = "disabled";
|
$btn_class = "disabled";
|
||||||
}?>
|
}?>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,66 @@
|
||||||
<div class="tab-pane active" id="openvpnclient">
|
<div class="tab-pane active" id="openvpnclient">
|
||||||
<h4 class="mt-3"><?php echo _("Client settings"); ?></h4>
|
<h4 class="mt-3"><?php echo _("Client settings"); ?></h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-lg-8">
|
||||||
<div class="row">
|
<div class="row mb-2">
|
||||||
<div class="col-lg-12 mt-2 mb-2">
|
<div class="col-lg-12 mt-2 mb-2">
|
||||||
<div class="info-item"><?php echo _("IPv4 Address"); ?></div>
|
<div class="info-item"><?php echo _("IPv4 Address"); ?></div>
|
||||||
<div class="info-item"><?php echo htmlspecialchars($public_ip, ENT_QUOTES); ?><a class="text-gray-500" href="https://ipapi.co/<?php echo($public_ip); ?>" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt ml-2"></i></a></div>
|
<div class="info-item"><?php echo htmlspecialchars($public_ip, ENT_QUOTES); ?><a class="text-gray-500" href="https://ipapi.co/<?php echo($public_ip); ?>" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt ml-2"></i></a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<form>
|
||||||
<div class="form-group col-lg-12">
|
<h5><?php echo _("Authentification Method"); ?></h5>
|
||||||
<label for="code"><?php echo _("Username"); ?></label>
|
<div class="col-sm-12 mt-2 mb-2 form-check">
|
||||||
<input type="text" class="form-control" name="authUser" value="<?php echo htmlspecialchars($authUser, ENT_QUOTES); ?>" />
|
<input class="form-check-input" id="ovpn-userpw" name="sel1" value="userpw" data-toggle="" data-parent="#clientsettings" data-target="#UserPW" type="radio" checked>
|
||||||
</div>
|
<label class="form-check-label">User name and password</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="col-sm-12 mt-2 mb-2 form-check">
|
||||||
<div class="form-group col-lg-12">
|
<input class="form-check-input" id="ovpn-certs" name="sel1" value="certs" data-toggle="" data-parent="#clientsettings" data-target="#Certs" type="radio">
|
||||||
<label for="code"><?php echo _("Password"); ?></label>
|
<label class="form-check-label">Certificates</label>
|
||||||
<input type="password" class="form-control" name="authPassword" value="<?php echo htmlspecialchars($authPassword, ENT_QUOTES); ?>" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="col-sm-12 ml-2">
|
||||||
<div class="form-group col-lg-12">
|
<div class="panel-group" id="clientsettings">
|
||||||
<div class="custom-file">
|
<div class="panel panel-default panel-collapse" id="PanelUserPW" >
|
||||||
<input type="file" class="custom-file-input" name="customFile" id="customFile">
|
<div class="panel-heading">
|
||||||
<label class="custom-file-label" for="customFile"><?php echo _("Select OpenVPN configuration file (.ovpn)"); ?></label>
|
<h5 class="panel-title">Enter username and password</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="panel-body">
|
||||||
</div>
|
<div class="form-group col-lg-12">
|
||||||
</div><!-- col-->
|
<label for="code"><?php echo _("Username"); ?></label>
|
||||||
<div class="col-sm">
|
<input type="text" class="form-control" name="authUser" value="<?php echo htmlspecialchars($authUser, ENT_QUOTES); ?>" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-lg-12">
|
||||||
|
<label for="code"><?php echo _("Password"); ?></label>
|
||||||
|
<input type="password" class="form-control" name="authPassword" value="<?php echo htmlspecialchars($authPassword, ENT_QUOTES); ?>" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- panel -->
|
||||||
|
<div class="panel panel-default panel-collapse collapse in" id="PanelCerts" >
|
||||||
|
<div class="panel-body">
|
||||||
|
<h5 class="panel-title">Certificates in the configuration file</h5>
|
||||||
|
<p> RaspAP does not support the import of the required cerficates. Please paste them into the configuration file
|
||||||
|
<ul>
|
||||||
|
<li>Signing certification authority (CA) certificate (e.g. <code>ca.crt</code>): enclosed in <code><ca> ... </ca></code> tags </li>
|
||||||
|
<li>Client certificate (public key) (e.g. <code>client.crt</code>): enclosed in <code><cert> ... </cert></code> tags </li>
|
||||||
|
<li>Private key of the client certificate (e.g. <code>client.key</code>): enclosed in <code><key> ... </key></code> tags </li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div> <!-- panel -->
|
||||||
|
</div> <!-- panel-group -->
|
||||||
|
</div> <!-- col -->
|
||||||
|
<div class="col-sm-12 ">
|
||||||
|
<div class="form-group">
|
||||||
|
<h5 class="panel-title">Configuration File</h4>
|
||||||
|
<div class="custom-file">
|
||||||
|
<input type="file" class="custom-file-input" name="customFile" id="customFile">
|
||||||
|
<label class="custom-file-label" for="customFile"><?php echo _("Select OpenVPN configuration file (.ovpn)"); ?></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- col -->
|
||||||
|
</form>
|
||||||
|
</div><!-- col-8 -->
|
||||||
|
<div class="col-sm-auto">
|
||||||
<a href="https://go.nordvpn.net/aff_c?offer_id=15&aff_id=36402&url_id=902"><img src="app/img/no-trace-200x200.png" class="float-left mb-3 mt-3"></a>
|
<a href="https://go.nordvpn.net/aff_c?offer_id=15&aff_id=36402&url_id=902"><img src="app/img/no-trace-200x200.png" class="float-left mb-3 mt-3"></a>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue