2020-05-14 19:13:33 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2020-10-29 06:50:19 -04:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>openvpn-admin</title>
|
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<vue-good-table
|
|
|
|
|
:columns="columns"
|
2020-11-02 11:30:36 -05:00
|
|
|
:rows="filteredRows"
|
2020-10-29 06:50:19 -04:00
|
|
|
:line-numbers="true"
|
|
|
|
|
:row-style-class="rowStyleClassFn"
|
|
|
|
|
:search-options="{ enabled: true}" >
|
|
|
|
|
<div slot="table-actions">
|
|
|
|
|
<button type="button" class="btn btn-sm btn-success el-square" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
|
2020-11-02 11:30:36 -05:00
|
|
|
<button type="button" class="btn btn-sm btn-secondary el-square" v-on:click.stop="filters.hide_revoked=!filters.hide_revoked" v-show="filters.hide_revoked">Show revoked</button>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-secondary el-square" v-on:click.stop="filters.hide_revoked=!filters.hide_revoked" v-show="!filters.hide_revoked">Hide revoked</button>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
2020-11-02 11:30:36 -05:00
|
|
|
<div slot="emptystate" class="d-flex justify-content-center">
|
|
|
|
|
<h4>No users have been created yet.</h4>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-success el-square" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
<template slot="table-row" slot-scope="props">
|
|
|
|
|
<span v-if="props.column.field == 'actions'">
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-sm btn-success el-square modal-el-margin"
|
|
|
|
|
type="button"
|
|
|
|
|
:title="action.label"
|
|
|
|
|
:data-username="props.row.Identity"
|
|
|
|
|
:data-name="action.name"
|
|
|
|
|
:data-text="action.label"
|
|
|
|
|
@click.left.stop="rowActionFn"
|
|
|
|
|
v-for="action in actions"
|
|
|
|
|
v-if="action.showWhenStatus == props.row.AccountStatus">
|
|
|
|
|
{{ action.label }}
|
|
|
|
|
</button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</vue-good-table>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="d-flex justify-content-md-end">-->
|
|
|
|
|
<!-- <button type="button" class="btn btn-sm btn-success el-square new-user-btn" v-on:click.stop="u.ctxVisible=false;u.modalNewUserVisible=true">Add user</button>-->
|
|
|
|
|
<!-- </div>-->
|
2020-05-14 19:13:33 -04:00
|
|
|
|
2020-10-29 06:50:19 -04:00
|
|
|
<div class="modal-wrapper" v-if="u.modalNewUserVisible" v-bind:style="modalNewUserDisplay">
|
|
|
|
|
<div class="modal-dialog modal-lg">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h4>Add new user </h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<input type="text" class="form-control el-square modal-el-margin" placeholder="Username [_a-zA-Z0-9\.-]" v-model="u.newUserName">
|
|
|
|
|
<!-- <input type="password" class="form-control el-square modal-el-margin" minlength="6" autocomplete="off" placeholder="Password [_a-zA-Z0-9\.-]" v-model="u.newUserPassword">-->
|
|
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
|
2020-10-29 06:50:19 -04:00
|
|
|
<div class="modal-footer justify-content-center" v-if="u.newUserCreateError.length > 0">
|
|
|
|
|
<div class="alert alert-danger" role="alert" >
|
|
|
|
|
{{ u.newUserCreateError }}
|
2020-05-14 19:13:33 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="create_user();">Create</button>
|
|
|
|
|
<button type="button" class="btn btn-primary el-square d-flex justify-content-sm-end modal-el-margin" v-on:click.stop="u.newUserName='';u.newUserPassword='nopass';u.modalNewUserVisible=false">Close</button>
|
|
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
|
2020-10-29 06:50:19 -04:00
|
|
|
<div class="modal-wrapper" v-if="u.modalShowConfigVisible" v-bind:style="modalShowConfigDisplay">
|
|
|
|
|
<div class="modal-dialog modal-lg">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h4>ovpn config for {{ username }}</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="d-flex">
|
|
|
|
|
<pre class="modal-show-config-txt-box">{{ u.openvpnConfig }}</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<div class="d-flex">
|
|
|
|
|
<button type="button" class="btn btn-success el-square modal-el-margin" v-clipboard:copy="u.openvpnConfig">Copy </button>
|
|
|
|
|
<button type="button" class="btn btn-primary el-square modal-el-margin" v-on:click.stop="u.openvpnConfig='';u.modalShowConfigVisible=false">Cancel</button>
|
2020-05-14 19:13:33 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
|
2020-10-29 06:50:19 -04:00
|
|
|
<div class="modal-wrapper" v-if="u.modalShowCcdVisible" v-bind:style="modalShowCcdDisplay">
|
|
|
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<h4 class="static-address-label ">Client "{{ username }}" static address</h4>
|
|
|
|
|
<div class="input-group-prepend">
|
|
|
|
|
<div class="input-group-text">
|
|
|
|
|
<input id="enable-static" type="checkbox" onchange="document.getElementById('staticAddress').disabled=!this.checked;" v-bind:checked="!customAddressEnabled">
|
|
|
|
|
</div>
|
2020-10-15 12:12:31 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
<input id="staticAddress" type="text" class="form-control" v-model="u.ccd.ClientAddress" placeholder="127.0.0.1" v-bind:disabled="customAddressEnabled">
|
2020-10-15 12:12:31 -04:00
|
|
|
</div>
|
|
|
|
|
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="d-flex ">
|
|
|
|
|
<table class="table table-bordered table-hover">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th scope="col">Address</th>
|
|
|
|
|
<th scope="col">Mask</th>
|
|
|
|
|
<th scope="col">Description</th>
|
|
|
|
|
<th scope="col">Action</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(customRoute, index) in u.ccd.CustomRoutes">
|
|
|
|
|
<td>{{ customRoute.Address }}</td>
|
|
|
|
|
<td>{{ customRoute.Mask }}</td>
|
|
|
|
|
<td>{{ customRoute.Description }}</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm el-square modal-el-margin" v-on:click.stop="u.ccd.CustomRoutes.splice(index, 1)">Delete</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><input type="text" v-model="u.newRoute.Address"/></td>
|
|
|
|
|
<td><input type="text" v-model="u.newRoute.Mask"/></td>
|
|
|
|
|
<td><input type="text" v-model="u.newRoute.Description"/></td>
|
|
|
|
|
<td>
|
|
|
|
|
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="u.ccd.CustomRoutes.push(u.newRoute);u.newRoute={};">Add</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer justify-content-center" v-if="u.ccdApplyStatusMessage.length > 0">
|
|
|
|
|
<div class="alert" v-bind:class="ccdApplyStatusCssClass" role="alert">
|
|
|
|
|
{{ u.ccdApplyStatusMessage }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="ccd_apply()">Save</button>
|
|
|
|
|
<button type="button" class="btn btn-primary el-square modal-el-margin" v-on:click.stop="u.ccd={Name:'',ClientAddress:'',CustomRoutes:[]};u.ccdApplyStatusMessage='';u.ccdApplyStatus='';u.modalShowCcdVisible=false">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-05-14 19:13:33 -04:00
|
|
|
</div>
|
2020-10-29 06:50:19 -04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<script src="dist/build.js"></script>
|
|
|
|
|
</body>
|
2020-05-14 19:13:33 -04:00
|
|
|
</html>
|
