Commit 589e159a authored by Johannes Zellner's avatar Johannes Zellner

add initial settings page

parent b4890579
......@@ -97,6 +97,10 @@ td button i.fa {
margin-bottom: 40px;
}
.toolbar {
text-align: right;
}
.btn-refresh {
font-size: 18px;
}
......@@ -154,4 +158,4 @@ td button i.fa {
.el-message-box {
width: 98%!important;
max-width: 420px;
}
\ No newline at end of file
}
......@@ -20,13 +20,12 @@
<header>
<h1><span class="hidden-xs-only">Cloudron OpenVPN</span></h1>
<el-button id="refreshButton" type="primary" v-show="user" @click="refresh()" icon="el-icon-refresh"></el-button>
<el-button id="newDeviceButton" type="success" v-show="user" @click="createKeyAsk()">New Device</el-button>
<el-button id="openSettingsButton" v-show="user && user.isAdmin" @click="view = 'settings'" icon="el-icon-setting">Settings</el-button>
<el-button id="logoutButton" v-show="user" @click="logout()">Logout</el-button>
</header>
<div class="main">
<div class="container login" v-show="!user">
<div class="container login" v-show="view === 'login'">
<h2>Login</h2>
<el-form ref="form" :model="loginForm" @submit.native.prevent="login(loginForm.username, loginForm.password)">
<el-form-item label="Username">
......@@ -40,8 +39,17 @@
</el-form-item>
</el-form>
</div>
<div class="container" v-show="user">
<h3 style="text-align: right">Connected Clients: {{ connectedClientCount }}</h3>
<div class="container" v-show="view === 'settings'">
Settings
</div>
<div class="container" v-show="view === 'devices'">
<div class="toolbar">
<el-button-group>
<el-button id="newDeviceButton" type="success" size="small" @click="createKeyAsk()" icon="el-icon-plus">New Device</el-button>
<el-button id="refreshButton" type="primary" size="small" @click="refresh()" icon="el-icon-refresh">Refresh</el-button>
</el-button-group>
</div>
<h3 style="text-align: right" v-show="entries.length">Connected Clients: {{ connectedClientCount }}</h3>
<el-table :data="entries" style="flex-basis: 100%; width: 100%" empty-text="No Devices" :row-class-name="tableRowClassName"
@row-click="toggleRowExpansion" ref="deviceTable" v-show="entries.length">
<el-table-column type="expand">
......
......@@ -3,10 +3,17 @@
(function () {
'use strict'
const VIEWS = {
LOGIN: 'login',
DEVICES: 'devices',
SETTINGS: 'settings'
}
window.app = new Vue({
el: '#app',
data: {
busy: true,
view: '',
entries: [],
user: null,
loginForm: {username: '', password: ''},
......@@ -29,6 +36,8 @@
this.user = null
this.connectedClients = {}
this.entries = []
this.view = VIEWS.LOGIN
})
},
login (username, password) {
......@@ -47,6 +56,8 @@
if (error) return console.error(error)
this.loginForm.username = ''
this.view = VIEWS.DEVICES
this.user = result.body.user
this.refresh()
......@@ -60,11 +71,13 @@
this.busy = false
if (result && result.statusCode === 401) {
this.view = VIEWS.LOGIN
this.$nextTick(() => this.$refs.usernameInput.focus())
return this.user = null
}
if (error) return console.error(error)
this.view = VIEWS.DEVICES
this.user = result.body.user
this.refresh()
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment