Update packages, change table to vue-good-table with search, fix easy…

…-rsa unrevoke - Updated outdated npm packages for frontend - Changed table to vue-good-table - Added download button - Added search - Removed context menu, actions moved to special column - Fixed unrevoke easy-rsa
vitaliy-sn · Mar 3, 2020 · 8effa9a · 8effa9a
1 parent dad1a8a
commit 8effa9a
Show file tree

Hide file tree

Showing 11 changed files with 5,435 additions and 5,032 deletions.
diff --git a/app.py b/app.py
@@ -1,6 +1,6 @@
 #!/usr/bin/env python3
 
-from flask import Flask, request
+from flask import Flask, request, make_response
 import json
 
 from openpvn import *
@@ -32,5 +32,14 @@ def route_user_unrevoke():
 def route_user_showcfg():
     return(user_showcfg(request.args.get('user')))
 
+@app.route('/api/v1/user/downloadcfg')
+def route_user_downloadcfg():
+    user = request.args.get('user')
+    filename = user.split('=')[1]
+    response = make_response(user_showcfg(user), 200)
+    response.headers['Content-Disposition'] = 'attachment;filename={}.ovpn'.format(filename)
+    response.headers['Content-Type'] = 'application/octet-stream'
+    return response
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0')
diff --git a/frontend/.babelrc b/frontend/.babelrc
@@ -1,6 +1,16 @@
 {
   "presets": [
-    ["env", { "modules": false }],
-    "stage-3"
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings"
   ]
 }
diff --git a/frontend/css/bootstrap.min.css b/frontend/css/bootstrap.min.css
diff --git a/frontend/css/bootstrap.min.css.map b/frontend/css/bootstrap.min.css.map
diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -63,3 +63,7 @@ body {
   background-color: #ffffff;
   padding: 1rem;
 }
+
+.active-row {
+  background-color: rgba(232, 245, 233, 0.5);
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,34 +8,37 @@
     <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <div id="app" @click.left.stop="u_ctx_hide">
+    <div id="app">
 
-      <div>
-        <button type="button" class="btn btn-sm btn-success el-square" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
-      </div>
-
-      <div class="dropdown-menu dropdown-custom" :style="uCtxStyle" v-show="u.ctxVisible">
-        <button class="dropdown-item" type="button" :data-name="name" :data-text="text" @click.left.stop="u_ctx_click" v-for="text, name in u.ctxMenuItems">{{text}}</button>
-      </div>
-
-      <table class="table table-bordered table-hover">
-        <thead class="thead-dark">
-          <tr>
-            <th scope="col">Name</th>
-            <th scope="col">Flag</th>
-            <th scope="col">Expiration date</th>
-            <th scope="col">Revocation date</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in u.data" :data-name="row.distinguished_name" :style="row.connection_status" @contextmenu.prevent="u_ctx_show">
-            <td>{{ row.distinguished_name }}</td>
-            <td>{{ row.flag }}</td>
-            <td>{{ row.expiration_date }}</td>
-            <td>{{ row.revocation_date }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <vue-good-table
+        :columns="columns"
+        :rows="rows"
+        :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>
+        </div>
+        <div slot="emptystate">
+          This will show up when there are no rows
+        </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-new-user-el-margin"
+              type="button"
+              :title="action.label"
+              :data-username="props.row.distinguished_name"
+              :data-name="action.name"
+              :data-text="action.label"
+              @click.left.stop="rowActionFn"
+              v-for="action in actions"
+              v-if="action.showWhenFlag == props.row.flag">
+              {{ action.label }}
+            </button>
+          </span>
+        </template>
+      </vue-good-table>
 
       <div class="modal-wrapper" v-if="u.modalNewUserVisible">
           <div class="modal-new-user">