Commit b90fe289 authored by Johannes Zellner's avatar Johannes Zellner

Move settings to a dialog instead

parent aac4cf62
......@@ -8,10 +8,6 @@
"ecmaVersion": 8
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
......@@ -20,10 +16,6 @@
"error",
"single"
],
"semi": [
2,
"never"
],
"no-console": "off"
}
}
......@@ -31,12 +31,11 @@ header {
max-width: 1024px;
margin-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #dcdfe6;
}
header > h1 {
font-size: 21px;
padding: 0 12px;
font-size: 16px;
margin: auto;
flex-basis: 100%; /* ensure all other items are pushed to the right */
}
......
......@@ -14,6 +14,7 @@
<script src="/js/lib/superagent.min.js"></script>
<script src="/js/lib/element-ui.js"></script>
<script src="/js/lib/en.js"></script>
</head>
<body>
......@@ -21,12 +22,32 @@
<header>
<h1><span class="hidden-xs-only">Cloudron OpenVPN</span></h1>
<el-button id="openSettingsButton" v-show="user && user.isAdmin && view !== 'settings'" @click="openSettings()" icon="el-icon-setting">Settings</el-button>
<el-button id="logoutButton" v-show="user" @click="logout()">Logout</el-button>
<el-button id="newDeviceButton" type="success" size="small" v-show="user" @click="createKeyAsk()" icon="el-icon-plus">New Device</el-button>
<el-button id="refreshButton" type="primary" size="small" v-show="user" @click="refresh()" icon="el-icon-refresh">Refresh</el-button>
<el-button id="openSettingsButton" size="small" v-show="user && user.isAdmin" @click="onSettingsOpen()" icon="el-icon-setting">Settings</el-button>
<el-button id="logoutButton" size="small" v-show="user" @click="logout()">Logout</el-button>
</header>
<el-dialog title="Settings" :visible.sync="settings.visible" width="30%" :close-on-click-modal="false">
<el-form ref="form" :model="settings.data" label-position="left" label-width="120px" size="small">
<el-form-item label="Network Address">
<el-input v-model="settings.data.networkAddress"></el-input>
</el-form-item>
<el-form-item label="DNS Server">
<el-input v-model="settings.data.dnsServer"></el-input>
</el-form-item>
<el-form-item label="">
<el-checkbox v-model="settings.data.allowICC">Allow Client-to-Client connection</el-checkbox>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="onSettingsClose()">Cancel</el-button>
<el-button size="small" type="primary" @click="onSettingsSave()">Save and Restart</el-button>
</span>
</el-dialog>
<div class="main">
<div class="container login" v-show="view === 'login'">
<div class="container login" v-show="!user">
<h2>Login</h2>
<el-form ref="form" :model="loginForm" @submit.native.prevent="login(loginForm.username, loginForm.password)">
<el-form-item label="Username">
......@@ -40,31 +61,7 @@
</el-form-item>
</el-form>
</div>
<div class="container" v-show="view === 'settings'">
<h2>Settings</h2>
<el-form ref="form" :model="settings" label-position="left">
<el-form-item label="Network Address">
<el-input v-model="settings.networkAddress"></el-input>
</el-form-item>
<el-form-item label="DNS Server">
<el-input v-model="settings.dnsServer"></el-input>
</el-form-item>
<el-form-item label="Allow Client-to-Client connection">
<el-switch v-model="settings.allowICC"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSettingsSave()">Save</el-button>
<el-button @click="onSettingsClose()">Close</el-button>
</el-form-item>
</el-form>
</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>
<div class="container" v-show="user">
<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">
......
/* global superagent, Vue, ELEMENT */
(function () {
'use strict'
ELEMENT.locale(ELEMENT.lang.en)
'use strict';
const VIEWS = {
LOGIN: 'login',
DEVICES: 'devices',
SETTINGS: 'settings'
}
ELEMENT.locale(ELEMENT.lang.en);
window.app = new Vue({
window.app = new Vue({
el: '#app',
data: {
busy: true,
view: '',
entries: [],
user: null,
loginForm: {username: '', password: ''},
connectedClients: {},
settings: {}
busy: true,
entries: [],
user: null,
loginForm: {username: '', password: ''},
connectedClients: {},
settings: {
visible: false,
data: {}
}
},
computed: {
connectedClientCount () {
......@@ -39,8 +36,6 @@
this.user = null
this.connectedClients = {}
this.entries = []
this.view = VIEWS.LOGIN
})
},
login (username, password) {
......@@ -60,7 +55,6 @@
this.loginForm.username = ''
this.view = VIEWS.DEVICES
this.user = result.body.user
this.refresh()
......@@ -74,13 +68,11 @@
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()
......@@ -203,36 +195,36 @@
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.settings = result.body.settings
console.log(result.body.settings)
this.settings.data = result.body.settings
})
},
onSettingsSave () {
superagent.post('/api/settings', { settings: this.settings })
superagent.post('/api/settings', { settings: this.settings.data })
.end((error, result) => {
if (result && result.statusCode === 401) {
this.$nextTick(() => this.$refs.passwordInput.focus())
return
}
if (error) return console.error(error)
if (error) return console.error(error);
this.refreshSettings()
this.view = VIEWS.DEVICES
this.onSettingsClose();
this.$message.success('Settings saved')
this.$message.success('Settings saved');
})
},
onSettingsClose () {
this.view = VIEWS.DEVICES
this.settings.visible = false;
},
openSettings () {
this.view = VIEWS.SETTINGS
this.refreshSettings()
onSettingsOpen () {
this.settings.visible = true;
this.refreshSettings();
}
}
})
......
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