Add certificate option to openvpn GUI

add JS code to display options and selected ovpn file
This commit is contained in:
Christian Zeitnitz 2021-03-27 10:29:09 +01:00
parent b2b19cd159
commit 720e6c3e77
4 changed files with 77 additions and 30 deletions

View file

@ -281,6 +281,22 @@ $('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
$('.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.

View file

@ -53,7 +53,7 @@ function DisplayOpenVPNConfig()
$authUser = current($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;
if (!empty($_POST) && !isset($_POST['log-openvpn'])) {

View file

@ -8,11 +8,11 @@
</p>
<div class="openvpn-configs js-openvpn-configs-container">
<?php foreach ($clients as $client) :
if ($client == "login.conf") {
$label = file_get_meta(RASPI_OPENVPN_CLIENT_LOGIN,'#\sfilename\s(.*)');
if ($client == "client.conf") {
$label = file_get_meta(RASPI_OPENVPN_CLIENT_CONFIG,'#\sfilename\s(.*)');
$btn_class = "active";
} else {
$label = trim(pathinfo($client, PATHINFO_FILENAME), "_login");
$label = preg_replace('/_client$/','',pathinfo($client, PATHINFO_FILENAME));
$client = $label;
$btn_class = "disabled";
}?>

View file

@ -1,35 +1,66 @@
<div class="tab-pane active" id="openvpnclient">
<h4 class="mt-3"><?php echo _("Client settings"); ?></h4>
<div class="row">
<div class="col">
<div class="row">
<div class="col-lg-12 mt-2 mb-2">
<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>
<div class="col-lg-8">
<div class="row 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 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 class="row">
<div class="form-group col-lg-12">
<label for="code"><?php echo _("Username"); ?></label>
<input type="text" class="form-control" name="authUser" value="<?php echo htmlspecialchars($authUser, ENT_QUOTES); ?>" />
</div>
<form>
<h5><?php echo _("Authentification Method"); ?></h5>
<div class="col-sm-12 mt-2 mb-2 form-check">
<input class="form-check-input" id="ovpn-userpw" name="sel1" value="userpw" data-toggle="" data-parent="#clientsettings" data-target="#UserPW" type="radio" checked>
<label class="form-check-label">User name and password</label>
</div>
<div class="row">
<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 class="col-sm-12 mt-2 mb-2 form-check">
<input class="form-check-input" id="ovpn-certs" name="sel1" value="certs" data-toggle="" data-parent="#clientsettings" data-target="#Certs" type="radio">
<label class="form-check-label">Certificates</label>
</div>
<div class="row">
<div class="form-group col-lg-12">
<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>
</div><!-- col-->
<div class="col-sm">
<div class="col-sm-12 ml-2">
<div class="panel-group" id="clientsettings">
<div class="panel panel-default panel-collapse" id="PanelUserPW" >
<div class="panel-heading">
<h5 class="panel-title">Enter username and password</h5>
</div>
<div class="panel-body">
<div class="form-group col-lg-12">
<label for="code"><?php echo _("Username"); ?></label>
<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>&lt;ca> ... &lt;/ca></code> tags </li>
<li>Client certificate (public key) (e.g. <code>client.crt</code>): enclosed in <code>&lt;cert> ... &lt;/cert></code> tags </li>
<li>Private key of the client certificate (e.g. <code>client.key</code>): enclosed in <code>&lt;key> ... &lt;/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>
</div>
</div><!-- /.row -->