add experimental option feature in TooWebAdmin

app/src/i18n/locales/en.json

@@ -125,6 +125,7 @@
     "error_server_unexpected": "Unexpected server error (%s)",
     "error_connection_interrupted": "The server closed the connection instead of answering it. Has nginx or the yunohost-api been restarted or stoppted for some reason? (Error code/message: %s)",
     "everything_good": "Everything good!",
+    "experimental": "Experimental",
     "experimental_warning": "Warning: this feature is experimental and not consider stable, you shouldn't be using it except if you know what you are doing.",
     "firewall": "Firewall",
     "footer": {
@@ -349,7 +350,9 @@
         "locale": "Locale",
         "fallback_locale": "Fallback locale",
         "cache": "Cache",
-        "cache_description": "Consider disabling the cache if you plan on working with the CLI while also navigating in this web-admin."
+        "cache_description": "Consider disabling the cache if you plan on working with the CLI while also navigating in this web-admin.",
+        "experimental": "Experimental mode",
+        "experimental_description": "Gives you access to experimental features. These are considered unstable and may break your system.<br> Enabled this only if you know what you are doing."
     },
     "tools_webadmin_settings": "Web-admin settings",
     "udp": "UDP",

app/src/store/settings.js

@@ -12,6 +12,7 @@ export default {
     locale: localStorage.getItem('locale'),
     fallbackLocale: localStorage.getItem('fallbackLocale'),
     cache: localStorage.getItem('cache') !== 'false',
+    experimental: localStorage.getItem('experimental') === 'true',
     supportedLocales: supportedLocales
   },
 
@@ -26,9 +27,14 @@ export default {
       state.fallbackLocale = locale
     },
 
-    'SET_CACHE' (state, enable) {
-      localStorage.setItem('cache', enable)
-      state.cache = enable
+    'SET_CACHE' (state, boolean) {
+      localStorage.setItem('cache', boolean)
+      state.cache = boolean
+    },
+
+    'SET_EXPERIMENTAL' (state, boolean) {
+      localStorage.setItem('experimental', boolean)
+      state.experimental = boolean
     }
   },
 
@@ -55,6 +61,7 @@ export default {
     locale: state => (state.locale),
     fallbackLocale: state => (state.fallbackLocale),
     cache: state => (state.cache),
+    experimental: state => state.experimental,
 
     availableLocales: state => {
       return Object.entries(state.supportedLocales).map(([locale, { name }]) => {

app/src/views/tool/ToolWebadmin.vue

@@ -1,7 +1,10 @@
 <template>
   <basic-form :header="$t('tools_webadmin_settings')" @submit.prevent="onSubmit" no-footer>
     <!-- LOCALE -->
-    <b-form-group label-cols="auto" :label="$t('tools_webadmin.locale')" label-for="locale">
+    <b-form-group
+      label-cols="0" label-cols-lg="2" label-class="font-weight-bold"
+      :label="$t('tools_webadmin.locale')" label-for="locale"
+    >
       <b-select
         id="locale"
         :options="availableLocales"
@@ -11,7 +14,10 @@
     <hr>
 
     <!-- FALLBACK LOCALE -->
-    <b-form-group label-cols="auto" :label="$t('tools_webadmin.fallback_locale')" label-for="fallback-locale">
+    <b-form-group
+      label-cols="0" label-cols-lg="2" label-class="font-weight-bold"
+      :label="$t('tools_webadmin.fallback_locale')" label-for="fallback-locale"
+    >
       <b-select
         id="fallback-locale"
         :options="availableLocales"
@@ -21,17 +27,38 @@
     <hr>
 
     <!-- CACHE -->
-    <b-form-group label-cols="auto" :label="$t('tools_webadmin.cache')" label-for="cache">
-      <template v-slot:description>
-        <b-alert variant="info" show v-t="'tools_webadmin.cache_description'" />
-      </template>
-
-      <b-checkbox
-        v-model="currentCache"
-        switch
-      >
+    <b-form-group
+      label-cols="0" label-cols-lg="2"
+      :label="$t('tools_webadmin.cache')" label-for="cache" label-class="font-weight-bold"
+    >
+      <b-checkbox v-model="currentCache" id="cache" switch>
         {{ $t(currentCache ? 'enabled' : 'disabled') }}
       </b-checkbox>
+
+      <template v-slot:description>
+        {{ $t('tools_webadmin.cache_description') }}
+      </template>
+    </b-form-group>
+
+    <hr>
+
+    <!-- EXPERIMENTAL MODE -->
+    <b-form-group
+      label-cols="0" label-cols-lg="2" label-class="font-weight-bold"
+      label-for="experimental"
+    >
+      <template v-slot:label>
+        {{ $t('tools_webadmin.experimental') }}
+        <icon iname="flask" />
+      </template>
+
+      <b-checkbox v-model="currentExperimental" id="experimental" switch>
+        {{ $t(currentExperimental ? 'enabled' : 'disabled') }}
+      </b-checkbox>
+
+      <template v-slot:description>
+        <span v-html="$t('tools_webadmin.experimental_description')" />
+      </template>
     </b-form-group>
   </basic-form>
 </template>
@@ -48,6 +75,7 @@ export default {
       'locale',
       'fallbackLocale',
       'cache',
+      'experimental',
       'availableLocales'
     ]),
 
@@ -70,6 +98,13 @@ export default {
       set: function (newValue) {
         this.$store.commit('SET_CACHE', newValue)
       }
+    },
+
+    currentExperimental: {
+      get: function () { return this.experimental },
+      set: function (newValue) {
+        this.$store.commit('SET_EXPERIMENTAL', newValue)
+      }
     }
   },