From 9ee5238a791da14e756d3aa2e3aba25519547528 Mon Sep 17 00:00:00 2001 From: Ivan Gromov Date: Fri, 13 Mar 2020 00:44:49 +0500 Subject: [PATCH] WIP splitting into modules --- app/static/app.js | 208 ---------------- app/static/app.vue | 433 ++++++++++++++++++++++++++++++++++ app/static/index.html | 278 +++++----------------- app/static/provider-setup.vue | 57 +++++ app/static/user-config.vue | 112 +++++++++ app/static/vpn-setup.vue | 111 +++++++++ 6 files changed, 772 insertions(+), 427 deletions(-) delete mode 100644 app/static/app.js create mode 100644 app/static/app.vue create mode 100644 app/static/provider-setup.vue create mode 100644 app/static/user-config.vue create mode 100644 app/static/vpn-setup.vue diff --git a/app/static/app.js b/app/static/app.js deleted file mode 100644 index 3d5f2ac..0000000 --- a/app/static/app.js +++ /dev/null @@ -1,208 +0,0 @@ -new Vue({ - el: '#users_app', - data: { - config: {}, - loading: false, - new_user: '', - save_config_message: '' - }, - created: function() { - this.load_config(); - }, - methods: { - add_user: function() { - this.config.users.push(this.new_user); - this.new_user = ''; - }, - remove_user: function(index) { - this.config.users.splice(index, 1); - }, - save_config: function() { - if (this.loading) return; - this.loading = true; - fetch('/config', { - method: 'POST', - body: JSON.stringify(this.config), - headers: { - 'Content-Type': 'application/json' - } - }) - .then(r => r.json()) - .then(result => { - if (result.ok) { - this.ok = true; - this.save_config_message = 'Saved!'; - setTimeout(() => { - this.save_config_message = ''; - }, 1000); - } else { - this.ok = false; - this.save_config_message = 'Not Saved!'; - setTimeout(() => { - this.save_config_message = ''; - }, 1000); - } - }) - .finally(() => { - this.loading = false; - }); - }, - load_config: function() { - this.loading = true; - fetch('/config') - .then(r => r.json()) - .then(config => { - this.config = config; - }) - .finally(() => { - this.loading = false; - }); - } - } -}); - -var vpn_options_extra_args = { - server_name: 'algo', - ondemand_cellular: false, - ondemand_wifi: false, - dns_adblocking: false, - ssh_tunneling: false, - store_pki: false, - ondemand_wifi_exclude: '' -}; - -new Vue({ - el: '#options_app', - data: { - extra_args: vpn_options_extra_args - } -}); - -var provider_extra_args = { - provider: null -}; - -new Vue({ - el: '#provider_app', - data: { - loading: false, - do_region_loading: false, - do_regions: [], - extra_args: provider_extra_args, - providers_map: [ - { name: 'DigitalOcean', alias: 'digitalocean' }, - { name: 'Amazon Lightsail', alias: 'lightsail' }, - { name: 'Amazon EC2', alias: 'ec2' }, - { name: 'Microsoft Azure', alias: 'azure' }, - { name: 'Google Compute Engine', alias: 'gce' }, - { name: 'Hetzner Cloud', alias: 'hetzner' }, - { name: 'Vultr', alias: 'vultr' }, - { name: 'Scaleway', alias: 'scaleway' }, - { name: 'OpenStack (DreamCompute optimised)', alias: 'openstack' }, - { name: 'CloudStack (Exoscale optimised)', alias: 'cloudstack' }, - { - name: 'Install to existing Ubuntu 18.04 or 19.04 server (Advanced)', - alias: 'local' - } - ] - }, - methods: { - set_provider(provider) { - this.extra_args.provider = provider; - }, - load_do_regions: function() { - if ( - this.extra_args.provider === 'digitalocean' && - this.extra_args.do_token - ) { - this.loading = true; - this.do_region_loading = true; - fetch('/do/regions', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ token: this.extra_args.do_token }) - }) - .then(r => r.json()) - .then(r => { - this.do_regions = r.regions; - }) - .finally(() => { - this.loading = false; - this.do_region_loading = false; - }); - } - } - } -}); - -new Vue({ - el: '#status_app', - data: { - status: null, - program: null, - result: null, - error: null, - // shared data, do not write there - vpn_options_extra_args, - provider_extra_args, - }, - created() { - this.loop = setInterval(this.get_status, 1000); - }, - computed: { - extra_args() { - return Object.assign({}, this.vpn_options_extra_args, this.provider_extra_args); - }, - cli_preview() { - var args = ''; - for (arg in this.extra_args) { - args += `${arg}=${this.extra_args[arg]} `; - } - return `ansible-playbook main.yml --extra-vars ${args}`; - }, - show_backdrop() { - return this.status === 'running'; - }, - is_success() { - return this.result === 0; - } - }, - watch: { - status: function () { - if (this.status === 'done') { - clearInterval(this.loop); - } - } - }, - methods: { - run() { - fetch('/playbook', { - method: 'POST', - body: JSON.stringify(this.extra_args), - headers: { - 'Content-Type': 'application/json' - } - }); - }, - stop() { - fetch('/playbook', { - method: 'DELETE' - }); - }, - get_status() { - fetch('/playbook') - .then(r => r.json()) - .then(status => { - this.status = status.status; - this.program = status.program; - this.result = status.result; - }) - .catch(err => { - alert('Server error'); - clearInterval(this.loop); - }); - } - } -}); diff --git a/app/static/app.vue b/app/static/app.vue new file mode 100644 index 0000000..243d50b --- /dev/null +++ b/app/static/app.vue @@ -0,0 +1,433 @@ + + + + + diff --git a/app/static/index.html b/app/static/index.html index d517902..d391bca 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -1,227 +1,67 @@ + Algo VPN - - - - + + + + + -
-
-

Algo VPN Setup

-
-
-

Users

-
-

Set up user list

-
    -
  • - {{ user }} - -
    • -
-
- -
- - -
- -
-
-
-
-
- - {{save_config_message}} -
-
-
-

VPN Options

-
-
- - -
- -
- -
-
- -
- -
- - - - List the names of any trusted Wi-Fi networks where - macOS/iOS - IPsec clients should not use "Connect On Demand" - (e.g., your home network. Comma-separated value, e.g., - HomeNet,OfficeWifi,AlgoWiFi) - -
- -
- - -
- -
- -
- -
- -
-
-
-
-
-
-

Select cloud provider

-
-
- -
-
-
-

Digital Ocean Options

-
- - -
-
- - - - -
-
-
-
-
+
+

{{ title }}

+
+ +
-
-
-
- -
-
-
- 
{{cli_preview}}
- -
-
- 
{{program.join(' ')}}
- - -
-
- 
{{program.join(' ')}}
-
Done!
-
Failed!
-
-
-
- + + +
+ + - + + \ No newline at end of file diff --git a/app/static/provider-setup.vue b/app/static/provider-setup.vue new file mode 100644 index 0000000..faf5356 --- /dev/null +++ b/app/static/provider-setup.vue @@ -0,0 +1,57 @@ + + + \ No newline at end of file diff --git a/app/static/user-config.vue b/app/static/user-config.vue new file mode 100644 index 0000000..4e61f32 --- /dev/null +++ b/app/static/user-config.vue @@ -0,0 +1,112 @@ + + + \ No newline at end of file diff --git a/app/static/vpn-setup.vue b/app/static/vpn-setup.vue new file mode 100644 index 0000000..75a4143 --- /dev/null +++ b/app/static/vpn-setup.vue @@ -0,0 +1,111 @@ + + + \ No newline at end of file