Add frontend settings page for configuration file extension

backend/vpnathome/apps/management/migrations/0006_settings_config_file_extension.py

@@ -0,0 +1,23 @@
+# Generated by Django 2.2.4 on 2019-10-14 13:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('management', '0005_blocklisturl_last_updated'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='settings',
+            name='client_config_file_extension',
+            field=models.CharField(choices=[('ovpn', 'OVPN'), ('conf', 'CONF')], default='ovpn', max_length=10),
+        ),
+        migrations.AddField(
+            model_name='settings',
+            name='server_config_file_extension',
+            field=models.CharField(choices=[('ovpn', 'OVPN'), ('conf', 'CONF')], default='conf', max_length=10),
+        ),
+    ]

backend/vpnathome/apps/management/models.py

@@ -3,8 +3,17 @@
 
 class Settings(models.Model):
 
+    CLIENT_FILE_EXTENSION_CHOICES = [('ovpn', 'OVPN'), ('conf', 'CONF')]
+    SERVER_FILE_EXTENSION_CHOICES = [('ovpn', 'OVPN'), ('conf', 'CONF')]
+
     email_enabled = models.BooleanField(default=False)
     registration_enabled = models.BooleanField(default=True)
+    client_config_file_extension = models.CharField(choices=CLIENT_FILE_EXTENSION_CHOICES,
+            default='ovpn',
+            max_length=10)
+    server_config_file_extension = models.CharField(choices=SERVER_FILE_EXTENSION_CHOICES,
+            default='conf',
+            max_length=10)
 
     class Meta():
         verbose_name = 'settings'

backend/vpnathome/apps/management/serializers.py

@@ -11,10 +11,16 @@ class SettingsSerializer(serializers.ModelSerializer):
     email_smtp_port = serializers.SerializerMethodField()
     email_smtp_login = serializers.SerializerMethodField()
     email_smtp_password = serializers.SerializerMethodField()
+    client_config_file_extension_choices = serializers.SerializerMethodField()
+    server_config_file_extension_choices = serializers.SerializerMethodField()
 
     class Meta:
         model = Settings
