1
0
Fork 0
mirror of synced 2024-11-14 05:08:57 -05:00
ovpn-admin/frontend/static/index.html
2020-11-03 19:32:37 +03:00

156 lines
7.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<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"
:rows="filteredRows"
: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>
<button type="button" class="btn btn-sm btn-secondary el-square" v-on:click.stop="filters.hideRevoked=!filters.hideRevoked;this.$cookies.set('hideRevoked',!(this.$cookies.get('hideRevoked') == 'true'), -1);">{{ revokeFilterText }}</button>
</div>
<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>
</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>-->
<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>
<div class="modal-footer justify-content-center" v-if="u.newUserCreateError.length > 0">
<div class="alert alert-danger" role="alert" >
{{ u.newUserCreateError }}
</div>
</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>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
<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>
</div>
<input id="staticAddress" type="text" class="form-control" v-model="u.ccd.ClientAddress" placeholder="127.0.0.1" v-bind:disabled="customAddressEnabled">
</div>
</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>
</div>
</div>
</div>
<script src="dist/build.js"></script>
</body>
</html>