irwanmohi
/
ovpn-admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ovpn-admin</title>
</head>
<body>
<script src="dist/style.min.js"></script>
<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-show="serverRole == 'master'" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
      <b-badget class="btn btn-sm btn-info el-square" v-if="serverRole == 'slave'">Slave - last sync: {{ lastSync }}</b-badget>
      <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>
      <br>
      <button type="button" class="btn btn-sm btn-success el-square" v-if="serverRole == 'master'" 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 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-bind:class="action.class"
          v-if="action.showWhenStatus == props.row.AccountStatus && action.showForServerRole.includes(serverRole) && action.showForModule.some(p=> modulesEnabled.includes(p))">
          {{ 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" v-if="modulesEnabled.includes('passwdAuth')">
        </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="createUser()">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.modalChangePasswordVisible" v-bind:style="modalChangePasswordDisplay">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Change password for: <strong>{{ username }}</strong></h4>
        </div>
        <div class="modal-body">
          <input type="password" class="form-control el-square modal-el-margin" minlength="6" autocomplete="off" placeholder="Password [_a-zA-Z0-9\.-]" v-model="u.newPassword">
        </div>

        <div class="modal-footer justify-content-center" v-if="u.passwordChangeMessage.length > 0">
          <div class="alert" v-bind:class="passwordChangeStatusCssClass" role="alert" >
            {{ u.passwordChangeMessage }}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="changeUserPassword(username)">Change password</button>
          <button type="button" class="btn btn-primary el-square d-flex justify-content-sm-end modal-el-margin" v-on:click.stop="u.newPassword='';u.passwordChangeMessage='';u.modalChangePasswordVisible=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: <strong>{{ username }}</strong></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">
          <h3 class="static-address-label ">Routes table for: <strong>{{ username }}</strong></h3>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <h5 class="static-address-label ">Static address:</h5>
            <div class="input-group-prepend">
              <div class="input-group-text">
                <input id="enable-static" type="checkbox" @change="staticAddrCheckboxOnChange()" v-if="serverRole == 'master'" v-bind:checked="!customAddressDisabled">
              </div>
            </div>
            <input id="static-address" type="text" class="form-control" v-model="u.ccd.ClientAddress" placeholder="127.0.0.1" v-bind:disabled="customAddressDisabled">
          </div>
        </div>
        <div class="modal-body">
          <div class="d-flex ">
            <table class="table table-bordered table-hover ccd-routes" >
              <thead>
                <tr>
                  <th scope="col">Address</th>
                  <th scope="col">Mask</th>
                  <th scope="col">Description</th>
                  <th scope="col" v-if="serverRole == 'master'">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(customRoute, index) in u.ccd.CustomRoutes">
                  <td>
                    <div v-if="serverRole == 'slave'">
                      {{ customRoute.Address }}
                    </div>
                    <input v-if="serverRole == 'master'" v-model="customRoute.Address">
                  </td>
                  <td>
                    <div v-if="serverRole == 'slave'">
                    {{ customRoute.Mask }}
                    </div>
                    <input v-if="serverRole == 'master'" v-model="customRoute.Mask">
                  </td>
                  <td>
                    <div v-if="serverRole == 'slave'">
                    {{ customRoute.Description }}
                    </div>
                    <input v-if="serverRole == 'master'" v-model="customRoute.Description">
                  </td>
                  <td class="text-right" v-if="serverRole == 'master'">
                      <button type="button" class="btn btn-danger btn-sm el-square modal-el-margin" v-if="serverRole == 'master'" v-on:click.stop="u.ccd.CustomRoutes.splice(index, 1)">Delete</button>
                  </td>
                </tr>
                <tr v-if="serverRole == 'master'">
                  <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 class="text-right" v-if="serverRole == 'master'">
                    <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-if="serverRole == 'master'" v-on:click.stop="ccdApply()">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>

  <notifications position="bottom left" :speed="900" />
</div>
<script src="dist/bundle.min.js"></script>
</body>
</html>