-        fields = ('email_enabled',
+        fields = ('client_config_file_extension_choices',
+                  'server_config_file_extension_choices',
+                  'email_enabled',
+                  'client_config_file_extension',
+                  'server_config_file_extension',
                   'registration_enabled',
                   'email_from',
                   'email_smtp_server',
@@ -37,6 +43,19 @@ def get_email_smtp_login(self, instance):
     def get_email_smtp_password(self, instance):
         return 'hidden'
 
+    def serialize_choices(self, FILE_EXTENSION_CHOICES):
+        serialized_choices = []
+        for choice in FILE_EXTENSION_CHOICES:
+            serialized_choices.append({'value': choice[0], 'name': choice[1]})
+
+        return serialized_choices
+
+    def get_client_config_file_extension_choices(self, instance):
+        return self.serialize_choices(Settings.CLIENT_FILE_EXTENSION_CHOICES)
+
+    def get_server_config_file_extension_choices(self, instance):
+        return self.serialize_choices(Settings.SERVER_FILE_EXTENSION_CHOICES)
+
 
 class BlockListUrlUpdateSerializer(serializers.ModelSerializer):
     """

backend/vpnathome/apps/openvpn/models.py

@@ -11,6 +11,7 @@
 from django.utils.translation import gettext_lazy as _
 from django import forms
 from vpnathome import get_bin_path
+from vpnathome.apps.management.models import Settings
 
 
 User = get_user_model()
@@ -194,7 +195,9 @@ def email(self):
 
     @property
     def filename(self):
-        return "{client}--at--{server}.conf".format(client=slugify(self.name), server=slugify(self.server.name))
+        extension = Settings.instance().client_config_file_extension
+        return "{client}--at--{server}.{extension}".format(client=slugify(self.name),
+            server=slugify(self.server.name), extension=extension)
 
     @property
     def mimetype(self):

backend/vpnathome/apps/openvpn/serializers.py

@@ -5,6 +5,7 @@
 
 from rest_framework import serializers
 
+from vpnathome.apps.management.models import Settings
 from vpnathome.apps.x509.models import Ca, Cert
 
 from . import models
@@ -49,7 +50,9 @@ class Meta(ServerSerializer.Meta):
         fields = ServerSerializer.Meta.fields + ['download_url']
 
     def get_download_url(self, instance):
-        kwargs={'server_id': instance.id, 'filename': slugify(instance.name) + '.conf'}
+        extension = Settings.instance().server_config_file_extension
+        kwargs={'server_id': instance.id, 'filename': slugify(instance.name) +
+                '.%s' % extension}
         return reverse('openvpn:download-server-config', kwargs=kwargs)
 
 

frontend/src/components/settings/GeneralSettings.vue

@@ -0,0 +1,67 @@
+<template>
+    <form class="ui form" @submit.prevent="handleSubmit">
+        <div class="ui dividing small header">Config File Extension</div>
+
+        <div class="ui small header">Client</div>
+        <div class="content">
+            <div class="field" :key="extension.value" v-for="extension in settings.client_config_file_extension_choices">
+                <div class="ui radio checkbox">
+                    <input :id="extension.value" v-model="settings.client_config_file_extension" type="radio" :value="extension.value">
+                    <label :for="extension.value">{{ extension.name }}</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="ui small header">Server</div>
+        <div class="content">
+            <div class="field" :key="extension.value" v-for="extension in settings.server_config_file_extension_choices">
+                <div class="ui radio checkbox">
+                    <input :id="extension.value" v-model="settings.server_config_file_extension" type="radio" :value="extension.value">
+                    <label :for="extension.value">{{ extension.name }}</label>
+                </div>
+            </div>
+            <div class="field">
+                <button type="submit" class="ui button settings-button" role="button" @submit="{}">Save</button>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+import { Component, Vue } from 'vue-property-decorator';
+import NavigationBar from '@/components/NavigationBar.vue';
+import _ from 'lodash';
+
+@Component({
+    name: 'GeneralSettings',
+    components: {
+        NavigationBar
+    }
+})
+export default class GeneralSettings extends Vue {
+
+        settings = {
+            client_config_file_extension: 'conf',
+            server_config_file_extension: 'conf',
+            client_config_file_extension_choices: [],
+            server_config_file_extension_choices: []
+        };
+
+        handleSubmit () {
+            this.$store.dispatch('setSettings', this.settings);
+        }
+
+        mounted () {
+            this.settings.client_config_file_extension = _.cloneDeep(this.$store.state.settings.client_config_file_extension);
+            this.settings.server_config_file_extension = _.cloneDeep(this.$store.state.settings.server_config_file_extension);
+            this.settings.client_config_file_extension_choices = _.cloneDeep(this.$store.state.settings.client_config_file_extension_choices);
+            this.settings.server_config_file_extension_choices = _.cloneDeep(this.$store.state.settings.server_config_file_extension_choices);
+        }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/store.js

@@ -31,7 +31,11 @@ const INITIAL_STATE = {
     },
     settings: {
         email_enabled: window.django.email_enabled,
-        registration_enabled: window.django.registration_enabled
+        registration_enabled: window.django.registration_enabled,
+        client_config_file_extension: window.django.client_config_file_extension,
+        server_config_file_extension: window.django.server_config_file_extension,
+        client_config_file_extension_choices: [],
+        server_config_file_extension_choices: []
     }
 };
 
@@ -174,10 +178,14 @@ const actions = {
         );
     },
 
-    setSettings ({ commit }, settings) {
+    setSettings ({ commit, dispatch }, settings) {
         api.setSettings(
             settings,
-            (setting) => commit('setSettings', settings),
+            (setting) => {
+                commit('setSettings', settings);
+                dispatch('getServers');
+                dispatch('getClients');
+            },
             (_) => {}
         );
     },

frontend/src/views/Settings.vue

@@ -5,6 +5,10 @@
                 <EmailSettings/>
             </sui-tab-pane>
 
+            <sui-tab-pane icon="code file" title="General Settings">
+                <GeneralSettings/>
+            </sui-tab-pane>
+
             <sui-tab-pane icon="user" title="Registration">
                 <RegistrationSettings/>
             </sui-tab-pane>
@@ -23,6 +27,7 @@
 <script>
 import { Component, Vue } from 'vue-property-decorator';
 import EmailSettings from '@/components/settings/EmailSettings';
+import GeneralSettings from '@/components/settings/GeneralSettings';
 import RegistrationSettings from '@/components/settings/RegistrationSettings';
 import DnsFilteringSettings from '@/components/settings/DnsFilteringSettings';
 import SshKeysSettings from '@/components/settings/SshKeysSettings';
@@ -31,6 +36,7 @@ import SshKeysSettings from '@/components/settings/SshKeysSettings';
     name: 'Settings',
     components: {
         EmailSettings,
+        GeneralSettings,
         RegistrationSettings,
         DnsFilteringSettings,
         SshKeysSettings