From 8a792ce5669cd58db3a1a795f48f406e8a20c730 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 11:48:54 +0300
Subject: [PATCH 01/51] Add a separate switch component

---
 .../components/new/BaseFormGroupSwitch.vue    | 120 ++++++++
 .../src/components/new/BaseInputSwitch.vue    | 288 ++++++++++++++++++
 2 files changed, 408 insertions(+)
 create mode 100644 html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
 create mode 100644 html/pfappserver/root/src/components/new/BaseInputSwitch.vue

diff --git a/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue b/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
new file mode 100644
index 000000000000..6da2e248a266
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
@@ -0,0 +1,120 @@
+<template>
+  <base-form-group
+    class="form-group base-form-group-switch"
+    :column-label="columnLabel"
+    :content-cols="contentCols"
+    :content-cols-sm="contentColsSm"
+    :content-cols-md="contentColsMd"
+    :content-cols-lg="contentColsLg"
+    :content-cols-xl="contentColsXl"
+    :label-class="labelClass"
+    :label-cols="labelCols"
+    :label-cols-sm="labelColsSm"
+    :label-cols-md="labelColsMd"
+    :label-cols-lg="labelColsLg"
+    :label-cols-xl="labelColsXl"
+    :text="text"
+    :state="inputState"
+    :invalid-feedback="inputInvalidFeedback"
+    :valid-feedback="inputValidFeedback"
+  >
+    <base-input-switch :namespace="namespace"
+      :disabled="isLocked"
+      :size="size"
+      :enabled-value="enabledValue"
+      :disabled-value="disabledValue"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <template v-slot:prepend v-if="$slots.prepend">
+      <slot name="prepend"></slot>
+    </template>
+    <template v-slot:append v-if="$slots.append">
+      <slot name="append"></slot>
+    </template>
+  </base-form-group>
+</template>
+<script>
+import { useFormGroupProps } from '@/composables/useFormGroup'
+import { useInput, useInputProps } from '@/composables/useInput'
+import { useInputMeta, useInputMetaProps } from '@/composables/useMeta'
+import { useInputValidator, useInputValidatorProps } from '@/composables/useInputValidator'
+import { useInputValue, useInputValueProps } from '@/composables/useInputValue'
+import BaseFormGroup from './BaseFormGroup'
+import BaseInputSwitch, {useSwitchProps} from './BaseInputSwitch.vue'
+
+const components = {
+  BaseFormGroup,
+  BaseInputSwitch
+}
+
+export const props = {
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  ...useSwitchProps,
+  ...useFormGroupProps,
+  ...useInputProps,
+  ...useInputMetaProps,
+  ...useInputValidatorProps,
+  ...useInputValueProps,
+}
+
+export const setup = (props, context) => {
+  const metaProps = useInputMeta(props, context)
+
+  const {
+    tabIndex,
+    text,
+    isLocked,
+    onFocus,
+    onBlur
+  } = useInput(metaProps, context)
+
+  const {
+    value,
+    onInput
+  } = useInputValue(metaProps, context)
+
+  const {
+    state,
+    invalidFeedback,
+    validFeedback
+  } = useInputValidator(metaProps, value)
+
+  return {
+    // useInput
+    inputTabIndex: tabIndex,
+    inputText: text,
+    inputValue: value,
+    isLocked,
+    onFocus,
+    onBlur,
+    onInput,
+
+    // useInputValidator
+    inputState: state,
+    inputInvalidFeedback: invalidFeedback,
+    inputValidFeedback: validFeedback
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-form-group-switch',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
+<style lang="scss">
+.base-form-group-switch {
+  .input-group {
+    padding-bottom: 0px !important;
+  }
+}
+</style>
diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
new file mode 100644
index 000000000000..abbd8ef9f71c
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="base-input-switch-wrapper">
+    <div
+      class="base-input-switch"
+      :class="{
+        'is-focus': isFocus,
+        'is-blur': !isFocus,
+        'is-disabled': isLocked,
+        'size-sm': size === 'sm',
+        'size-md': size === 'md',
+        'size-lg': size === 'lg',
+        'switch-enabled' : rangeValue === 1,
+      }"
+      :index="inputValue"
+      @click.stop
+    >
+      <div style="pointer-events: none;">
+        <span :class="[
+          'handle',
+          rangeValue === 1 ? 'handle-on' : 'handle-off'
+        ]">
+          <icon v-if="isLocked" name="lock"/>
+          <icon v-else-if="icon" :name="icon"/>
+          <slot v-else/> <!-- Icon slot -->
+        </span>
+      </div>
+      <input type="range" ref="input"
+             :tabIndex="tabIndex"
+             :value="rangeValue"
+             :step="1"
+             :max="1"
+             :min="0"
+             :disabled="isLocked"
+             @mouseup="onClick"
+             @focus="onFocus"
+             @blur="onBlur"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {useInput, useInputProps} from '@/composables/useInput'
+import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
+import {useInputValidatorProps} from '@/composables/useInputValidator'
+import {setFormNamespace, useInputValue, useInputValueProps} from '@/composables/useInputValue'
+import {computed, inject, unref} from '@vue/composition-api';
+import _ from 'lodash'
+
+export const useSwitchProps = {
+  enabledValue: {
+    default: true
+  },
+  disabledValue: {
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  value: {
+    default: null
+  },
+  disabled: {
+    type: Boolean
+  },
+  icon: {
+    type: String
+  },
+  color: {  // override default colors via JS
+    type: String
+  },
+  hints: { // dots/pills in range for hints (eg: [1, [1-2], 2])
+    type: Array,
+    default: () => ([])
+  }
+}
+
+export const props = {
+  ...useInputProps,
+  ...useInputMetaProps,
+  ...useInputValidatorProps,
+  ...useInputValueProps,
+  ...useSwitchProps,
+}
+
+export const setup = (props, context) => {
+
+  const form = inject('form')
+
+  const metaProps = useInputMeta(props, context)
+
+  const {
+    placeholder,
+    readonly,
+    tabIndex,
+    text,
+    type,
+    isFocus,
+    isLocked,
+    onFocus,
+    onBlur
+  } = useInput(metaProps, context)
+
+  const {
+    value,
+  } = useInputValue(metaProps, context)
+
+  //TODO reuse this in ldap selector
+  const onChange = (value) => {
+    setFormNamespace(props.namespace.split('.'), unref(form), value)
+  }
+
+  const rangeValue = computed(() => {
+    return _.isEqual(unref(value), props.enabledValue) ? 1 : 0
+  })
+
+  const toggle = () => {
+    if (_.isEqual(unref(value), props.enabledValue)) {
+      onChange(props.disabledValue)
+    } else {
+      onChange(props.enabledValue)
+    }
+  }
+
+  return {
+    inputPlaceholder: placeholder,
+    inputReadonly: readonly,
+    inputTabIndex: tabIndex,
+    inputText: text,
+    inputType: type,
+    isFocus,
+    isLocked,
+    onFocus,
+    onBlur,
+    inputValue: value,
+    rangeValue,
+    onClick: toggle,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-input-switch',
+  inheritAttrs: false,
+  props,
+  setup
+}
+</script>
+
+<style lang="scss">
+
+:root {
+  --range-length: 2;
+  --range-height: 22px;
+  --range-background-color: #{$input-placeholder-color};
+  --range-transition-delay: 0.3s;
+  --handle-height: 16px;
+  --handle-background-color: var(--white);
+  --handle-transition-delay: 0.3s;
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, #adb5bd);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out, box-shadow var(--range-transition-delay) ease-out, outline var(--range-transition-delay) ease-out;
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+}
+
+div.base-input-switch-wrapper {
+  border: none;
+}
+
+.base-input-switch .handle-on {
+  left: 100%;
+}
+
+.base-input-switch .handle-off {
+  left: 0;
+}
+
+div.base-input-switch.switch-enabled {
+  background-color: var(--primary);
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, $input-placeholder-color);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out,
+  box-shadow var(--range-transition-delay) ease-out,
+  outline var(--range-transition-delay) ease-out;
+
+  &.size-sm {
+    --handle-height: 8px;
+    --range-height: 12px;
+    width: calc(var(--range-length) * 10px);
+  }
+
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+
+  &.size-lg {
+    --handle-height: 32px;
+    --range-height: 44px;
+    width: calc(var(--range-length) * 40px);
+  }
+
+  &.is-focus {
+    box-shadow: 0 0 0 1px $input-focus-border-color;
+
+    .handle {
+      box-sizing: border-box;
+      border: 2px solid #fff;
+      background-color: rgba(0, 0, 0, 1);
+      animation: animateCursor 2s infinite;
+    }
+  }
+
+  &.is-invalid {
+    box-shadow: 0 0 0 1px $form-feedback-invalid-color;
+  }
+
+  &.is-disabled {
+    background-color: var(--range-background-color, $input-disabled-bg);
+    opacity: 0.6;
+
+    > .handle svg {
+      color: var(--range-background-color, $input-disabled-bg);
+    }
+  }
+
+  > div {
+    position: absolute;
+    right: calc(var(--range-height) / 2);
+    left: calc(var(--range-height) / 2);
+    height: var(--range-height);
+
+    > .handle {
+      position: absolute;
+      top: calc((var(--range-height) - var(--handle-height)) / 2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: var(--handle-height);
+      height: var(--handle-height);
+      margin-left: calc(var(--handle-height) / -2);
+      border-radius: 50%;
+      outline: none;
+      background-color: var(--handle-background-color);
+      color: var(--range-background-color, $input-placeholder-color); /* SVG icon */
+      font-size: 10px;
+      text-align: left;
+      transition: left var(--handle-transition-delay, 0s) ease-in-out,
+      background-color var(--range-transition-delay) ease-out,
+      color var(--range-transition-delay) ease-out;
+    }
+  }
+
+  > input[type=range] {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+    -webkit-appearance: none;
+    opacity: 0;
+  }
+}
+</style>

From 1aeeb3e036a9e97a3788650d9bab093f883c0a48 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 15:25:51 +0300
Subject: [PATCH 02/51] Change switch form to use switch UI components

---
 .../src/views/Configuration/switches/_components/TheForm.vue   | 2 ++
 .../root/src/views/Configuration/switches/_components/index.js | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue
index e65175222490..e4fb63fad0dd 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue
@@ -40,6 +40,8 @@
         <form-group-deauth-on-previous namespace="deauthOnPrevious"
           :column-label="$i18n.t('Deauth on previous switch')"
           :text="$i18n.t('This option parameter will allow you to do the deauthentication/CoA on the previous switch where the device was connected.')"
+          enabled-value="Y"
+          disabled-value="N"
         />
 
         <form-group-external-portal-enforcement namespace="ExternalPortalEnforcement"
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/index.js b/html/pfappserver/root/src/views/Configuration/switches/_components/index.js
index a51177b714b6..994f6e5dfb90 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/index.js
@@ -9,6 +9,7 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
   BaseFormGroupTextarea,
+  BaseFormGroupSwitch
 } from '@/components/new/'
 import BaseFormGroupInlineTrigger from './BaseFormGroupInlineTrigger'
 import BaseFormGroupToggleStaticDynamicDefault from './BaseFormGroupToggleStaticDynamicDefault'
@@ -73,7 +74,7 @@ export {
   BaseFormGroupInput                      as FormGroupDownloadableAclsLimit,
   BaseFormGroupInput                      as FormGroupAclsLimit,
   BaseFormGroupToggleNYDefault            as FormGroupToggleAccessListMap,
-  BaseFormGroupToggleNYDefault            as FormGroupDeauthOnPrevious,
+  BaseFormGroupSwitch                     as FormGroupDeauthOnPrevious,
   BaseFormGroupToggleNYDefault            as FormGroupToggleRoleMap,
   BaseFormGroupToggleNYDefault            as FormGroupToggleVpnMap,
   BaseFormGroupToggleNYDefault            as FormGroupToggleUrlMap,

From 52cde370d9ed8817e64d5eaf1e977c913c1778c7 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 15:28:46 +0300
Subject: [PATCH 03/51] Change roles form to use switch UI components

---
 .../roles/_components/TheForm.vue             | 48 +++++++++++--------
 .../Configuration/roles/_components/index.js  | 16 +++----
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheForm.vue
index c4c766b7bc24..ce1f272ecf0f 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheForm.vue
@@ -6,56 +6,66 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-notes namespace="notes"
-      :column-label="$i18n.t('Description')"
+                      :column-label="$i18n.t('Description')"
     />
 
     <form-group-parent-identifier namespace="parent_id"
-      :column-label="$i18n.t('Parent role')"
+                                  :column-label="$i18n.t('Parent role')"
     />
 
     <form-group-max-nodes-per-pid namespace="max_nodes_per_pid"
-      type="number"
-      :column-label="$i18n.t('Max nodes per user')"
-      :text="$i18n.t('The maximum number of nodes a user having this role can register. A number of 0 means unlimited number of devices.')"
+                                  type="number"
+                                  :column-label="$i18n.t('Max nodes per user')"
+                                  :text="$i18n.t('The maximum number of nodes a user having this role can register. A number of 0 means unlimited number of devices.')"
     />
 
     <form-group-include-parent-acls namespace="include_parent_acls"
-      :column-label="$i18n.t('Include Parent ACLs')"
+                                    :column-label="$i18n.t('Include Parent ACLs')"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
     />
 
     <form-group-fingerbank-dynamic-access-list namespace="fingerbank_dynamic_access_list"
-      :column-label="$i18n.t('Fingerbank Dynamic ACLs')"
-      :text="$i18n.t('Use the Fingerbank dynamic ACLS')"
+                                               :column-label="$i18n.t('Fingerbank Dynamic ACLs')"
+                                               :text="$i18n.t('Use the Fingerbank dynamic ACLS')"
+                                               enabled-value="enabled"
+                                               disabled-value="disabled"
     />
 
     <form-group-acls namespace="acls"
-      :column-label="$i18n.t('ACLs')"
-      :text="$i18n.t('Access Control Lists')"
+                     :column-label="$i18n.t('ACLs')"
+                     :text="$i18n.t('Access Control Lists')"
     />
 
     <form-group-inherit-vlan namespace="inherit_vlan"
-      :column-label="$i18n.t('Inherit VLAN')"
-      :text="$i18n.t('Inherit VLAN from parent if none is found')"
+                             :column-label="$i18n.t('Inherit VLAN')"
+                             :text="$i18n.t('Inherit VLAN from parent if none is found')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-inherit-role namespace="inherit_role"
-      :column-label="$i18n.t('Inherit Role')"
-      :text="$i18n.t('Inherit Role from parent if none is found')"
+                             :column-label="$i18n.t('Inherit Role')"
+                             :text="$i18n.t('Inherit Role from parent if none is found')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-inherit-web-auth-url namespace="inherit_web_auth_url"
-      :column-label="$i18n.t('Inherit Web Auth URL')"
-      :text="$i18n.t('Inherit Web Auth URL from parent if none is found')"
+                                     :column-label="$i18n.t('Inherit Web Auth URL')"
+                                     :text="$i18n.t('Inherit Web Auth URL from parent if none is found')"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
+import {computed} from '@vue/composition-api'
 import {
   BaseForm
 } from '@/components/new/'
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/index.js b/html/pfappserver/root/src/views/Configuration/roles/_components/index.js
index c6fa4c28d88d..6221d999b664 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/index.js
@@ -1,10 +1,10 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
-  BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
+  BaseFormGroupTextarea
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -16,12 +16,12 @@ export {
   BaseFormGroupInput                  as FormGroupNotes,
   BaseFormGroupInput                  as FormGroupMaxNodesPerPid,
   BaseFormGroupChosenOne              as FormGroupParentIdentifier,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupIncludeParentAcls,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFingerbankDynamicAccessList,
+  BaseFormGroupSwitch                 as FormGroupIncludeParentAcls,
+  BaseFormGroupSwitch                 as FormGroupFingerbankDynamicAccessList,
   BaseFormGroupTextarea               as FormGroupAcls,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupInheritVlan,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupInheritRole,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupInheritWebAuthUrl,
+  BaseFormGroupSwitch                 as FormGroupInheritVlan,
+  BaseFormGroupSwitch                 as FormGroupInheritRole,
+  BaseFormGroupSwitch                 as FormGroupInheritWebAuthUrl,
 
   BaseViewCollectionItem              as BaseView,
   TheForm,

From bc118d3d603968e7f61d6ece249c63193f891d7e Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 16:11:16 +0300
Subject: [PATCH 04/51] Change domains form to use switch UI components

---
 .../domains/_components/TheForm.vue           | 64 ++++++++++---------
 .../domains/_components/index.js              | 11 ++--
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
index 8af998604fa7..2d864cf8319c 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
@@ -6,64 +6,70 @@
     :isLoading="isLoading"
   >
     <base-button-join v-if="!isNew && !isClone"
-      :id="id"
-      size="sm" variant="outline-primary" class="mx-3 mb-3" toggle-class="text-wrap"
+                      :id="id"
+                      size="sm" variant="outline-primary" class="mx-3 mb-3" toggle-class="text-wrap"
     />
     <b-tabs>
       <base-form-tab :title="$i18n.t('Settings')" active>
 
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Identifier')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Identifier')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-workgroup namespace="workgroup"
-          :column-label="$i18n.t('Workgroup')"
+                              :column-label="$i18n.t('Workgroup')"
         />
 
         <form-group-dns-name namespace="dns_name"
-          :column-label="$i18n.t('DNS name of the domain')"
-          :text="$i18n.t('The DNS name (FQDN) of the domain.')"
+                             :column-label="$i18n.t('DNS name of the domain')"
+                             :text="$i18n.t('The DNS name (FQDN) of the domain.')"
         />
 
         <form-group-server-name namespace="server_name"
-          :column-label="$i18n.t(`This server's name`)"
-          :text="$i18n.t(`This server's name (account name) in your Active Directory. Use '%h' to automatically use this server hostname.`)"
+                                :column-label="$i18n.t(`This server's name`)"
+                                :text="$i18n.t(`This server's name (account name) in your Active Directory. Use '%h' to automatically use this server hostname.`)"
         />
 
         <form-group-sticky-dc namespace="sticky_dc"
-          :column-label="$i18n.t('Sticky DC')"
-          :text="$i18n.t(`This is used to specify a sticky domain controller to connect to. If not specified, default '*' will be used to connect to any available domain controller.`)"
+                              :column-label="$i18n.t('Sticky DC')"
+                              :text="$i18n.t(`This is used to specify a sticky domain controller to connect to. If not specified, default '*' will be used to connect to any available domain controller.`)"
         />
 
         <form-group-ad-server namespace="ad_server"
-          :column-label="$i18n.t('Active Directory server')"
-          :text="$i18n.t('The IP address or DNS name of your Active Directory server.')"
+                              :column-label="$i18n.t('Active Directory server')"
+                              :text="$i18n.t('The IP address or DNS name of your Active Directory server.')"
         />
 
         <form-group-dns-servers namespace="dns_servers"
-          :column-label="$i18n.t('DNS server(s)')"
-          :text="$i18n.t('The IP address(es) of the DNS server(s) for this domain. Comma delimited if multiple.')"
+                                :column-label="$i18n.t('DNS server(s)')"
+                                :text="$i18n.t('The IP address(es) of the DNS server(s) for this domain. Comma delimited if multiple.')"
         />
 
         <form-group-ou namespace="ou"
-          :column-label="$i18n.t('OU')"
-          :text="$i18n.t(`Use a specific OU for the PacketFence account. The OU string read from top to bottom without RDNs and delimited by a '/'. (ex: Computers/Servers/Unix).`)"
+                       :column-label="$i18n.t('OU')"
+                       :text="$i18n.t(`Use a specific OU for the PacketFence account. The OU string read from top to bottom without RDNs and delimited by a '/'. (ex: Computers/Servers/Unix).`)"
         />
 
         <form-group-ntlmv2-only namespace="ntlmv2_only"
-          :column-label="$i18n.t('NTLM v2 only')"
-          :text='$i18n.t(`If you enabled "Send NTLMv2 Response Only. Refuse LM & NTLM" (only allow ntlm v2) in Network Security: LAN Manager authentication level.`)'
+                                :column-label="$i18n.t('NTLM v2 only')"
+                                :text='$i18n.t(`If you enabled "Send NTLMv2 Response Only. Refuse LM & NTLM" (only allow ntlm v2) in Network Security: LAN Manager authentication level.`)'
+                                enabled-value="1"
+                                disabled-value="0"
         />
 
         <form-group-registration namespace="registration"
-          :column-label="$i18n.t('Allow on registration')"
-          :text="$i18n.t('If this option is enabled, the device will be able to reach the Active Directory from the registration VLAN.')"
+                                 :column-label="$i18n.t('Allow on registration')"
+                                 :text="$i18n.t('If this option is enabled, the device will be able to reach the Active Directory from the registration VLAN.')"
+                                 enabled-value="1"
+                                 disabled-value="0"
         />
         <b-form-group label-cols="3">
           <div class="alert alert-warning mb-0">
             <strong>{{ $i18n.t('Note:') }}</strong>
-            {{ $i18n.t('"Allow on registration" option requires passthroughs to be enabled as well as configured to allow both the domain DNS name and each domain controllers DNS name (or *.dns name)') }}.
+            {{
+              $i18n.t('"Allow on registration" option requires passthroughs to be enabled as well as configured to allow both the domain DNS name and each domain controllers DNS name (or *.dns name)')
+            }}.
             {{ $i18n.t('Example: inverse.local, *.inverse.local') }}
           </div>
         </b-form-group>
@@ -72,18 +78,18 @@
       <base-form-tab :title="$i18n.t('NTLM cache')">
 
         <form-group-ntlm-cache namespace="ntlm_cache"
-          :column-label="$i18n.t('NTLM cache')"
-          :text="$i18n.t('Enable the NTLM cache for this domain.')"
+                               :column-label="$i18n.t('NTLM cache')"
+                               :text="$i18n.t('Enable the NTLM cache for this domain.')"
         />
 
         <form-group-ntlm-cache-source namespace="ntlm_cache_source"
-          :column-label="$i18n.t('Source')"
-          :text="$i18n.t('The source to use to connect to your Active Directory server for NTLM caching.')"
+                                      :column-label="$i18n.t('Source')"
+                                      :text="$i18n.t('The source to use to connect to your Active Directory server for NTLM caching.')"
         />
 
         <form-group-ntlm-cache-expiry namespace="ntlm_cache_expiry"
-          :column-label="$i18n.t('Expiration')"
-          :text="$i18n.t('The amount of seconds an entry should be cached.')"
+                                      :column-label="$i18n.t('Expiration')"
+                                      :text="$i18n.t('The amount of seconds an entry should be cached.')"
         />
 
       </base-form-tab>
@@ -91,7 +97,7 @@
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
+import {computed} from '@vue/composition-api'
 import {
   BaseForm,
   BaseFormTab
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/index.js b/html/pfappserver/root/src/views/Configuration/domains/_components/index.js
index 7e97c0460933..77b95ca16216 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/index.js
@@ -3,17 +3,14 @@ import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
-  BaseFormGroupToggle,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import BaseButtonJoin from './BaseButtonJoin'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
   BaseViewCollectionItem              as BaseView,
   BaseFormButtonBar                   as FormButtonBar,
-  BaseButtonJoin                      as ButtonJoin,
 
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupInput                  as FormGroupWorkgroup,
@@ -23,10 +20,10 @@ export {
   BaseFormGroupInput                  as FormGroupAdServer,
   BaseFormGroupInput                  as FormGroupDnsServers,
   BaseFormGroupInput                  as FormGroupOu,
-  BaseFormGroupToggle                 as FormGroupNtlmv2Only,
-  BaseFormGroupToggle                 as FormGroupRegistration,
+  BaseFormGroupSwitch                 as FormGroupNtlmv2Only,
+  BaseFormGroupSwitch                 as FormGroupRegistration,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNtlmCache,
+  BaseFormGroupSwitch                 as FormGroupNtlmCache,
   BaseFormGroupChosenOne              as FormGroupNtlmCacheSource,
   BaseFormGroupInput                  as FormGroupNtlmCacheExpiry,
 

From 0962355f7d05ff9f70c81691ae980a1919320b81 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 16:55:12 +0300
Subject: [PATCH 05/51] Change realms form to use switch UI components

---
 .../realms/_components/TheForm.vue            | 110 ++++++++++--------
 .../Configuration/realms/_components/index.js |  14 +--
 2 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
index 4809677fffcb..4c3d9752a4f8 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
@@ -9,138 +9,150 @@
       <base-form-tab :title="$i18n.t('General')" active>
 
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Realm')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Realm')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-regex namespace="regex"
-          :column-label="$i18n.t('Regex Realm')"
-          :text="$i18n.t('PacketFence will use this Realm configuration if the regex match with the UserName (optional).')"
+                          :column-label="$i18n.t('Regex Realm')"
+                          :text="$i18n.t('PacketFence will use this Realm configuration if the regex match with the UserName (optional).')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('NTLM Auth')">
 
         <form-group-domain namespace="domain"
-          :column-label="$i18n.t('Domain')"
-          :text="$i18n.t('The domain to use for the authentication in that realm.')"
+                           :column-label="$i18n.t('Domain')"
+                           :text="$i18n.t('The domain to use for the authentication in that realm.')"
         />
 
         <form-group-edir-source namespace="edir_source"
-          :column-label="$i18n.t('eDirectory')"
-          :text="$i18n.t('The eDirectory server to use for the authentication in that realm.')"
+                                :column-label="$i18n.t('eDirectory')"
+                                :text="$i18n.t('The eDirectory server to use for the authentication in that realm.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('EAP Configuration')">
 
         <form-group-eap namespace="eap"
-          :column-label="$i18n.t('EAP')"
-          :text="$i18n.t('The EAP configuration to use.')"
+                        :column-label="$i18n.t('EAP')"
+                        :text="$i18n.t('The EAP configuration to use.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Freeradius Proxy')">
 
         <form-group-options namespace="options"
-          :column-label="$i18n.t('Realm Options')"
-          :text="$i18n.t('You can add FreeRADIUS options in the realm definition.')"
+                            :column-label="$i18n.t('Realm Options')"
+                            :text="$i18n.t('You can add FreeRADIUS options in the realm definition.')"
         />
 
         <form-group-radius-auth namespace="radius_auth"
-          :column-label="$i18n.t('RADIUS AUTH')"
-          :text="$i18n.t('The RADIUS Server(s) to proxy authentication.')"
+                                :column-label="$i18n.t('RADIUS AUTH')"
+                                :text="$i18n.t('The RADIUS Server(s) to proxy authentication.')"
         />
 
         <form-group-radius-auth-proxy-type namespace="radius_auth_proxy_type"
-          :column-label="$i18n.t('Type')"
-          :text="$i18n.t('Home server pool type.')"
+                                           :column-label="$i18n.t('Type')"
+                                           :text="$i18n.t('Home server pool type.')"
         />
 
         <form-group-radius-auth-compute-in-pf namespace="radius_auth_compute_in_pf"
-          :column-label="$i18n.t('Authorize from PacketFence')"
-          :text="$i18n.t('Should we forward the request to PacketFence to have a dynamic answer or do we use the remote proxy server answered attributes?')"
+                                              :column-label="$i18n.t('Authorize from PacketFence')"
+                                              :text="$i18n.t('Should we forward the request to PacketFence to have a dynamic answer or do we use the remote proxy server answered attributes?')"
+                                              enabled-value="enabled"
+                                              disabled-value="disabled"
         />
 
         <form-group-radius-acct namespace="radius_acct"
-          :column-label="$i18n.t('RADIUS ACCT')"
-          :text="$i18n.t('The RADIUS Server(s) to proxy accounting.')"
+                                :column-label="$i18n.t('RADIUS ACCT')"
+                                :text="$i18n.t('The RADIUS Server(s) to proxy accounting.')"
         />
 
         <form-group-radius-acct-proxy-type namespace="radius_acct_proxy_type"
-          :column-label="$i18n.t('Type')"
-          :text="$i18n.t('Home server pool type.')"
+                                           :column-label="$i18n.t('Type')"
+                                           :text="$i18n.t('Home server pool type.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Freeradius Eduroam Proxy')">
 
         <form-group-eduroam-options namespace="eduroam_options"
-          :column-label="$i18n.t('Eduroam Realm Options')"
-          :text="$i18n.t('You can add Eduroam FreeRADIUS options in the realm definition.')"
+                                    :column-label="$i18n.t('Eduroam Realm Options')"
+                                    :text="$i18n.t('You can add Eduroam FreeRADIUS options in the realm definition.')"
         />
 
         <form-group-eduroam-radius-auth namespace="eduroam_radius_auth"
-          :column-label="$i18n.t('Eduroam RADIUS AUTH')"
-          :text="$i18n.t('The RADIUS Server(s) to proxy authentication.')"
+                                        :column-label="$i18n.t('Eduroam RADIUS AUTH')"
+                                        :text="$i18n.t('The RADIUS Server(s) to proxy authentication.')"
         />
 
         <form-group-eduroam-radius-auth-proxy-type namespace="eduroam_radius_auth_proxy_type"
-          :column-label="$i18n.t('Type')"
-          :text="$i18n.t('Home server pool type.')"
+                                                   :column-label="$i18n.t('Type')"
+                                                   :text="$i18n.t('Home server pool type.')"
         />
 
         <form-group-eduroam-radius-auth-compute-in-pf namespace="eduroam_radius_auth_compute_in_pf"
-          :column-label="$i18n.t('Authorize from PacketFence')"
-          :text="$i18n.t('Should we forward the request to PacketFence to have a dynamic answer or do we use the remote proxy server answered attributes?')"
+                                                      :column-label="$i18n.t('Authorize from PacketFence')"
+                                                      :text="$i18n.t('Should we forward the request to PacketFence to have a dynamic answer or do we use the remote proxy server answered attributes?')"
+                                                      enabled-value="enabled"
+                                                      disabled-value="disabled"
         />
 
         <form-group-eduroam-radius-acct namespace="eduroam_radius_acct"
-          :column-label="$i18n.t('Eduroam RADIUS ACCT')"
-          :text="$i18n.t('The RADIUS Server(s) to proxy accounting.')"
+                                        :column-label="$i18n.t('Eduroam RADIUS ACCT')"
+                                        :text="$i18n.t('The RADIUS Server(s) to proxy accounting.')"
         />
 
         <form-group-eduroam-radius-acct-proxy-type namespace="eduroam_radius_acct_proxy_type"
-          :column-label="$i18n.t('Type')"
-          :text="$i18n.t('Home server pool type.')"
+                                                   :column-label="$i18n.t('Type')"
+                                                   :text="$i18n.t('Home server pool type.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Stripping')">
 
         <form-group-portal-strip-username namespace="portal_strip_username"
-          :column-label="$i18n.t('Strip on the portal')"
-          :text="$i18n.t('Should the usernames matching this realm be stripped when used on the captive portal.')"
+                                          :column-label="$i18n.t('Strip on the portal')"
+                                          :text="$i18n.t('Should the usernames matching this realm be stripped when used on the captive portal.')"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
         />
 
         <form-group-admin-strip-username namespace="admin_strip_username"
-          :column-label="$i18n.t('Strip on the admin')"
-          :text="$i18n.t('Should the usernames matching this realm be stripped when used on the administration interface.')"
+                                         :column-label="$i18n.t('Strip on the admin')"
+                                         :text="$i18n.t('Should the usernames matching this realm be stripped when used on the administration interface.')"
+                                         enabled-value="enabled"
+                                         disabled-value="disabled"
         />
 
         <form-group-radius-strip-username namespace="radius_strip_username"
-          :column-label="$i18n.t('Strip in RADIUS authorization')"
-          :text="$i18n.t(`Should the usernames matching this realm be stripped when used in the authorization phase of 802.1x.\nNote that this doesn't control the stripping in FreeRADIUS, use the options above for that.`)"
+                                          :column-label="$i18n.t('Strip in RADIUS authorization')"
+                                          :text="$i18n.t(`Should the usernames matching this realm be stripped when used in the authorization phase of 802.1x.\nNote that this doesn't control the stripping in FreeRADIUS, use the options above for that.`)"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
         />
 
         <form-group-permit-custom-attributes namespace="permit_custom_attributes"
-          :column-label="$i18n.t('Custom attributes')"
-          :text="$i18n.t('Allow to use custom attributes to authenticate 802.1x users (attributes are defined in the source).')"
+                                             :column-label="$i18n.t('Custom attributes')"
+                                             :text="$i18n.t('Allow to use custom attributes to authenticate 802.1x users (attributes are defined in the source).')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
         />
 
         <form-group-ldap-source namespace="ldap_source"
-          :column-label="$i18n.t('LDAP source')"
-          :text="$i18n.t('The LDAP Server to query the custom attributes.')"
+                                :column-label="$i18n.t('LDAP source')"
+                                :text="$i18n.t('The LDAP Server to query the custom attributes.')"
         />
 
         <form-group-ldap-source-ttls-pap namespace="ldap_source_ttls_pap"
-          :column-label="$i18n.t('LDAP Source for TTLS PAP')"
-          :text="$i18n.t('The LDAP Server to use for EAP TTLS PAP authorization and authentication.')"
+                                         :column-label="$i18n.t('LDAP Source for TTLS PAP')"
+                                         :text="$i18n.t('The LDAP Server to use for EAP TTLS PAP authorization and authentication.')"
         />
 
         <form-group-azuread-source-ttls-pap namespace="azuread_source_ttls_pap"
-          :column-label="$i18n.t('Azure AD Source for TTLS PAP')"
-          :text="$i18n.t('The Azure AD to use for EAP TTLS PAP authentication.')"
+                                            :column-label="$i18n.t('Azure AD Source for TTLS PAP')"
+                                            :text="$i18n.t('The Azure AD to use for EAP TTLS PAP authentication.')"
         />
 
       </base-form-tab>
@@ -148,7 +160,7 @@
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
+import {computed} from '@vue/composition-api'
 import {
   BaseForm,
   BaseFormTab
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/index.js b/html/pfappserver/root/src/views/Configuration/realms/_components/index.js
index 38a970b76274..fcb0e3db4481 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/index.js
@@ -5,7 +5,7 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -22,19 +22,19 @@ export {
   BaseFormGroupTextarea               as FormGroupOptions,
   BaseFormGroupChosenMultiple         as FormGroupRadiusAuth,
   BaseFormGroupChosenOne              as FormGroupRadiusAuthProxyType,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusAuthComputeInPf,
+  BaseFormGroupSwitch                 as FormGroupRadiusAuthComputeInPf,
   BaseFormGroupChosenMultiple         as FormGroupRadiusAcct,
   BaseFormGroupChosenOne              as FormGroupRadiusAcctProxyType,
   BaseFormGroupTextarea               as FormGroupEduroamOptions,
   BaseFormGroupChosenMultiple         as FormGroupEduroamRadiusAuth,
   BaseFormGroupChosenOne              as FormGroupEduroamRadiusAuthProxyType,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupEduroamRadiusAuthComputeInPf,
+  BaseFormGroupSwitch                 as FormGroupEduroamRadiusAuthComputeInPf,
   BaseFormGroupChosenMultiple         as FormGroupEduroamRadiusAcct,
   BaseFormGroupChosenOne              as FormGroupEduroamRadiusAcctProxyType,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPortalStripUsername,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAdminStripUsername,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusStripUsername,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPermitCustomAttributes,
+  BaseFormGroupSwitch                 as FormGroupPortalStripUsername,
+  BaseFormGroupSwitch                 as FormGroupAdminStripUsername,
+  BaseFormGroupSwitch                 as FormGroupRadiusStripUsername,
+  BaseFormGroupSwitch                 as FormGroupPermitCustomAttributes,
   BaseFormGroupChosenOne              as FormGroupLdapSource,
   BaseFormGroupChosenOne              as FormGroupAzureadSourceTtlsPap,
   BaseFormGroupChosenOne              as FormGroupLdapSourceTtlsPap,

From 199f95541b4fd35a0190b27804a264109142b29d Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 5 Jul 2023 17:11:55 +0300
Subject: [PATCH 06/51] Delete unused exports in configuration sources

---
 .../sources/_components/index.js              | 22 ++-----------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/index.js b/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
index 22f0a3dbd472..929c6d85665d 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
@@ -1,4 +1,4 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
@@ -13,9 +13,7 @@ import {
   BaseFormGroupToggleNoYes,
   BaseServices,
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import BaseFormGroupActiveDirectoryPasswordTest from './BaseFormGroupActiveDirectoryPasswordTest'
 import BaseFormGroupAdministrationRules from './BaseFormGroupAdministrationRules'
 import BaseFormGroupAuthenticationRules from './BaseFormGroupAuthenticationRules'
@@ -23,7 +21,6 @@ import BaseFormGroupDomains from './BaseFormGroupDomains'
 import BaseFormGroupHostPortEncryption from './BaseFormGroupHostPortEncryption'
 import BaseFormGroupPersonMappings from './BaseFormGroupPersonMappings'
 import BaseFormGroupProtocolHostPort from './BaseFormGroupProtocolHostPort'
-import BaseFormGroupServerAddressPort from './BaseFormGroupServerAddressPort'
 import ButtonSamlMetaData from './ButtonSamlMetaData'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -32,7 +29,6 @@ export {
   BaseViewCollectionItem                    as BaseView,
   BaseFormButtonBar                         as FormButtonBar,
 
-  BaseFormGroupInput                        as FormGroupAccessScope,
   BaseFormGroupInput                        as FormGroupAccessTokenParam,
   BaseFormGroupInput                        as FormGroupAccessTokenPath,
   BaseFormGroupInput                        as FormGroupAccountSid,
@@ -43,7 +39,6 @@ export {
   BaseFormGroupInput                        as FormGroupApiKey,
   BaseFormGroupInputPassword                as FormGroupApiPassword,
   BaseFormGroupInput                        as FormGroupApiUsername,
-  BaseFormGroupInput                        as FormGroupApiLoginIdentifier,
   BaseFormGroupInput                        as FormGroupAuthenticateRealm,
   BaseFormGroupAuthenticationRules          as FormGroupAuthenticationRules,
   BaseFormGroupInput                        as FormGroupAuthenticationUrl,
@@ -54,10 +49,8 @@ export {
   BaseFormGroupInput                        as FormGroupAuthToken,
   BaseFormGroupDomains                      as FormGroupBannedDomains,
   BaseFormGroupInput                        as FormGroupBaseDn,
-  BaseFormGroupChosenOne                    as FormGroupBaseUrl,
   BaseFormGroupInput                        as FormGroupBindDn,
   BaseFormGroupFileUpload                   as FormGroupCaFile,
-  BaseFormGroupInput                        as FormGroupCaPath,
   BaseFormGroupToggle                       as FormGroupCacheMatch,
   BaseFormGroupFileUpload                   as FormGroupCertFile,
   BaseFormGroupInput                        as FormGroupCertIdentifier,
@@ -71,7 +64,6 @@ export {
   BaseFormGroupToggle                       as FormGroupCustomerPortal,
   BaseFormGroupInputNumber                  as FormGroupDeadDuration,
   BaseFormGroupInput                        as FormGroupDescription,
-  BaseFormGroupInput                        as FormGroupDirectBaseUrl,
   BaseFormGroupInput                        as FormGroupDomains,
   BaseFormGroupIntervalUnit                 as FormGroupEmailActivationTimeout,
   BaseFormGroupInput                        as FormGroupEmailAddress,
@@ -92,7 +84,6 @@ export {
   BaseFormGroupIntervalUnit                 as FormGroupLocalAccountExpiration,
   BaseFormGroupInputNumber                  as FormGroupLocalAccountLogins,
   BaseFormGroupChosenMultiple               as FormGroupLocalRealm,
-  BaseFormGroupInput                        as FormGroupMerchantIdentifier,
   BaseFormGroupTextarea                     as FormGroupMessage,
   BaseFormGroupToggle                       as FormGroupMonitor,
   BaseFormGroupInput                        as FormGroupNasIpAddress,
@@ -110,9 +101,7 @@ export {
   BaseFormGroupInput                        as FormGroupProtectedResourceUrl,
   BaseFormGroupProtocolHostPort             as FormGroupProtocolHostPort,
   BaseFormGroupTextarea                     as FormGroupProxyAddresses,
-  BaseFormGroupInput                        as FormGroupPublicClientKey,
   BaseFormGroupInput                        as FormGroupPublishableKey,
-  BaseFormGroupInputPassword                as FormGroupRadiusSecret,
   BaseFormGroupInputNumber                  as FormGroupReadTimeout,
   BaseFormGroupChosenMultiple               as FormGroupRealms,
   BaseFormGroupInput                        as FormGroupRedirectUrl,
@@ -125,13 +114,9 @@ export {
   BaseFormGroupInputPassword                as FormGroupSecret,
   BaseFormGroupInput                        as FormGroupSecretKey,
   BaseFormGroupToggleDisabledEnabled        as FormGroupSendEmailConfirmation,
-  BaseFormGroupServerAddressPort            as FormGroupServerAddressPort,
-  BaseFormGroupInput                        as FormGroupServiceFqdn,
   BaseFormGroupInput                        as FormGroupServiceProviderEntityIdentifier,
   BaseFormGroupFileUpload                   as FormGroupServiceProviderCertPath,
   BaseFormGroupFileUpload                   as FormGroupServiceProviderKeyPath,
-  BaseFormGroupInput                        as FormGroupSharedSecret,
-  BaseFormGroupInput                        as FormGroupSharedSecretDirect,
   BaseFormGroupToggle                       as FormGroupShuffle,
   BaseFormGroupInput                        as FormGroupSite,
   BaseFormGroupIntervalUnit                 as FormGroupSmsActivationTimeout,
@@ -140,11 +125,8 @@ export {
   BaseFormGroupInput                        as FormGroupSponsorshipBcc,
   BaseFormGroupChosenOne                    as FormGroupStyle,
   BaseFormGroupInput                        as FormGroupTenantIdentifier,
-  BaseFormGroupInput                        as FormGroupTerminalGroupIdentifier,
-  BaseFormGroupInput                        as FormGroupTerminalIdentifier,
   BaseFormGroupToggle                       as FormGroupTestMode,
   BaseFormGroupInput                        as FormGroupTimeout,
-  BaseFormGroupInput                        as FormGroupTransactionKey,
   BaseFormGroupInput                        as FormGroupTwilioPhoneNumber,
   BaseFormGroupToggle                       as FormGroupUseConnector,
   BaseFormGroupInputNumber                  as FormGroupUserGroupsCache,

From 46e9d19d272acfd6f6b3cf3e4312e9685ce62655 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Fri, 7 Jul 2023 13:30:35 +0300
Subject: [PATCH 07/51] Change to switch UI component in authentication source
 forms

---
 .../src/components/new/BaseInputSwitch.vue    |   1 -
 .../_components/FormTypeClickatell.vue        |  42 +++----
 .../sources/_components/FormTypeEdir.vue      |  82 +++++++------
 .../sources/_components/FormTypeEmail.vue     |  56 +++++----
 .../sources/_components/FormTypeFacebook.vue  |  60 +++++-----
 .../sources/_components/FormTypeGithub.vue    |  62 +++++-----
 .../sources/_components/FormTypeGoogle.vue    |  62 +++++-----
 .../sources/_components/FormTypeLdap.vue      | 112 ++++++++++--------
 .../sources/_components/FormTypeLinkedIn.vue  |  62 +++++-----
 .../sources/_components/FormTypeNull.vue      |  16 +--
 .../sources/_components/FormTypeOpenId.vue    |  66 ++++++-----
 .../sources/_components/FormTypePaypal.vue    |  74 ++++++------
 .../sources/_components/FormTypeRadius.vue    |  48 ++++----
 .../sources/_components/FormTypeSms.vue       |  48 ++++----
 .../_components/FormTypeSponsorEmail.vue      |  78 ++++++------
 .../sources/_components/FormTypeStripe.vue    |  58 +++++----
 .../sources/_components/FormTypeTwilio.vue    |  52 ++++----
 .../_components/FormTypeWindowsLive.vue       |  62 +++++-----
 .../sources/_components/index.js              |  28 ++---
 19 files changed, 565 insertions(+), 504 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
index abbd8ef9f71c..524ff5b86a19 100644
--- a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
+++ b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
@@ -106,7 +106,6 @@ export const setup = (props, context) => {
     value,
   } = useInputValue(metaProps, context)
 
-  //TODO reuse this in ldap selector
   const onChange = (value) => {
     setFormNamespace(props.namespace.split('.'), unref(form), value)
   }
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeClickatell.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeClickatell.vue
index 846994514102..38e6b88a3093 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeClickatell.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeClickatell.vue
@@ -6,59 +6,61 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-api-key namespace="api_key"
-      :column-label="$i18n.t('Clickatell API Key')"
+                        :column-label="$i18n.t('Clickatell API Key')"
     />
 
     <form-group-message namespace="message"
-      :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
+                        :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
     />
 
     <form-group-pin-code-length namespace="pin_code_length"
-      :column-label="$i18n.t('PIN length')"
-      :text="$i18n.t('The amount of digits of the PIN number.')"
+                                :column-label="$i18n.t('PIN length')"
+                                :text="$i18n.t('The amount of digits of the PIN number.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApiKey,
   FormGroupAuthenticationRules,
@@ -89,7 +91,7 @@ const components = {
   FormGroupPinCodeLength,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEdir.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEdir.vue
index ccd1de64ea94..76cf3d2fca5b 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEdir.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEdir.vue
@@ -6,106 +6,114 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-host-port-encryption :namespaces="['host', 'port', 'encryption']"
-      :column-label="$i18n.t('Host')"
+                                     :column-label="$i18n.t('Host')"
     />
 
     <form-group-dead-duration namespace="dead_duration"
-      :column-label="$i18n.t('Dead duration')"
-      :text="$i18n.t('How much time in seconds should a server be marked dead before it is retried. When specifying multiple LDAP servers or a DNS name pointing to multiple IPs, then this option can be used to offer more consistent failover. A value of 0 disables this feature.')"
+                              :column-label="$i18n.t('Dead duration')"
+                              :text="$i18n.t('How much time in seconds should a server be marked dead before it is retried. When specifying multiple LDAP servers or a DNS name pointing to multiple IPs, then this option can be used to offer more consistent failover. A value of 0 disables this feature.')"
     />
 
     <form-group-connection-timeout namespace="connection_timeout"
-      :column-label="$i18n.t('Connection timeout')"
-      :text="$i18n.t('LDAP connection Timeout.')"
+                                   :column-label="$i18n.t('Connection timeout')"
+                                   :text="$i18n.t('LDAP connection Timeout.')"
     />
 
     <form-group-write-timeout namespace="write_timeout"
-      :column-label="$i18n.t('Request timeout')"
-      :text="$i18n.t('LDAP request timeout.')"
+                              :column-label="$i18n.t('Request timeout')"
+                              :text="$i18n.t('LDAP request timeout.')"
     />
 
     <form-group-read-timeout namespace="read_timeout"
-      :column-label="$i18n.t('Response timeout')"
-      :text="$i18n.t('LDAP response timeout.')"
+                             :column-label="$i18n.t('Response timeout')"
+                             :text="$i18n.t('LDAP response timeout.')"
     />
 
     <form-group-base-dn namespace="basedn"
-      :column-label="$i18n.t('Base DN')"
+                        :column-label="$i18n.t('Base DN')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
+                      :column-label="$i18n.t('Scope')"
     />
 
     <form-group-username-attribute namespace="usernameattribute"
-      :column-label="$i18n.t('Username Attribute')"
-      :text="$i18n.t('Main reference attribute that contain the username.')"
+                                   :column-label="$i18n.t('Username Attribute')"
+                                   :text="$i18n.t('Main reference attribute that contain the username.')"
     />
 
     <form-group-search-attributes namespace="searchattributes"
-      :column-label="$i18n.t('Search Attributes')"
-      :text="$i18n.t('Other attributes that can be used as the username (requires to restart the radiusd service to be effective).')"
+                                  :column-label="$i18n.t('Search Attributes')"
+                                  :text="$i18n.t('Other attributes that can be used as the username (requires to restart the radiusd service to be effective).')"
     />
 
     <form-group-email-attribute namespace="email_attribute"
-      :column-label="$i18n.t('Email Attribute')"
-      :text="$i18n.t('LDAP attribute name that stores the email address against which the filter will match.')"
+                                :column-label="$i18n.t('Email Attribute')"
+                                :text="$i18n.t('LDAP attribute name that stores the email address against which the filter will match.')"
     />
 
     <form-group-bind-dn namespace="binddn"
-      :column-label="$i18n.t('Bind DN')"
-      :text="$i18n.t('Leave this field empty if you want to perform an anonymous bind.')"
+                        :column-label="$i18n.t('Bind DN')"
+                        :text="$i18n.t('Leave this field empty if you want to perform an anonymous bind.')"
     />
 
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+                         :column-label="$i18n.t('Password')"
     />
 
     <form-group-cache-match namespace="cache_match"
-      :column-label="$i18n.t('Cache match')"
-      :text="$i18n.t('Will cache results of matching a rule.')"
+                            :column-label="$i18n.t('Cache match')"
+                            :text="$i18n.t('Will cache results of matching a rule.')"
+                            enabled-value="1"
+                            disabled-value="0"
     />
 
     <form-group-monitor namespace="monitor"
-      :column-label="$i18n.t('Monitor')"
-      :text="$i18n.t('Do you want to monitor this source?')"
+                        :column-label="$i18n.t('Monitor')"
+                        :text="$i18n.t('Do you want to monitor this source?')"
+                        :enabled-value="1"
+                        :disabled-value="0"
     />
 
     <form-group-shuffle namespace="shuffle"
-      :column-label="$i18n.t('Shuffle')"
-      :text="$i18n.t('Randomly choose LDAP server to query.')"
+                        :column-label="$i18n.t('Shuffle')"
+                        :text="$i18n.t('Randomly choose LDAP server to query.')"
+                        :enabled-value="1"
+                        :disabled-value="0"
     />
 
     <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server.')"
+                              :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server.')"
+                              :enabled-value="1"
+                              :disabled-value="0"
     />
 
     <form-group-realms namespace="realms"
-      :column-label="$i18n.t('Associated Realms')"
-      :text="$i18n.t('Realms that will be associated with this source.')"
+                       :column-label="$i18n.t('Associated Realms')"
+                       :text="$i18n.t('Realms that will be associated with this source.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAdministrationRules,
   FormGroupAuthenticationRules,
@@ -166,7 +174,7 @@ import BaseRuleFormGroupLdapConditions
 import useLdapAttributes
   from '@/views/Configuration/sources/_components/ldapCondition/useLdapAttributes';
 
-function setup(props){
+function setup(props) {
   const schema = setupForm(props)
   provide('conditionsComponent', BaseRuleFormGroupLdapConditions)
   useLdapAttributes(props)
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEmail.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEmail.vue
index 41f2972a6b14..c56d72f8e6fd 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEmail.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeEmail.vue
@@ -6,71 +6,75 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-banned-domains namespace="banned_domains"
-      :column-label="$i18n.t('Comma-separated list of Banned Domains')"
-      :text="$i18n.t('A comma-separated list of domains that are banned for email registration. Wildcards are accepted (*pfdemo.org). Banned domains are checked before allowed domains.')"
+                               :column-label="$i18n.t('Comma-separated list of Banned Domains')"
+                               :text="$i18n.t('A comma-separated list of domains that are banned for email registration. Wildcards are accepted (*pfdemo.org). Banned domains are checked before allowed domains.')"
     />
 
     <form-group-allowed-domains namespace="allowed_domains"
-      :column-label="$i18n.t('Comma-separated list of Allowed Domains')"
-      :text="$i18n.t('A comma-separated list of domains that are allowed for email registration. Wildcards are accepted (*pfdemo.org). Allowed domains are checked after banned domains.')"
+                                :column-label="$i18n.t('Comma-separated list of Allowed Domains')"
+                                :text="$i18n.t('A comma-separated list of domains that are allowed for email registration. Wildcards are accepted (*pfdemo.org). Allowed domains are checked after banned domains.')"
     />
 
     <form-group-email-activation-timeout namespace="email_activation_timeout"
-      :column-label="$i18n.t('Email Activation Timeout')"
-      :text="$i18n.t('This is the delay given to a guest who registered by email confirmation to log into his email and click the activation link.')"
+                                         :column-label="$i18n.t('Email Activation Timeout')"
+                                         :text="$i18n.t('This is the delay given to a guest who registered by email confirmation to log into his email and click the activation link.')"
     />
 
     <form-group-allow-localdomain namespace="allow_localdomain"
-      :column-label="$i18n.t('Allow Local Domain')"
-      :text="$i18n.t('Accept self-registration with email address from the local domain.')"
+                                  :column-label="$i18n.t('Allow Local Domain')"
+                                  :text="$i18n.t('Accept self-registration with email address from the local domain.')"
+                                  :enabled-value="yes"
+                                  :disabled-value="no"
     />
 
     <form-group-activation-domain namespace="activation_domain"
-      :column-label="$i18n.t('Host in activation link')"
-      :text="$i18n.t('Set this value if you want to change the hostname in the validation link. Changing this requires to restart haproxy to be fully effective.')"
+                                  :column-label="$i18n.t('Host in activation link')"
+                                  :text="$i18n.t('Set this value if you want to change the hostname in the validation link. Changing this requires to restart haproxy to be fully effective.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupActivationDomain,
   FormGroupAllowedDomains,
@@ -105,7 +109,7 @@ const components = {
   FormGroupPasswordLength,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeFacebook.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeFacebook.vue
index 24dafedc827b..56a3c73e20b7 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeFacebook.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeFacebook.vue
@@ -6,89 +6,91 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('Graph API URL')"
+                     :column-label="$i18n.t('Graph API URL')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('Graph API Token Path')"
+                                  :column-label="$i18n.t('Graph API Token Path')"
     />
 
     <form-group-access-token-param namespace="access_token_param"
-      :column-label="$i18n.t('Access Token Parameter')"
+                                   :column-label="$i18n.t('Access Token Parameter')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                      :column-label="$i18n.t('Scope')"
+                      :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('Graph API URL of logged user')"
+                                       :column-label="$i18n.t('Graph API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenParam,
   FormGroupAccessTokenPath,
@@ -133,7 +135,7 @@ const components = {
   FormGroupSite,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGithub.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGithub.vue
index e0d389007a7e..6eb5d93f9dec 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGithub.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGithub.vue
@@ -6,93 +6,95 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('API URL')"
+                     :column-label="$i18n.t('API URL')"
     />
 
     <form-group-authorize-path namespace="authorize_path"
-      :column-label="$i18n.t('API Authorize Path')"
+                               :column-label="$i18n.t('API Authorize Path')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('API Token Path')"
+                                  :column-label="$i18n.t('API Token Path')"
     />
 
     <form-group-access-token-param namespace="access_token_param"
-      :column-label="$i18n.t('Access Token Parameter')"
+                                   :column-label="$i18n.t('Access Token Parameter')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                      :column-label="$i18n.t('Scope')"
+                      :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('API URL of logged user')"
+                                       :column-label="$i18n.t('API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenParam,
   FormGroupAccessTokenPath,
@@ -139,7 +141,7 @@ const components = {
   FormGroupSite,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGoogle.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGoogle.vue
index 3fcdca527256..09eb9d672426 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGoogle.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeGoogle.vue
@@ -6,93 +6,95 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('API URL')"
+                     :column-label="$i18n.t('API URL')"
     />
 
     <form-group-authorize-path namespace="authorize_path"
-      :column-label="$i18n.t('API Authorize Path')"
+                               :column-label="$i18n.t('API Authorize Path')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('API Token Path')"
+                                  :column-label="$i18n.t('API Token Path')"
     />
 
     <form-group-access-token-param namespace="access_token_param"
-      :column-label="$i18n.t('Access Token Parameter')"
+                                   :column-label="$i18n.t('Access Token Parameter')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                      :column-label="$i18n.t('Scope')"
+                      :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('API URL of logged user')"
+                                       :column-label="$i18n.t('API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenParam,
   FormGroupAccessTokenPath,
@@ -139,7 +141,7 @@ const components = {
   FormGroupSite,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLdap.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLdap.vue
index 9b8ed4daffae..c14aae2563ef 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLdap.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLdap.vue
@@ -9,138 +9,146 @@
       <base-form-tab :title="$i18n.t('General')" active>
 
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Name')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Name')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-description namespace="description"
-          :column-label="$i18n.t('Description')"
+                                :column-label="$i18n.t('Description')"
         />
 
         <form-group-host-port-encryption :namespaces="['host', 'port', 'encryption']"
-          :column-label="$i18n.t('Host')"
+                                         :column-label="$i18n.t('Host')"
         />
 
         <form-group-verify namespace="verify"
-          :column-label="$i18n.t('SSL Verify Mode')"
-          :text="$i18n.t('The SSL verify mode when connecting via LDAP. Only applies when using Start TLS or LDAPS.')"
+                           :column-label="$i18n.t('SSL Verify Mode')"
+                           :text="$i18n.t('The SSL verify mode when connecting via LDAP. Only applies when using Start TLS or LDAPS.')"
         />
 
         <form-group-dead-duration namespace="dead_duration"
-          :column-label="$i18n.t('Dead duration')"
-          :text="$i18n.t('How much time in seconds should a server be marked dead before it is retried. When specifying multiple LDAP servers or a DNS name pointing to multiple IPs, then this option can be used to offer more consistent failover. A value of 0 disables this feature.')"
+                                  :column-label="$i18n.t('Dead duration')"
+                                  :text="$i18n.t('How much time in seconds should a server be marked dead before it is retried. When specifying multiple LDAP servers or a DNS name pointing to multiple IPs, then this option can be used to offer more consistent failover. A value of 0 disables this feature.')"
         />
 
         <form-group-connection-timeout namespace="connection_timeout"
-          :column-label="$i18n.t('Connection timeout')"
-          :text="$i18n.t('LDAP connection Timeout.')"
+                                       :column-label="$i18n.t('Connection timeout')"
+                                       :text="$i18n.t('LDAP connection Timeout.')"
         />
 
         <form-group-write-timeout namespace="write_timeout"
-          :column-label="$i18n.t('Request timeout')"
-          :text="$i18n.t('LDAP request timeout.')"
+                                  :column-label="$i18n.t('Request timeout')"
+                                  :text="$i18n.t('LDAP request timeout.')"
         />
 
         <form-group-read-timeout namespace="read_timeout"
-          :column-label="$i18n.t('Response timeout')"
-          :text="$i18n.t('LDAP response timeout.')"
+                                 :column-label="$i18n.t('Response timeout')"
+                                 :text="$i18n.t('LDAP response timeout.')"
         />
 
         <form-group-base-dn namespace="basedn"
-          :column-label="$i18n.t('Base DN')"
+                            :column-label="$i18n.t('Base DN')"
         />
 
         <form-group-scope namespace="scope"
-          :column-label="$i18n.t('Scope')"
+                          :column-label="$i18n.t('Scope')"
         />
 
         <form-group-username-attribute namespace="usernameattribute"
-          :column-label="$i18n.t('Username Attribute')"
-          :text="$i18n.t('Main reference attribute that contain the username.')"
+                                       :column-label="$i18n.t('Username Attribute')"
+                                       :text="$i18n.t('Main reference attribute that contain the username.')"
         />
 
         <form-group-search-attributes namespace="searchattributes"
-          :column-label="$i18n.t('Search Attributes')"
-          :text="$i18n.t('Other attributes that can be used as the username (requires to restart the radiusd service to be effective).')"
+                                      :column-label="$i18n.t('Search Attributes')"
+                                      :text="$i18n.t('Other attributes that can be used as the username (requires to restart the radiusd service to be effective).')"
         />
 
         <form-group-search-attributes-append namespace="append_to_searchattributes"
-          :column-label="$i18n.t('Append search attributes LDAP filter')"
-          :text="$i18n.t('Append this ldap filter to the generated generated ldap filter generated for the search attributes.')"
+                                             :column-label="$i18n.t('Append search attributes LDAP filter')"
+                                             :text="$i18n.t('Append this ldap filter to the generated generated ldap filter generated for the search attributes.')"
         />
 
         <form-group-email-attribute namespace="email_attribute"
-          :column-label="$i18n.t('Email Attribute')"
-          :text="$i18n.t('LDAP attribute name that stores the email address against which the filter will match.')"
+                                    :column-label="$i18n.t('Email Attribute')"
+                                    :text="$i18n.t('LDAP attribute name that stores the email address against which the filter will match.')"
         />
 
         <form-group-bind-dn namespace="binddn"
-          :column-label="$i18n.t('Bind DN')"
-          :text="$i18n.t('Leave this field empty if you want to perform an anonymous bind.')"
+                            :column-label="$i18n.t('Bind DN')"
+                            :text="$i18n.t('Leave this field empty if you want to perform an anonymous bind.')"
         />
 
         <form-group-password namespace="password"
-          :column-label="$i18n.t('Password')"
+                             :column-label="$i18n.t('Password')"
         />
 
         <form-group-cache-match namespace="cache_match"
-          :column-label="$i18n.t('Cache match')"
-          :text="$i18n.t('Will cache results of matching a rule.')"
+                                :column-label="$i18n.t('Cache match')"
+                                :text="$i18n.t('Will cache results of matching a rule.')"
+                                enabled-value="1"
+                                disabled-value="0"
         />
 
         <form-group-monitor namespace="monitor"
-          :column-label="$i18n.t('Monitor')"
-          :text="$i18n.t('Do you want to monitor this source?')"
+                            :column-label="$i18n.t('Monitor')"
+                            :text="$i18n.t('Do you want to monitor this source?')"
+                            :enabled-value="1"
+                            :disabled-value="0"
         />
 
         <form-group-shuffle namespace="shuffle"
-          :column-label="$i18n.t('Shuffle')"
-          :text="$i18n.t('Randomly choose LDAP server to query.')"
+                            :column-label="$i18n.t('Shuffle')"
+                            :text="$i18n.t('Randomly choose LDAP server to query.')"
+                            :enabled-value="1"
+                            :disabled-value="0"
         />
 
         <form-group-use-connector namespace="use_connector"
-          :column-label="$i18n.t('Use Connector')"
-          :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                                  :column-label="$i18n.t('Use Connector')"
+                                  :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
         />
 
         <form-group-realms namespace="realms"
-          :column-label="$i18n.t('Associated Realms')"
-          :text="$i18n.t('Realms that will be associated with this source.')"
+                           :column-label="$i18n.t('Associated Realms')"
+                           :text="$i18n.t('Realms that will be associated with this source.')"
         />
 
         <form-group-authentication-rules namespace="authentication_rules"
-          :column-label="$i18n.t('Authentication Rules')"
+                                         :column-label="$i18n.t('Authentication Rules')"
         />
 
         <form-group-administration-rules namespace="administration_rules"
-          :column-label="$i18n.t('Administration Rules')"
+                                         :column-label="$i18n.t('Administration Rules')"
         />
       </base-form-tab>
 
       <base-form-tab :title="$i18n.t('Certificates')">
         <form-group-client-cert-file namespace="client_cert_file"
-          :column-label="$i18n.t('Client Certificate File')"
-          :title="$i18n.t('Upload Client Certificate File')"
-          :text="$i18n.t('Path to the client certificate if a client certificate is required.')"
+                                     :column-label="$i18n.t('Client Certificate File')"
+                                     :title="$i18n.t('Upload Client Certificate File')"
+                                     :text="$i18n.t('Path to the client certificate if a client certificate is required.')"
         />
 
         <form-group-client-key-file namespace="client_key_file"
-          :column-label="$i18n.t('Client Key File')"
-          :title="$i18n.t('Upload Client Key File')"
-          :text="$i18n.t('Path to the client key if a client certificate is required.')"
+                                    :column-label="$i18n.t('Client Key File')"
+                                    :title="$i18n.t('Upload Client Key File')"
+                                    :text="$i18n.t('Path to the client key if a client certificate is required.')"
         />
 
         <form-group-ca-file namespace="ca_file"
-          :column-label="$i18n.t('CA File')"
-          :title="$i18n.t('Upload CA File')"
-          :text="$i18n.t('Path to file with additional Certificate Authorities')"
+                            :column-label="$i18n.t('CA File')"
+                            :title="$i18n.t('Upload CA File')"
+                            :text="$i18n.t('Path to file with additional Certificate Authorities')"
         />
       </base-form-tab>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import { BaseForm, BaseFormTab} from '@/components/new/'
+import {BaseForm, BaseFormTab} from '@/components/new/'
 import {
   FormGroupAdministrationRules,
   FormGroupAuthenticationRules,
@@ -202,7 +210,7 @@ const components = {
   FormGroupWriteTimeout,
 }
 
-import { useForm as setupForm, useFormProps as props } from '../_composables/useForm'
+import {useForm as setupForm, useFormProps as props} from '../_composables/useForm'
 import useLdapAttributes
   from '@/views/Configuration/sources/_components/ldapCondition/useLdapAttributes';
 import BaseRuleFormGroupLdapConditions
@@ -211,10 +219,10 @@ import {provide} from '@vue/composition-api';
 import ProvidedKeys from '@/views/Configuration/sources/_components/ldapCondition/ProvidedKeys';
 import {ldapFormsSupported} from '@/views/Configuration/sources/_components/ldapCondition/common';
 
-function setup(props){
+function setup(props) {
   const ret = setupForm(props)
   // TODO support other ldap types
-  if(ldapFormsSupported.includes(props.form.type)) {
+  if (ldapFormsSupported.includes(props.form.type)) {
     provide(ProvidedKeys.conditionsComponent, BaseRuleFormGroupLdapConditions)
     useLdapAttributes(props)
   }
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLinkedIn.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLinkedIn.vue
index 537fda244f31..8b6cc627f93c 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLinkedIn.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeLinkedIn.vue
@@ -6,93 +6,95 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('API URL')"
+                     :column-label="$i18n.t('API URL')"
     />
 
     <form-group-authorize-path namespace="authorize_path"
-      :column-label="$i18n.t('API Authorize Path')"
+                               :column-label="$i18n.t('API Authorize Path')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('API Token Path')"
+                                  :column-label="$i18n.t('API Token Path')"
     />
 
     <form-group-access-token-param namespace="access_token_param"
-      :column-label="$i18n.t('Access Token Parameter')"
+                                   :column-label="$i18n.t('Access Token Parameter')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                      :column-label="$i18n.t('Scope')"
+                      :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('API URL of logged user')"
+                                       :column-label="$i18n.t('API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenParam,
   FormGroupAccessTokenPath,
@@ -139,7 +141,7 @@ const components = {
   FormGroupSite,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeNull.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeNull.vue
index 0b3b2c99a1b8..adf35f829a2f 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeNull.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeNull.vue
@@ -6,25 +6,27 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-email-required namespace="email_required"
-      :column-label="$i18n.t('Email required')"
+                               :column-label="$i18n.t('Email required')"
+                               :enabled-value="1"
+                               :disabled-value="0"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAuthenticationRules,
   FormGroupDescription,
@@ -41,7 +43,7 @@ const components = {
   FormGroupIdentifier,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeOpenId.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeOpenId.vue
index 10d8c2f18dc8..d8f7ad40b855 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeOpenId.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeOpenId.vue
@@ -6,98 +6,100 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('API URL')"
+                     :column-label="$i18n.t('API URL')"
     />
 
     <form-group-authorize-path namespace="authorize_path"
-      :column-label="$i18n.t('API Authorize Path')"
+                               :column-label="$i18n.t('API Authorize Path')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('API Token Path')"
+                                  :column-label="$i18n.t('API Token Path')"
     />
 
     <form-group-scope-string namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                             :column-label="$i18n.t('Scope')"
+                             :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('API URL of logged user')"
+                                       :column-label="$i18n.t('API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
 
     <form-group-person-mappings namespace="person_mappings"
-      :column-label="$i18n.t('User Mappings')"
+                                :column-label="$i18n.t('User Mappings')"
     />
 
     <form-group-username-attribute namespace="username_attribute"
-      :column-label="$i18n.t('Username Attribute')"
-      :text="$i18n.t('Main reference attribute that contain the username.')"
+                                   :column-label="$i18n.t('Username Attribute')"
+                                   :text="$i18n.t('Main reference attribute that contain the username.')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenPath,
   FormGroupAdministrationRules,
@@ -146,7 +148,7 @@ const components = {
   FormGroupUsernameAttribute,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypePaypal.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypePaypal.vue
index fcef12732a06..1af3bfd441c5 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypePaypal.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypePaypal.vue
@@ -6,94 +6,100 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-currency namespace="currency"
-      :column-label="$i18n.t('Currency')"
+                         :column-label="$i18n.t('Currency')"
     />
 
     <form-group-send-email-confirmation namespace="send_email_confirmation"
-      :column-label="$i18n.t('Send billing confirmation')"
+                                        :column-label="$i18n.t('Send billing confirmation')"
+                                        enabled-value="enabled"
+                                        disabled-value="disabled"
     />
 
     <form-group-test-mode namespace="test_mode"
-      :column-label="$i18n.t('Test mode')"
+                          :column-label="$i18n.t('Test mode')"
+                          :enabled-value="1"
+                          :disabled-value="0"
     />
 
     <form-group-identity-token namespace="identity_token"
-      :column-label="$i18n.t('Identity token')"
+                               :column-label="$i18n.t('Identity token')"
     />
 
     <form-group-cert-identifier namespace="cert_id"
-      :column-label="$i18n.t('Cert ID')"
+                                :column-label="$i18n.t('Cert ID')"
     />
 
     <form-group-cert-file namespace="cert_file"
-      :column-label="$i18n.t('Certificate File')"
-      :title="$i18n.t('Upload Certificate File')"
-      :text="$i18n.t('The path to the certificate you submitted to Paypal.')"
+                          :column-label="$i18n.t('Certificate File')"
+                          :title="$i18n.t('Upload Certificate File')"
+                          :text="$i18n.t('The path to the certificate you submitted to Paypal.')"
     />
 
     <form-group-key-file namespace="key_file"
-      :column-label="$i18n.t('Key File')"
-      :title="$i18n.t('Upload Key File')"
-      :text="$i18n.t('The path to the associated key of the certificate you submitted to Paypal.')"
+                         :column-label="$i18n.t('Key File')"
+                         :title="$i18n.t('Upload Key File')"
+                         :text="$i18n.t('The path to the associated key of the certificate you submitted to Paypal.')"
     />
 
     <form-group-paypal-cert-file namespace="paypal_cert_file"
-      :column-label="$i18n.t('Paypal Certificate File')"
-      :title="$i18n.t('Upload Paypal Certificate File')"
-      :text="$i18n.t('The path to the Paypal certificate you downloaded.')"
+                                 :column-label="$i18n.t('Paypal Certificate File')"
+                                 :title="$i18n.t('Upload Paypal Certificate File')"
+                                 :text="$i18n.t('The path to the Paypal certificate you downloaded.')"
     />
 
     <form-group-email-address namespace="email_address"
-      :column-label="$i18n.t('Email address')"
-      :text="$i18n.t('The email address associated to your paypal account.')"
+                              :column-label="$i18n.t('Email address')"
+                              :text="$i18n.t('The email address associated to your paypal account.')"
     />
 
     <form-group-payment-type namespace="payment_type"
-      :column-label="$i18n.t('Payment type')"
+                             :column-label="$i18n.t('Payment type')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCertFile,
   FormGroupCertIdentifier,
@@ -138,7 +144,7 @@ const components = {
   FormGroupTestMode,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeRadius.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeRadius.vue
index 329fc4ba09ac..dc28a547a19d 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeRadius.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeRadius.vue
@@ -6,67 +6,71 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+                     :column-label="$i18n.t('Host')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
-      :text="$i18n.t('If you use this source in the realm configuration the accounting port will be this port + 1.')"
+                     :column-label="$i18n.t('Port')"
+                     :text="$i18n.t('If you use this source in the realm configuration the accounting port will be this port + 1.')"
     />
 
     <form-group-secret namespace="secret"
-      :column-label="$i18n.t('Secret')"
+                       :column-label="$i18n.t('Secret')"
     />
 
     <form-group-timeout namespace="timeout"
-      :column-label="$i18n.t('Timeout')"
+                        :column-label="$i18n.t('Timeout')"
     />
 
     <form-group-monitor namespace="monitor"
-      :column-label="$i18n.t('Monitor')"
-      :text="$i18n.t('Do you want to monitor this source?')"
+                        :column-label="$i18n.t('Monitor')"
+                        :text="$i18n.t('Do you want to monitor this source?')"
+                        :enabled-value="1"
+                        :disabled-value="0"
     />
 
     <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              :enabled-value="1"
+                              :disabled-value="0"
     />
 
     <form-group-nas-ip-address namespace="nas_ip_address"
-      :column-label="$i18n.t('NAS IP Address')"
-      :text="$i18n.t('Which NAS IP Address to use when communicating with the RADIUS server. Leaving this empty will make the source use the management IP of the server (management VIP in a cluster).')"
+                               :column-label="$i18n.t('NAS IP Address')"
+                               :text="$i18n.t('Which NAS IP Address to use when communicating with the RADIUS server. Leaving this empty will make the source use the management IP of the server (management VIP in a cluster).')"
     />
 
     <form-group-options namespace="options"
-      :column-label="$i18n.t('Options')"
-      :text="$i18n.t('Define options for FreeRADIUS home_server definition (if you use the source in the realm configuration). Need a radiusd restart.')"
+                        :column-label="$i18n.t('Options')"
+                        :text="$i18n.t('Define options for FreeRADIUS home_server definition (if you use the source in the realm configuration). Need a radiusd restart.')"
     />
 
     <form-group-realms namespace="realms"
-      :column-label="$i18n.t('Associated Realms')"
-      :text="$i18n.t('Realms that will be associated with this source (for the portal/admin GUI/RADIUS post-auth, not for FreeRADIUS proxy).')"
+                       :column-label="$i18n.t('Associated Realms')"
+                       :text="$i18n.t('Realms that will be associated with this source (for the portal/admin GUI/RADIUS post-auth, not for FreeRADIUS proxy).')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAdministrationRules,
   FormGroupAuthenticationRules,
@@ -101,7 +105,7 @@ const components = {
   FormGroupUseConnector,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSms.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSms.vue
index 5dbf158be8ba..34cb627a78e1 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSms.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSms.vue
@@ -6,65 +6,67 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-sms-carriers namespace="sms_carriers"
-      :column-label="$i18n.t('SMS Carriers')"
-      :text="$i18n.t('List of phone carriers available to the user.')"
+                             :column-label="$i18n.t('SMS Carriers')"
+                             :text="$i18n.t('List of phone carriers available to the user.')"
     />
 
     <form-group-sms-activation-timeout namespace="sms_activation_timeout"
-      :column-label="$i18n.t('SMS Activation Timeout')"
-      :text="$i18n.t('This is the delay given to a guest who registered by SMS confirmation to fill the PIN code.')"
+                                       :column-label="$i18n.t('SMS Activation Timeout')"
+                                       :text="$i18n.t('This is the delay given to a guest who registered by SMS confirmation to fill the PIN code.')"
     />
 
     <form-group-message namespace="message"
-      :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
+                        :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
     />
 
     <form-group-pin-code-length namespace="pin_code_length"
-      :column-label="$i18n.t('PIN length')"
-      :text="$i18n.t('The amount of digits of the PIN number.')"
+                                :column-label="$i18n.t('PIN length')"
+                                :text="$i18n.t('The amount of digits of the PIN number.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAuthenticationRules,
   FormGroupCreateLocalAccount,
@@ -97,7 +99,7 @@ const components = {
   FormGroupSmsCarriers,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSponsorEmail.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSponsorEmail.vue
index 6c1d830bcb5b..a1914883628a 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSponsorEmail.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeSponsorEmail.vue
@@ -6,96 +6,102 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-sources namespace="sources"
-      :column-label="$i18n.t('Associated Sources')"
-      :text="$i18n.t('Sources that will be associated with this source (For the Sponsor).\nOnly sources able to find an email address can be selected.')"
+                        :column-label="$i18n.t('Associated Sources')"
+                        :text="$i18n.t('Sources that will be associated with this source (For the Sponsor).\nOnly sources able to find an email address can be selected.')"
     />
 
     <form-group-banned-domains namespace="banned_domains"
-      :column-label="$i18n.t('Banned Domains')"
-      :text="$i18n.t('Domains that are banned for email registration. Wildcards are accepted (*pfdemo.org). Banned domains are checked before allowed domains.')"
+                               :column-label="$i18n.t('Banned Domains')"
+                               :text="$i18n.t('Domains that are banned for email registration. Wildcards are accepted (*pfdemo.org). Banned domains are checked before allowed domains.')"
     />
 
     <form-group-allowed-domains namespace="allowed_domains"
-      :column-label="$i18n.t('Allowed Domains')"
-      :text="$i18n.t('Domains that are allowed for email registration. Wildcards are accepted (*pfdemo.org). Allowed domains are checked after banned domains.')"
+                                :column-label="$i18n.t('Allowed Domains')"
+                                :text="$i18n.t('Domains that are allowed for email registration. Wildcards are accepted (*pfdemo.org). Allowed domains are checked after banned domains.')"
     />
 
     <form-group-email-activation-timeout namespace="email_activation_timeout"
-      :column-label="$i18n.t('Email Activation Timeout')"
-      :text="$i18n.t('This is the delay given to the sponsor to log into his email and click the activation link.')"
+                                         :column-label="$i18n.t('Email Activation Timeout')"
+                                         :text="$i18n.t('This is the delay given to the sponsor to log into his email and click the activation link.')"
     />
 
     <form-group-allow-localdomain namespace="allow_localdomain"
-      :column-label="$i18n.t('Allow Local Domain')"
-      :text="$i18n.t('Accept self-registration with email address from the local domain.')"
+                                  :column-label="$i18n.t('Allow Local Domain')"
+                                  :text="$i18n.t('Accept self-registration with email address from the local domain.')"
+                                  enabled-value="yes"
+                                  disabled-value="no"
     />
 
     <form-group-activation-domain namespace="activation_domain"
-      :column-label="$i18n.t('Host in activation link')"
-      :text="$i18n.t('Set this value if you want to change the hostname in the validation link. Changing this requires to restart haproxy to be fully effective.')"
+                                  :column-label="$i18n.t('Host in activation link')"
+                                  :text="$i18n.t('Set this value if you want to change the hostname in the validation link. Changing this requires to restart haproxy to be fully effective.')"
     />
 
     <form-group-sponsorship-bcc namespace="sponsorship_bcc"
-      :column-label="$i18n.t('Sponsorship BCC')"
-      :text="$i18n.t(`Sponsors requesting access and access confirmation emails are BCC'ed to this address. Multiple destinations can be comma-separated.`)"
+                                :column-label="$i18n.t('Sponsorship BCC')"
+                                :text="$i18n.t(`Sponsors requesting access and access confirmation emails are BCC'ed to this address. Multiple destinations can be comma-separated.`)"
     />
 
     <form-group-register-on-activation namespace="register_on_activation"
-      :column-label="$i18n.t('Register on activation')"
-      :text="$i18n.t('Whether or not to register the user when the sponsor enables the access. When this is disabled, it requires the user to stay on the portal while it waits for the sponsor to enable the access in order to be able to chain this authentication with other portal modules.')"
+                                       :column-label="$i18n.t('Register on activation')"
+                                       :text="$i18n.t('Whether or not to register the user when the sponsor enables the access. When this is disabled, it requires the user to stay on the portal while it waits for the sponsor to enable the access in order to be able to chain this authentication with other portal modules.')"
     />
 
     <form-group-validate-sponsor namespace="validate_sponsor"
-      :column-label="$i18n.t('Sponsor Validation')"
-      :text="$i18n.t('Force sponsor to authenticate when validating a guest request.')"
+                                 :column-label="$i18n.t('Sponsor Validation')"
+                                 :text="$i18n.t('Force sponsor to authenticate when validating a guest request.')"
+                                 enabled-value="yes"
+                                 disabled-value="no"
     />
 
     <form-group-lang namespace="lang"
-      :column-label="$i18n.t('Language')"
-      :text="$i18n.t('Language for sponsor email.')"
+                     :column-label="$i18n.t('Language')"
+                     :text="$i18n.t('Language for sponsor email.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupActivationDomain,
   FormGroupAllowedDomains,
@@ -140,7 +146,7 @@ const components = {
   FormGroupValidateSponsor
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeStripe.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeStripe.vue
index c9141870a433..1ce810ad24e2 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeStripe.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeStripe.vue
@@ -6,76 +6,84 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-currency namespace="currency"
-      :column-label="$i18n.t('Currency')"
+                         :column-label="$i18n.t('Currency')"
     />
 
     <form-group-send-email-confirmation namespace="send_email_confirmation"
-      :column-label="$i18n.t('Send billing confirmation')"
+                                        :column-label="$i18n.t('Send billing confirmation')"
+                                        enabled-value="enabled"
+                                        disabled-value="disabled"
     />
 
     <form-group-test-mode namespace="test_mode"
-      :column-label="$i18n.t('Test mode')"
+                          :column-label="$i18n.t('Test mode')"
+                          :enabled-value="1"
+                          :disabled-value="0"
     />
 
     <form-group-secret-key namespace="secret_key"
-      :column-label="$i18n.t('Secret key')"
+                           :column-label="$i18n.t('Secret key')"
     />
 
     <form-group-publishable-key namespace="publishable_key"
-      :column-label="$i18n.t('Publishable key')"
+                                :column-label="$i18n.t('Publishable key')"
     />
 
     <form-group-style namespace="style"
-      :column-label="$i18n.t('Style')"
+                      :column-label="$i18n.t('Style')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-customer-portal namespace="customer_portal"
-      :column-label="$i18n.t('Customer portal')"
-      :text="$i18n.t('Whether or not the Stripe Customer Portal should be enabled for this source.')"
+                                :column-label="$i18n.t('Customer portal')"
+                                :text="$i18n.t('Whether or not the Stripe Customer Portal should be enabled for this source.')"
+                                :enabled-value="1"
+                                :disabled-value="0"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCustomerPortal,
   FormGroupCreateLocalAccount,
@@ -114,7 +122,7 @@ const components = {
   FormGroupTestMode,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeTwilio.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeTwilio.vue
index 30e53d3426f9..8f4beb2d5d26 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeTwilio.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeTwilio.vue
@@ -6,70 +6,72 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-account-sid namespace="account_sid"
-      :column-label="$i18n.t('Account SID')"
-      :text="$i18n.t('Twilio Account SID.')"
+                            :column-label="$i18n.t('Account SID')"
+                            :text="$i18n.t('Twilio Account SID.')"
     />
 
     <form-group-auth-token namespace="auth_token"
-      :column-label="$i18n.t('Auth Token')"
-      :text="$i18n.t('Twilio Auth Token.')"
+                           :column-label="$i18n.t('Auth Token')"
+                           :text="$i18n.t('Twilio Auth Token.')"
     />
 
     <form-group-twilio-phone-number namespace="twilio_phone_number"
-      :column-label="$i18n.t('Phone Number (From)')"
-      :text="$i18n.t('Twilio provided phone number which will show as the sender.')"
+                                    :column-label="$i18n.t('Phone Number (From)')"
+                                    :text="$i18n.t('Twilio provided phone number which will show as the sender.')"
     />
 
     <form-group-message namespace="message"
-      :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
+                        :column-label="$i18n.t('SMS text message ($pin will be replaced by the PIN number)')"
     />
 
     <form-group-pin-code-length namespace="pin_code_length"
-      :column-label="$i18n.t('PIN length')"
-      :text="$i18n.t('The amount of digits of the PIN number.')"
+                                :column-label="$i18n.t('PIN length')"
+                                :text="$i18n.t('The amount of digits of the PIN number.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccountSid,
   FormGroupAuthenticationRules,
@@ -104,7 +106,7 @@ const components = {
   FormGroupTwilioPhoneNumber,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeWindowsLive.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeWindowsLive.vue
index 96879951a2aa..30286694277a 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeWindowsLive.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/FormTypeWindowsLive.vue
@@ -6,93 +6,95 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-client-identifier namespace="client_id"
-      :column-label="$i18n.t('App ID')"
+                                  :column-label="$i18n.t('App ID')"
     />
 
     <form-group-client-secret namespace="client_secret"
-      :column-label="$i18n.t('App Secret')"
+                              :column-label="$i18n.t('App Secret')"
     />
 
     <form-group-site namespace="site"
-      :column-label="$i18n.t('API URL')"
+                     :column-label="$i18n.t('API URL')"
     />
 
     <form-group-authorize-path namespace="authorize_path"
-      :column-label="$i18n.t('API Authorize Path')"
+                               :column-label="$i18n.t('API Authorize Path')"
     />
 
     <form-group-access-token-path namespace="access_token_path"
-      :column-label="$i18n.t('API Token Path')"
+                                  :column-label="$i18n.t('API Token Path')"
     />
 
     <form-group-access-token-param namespace="access_token_param"
-      :column-label="$i18n.t('Access Token Parameter')"
+                                   :column-label="$i18n.t('Access Token Parameter')"
     />
 
     <form-group-scope namespace="scope"
-      :column-label="$i18n.t('Scope')"
-      :text="$i18n.t('The permissions the application requests.')"
+                      :column-label="$i18n.t('Scope')"
+                      :text="$i18n.t('The permissions the application requests.')"
     />
 
     <form-group-protected-resource-url namespace="protected_resource_url"
-      :column-label="$i18n.t('API URL of logged user')"
+                                       :column-label="$i18n.t('API URL of logged user')"
     />
 
     <form-group-redirect-url namespace="redirect_url"
-      :column-label="$i18n.t('Portal URL')"
-      :text="$i18n.t('The hostname must be the one of your captive portal.')"
+                             :column-label="$i18n.t('Portal URL')"
+                             :text="$i18n.t('The hostname must be the one of your captive portal.')"
     />
 
     <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
+                        :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('Comma-separated list of domains that will be resolve with the correct IP addresses.')"
     />
 
     <form-group-create-local-account namespace="create_local_account"
-      :column-label="$i18n.t('Create Local Account')"
-      :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     :column-label="$i18n.t('Create Local Account')"
+                                     :text="$i18n.t('Create a local account on the PacketFence system based on the username provided.')"
+                                     enabled-value="yes"
+                                     disabled-value="no"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database.This will only affect newly created or reset passwords.')"
     />
 
     <form-group-password-length namespace="password_length"
-      :column-label="$i18n.t('Password length')"
-      :text="$i18n.t('The length of the password to generate.')"
+                                :column-label="$i18n.t('Password length')"
+                                :text="$i18n.t('The length of the password to generate.')"
     />
 
     <form-group-local-account-logins namespace="local_account_logins"
-      :column-label="$i18n.t('Amount of logins for the local account')"
-      :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
+                                     :column-label="$i18n.t('Amount of logins for the local account')"
+                                     :text="$i18n.t('The amount of times, the local account can be used after its created. 0 means infinite.')"
     />
 
     <form-group-local-account-expiration namespace="local_account_expiration"
-      :column-label="$i18n.t('Local account expiration')"
-      :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
+                                         :column-label="$i18n.t('Local account expiration')"
+                                         :text="$i18n.t('The amount of time after which the local account will expire. A value of 0 will use the access duration that is found via the authentication rules for the user.')"
     />
 
     <form-group-authentication-rules namespace="authentication_rules"
-      :column-label="$i18n.t('Authentication Rules')"
+                                     :column-label="$i18n.t('Authentication Rules')"
     />
 
     <form-group-administration-rules namespace="administration_rules"
-      :column-label="$i18n.t('Administration Rules')"
+                                     :column-label="$i18n.t('Administration Rules')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAccessTokenParam,
   FormGroupAccessTokenPath,
@@ -139,7 +141,7 @@ const components = {
   FormGroupSite,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/index.js b/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
index 929c6d85665d..fc78ba8c7343 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/index.js
@@ -8,10 +8,8 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
   BaseFormGroupTextarea,
-  BaseFormGroupToggle,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupToggleNoYes,
   BaseServices,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import BaseFormGroupActiveDirectoryPasswordTest from './BaseFormGroupActiveDirectoryPasswordTest'
@@ -35,7 +33,7 @@ export {
   BaseFormGroupInput                        as FormGroupActivationDomain,
   BaseFormGroupAdministrationRules          as FormGroupAdministrationRules,
   BaseFormGroupDomains                      as FormGroupAllowedDomains,
-  BaseFormGroupToggleNoYes                  as FormGroupAllowLocaldomain,
+  BaseFormGroupSwitch                       as FormGroupAllowLocaldomain,
   BaseFormGroupInput                        as FormGroupApiKey,
   BaseFormGroupInputPassword                as FormGroupApiPassword,
   BaseFormGroupInput                        as FormGroupApiUsername,
@@ -51,7 +49,7 @@ export {
   BaseFormGroupInput                        as FormGroupBaseDn,
   BaseFormGroupInput                        as FormGroupBindDn,
   BaseFormGroupFileUpload                   as FormGroupCaFile,
-  BaseFormGroupToggle                       as FormGroupCacheMatch,
+  BaseFormGroupSwitch                       as FormGroupCacheMatch,
   BaseFormGroupFileUpload                   as FormGroupCertFile,
   BaseFormGroupInput                        as FormGroupCertIdentifier,
   BaseFormGroupFileUpload                   as FormGroupClientCertFile,
@@ -59,16 +57,16 @@ export {
   BaseFormGroupFileUpload                   as FormGroupClientKeyFile,
   BaseFormGroupInput                        as FormGroupClientSecret,
   BaseFormGroupInputNumber                  as FormGroupConnectionTimeout,
-  BaseFormGroupToggleNoYes                  as FormGroupCreateLocalAccount,
+  BaseFormGroupSwitch                       as FormGroupCreateLocalAccount,
   BaseFormGroupChosenOne                    as FormGroupCurrency,
-  BaseFormGroupToggle                       as FormGroupCustomerPortal,
+  BaseFormGroupSwitch                       as FormGroupCustomerPortal,
   BaseFormGroupInputNumber                  as FormGroupDeadDuration,
   BaseFormGroupInput                        as FormGroupDescription,
   BaseFormGroupInput                        as FormGroupDomains,
   BaseFormGroupIntervalUnit                 as FormGroupEmailActivationTimeout,
   BaseFormGroupInput                        as FormGroupEmailAddress,
   BaseFormGroupInput                        as FormGroupEmailAttribute,
-  BaseFormGroupToggleNoYes                  as FormGroupEmailRequired,
+  BaseFormGroupSwitch                       as FormGroupEmailRequired,
   BaseFormGroupInput                        as FormGroupGroupHeader,
   BaseFormGroupChosenOne                    as FormGroupHashPasswords,
   BaseFormGroupInput                        as FormGroupHost,
@@ -85,7 +83,7 @@ export {
   BaseFormGroupInputNumber                  as FormGroupLocalAccountLogins,
   BaseFormGroupChosenMultiple               as FormGroupLocalRealm,
   BaseFormGroupTextarea                     as FormGroupMessage,
-  BaseFormGroupToggle                       as FormGroupMonitor,
+  BaseFormGroupSwitch                       as FormGroupMonitor,
   BaseFormGroupInput                        as FormGroupNasIpAddress,
   BaseFormGroupTextarea                     as FormGroupOptions,
   BaseFormGroupActiveDirectoryPasswordTest  as FormGroupPassword,
@@ -105,7 +103,7 @@ export {
   BaseFormGroupInputNumber                  as FormGroupReadTimeout,
   BaseFormGroupChosenMultiple               as FormGroupRealms,
   BaseFormGroupInput                        as FormGroupRedirectUrl,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupRegisterOnActivation,
+  BaseFormGroupSwitch                       as FormGroupRegisterOnActivation,
   BaseFormGroupChosenMultiple               as FormGroupRejectRealm,
   BaseFormGroupChosenOne                    as FormGroupScope,
   BaseFormGroupInput                        as FormGroupScopeString,
@@ -113,11 +111,11 @@ export {
   BaseFormGroupInput                        as FormGroupSearchAttributesAppend,
   BaseFormGroupInputPassword                as FormGroupSecret,
   BaseFormGroupInput                        as FormGroupSecretKey,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupSendEmailConfirmation,
+  BaseFormGroupSwitch                       as FormGroupSendEmailConfirmation,
   BaseFormGroupInput                        as FormGroupServiceProviderEntityIdentifier,
   BaseFormGroupFileUpload                   as FormGroupServiceProviderCertPath,
   BaseFormGroupFileUpload                   as FormGroupServiceProviderKeyPath,
-  BaseFormGroupToggle                       as FormGroupShuffle,
+  BaseFormGroupSwitch                       as FormGroupShuffle,
   BaseFormGroupInput                        as FormGroupSite,
   BaseFormGroupIntervalUnit                 as FormGroupSmsActivationTimeout,
   BaseFormGroupChosenMultiple               as FormGroupSmsCarriers,
@@ -125,15 +123,15 @@ export {
   BaseFormGroupInput                        as FormGroupSponsorshipBcc,
   BaseFormGroupChosenOne                    as FormGroupStyle,
   BaseFormGroupInput                        as FormGroupTenantIdentifier,
-  BaseFormGroupToggle                       as FormGroupTestMode,
+  BaseFormGroupSwitch                       as FormGroupTestMode,
   BaseFormGroupInput                        as FormGroupTimeout,
   BaseFormGroupInput                        as FormGroupTwilioPhoneNumber,
-  BaseFormGroupToggle                       as FormGroupUseConnector,
+  BaseFormGroupSwitch                       as FormGroupUseConnector,
   BaseFormGroupInputNumber                  as FormGroupUserGroupsCache,
   BaseFormGroupInput                        as FormGroupUserHeader,
   BaseFormGroupChosenOne                    as FormGroupUsernameAttribute,
   BaseFormGroupInput                        as FormGroupUsernameAttributeString,
-  BaseFormGroupToggleNoYes                  as FormGroupValidateSponsor,
+  BaseFormGroupSwitch                       as FormGroupValidateSponsor,
   BaseFormGroupChosenOne                    as FormGroupVerify,
   BaseFormGroupInputNumber                  as FormGroupWriteTimeout,
   BaseFormGroupTextarea                     as FormGroupEduroamOptions,

From d41f26182cfe8429952e0bc6c45b4cf9105d8d38 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Fri, 7 Jul 2023 14:02:12 +0300
Subject: [PATCH 08/51] Change to switch UI component in switch group forms

---
 .../switchGroups/_components/TheForm.vue      | 291 +++++++++---------
 .../switchGroups/_components/index.js         |   3 +-
 2 files changed, 156 insertions(+), 138 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue
index 44103b732783..bc8059f75f62 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue
@@ -8,74 +8,76 @@
     <b-tabs>
       <template v-slot:tabs-end>
         <div class="text-right mr-3">
-          <base-input-toggle-advanced-mode v-model="advancedMode" label-left />
+          <base-input-toggle-advanced-mode v-model="advancedMode" label-left/>
         </div>
       </template>
 
       <base-form-tab :title="$i18n.t('Definition')" active>
 
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Identifier')"
+                               :column-label="$i18n.t('Identifier')"
         />
 
         <form-group-identifier namespace="description"
-          :column-label="$i18n.t('Description')"
+                               :column-label="$i18n.t('Description')"
         />
 
         <form-group-type namespace="type"
-          :column-label="$i18n.t('Type')"
+                         :column-label="$i18n.t('Type')"
         />
 
         <form-group-mode namespace="mode"
-          :column-label="$i18n.t('Mode')"
+                         :column-label="$i18n.t('Mode')"
         />
 
         <form-group-deauthentication-method namespace="deauthMethod"
-          :column-label="$i18n.t('Deauthentication Method')"
+                                            :column-label="$i18n.t('Deauthentication Method')"
         />
 
         <form-group-deauth-on-previous namespace="deauthOnPrevious"
-          :column-label="$i18n.t('Deauth on previous switch')"
-          :text="$i18n.t('This option parameter will allow you to do the deauthentication/CoA on the previous switch where the device was connected.')"
+                                       :column-label="$i18n.t('Deauth on previous switch')"
+                                       :text="$i18n.t('This option parameter will allow you to do the deauthentication/CoA on the previous switch where the device was connected.')"
+                                       enabled-value="Y"
+                                       disabled-value="N"
         />
 
         <form-group-external-portal-enforcement namespace="ExternalPortalEnforcement"
-          v-show="supports(['ExternalPortal'])"
-          :column-label="$i18n.t('External Portal Enforcement')"
-          :text="$i18n.t('Enable external portal enforcement when supported by network equipment.')"
+                                                v-show="supports(['ExternalPortal'])"
+                                                :column-label="$i18n.t('External Portal Enforcement')"
+                                                :text="$i18n.t('Enable external portal enforcement when supported by network equipment.')"
         />
 
         <form-group-voip-enabled namespace="VoIPEnabled"
-          :column-label="$i18n.t('VoIP')"
+                                 :column-label="$i18n.t('VoIP')"
         />
 
         <form-group-voip-lldp-detect namespace="VoIPLLDPDetect"
-          v-show="supports(['Lldp'])"
-          :column-label="$i18n.t('VoIP LLDP Detect')"
-          :text="$i18n.t('Detect VoIP with a SNMP request in the LLDP MIB.')"
+                                     v-show="supports(['Lldp'])"
+                                     :column-label="$i18n.t('VoIP LLDP Detect')"
+                                     :text="$i18n.t('Detect VoIP with a SNMP request in the LLDP MIB.')"
         />
 
         <form-group-voip-cdp-detect namespace="VoIPCDPDetect"
-          v-show="supports(['Cdp'])"
-          :column-label="$i18n.t('VoIP CDP Detect')"
-          :text="$i18n.t('Detect VoIP with a SNMP request in the CDP MIB.')"
+                                    v-show="supports(['Cdp'])"
+                                    :column-label="$i18n.t('VoIP CDP Detect')"
+                                    :text="$i18n.t('Detect VoIP with a SNMP request in the CDP MIB.')"
         />
 
         <form-group-voip-dhcp-detect namespace="VoIPDHCPDetect"
-          :column-label="$i18n.t('VoIP DHCP Detect')"
-          :text="$i18n.t('Detect VoIP with the DHCP Fingerprint.')"
+                                     :column-label="$i18n.t('VoIP DHCP Detect')"
+                                     :text="$i18n.t('Detect VoIP with the DHCP Fingerprint.')"
         />
 
         <form-group-uplink-dynamic namespace="uplink_dynamic"
-          v-show="supports(['WiredMacAuth', 'WiredDot1x'])"
-          :column-label="$i18n.t('Dynamic Uplinks')"
-          :text="$i18n.t('Dynamically lookup uplinks.')"
+                                   v-show="supports(['WiredMacAuth', 'WiredDot1x'])"
+                                   :column-label="$i18n.t('Dynamic Uplinks')"
+                                   :text="$i18n.t('Dynamically lookup uplinks.')"
         />
 
         <form-group-uplink namespace="uplink"
-          v-show="supports(['WiredMacAuth', 'WiredDot1x']) && !isUplinkDynamic"
-          :column-label="$i18n.t('Static Uplinks')"
-          :text="$i18n.t('Comma-separated list of the switch uplinks.')"
+                           v-show="supports(['WiredMacAuth', 'WiredDot1x']) && !isUplinkDynamic"
+                           :column-label="$i18n.t('Static Uplinks')"
+                           :text="$i18n.t('Comma-separated list of the switch uplinks.')"
         />
 
         <div class="alert alert-warning">
@@ -86,7 +88,8 @@
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Roles')">
 
-        <div v-if="!advancedMode && !supports(['RadiusDynamicVlanAssignment', 'RoleBasedEnforcement', 'VPNRoleBasedEnforcement', 'AccessListBasedEnforcement', 'ExternalPortal'])"
+        <div
+          v-if="!advancedMode && !supports(['RadiusDynamicVlanAssignment', 'RoleBasedEnforcement', 'VPNRoleBasedEnforcement', 'AccessListBasedEnforcement', 'ExternalPortal'])"
           class="alert alert-warning"
         >
           <strong>{{ $i18n.t('Note:') }}</strong>
@@ -95,107 +98,112 @@
 
         <template v-else>
           <b-card v-show="supports(['RadiusDynamicVlanAssignment'])"
-            class="mb-3 pb-0" no-body
+                  class="mb-3 pb-0" no-body
           >
             <b-card-header>
               <h4 class="mb-0" v-t="'Role mapping by VLAN ID'"></h4>
             </b-card-header>
             <div class="card-body pb-0">
               <form-group-toggle-vlan-map namespace="VlanMap"
-                :column-label="$i18n.t('Role by VLAN ID')"
+                                          :column-label="$i18n.t('Role by VLAN ID')"
               />
 
-              <form-group-role-map-vlan v-for="role in roles" :key="`${role}Vlan`" :namespace="`${role}Vlan`"
-                v-show="isVlanMap"
-                :column-label="role"
+              <form-group-role-map-vlan v-for="role in roles" :key="`${role}Vlan`"
+                                        :namespace="`${role}Vlan`"
+                                        v-show="isVlanMap"
+                                        :column-label="role"
               />
             </div>
           </b-card>
 
           <b-card v-show="supports(['RoleBasedEnforcement'])"
-            class="mb-3 pb-0" no-body
+                  class="mb-3 pb-0" no-body
           >
             <b-card-header>
               <h4 class="mb-0" v-t="'Role mapping by Switch Role'"></h4>
             </b-card-header>
             <div class="card-body pb-0">
               <form-group-toggle-role-map namespace="RoleMap"
-                :column-label="$i18n.t('Role by Switch Role')"
+                                          :column-label="$i18n.t('Role by Switch Role')"
               />
 
-              <form-group-role-map-role v-for="role in roles" :key="`${role}Role`" :namespace="`${role}Role`"
-                v-show="isRoleMap"
-                :column-label="role"
+              <form-group-role-map-role v-for="role in roles" :key="`${role}Role`"
+                                        :namespace="`${role}Role`"
+                                        v-show="isRoleMap"
+                                        :column-label="role"
               />
             </div>
           </b-card>
 
           <b-card v-show="supports(['VPNRoleBasedEnforcement'])"
-            class="mb-3 pb-0" no-body
+                  class="mb-3 pb-0" no-body
           >
             <b-card-header>
               <h4 class="mb-0" v-t="'Role mapping by Vpn Role'"></h4>
             </b-card-header>
             <div class="card-body pb-0">
               <form-group-toggle-vpn-map namespace="VpnMap"
-                :column-label="$i18n.t('Role by Vpn Role')"
+                                         :column-label="$i18n.t('Role by Vpn Role')"
               />
 
-              <form-group-role-map-vpn v-for="role in roles" :key="`${role}Vpn`" :namespace="`${role}Vpn`"
-                v-show="isVpnMap"
-                :column-label="role"
+              <form-group-role-map-vpn v-for="role in roles" :key="`${role}Vpn`"
+                                       :namespace="`${role}Vpn`"
+                                       v-show="isVpnMap"
+                                       :column-label="role"
               />
             </div>
           </b-card>
 
           <b-card v-show="supports(['AccessListBasedEnforcement'])"
-            class="mb-3 pb-0" no-body
+                  class="mb-3 pb-0" no-body
           >
             <b-card-header>
               <h4 class="mb-0" v-t="'Role mapping by Access List'"></h4>
             </b-card-header>
-              <b-card v-show="supports(['DownloadableListBasedEnforcement'])"
-                class="mb-3 pb-0" no-body
-              >
-                <form-group-use-downloadable-acls namespace="UseDownloadableACLs"
-                  :column-label="$i18n.t('Use downloadable ACLs instead of Dynamic ACLs')"
-                  :text="$i18n.t('This option parameter will allow you to do enable the Downloadable ACLs radius feature instead of using the Dynamic ACLs.')"
-                />
-                <form-group-downloadable-acls-limit namespace="DownloadableACLsLimit"
-                  :column-label="$i18n.t('Maximum number of ACLs PacketFence can return')"
-                  :text="$i18n.t('This option parameter will allow you to do define the maximum number of ACLs PacketFence can send to the switch.')"
-                />
-              </b-card>
-                <form-group-acls-limit namespace="ACLsLimit"
-                  :column-label="$i18n.t('Maximum number of ACLs PacketFence can return in one RADIUS reply')"
-                  :text="$i18n.t('This option parameter will allow you to do define the maximum number of ACLs PacketFence can send to the switch in a single RADIUS reply.')"
-                />
+            <b-card v-show="supports(['DownloadableListBasedEnforcement'])"
+                    class="mb-3 pb-0" no-body
+            >
+              <form-group-use-downloadable-acls namespace="UseDownloadableACLs"
+                                                :column-label="$i18n.t('Use downloadable ACLs instead of Dynamic ACLs')"
+                                                :text="$i18n.t('This option parameter will allow you to do enable the Downloadable ACLs radius feature instead of using the Dynamic ACLs.')"
+              />
+              <form-group-downloadable-acls-limit namespace="DownloadableACLsLimit"
+                                                  :column-label="$i18n.t('Maximum number of ACLs PacketFence can return')"
+                                                  :text="$i18n.t('This option parameter will allow you to do define the maximum number of ACLs PacketFence can send to the switch.')"
+              />
+            </b-card>
+            <form-group-acls-limit namespace="ACLsLimit"
+                                   :column-label="$i18n.t('Maximum number of ACLs PacketFence can return in one RADIUS reply')"
+                                   :text="$i18n.t('This option parameter will allow you to do define the maximum number of ACLs PacketFence can send to the switch in a single RADIUS reply.')"
+            />
             <div class="card-body pb-0">
               <form-group-toggle-access-list-map namespace="AccessListMap"
-                :column-label="$i18n.t('Role by Access List')"
+                                                 :column-label="$i18n.t('Role by Access List')"
               />
 
-              <form-group-role-map-access-list v-for="role in roles" :key="`${role}AccessList`" :namespace="`${role}AccessList`"
-                v-show="isAccessListMap"
-                :column-label="role"
+              <form-group-role-map-access-list v-for="role in roles" :key="`${role}AccessList`"
+                                               :namespace="`${role}AccessList`"
+                                               v-show="isAccessListMap"
+                                               :column-label="role"
               />
             </div>
           </b-card>
 
           <b-card v-show="supports(['ExternalPortal'])"
-            class="mb-3 pb-0" no-body
+                  class="mb-3 pb-0" no-body
           >
             <b-card-header>
               <h4 class="mb-0" v-t="'Role mapping by Web Auth URL'"></h4>
             </b-card-header>
             <div class="card-body pb-0">
               <form-group-toggle-url-map namespace="UrlMap"
-                :column-label="$i18n.t('Role by Web Auth URL')"
+                                         :column-label="$i18n.t('Role by Web Auth URL')"
               />
 
-              <form-group-role-map-url v-for="role in roles" :key="`${role}Url`" :namespace="`${role}Url`"
-                v-show="isUrlMap"
-                :column-label="role"
+              <form-group-role-map-url v-for="role in roles" :key="`${role}Url`"
+                                       :namespace="`${role}Url`"
+                                       v-show="isUrlMap"
+                                       :column-label="role"
               />
             </div>
           </b-card>
@@ -205,184 +213,185 @@
       <base-form-tab :title="$i18n.t('Inline')">
 
         <form-group-inline-trigger namespace="inlineTrigger"
-          :column-label="$i18n.t('Inline Conditions')"
-          :text="$i18n.t('Set inline mode if any of the conditions are met.')"
+                                   :column-label="$i18n.t('Inline Conditions')"
+                                   :text="$i18n.t('Set inline mode if any of the conditions are met.')"
         />
 
       </base-form-tab>
-      <base-form-tab :title="$i18n.t('RADIUS')" v-if="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x', 'VPN'])">
+      <base-form-tab :title="$i18n.t('RADIUS')"
+                     v-if="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x', 'VPN'])">
 
         <form-group-radius-secret namespace="radiusSecret"
-          :column-label="$i18n.t('Secret Passphrase')"
+                                  :column-label="$i18n.t('Secret Passphrase')"
         />
 
         <form-group-use-coa namespace="useCoA"
-          :column-label="$i18n.t('Use CoA')"
-          :text="$i18n.t('Use CoA when available to deauthenticate the user. When disabled, RADIUS Disconnect will be used instead if it is available.')"
+                            :column-label="$i18n.t('Use CoA')"
+                            :text="$i18n.t('Use CoA when available to deauthenticate the user. When disabled, RADIUS Disconnect will be used instead if it is available.')"
         />
 
         <form-group-radius-deauth-use-connector namespace="radiusDeauthUseConnector"
-          :column-label="$i18n.t('Use Connector For Deauth')"
-          :text="$i18n.t('Use the available PacketFence connectors to perform RADIUS deauth (access reevaluation). By default, a local connector is hosted on this server.')"
+                                                :column-label="$i18n.t('Use Connector For Deauth')"
+                                                :text="$i18n.t('Use the available PacketFence connectors to perform RADIUS deauth (access reevaluation). By default, a local connector is hosted on this server.')"
         />
 
         <form-group-controller-ip namespace="controllerIp"
-          v-show="supports(['WirelessMacAuth', 'WirelessDot1x'])"
-          :column-label="$i18n.t('Controller IP Address')"
-          :text="$i18n.t('Use instead this IP address for de-authentication requests. Normally used for Wi-Fi only.')"
+                                  v-show="supports(['WirelessMacAuth', 'WirelessDot1x'])"
+                                  :column-label="$i18n.t('Controller IP Address')"
+                                  :text="$i18n.t('Use instead this IP address for de-authentication requests. Normally used for Wi-Fi only.')"
         />
 
         <form-group-disconnect-port namespace="disconnectPort"
-          v-show="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x'])"
-          :column-label="$i18n.t('Disconnect Port')"
-          :text="$i18n.t('For Disconnect request, if we have to send to another port.')"
+                                    v-show="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x'])"
+                                    :column-label="$i18n.t('Disconnect Port')"
+                                    :text="$i18n.t('For Disconnect request, if we have to send to another port.')"
         />
 
         <form-group-coa-port namespace="coaPort"
-          v-show="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x'])"
-          :column-label="$i18n.t('CoA Port')"
-          :text="$i18n.t('For CoA request, if we have to send to another port.')"
+                             v-show="supports(['WiredMacAuth', 'WiredDot1x', 'WirelessMacAuth', 'WirelessDot1x'])"
+                             :column-label="$i18n.t('CoA Port')"
+                             :text="$i18n.t('For CoA request, if we have to send to another port.')"
         />
 
         <form-group-post-mfa-validation namespace="PostMfaValidation"
-          :column-label="$i18n.t('Post MFA Validation')"
-          :text="$i18n.t('Add an extra validation in the RADIUS flow to detect if the user successfully validate the MFA.')"
+                                        :column-label="$i18n.t('Post MFA Validation')"
+                                        :text="$i18n.t('Add an extra validation in the RADIUS flow to detect if the user successfully validate the MFA.')"
         />
 
         <form-group-cli-access namespace="cliAccess"
-          :column-label="$i18n.t('CLI/VPN Access Enabled')"
-          :text="$i18n.t('Allow this network equipment to use PacketFence as a RADIUS server for CLI or VPN access.')"
+                               :column-label="$i18n.t('CLI/VPN Access Enabled')"
+                               :text="$i18n.t('Allow this network equipment to use PacketFence as a RADIUS server for CLI or VPN access.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('SNMP')">
 
         <form-group-snmp-use-connector namespace="SNMPUseConnector"
-          :column-label="$i18n.t('Use Connector')"
-          :text="$i18n.t('Use the available PacketFence connectors to connect to this switch in SNMP. By default, a local connector is hosted on this server.')"
+                                       :column-label="$i18n.t('Use Connector')"
+                                       :text="$i18n.t('Use the available PacketFence connectors to connect to this switch in SNMP. By default, a local connector is hosted on this server.')"
         />
 
         <form-group-snmp-version namespace="SNMPVersion"
-          :column-label="$i18n.t('Version')"
+                                 :column-label="$i18n.t('Version')"
         />
 
         <form-group-snmp-community-read namespace="SNMPCommunityRead"
-          :column-label="$i18n.t('Community Read')"
+                                        :column-label="$i18n.t('Community Read')"
         />
 
         <form-group-snmp-community-write namespace="SNMPCommunityWrite"
-          :column-label="$i18n.t('Community Write')"
+                                         :column-label="$i18n.t('Community Write')"
         />
 
         <form-group-snmp-engine-identifier namespace="SNMPEngineID"
-          :column-label="$i18n.t('Engine ID')"
+                                           :column-label="$i18n.t('Engine ID')"
         />
 
         <form-group-snmp-user-name-read namespace="SNMPUserNameRead"
-          :column-label="$i18n.t('User Name Read')"
+                                        :column-label="$i18n.t('User Name Read')"
         />
 
         <form-group-snmp-auth-protocol-read namespace="SNMPAuthProtocolRead"
-          :column-label="$i18n.t('Auth Protocol Read')"
+                                            :column-label="$i18n.t('Auth Protocol Read')"
         />
 
         <form-group-snmp-auth-password-read namespace="SNMPAuthPasswordRead"
-          :column-label="$i18n.t('Auth Password Read')"
+                                            :column-label="$i18n.t('Auth Password Read')"
         />
 
         <form-group-snmp-priv-protocol-read namespace="SNMPPrivProtocolRead"
-          :column-label="$i18n.t('Priv Protocol Read')"
+                                            :column-label="$i18n.t('Priv Protocol Read')"
         />
 
         <form-group-snmp-priv-password-read namespace="SNMPPrivPasswordRead"
-          :column-label="$i18n.t('Priv Password Read')"
+                                            :column-label="$i18n.t('Priv Password Read')"
         />
 
         <form-group-snmp-user-name-write namespace="SNMPUserNameWrite"
-          :column-label="$i18n.t('User Name Write')"
+                                         :column-label="$i18n.t('User Name Write')"
         />
 
         <form-group-snmp-auth-protocol-write namespace="SNMPAuthProtocolWrite"
-          :column-label="$i18n.t('Auth Protocol Write')"
+                                             :column-label="$i18n.t('Auth Protocol Write')"
         />
 
         <form-group-snmp-auth-password-write namespace="SNMPAuthPasswordWrite"
-          :column-label="$i18n.t('Auth Password Write')"
+                                             :column-label="$i18n.t('Auth Password Write')"
         />
 
         <form-group-snmp-priv-protocol-write namespace="SNMPPrivProtocolWrite"
-          :column-label="$i18n.t('Priv Protocol Write')"
+                                             :column-label="$i18n.t('Priv Protocol Write')"
         />
 
         <form-group-snmp-priv-password-write namespace="SNMPPrivPasswordWrite"
-          :column-label="$i18n.t('Priv Password Write')"
+                                             :column-label="$i18n.t('Priv Password Write')"
         />
 
         <form-group-snmp-version-trap namespace="SNMPVersionTrap"
-          :column-label="$i18n.t('Version Trap')"
+                                      :column-label="$i18n.t('Version Trap')"
         />
 
         <form-group-snmp-community-trap namespace="SNMPCommunityTrap"
-          :column-label="$i18n.t('Community Trap')"
+                                        :column-label="$i18n.t('Community Trap')"
         />
 
         <form-group-snmp-user-name-trap namespace="SNMPUserNameTrap"
-          :column-label="$i18n.t('User Name Trap')"
+                                        :column-label="$i18n.t('User Name Trap')"
         />
 
         <form-group-snmp-auth-protocol-trap namespace="SNMPAuthProtocolTrap"
-          :column-label="$i18n.t('Auth Protocol Trap')"
+                                            :column-label="$i18n.t('Auth Protocol Trap')"
         />
 
         <form-group-snmp-auth-password-trap namespace="SNMPAuthPasswordTrap"
-          :column-label="$i18n.t('Auth Password Trap')"
+                                            :column-label="$i18n.t('Auth Password Trap')"
         />
 
         <form-group-snmp-priv-protocol-trap namespace="SNMPPrivProtocolTrap"
-          :column-label="$i18n.t('Priv Protocol Trap')"
+                                            :column-label="$i18n.t('Priv Protocol Trap')"
         />
 
         <form-group-snmp-priv-password-trap namespace="SNMPPrivPasswordTrap"
-          :column-label="$i18n.t('Priv Password Trap')"
+                                            :column-label="$i18n.t('Priv Password Trap')"
         />
 
         <form-group-mac-searches-max-nb namespace="macSearchesMaxNb"
-          :column-label="$i18n.t('Maximum MAC addresses')"
-          :text="$i18n.t('Maximum number of MAC addresses retrived from a port.')"
+                                        :column-label="$i18n.t('Maximum MAC addresses')"
+                                        :text="$i18n.t('Maximum number of MAC addresses retrived from a port.')"
         />
 
         <form-group-mac-searches-sleep-interval namespace="macSearchesSleepInterval"
-          :column-label="$i18n.t('Sleep interval')"
-          :text="$i18n.t('Sleep interval between queries of MAC addresses.')"
+                                                :column-label="$i18n.t('Sleep interval')"
+                                                :text="$i18n.t('Sleep interval between queries of MAC addresses.')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('CLI')">
 
         <form-group-cli-transport namespace="cliTransport"
-          :column-label="$i18n.t('Transport')"
+                                  :column-label="$i18n.t('Transport')"
         />
         <form-group-cli-user namespace="cliUser"
-          :column-label="$i18n.t('Username')"
+                             :column-label="$i18n.t('Username')"
         />
         <form-group-cli-pwd namespace="cliPwd"
-          :column-label="$i18n.t('Password')"
+                            :column-label="$i18n.t('Password')"
         />
         <form-group-cli-enable-pwd namespace="cliEnablePwd"
-          :column-label="$i18n.t('Enable Password')"
+                                   :column-label="$i18n.t('Enable Password')"
         />
 
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Web Services')">
 
         <form-group-web-services-transport namespace="wsTransport"
-          :column-label="$i18n.t('Transport')"
+                                           :column-label="$i18n.t('Transport')"
         />
         <form-group-web-services-user namespace="wsUser"
-          :column-label="$i18n.t('Username')"
+                                      :column-label="$i18n.t('Username')"
         />
         <form-group-web-services-pwd namespace="wsPwd"
-          :column-label="$i18n.t('Password')"
+                                     :column-label="$i18n.t('Password')"
         />
 
       </base-form-tab>
@@ -410,25 +419,32 @@
                     <b-col cols="12" md="auto">
                       <icon v-if="memberIsLoading" name="circle-notch" scale="1.5" spin></icon>
                       <b-media v-else>
-                        <template v-slot:aside><icon name="search" scale="2"></icon></template>
+                        <template v-slot:aside>
+                          <icon name="search" scale="2"></icon>
+                        </template>
                         <h4>{{ $t('No switch group members found') }}</h4>
-                        <p class="font-weight-light">{{ $t('Click the button below to add a new member.') }}</p>
+                        <p class="font-weight-light">
+                          {{ $t('Click the button below to add a new member.') }}</p>
                       </b-media>
                     </b-col>
                   </b-row>
                 </b-container>
               </template>
               <template v-slot:cell(id)="{ item, value }">
-                <b-button variant="link" :to="{ name: 'switch', params: { id: item.id } }">{{ value }}</b-button>
+                <b-button variant="link" :to="{ name: 'switch', params: { id: item.id } }">{{
+                    value
+                  }}
+                </b-button>
               </template>
               <template v-slot:cell(buttons)="{ item }">
                 <base-button-confirm v-if="id !== 'default'"
-                  class="mr-1" size="sm" variant="outline-danger"
-                  :disabled="memberIsLoading"
-                  :confirm="$t('Delete Member?')"
-                  @click="removeMember(item)"
-                  reverse
-                >{{ $t('Delete') }}</base-button-confirm>
+                                     class="mr-1" size="sm" variant="outline-danger"
+                                     :disabled="memberIsLoading"
+                                     :confirm="$t('Delete Member?')"
+                                     @click="removeMember(item)"
+                                     reverse
+                >{{ $t('Delete') }}
+                </base-button-confirm>
               </template>
             </b-table>
           </div>
@@ -447,9 +463,10 @@
             />
 
             <b-button :disabled="!memberIdentifier || memberIsLoading"
-              variant="outline-primary" class="ml-2"
-              @click="addMember()"
-            >{{ $t('Add New Member') }}</b-button>
+                      variant="outline-primary" class="ml-2"
+                      @click="addMember()"
+            >{{ $t('Add New Member') }}
+            </b-button>
           </b-input-group>
         </b-card>
 
@@ -612,8 +629,8 @@ const components = {
   FormGroupWebServicesUser,
 }
 
-import { useForm as useSwitchForm, useFormProps as props } from '../../switches/_composables/useForm'
-import { useForm as useSwitchGroupForm } from '../_composables/useForm'
+import {useForm as useSwitchForm, useFormProps as props} from '../../switches/_composables/useForm'
+import {useForm as useSwitchGroupForm} from '../_composables/useForm'
 
 export const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/index.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/index.js
index 0571544de67b..eff425244e2a 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/index.js
@@ -9,6 +9,7 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
   BaseFormGroupTextarea,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupInlineTrigger from '../../switches/_components/BaseFormGroupInlineTrigger'
 import BaseFormGroupToggleStaticDynamicDefault from '../../switches/_components/BaseFormGroupToggleStaticDynamicDefault'
@@ -72,7 +73,7 @@ export {
   BaseFormGroupToggleNYDefault            as FormGroupUseDownloadableAcls,
   BaseFormGroupInput                      as FormGroupDownloadableAclsLimit,
   BaseFormGroupInput                      as FormGroupAclsLimit,
-  BaseFormGroupToggleNYDefault            as FormGroupDeauthOnPrevious,
+  BaseFormGroupSwitch                     as FormGroupDeauthOnPrevious,
   BaseFormGroupToggleNYDefault            as FormGroupToggleAccessListMap,
   BaseFormGroupToggleNYDefault            as FormGroupToggleRoleMap,
   BaseFormGroupToggleNYDefault            as FormGroupToggleVpnMap,

From 501f01e127a71c8caafae27283c93732da45adfb Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 10 Jul 2023 11:11:54 +0300
Subject: [PATCH 09/51] Export BaseFormGroupSwitch as new component

---
 html/pfappserver/root/src/components/new/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index a74f5c855a86..4a89781a5006 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -78,6 +78,7 @@ import BaseTableEmpty from './BaseTableEmpty'
 import BaseTableSortable from './BaseTableSortable'
 import BaseUpload from './BaseUpload'
 import BaseView from './BaseView'
+import BaseFormGroupSwitch from './BaseFormGroupSwitch.vue';
 
 import { mergeProps, renderHOCWithScopedSlots } from './utils'
 
@@ -120,6 +121,7 @@ export {
   BaseFormGroupToggleNoYes,
   BaseFormGroupToggleNY,
   BaseFormGroupToggleOffOn,
+  BaseFormGroupSwitch,
 
   // icons
   BaseIconPreference,

From 6132b8e2e98397d07884259406620efada7feabc Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 10 Jul 2023 12:35:04 +0300
Subject: [PATCH 10/51] Change connection profiles form to use switch UI
 component

---
 .../_components/TheForm.vue                   | 172 +++++++++++-------
 .../connectionProfiles/_components/index.js   |  33 ++--
 2 files changed, 119 insertions(+), 86 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheForm.vue
index c0005a7542a9..aa0caac1e88a 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheForm.vue
@@ -8,183 +8,215 @@
     <b-tabs>
       <base-form-tab :title="$i18n.t('Settings')" active>
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Profile Name')"
-          :text="$i18n.t('A profile id can only contain alphanumeric characters, dashes, period and or underscores.')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Profile Name')"
+                               :text="$i18n.t('A profile id can only contain alphanumeric characters, dashes, period and or underscores.')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-description namespace="description"
-          :column-label="$i18n.t('Profile Description')"
+                                :column-label="$i18n.t('Profile Description')"
         />
 
         <form-group-status v-show="!isDefault"
-          namespace="status"
-          :column-label="$i18n.t('Enable profile')"
+                           namespace="status"
+                           :column-label="$i18n.t('Enable profile')"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
         />
 
         <form-group-root-module namespace="root_module"
-          :column-label="$i18n.t('Root Portal Module')"
-          :text="$i18n.t('The Root Portal Module to use.')"
+                                :column-label="$i18n.t('Root Portal Module')"
+                                :text="$i18n.t('The Root Portal Module to use.')"
         />
 
         <form-group-preregistration namespace="preregistration"
-          :column-label="$i18n.t('Activate preregistration')"
-          :text="$i18n.t(`This activates preregistration on the connection profile. Meaning, instead of applying the access to the currently connected device, it displays a local account that is created while registering. Note that activating this disables the on-site registration on this connection profile. Also, make sure the sources on the connection profile have 'Create local account' enabled.`)"
+                                    :column-label="$i18n.t('Activate preregistration')"
+                                    :text="$i18n.t(`This activates preregistration on the connection profile. Meaning, instead of applying the access to the currently connected device, it displays a local account that is created while registering. Note that activating this disables the on-site registration on this connection profile. Also, make sure the sources on the connection profile have 'Create local account' enabled.`)"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
         />
 
         <form-group-autoregister namespace="autoregister"
-          :column-label="$i18n.t('Automatically register devices')"
-          :text="$i18n.t('This activates automatic registation of devices for the profile. Devices will not be shown a captive portal and RADIUS authentication credentials will be used to register the device. This option only makes sense in the context of an 802.1x authentication.')"
+                                 :column-label="$i18n.t('Automatically register devices')"
+                                 :text="$i18n.t('This activates automatic registation of devices for the profile. Devices will not be shown a captive portal and RADIUS authentication credentials will be used to register the device. This option only makes sense in the context of an 802.1x authentication.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
         />
 
         <form-group-reuse-dot1x-credentials namespace="reuse_dot1x_credentials"
-          :column-label="$i18n.t('Reuse dot1x credentials')"
-          :text="$i18n.t('This option emulates SSO when someone needs to face the captive portal after a successful 802.1x connection. 802.1x credentials are reused on the portal to match an authentication and get the appropriate actions. As a security precaution, this option will only reuse 802.1x credentials if there is an authentication source matching the provided realm. This means, if users use 802.1x credentials with a domain part (username@domain, domain\\username), the domain part needs to be configured as a realm under the RADIUS section and an authentication source needs to be configured for that realm. If users do not use 802.1x credentials with a domain part, only the NULL realm will be match IF an authentication source is configured for it.')"
+                                            :column-label="$i18n.t('Reuse dot1x credentials')"
+                                            :text="$i18n.t('This option emulates SSO when someone needs to face the captive portal after a successful 802.1x connection. 802.1x credentials are reused on the portal to match an authentication and get the appropriate actions. As a security precaution, this option will only reuse 802.1x credentials if there is an authentication source matching the provided realm. This means, if users use 802.1x credentials with a domain part (username@domain, domain\\username), the domain part needs to be configured as a realm under the RADIUS section and an authentication source needs to be configured for that realm. If users do not use 802.1x credentials with a domain part, only the NULL realm will be match IF an authentication source is configured for it.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
         />
 
         <form-group-dot1x-recompute-role-from-portal namespace="dot1x_recompute_role_from_portal"
-          :column-label="$i18n.t('Dot1x recompute role from portal')"
-          :text="$i18n.t('When enabled, PacketFence will not use the role initialy computed on the portal but will use the dot1x username to recompute the role.')"
+                                                     :column-label="$i18n.t('Dot1x recompute role from portal')"
+                                                     :text="$i18n.t('When enabled, PacketFence will not use the role initialy computed on the portal but will use the dot1x username to recompute the role.')"
+                                                     enabled-value="enabled"
+                                                     disabled-value="disabled"
         />
 
-        <form-group-mac-auth-recompute-role-from-portal namespace="mac_auth_recompute_role_from_portal"
+        <form-group-mac-auth-recompute-role-from-portal
+          namespace="mac_auth_recompute_role_from_portal"
           :column-label="$i18n.t('MAC Auth recompute role from portal')"
           :text="$i18n.t('When enabled, PacketFence will not use the role initialy computed on the portal but will use an authorized source if defined to recompute the role.')"
+          enabled-value="enabled"
+          disabled-value="disabled"
         />
 
         <form-group-dot1x-unset-on-unmatch namespace="dot1x_unset_on_unmatch"
-          :column-label="$i18n.t('Dot1x unset on unmatch')"
-          :text="$i18n.t('When enabled, PacketFence will unset the role of the device if no authentication sources returned one.')"
+                                           :column-label="$i18n.t('Dot1x unset on unmatch')"
+                                           :text="$i18n.t('When enabled, PacketFence will unset the role of the device if no authentication sources returned one.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
         />
 
         <form-group-dpsk namespace="dpsk"
-          :column-label="$i18n.t('Enable DPSK')"
-          :text="$i18n.t('This enables the Dynamic PSK feature on this connection profile. It means that the RADIUS server will answer requests with specific attributes like the PSK key to use to connect on the SSID')"
+                         :column-label="$i18n.t('Enable DPSK')"
+                         :text="$i18n.t('This enables the Dynamic PSK feature on this connection profile. It means that the RADIUS server will answer requests with specific attributes like the PSK key to use to connect on the SSID')"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
         />
 
         <form-group-default-psk-key namespace="default_psk_key"
-          :column-label="$i18n.t('Default PSK key')"
-          :text="$i18n.t('This is the default PSK key when you enable DPSK on this connection profile. The minimum length is eight characters.')"
+                                    :column-label="$i18n.t('Default PSK key')"
+                                    :text="$i18n.t('This is the default PSK key when you enable DPSK on this connection profile. The minimum length is eight characters.')"
         />
 
         <form-group-unbound-dpsk namespace="unbound_dpsk"
-          :column-label="$i18n.t('Enable Unbound DPSK')"
-          :text="$i18n.t('This enable Dynamic Unbound PSK. If the network equipment supports sending attributes that allow to identify the PSK using the Access-Request attributes, then the user attached to the PSK can be found and used in the same manner as in 802.1x.')"
+                                 :column-label="$i18n.t('Enable Unbound DPSK')"
+                                 :text="$i18n.t('This enable Dynamic Unbound PSK. If the network equipment supports sending attributes that allow to identify the PSK using the Access-Request attributes, then the user attached to the PSK can be found and used in the same manner as in 802.1x.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
         />
 
         <form-group-unreg-on-acct-stop namespace="unreg_on_acct_stop"
-          :column-label="$i18n.t('Automatically deregister devices on accounting stop')"
-          :text="$i18n.t('This activates automatic deregistation of devices for the profile if PacketFence receives a RADIUS accounting stop. This option only makes sense in the context of an 802.1x authentication.')"
+                                       :column-label="$i18n.t('Automatically deregister devices on accounting stop')"
+                                       :text="$i18n.t('This activates automatic deregistation of devices for the profile if PacketFence receives a RADIUS accounting stop. This option only makes sense in the context of an 802.1x authentication.')"
+                                       enabled-value="enabled"
+                                       disabled-value="disabled"
         />
 
         <form-group-vlan-pool-technique namespace="vlan_pool_technique"
-          :column-label="$i18n.t('VLAN pool technique')"
-          :text="$i18n.t('The algorithm used to calculate the VLAN in a VLAN pool.')"
+                                        :column-label="$i18n.t('VLAN pool technique')"
+                                        :text="$i18n.t('The algorithm used to calculate the VLAN in a VLAN pool.')"
         />
 
         <form-group-filter-match-style v-show="!isDefault"
-          namespace="filter_match_style"
-          :column-label="$i18n.t('Filters')"
+                                       namespace="filter_match_style"
+                                       :column-label="$i18n.t('Filters')"
         />
 
         <form-group-filter v-show="!isDefault"
-          namespace="filter"
-          :column-label="$i18n.t('Filter')"
-          :text="$i18n.t('With no filter specified, an advanced filter must be specified')"
+                           namespace="filter"
+                           :column-label="$i18n.t('Filter')"
+                           :text="$i18n.t('With no filter specified, an advanced filter must be specified')"
         />
 
         <form-group-advanced-filter v-show="!isDefault"
-          namespace="advanced_filter"
-          :column-label="$i18n.t('Advanced filter')"
-          :text="$i18n.t('The advanced filter acts as an additional filter that is combined with the basic filters and respects all/any')"
+                                    namespace="advanced_filter"
+                                    :column-label="$i18n.t('Advanced filter')"
+                                    :text="$i18n.t('The advanced filter acts as an additional filter that is combined with the basic filters and respects all/any')"
         />
 
         <form-group-sources namespace="sources"
-          :column-label="$i18n.t('Sources')"
-          :text="$i18n.t('With no source specified, all internal and external sources will be used.')"
+                            :column-label="$i18n.t('Sources')"
+                            :text="$i18n.t('With no source specified, all internal and external sources will be used.')"
         />
 
         <form-group-billing-tiers namespace="billing_tiers"
-          :column-label="$i18n.t('Billing Tiers')"
-          :text="$i18n.t('With no billing tiers specified, all billing tiers will be used.')"
+                                  :column-label="$i18n.t('Billing Tiers')"
+                                  :text="$i18n.t('With no billing tiers specified, all billing tiers will be used.')"
         />
 
         <form-group-provisioners namespace="provisioners"
-          :column-label="$i18n.t('Provisioners')"
-          :text="$i18n.t('With no provisioners specified, the provisioners of the default profile will be used.')"
+                                 :column-label="$i18n.t('Provisioners')"
+                                 :text="$i18n.t('With no provisioners specified, the provisioners of the default profile will be used.')"
         />
 
         <form-group-scans namespace="scans"
-          :column-label="$i18n.t('Scanners')"
-          :text="$i18n.t('With no scan specified, the scan engine will not be triggered.')"
+                          :column-label="$i18n.t('Scanners')"
+                          :text="$i18n.t('With no scan specified, the scan engine will not be triggered.')"
         />
 
         <form-group-self-service namespace="self_service"
-          :column-label="$i18n.t('Self service policy')"
+                                 :column-label="$i18n.t('Self service policy')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Captive Portal')">
         <form-group-logo namespace="logo"
-          :column-label="$i18n.t('Logo')"
+                         :column-label="$i18n.t('Logo')"
         />
 
         <form-group-redirect-url namespace="redirecturl"
-          :column-label="$i18n.t('Redirection URL')"
-          :text="$i18n.t('Default URL to redirect to on registration/mitigation release. This is only used if a per-security event redirect URL is not defined.')"
+                                 :column-label="$i18n.t('Redirection URL')"
+                                 :text="$i18n.t('Default URL to redirect to on registration/mitigation release. This is only used if a per-security event redirect URL is not defined.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
         />
 
         <form-group-always-use-redirecturl namespace="always_use_redirecturl"
-          :column-label="$i18n.t('Force redirection URL')"
-          :text="$i18n.t('Under most circumstances we can redirect the user to the URL he originally intended to visit. However, you may prefer to force the captive portal to redirect the user to the redirection URL.')"
+                                           :column-label="$i18n.t('Force redirection URL')"
+                                           :text="$i18n.t('Under most circumstances we can redirect the user to the URL he originally intended to visit. However, you may prefer to force the captive portal to redirect the user to the redirection URL.')"
         />
 
         <form-group-show-manage-devices-on-max-nodes namespace="show_manage_devices_on_max_nodes"
-          :column-label="$i18n.t('Show manage devices options when user reaches max nodes')"
-          :text="$i18n.t('When the user reaches the maximum amount of registered nodes associated with his or her username, enabling this will display an option in the portal to access the status page to manage/unregister devices.')"
+                                                     :column-label="$i18n.t('Show manage devices options when user reaches max nodes')"
+                                                     :text="$i18n.t('When the user reaches the maximum amount of registered nodes associated with his or her username, enabling this will display an option in the portal to access the status page to manage/unregister devices.')"
+                                                     enabled-value="enabled"
+                                                     disabled-value="disabled"
         />
 
         <form-group-block-interval namespace="block_interval"
-          :column-label="$i18n.t('Block Interval')"
-          :text="$i18n.t('The amount of time a user is blocked after reaching the defined limit for login, sms request and sms pin retry.')"
+                                   :column-label="$i18n.t('Block Interval')"
+                                   :text="$i18n.t('The amount of time a user is blocked after reaching the defined limit for login, sms request and sms pin retry.')"
         />
 
         <form-group-sms-pin-retry-limit namespace="sms_pin_retry_limit"
-          :column-label="$i18n.t('SMS Pin Retry Limit')"
-          :text="$i18n.t('Maximum number of times a user can retry a SMS PIN before having to request another PIN. A value of 0 disables the limit.')"
+                                        :column-label="$i18n.t('SMS Pin Retry Limit')"
+                                        :text="$i18n.t('Maximum number of times a user can retry a SMS PIN before having to request another PIN. A value of 0 disables the limit.')"
         />
 
         <form-group-sms-request-limit namespace="sms_request_limit"
-          :column-label="$i18n.t('SMS Request Retry Limit')"
-          :text="$i18n.t('Maximum number of times a user can request a SMS PIN. A value of 0 disables the limit')"
+                                      :column-label="$i18n.t('SMS Request Retry Limit')"
+                                      :text="$i18n.t('Maximum number of times a user can request a SMS PIN. A value of 0 disables the limit')"
         />
 
         <form-group-login-attempt-limit namespace="login_attempt_limit"
-          :column-label="$i18n.t('Login Attempt Limit')"
-          :text="$i18n.t('Limit the number of login attempts. A value of 0 disables the limit.')"
+                                        :column-label="$i18n.t('Login Attempt Limit')"
+                                        :text="$i18n.t('Limit the number of login attempts. A value of 0 disables the limit.')"
         />
 
-        <form-group-access-registration-when-registered namespace="access_registration_when_registered"
+        <form-group-access-registration-when-registered
+          namespace="access_registration_when_registered"
           :column-label="$i18n.t('Allow access to registration portal when registered')"
           :text="$i18n.t('This allows already registered users to be able to re-register their device by first accessing the status page and then accessing the portal. This is useful to allow users to extend their access even though they are already registered.')"
+          enabled-value="enabled"
+          disabled-value="disabled"
         />
 
         <form-group-network-logoff namespace="network_logoff"
-          :column-label="$i18n.t('Network Logoff')"
-          :text="$i18n.t('This allows users to access the network logoff page (http://{fqdn}/networklogoff) in order to terminate their network access (switch their device back to unregistered).', basesGeneral)"
+                                   :column-label="$i18n.t('Network Logoff')"
+                                   :text="$i18n.t('This allows users to access the network logoff page (http://{fqdn}/networklogoff) in order to terminate their network access (switch their device back to unregistered).', basesGeneral)"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
         />
 
         <form-group-network-logoff-popup namespace="network_logoff_popup"
-          :column-label="$i18n.t('Network Logoff Popup')"
-          :text="$i18n.t(`When the 'Network Logoff' feature is enabled, this will have it opened in a popup at the end of the registration process.`)"
+                                         :column-label="$i18n.t('Network Logoff Popup')"
+                                         :text="$i18n.t(`When the 'Network Logoff' feature is enabled, this will have it opened in a popup at the end of the registration process.`)"
+                                         enabled-value="enabled"
+                                         disabled-value="disabled"
         />
 
         <form-group-locale namespace="locale"
-          :column-label="$i18n.t('Languages')"
-          :text="$i18n.t('With no language specified, all supported locales will be available')"
+                           :column-label="$i18n.t('Languages')"
+                           :text="$i18n.t('With no language specified, all supported locales will be available')"
         />
       </base-form-tab>
       <base-form-tab v-if="!isClone && !isNew"
-        :title="$i18n.t('Files')">
+                     :title="$i18n.t('Files')">
         <the-files-list
           :id="id"
         />
@@ -279,7 +311,7 @@ const components = {
   FormGroupLocale
 }
 
-import { useForm, useFormProps as props } from '../_composables/useForm'
+import {useForm, useFormProps as props} from '../_composables/useForm'
 
 export const setup = (props, context) => useForm(props, context)
 
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/index.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/index.js
index c0fe90bf528b..cbef5ae6cedd 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/index.js
@@ -4,7 +4,8 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import { BaseFormGroupIntervalUnit } from '@/views/Configuration/_components/new/'
 import BaseFormGroupBillingTiers from './BaseFormGroupBillingTiers'
@@ -30,18 +31,18 @@ export {
 
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupInput                  as FormGroupDescription,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupStatus,
+  BaseFormGroupSwitch                 as FormGroupStatus,
   BaseFormGroupChosenOne              as FormGroupRootModule,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPreregistration,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAutoregister,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupReuseDot1xCredentials,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDot1xRecomputeRoleFromPortal,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupMacAuthRecomputeRoleFromPortal,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDot1xUnsetOnUnmatch,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDpsk,
+  BaseFormGroupSwitch                 as FormGroupPreregistration,
+  BaseFormGroupSwitch                 as FormGroupAutoregister,
+  BaseFormGroupSwitch                 as FormGroupReuseDot1xCredentials,
+  BaseFormGroupSwitch                 as FormGroupDot1xRecomputeRoleFromPortal,
+  BaseFormGroupSwitch                 as FormGroupMacAuthRecomputeRoleFromPortal,
+  BaseFormGroupSwitch                 as FormGroupDot1xUnsetOnUnmatch,
+  BaseFormGroupSwitch                 as FormGroupDpsk,
   BaseFormGroupInput                  as FormGroupDefaultPskKey,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUnboundDpsk,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUnregOnAcctStop,
+  BaseFormGroupSwitch                 as FormGroupUnboundDpsk,
+  BaseFormGroupSwitch                 as FormGroupUnregOnAcctStop,
   BaseFormGroupChosenOne              as FormGroupVlanPoolTechnique,
   BaseFormGroupChosenOne              as FormGroupFilterMatchStyle,
   BaseFormGroupFilter                 as FormGroupFilter,
@@ -54,15 +55,15 @@ export {
 
   BaseFormGroupInput                  as FormGroupLogo,
   BaseFormGroupInput                  as FormGroupRedirectUrl,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAlwaysUseRedirecturl,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupShowManageDevicesOnMaxNodes,
+  BaseFormGroupSwitch                 as FormGroupAlwaysUseRedirecturl,
+  BaseFormGroupSwitch                 as FormGroupShowManageDevicesOnMaxNodes,
   BaseFormGroupIntervalUnit           as FormGroupBlockInterval,
   BaseFormGroupInputNumber            as FormGroupSmsPinRetryLimit,
   BaseFormGroupInputNumber            as FormGroupSmsRequestLimit,
   BaseFormGroupInputNumber            as FormGroupLoginAttemptLimit,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAccessRegistrationWhenRegistered,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetworkLogoff,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetworkLogoffPopup,
+  BaseFormGroupSwitch                 as FormGroupAccessRegistrationWhenRegistered,
+  BaseFormGroupSwitch                 as FormGroupNetworkLogoff,
+  BaseFormGroupSwitch                 as FormGroupNetworkLogoffPopup,
   BaseFormGroupLocales                as FormGroupLocale,
 
   ButtonPreviewPortal,

From 483eeda4e3f0a60b80364cbf37ff4a6519c01a5d Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 10 Jul 2023 12:49:54 +0300
Subject: [PATCH 11/51] Change fingerbank forms to use switch UI component

---
 .../_components/TheForm.vue                   |  22 ++--
 .../_components/index.js                      |   6 +-
 .../generalSettings/_components/TheForm.vue   | 123 ++++++++++--------
 .../generalSettings/_components/index.js      |  16 +--
 4 files changed, 94 insertions(+), 73 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheForm.vue
index 4920879d0aab..8e9bf9d97244 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheForm.vue
@@ -7,23 +7,27 @@
   >
 
     <form-group-enable namespace="enable"
-      :column-label="$i18n.t('Enabled')"
-      :text="$i18n.t('Whether or not the Fingerbank device change feature is enabled.')"
+                       :column-label="$i18n.t('Enabled')"
+                       :text="$i18n.t('Whether or not the Fingerbank device change feature is enabled.')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-trigger-on-device-class-change namespace="trigger_on_device_class_change"
-      :column-label="$i18n.t('Trigger on device class change')"
-      :text="$i18n.t('Whether or not internal::fingerbank_device_change should be triggered when we detect a device class change in Fingerbank.')"
+                                               :column-label="$i18n.t('Trigger on device class change')"
+                                               :text="$i18n.t('Whether or not internal::fingerbank_device_change should be triggered when we detect a device class change in Fingerbank.')"
+                                               enabled-value="enabled"
+                                               disabled-value="disabled"
     />
 
     <form-group-device-class-whitelist namespace="device_class_whitelist"
-      :column-label="$i18n.t('Device class change whitelist')"
-      :text="$i18n.t('Which device class changes are allowed in conjunction with trigger_on_device_class_changeComma delimited transitions using the following format: <code>$PREVIOUS_DEVICE_CLASS_ID->$NEW_DEVICE_CLASS_ID</code> where $PREVIOUS_DEVICE_CLASS_ID and $NEW_DEVICE_CLASS_ID are the IDs in the Fingerbank database.')"
+                                       :column-label="$i18n.t('Device class change whitelist')"
+                                       :text="$i18n.t('Which device class changes are allowed in conjunction with trigger_on_device_class_changeComma delimited transitions using the following format: <code>$PREVIOUS_DEVICE_CLASS_ID->$NEW_DEVICE_CLASS_ID</code> where $PREVIOUS_DEVICE_CLASS_ID and $NEW_DEVICE_CLASS_ID are the IDs in the Fingerbank database.')"
     />
 
     <form-group-triggers namespace="triggers"
-      :column-label="$i18n.t('Manual device class change triggers')"
-      :text="$i18n.t('Which changes (changing from a device class to another) should trigger internal::fingerbank_device_change. This setting is independant from trigger_on_device_class_change and allows to specify exactly which transitions should trigger internal::fingerbank_device_change. Comma delimited transitions using the following format: <code>$PREVIOUS_DEVICE_CLASS_ID->$NEW_DEVICE_CLASS_ID</code> where $PREVIOUS_DEVICE_CLASS_ID and $NEW_DEVICE_CLASS_ID are the IDs in the Fingerbank database.')"
+                         :column-label="$i18n.t('Manual device class change triggers')"
+                         :text="$i18n.t('Which changes (changing from a device class to another) should trigger internal::fingerbank_device_change. This setting is independant from trigger_on_device_class_change and allows to specify exactly which transitions should trigger internal::fingerbank_device_change. Comma delimited transitions using the following format: <code>$PREVIOUS_DEVICE_CLASS_ID->$NEW_DEVICE_CLASS_ID</code> where $PREVIOUS_DEVICE_CLASS_ID and $NEW_DEVICE_CLASS_ID are the IDs in the Fingerbank database.')"
     />
 
     <b-row>
@@ -69,7 +73,7 @@
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
+import {computed} from '@vue/composition-api'
 import {
   BaseForm
 } from '@/components/new/'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/index.js b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/index.js
index 46ffc5d51ca0..6ae2903c9a92 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/index.js
@@ -2,7 +2,7 @@ import { BaseViewResource } from '../../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -11,8 +11,8 @@ export {
   BaseFormButtonBar                   as FormButtonBar,
 
   BaseFormGroupTextarea               as FormGroupDeviceClassWhitelist,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupEnable,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupTriggerOnDeviceClassChange,
+  BaseFormGroupSwitch                 as FormGroupEnable,
+  BaseFormGroupSwitch                 as FormGroupTriggerOnDeviceClassChange,
   BaseFormGroupTextarea               as FormGroupTriggers,
 
   BaseViewResource                    as BaseView,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheForm.vue
index fc5a4b8c4911..9b1a8571ef22 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheForm.vue
@@ -7,20 +7,21 @@
   >
 
     <b-media v-if="accountInfo"
-      class="alert alert-primary text-secondary mx-3" variant="info" md="auto">
+             class="alert alert-primary text-secondary mx-3" variant="info" md="auto">
       <template v-slot:aside>
         <icon v-if="accountInfo.auth_type === 'github'"
-          name="brands/github" scale="2" />
+              name="brands/github" scale="2"/>
         <icon v-else-if="accountInfo.auth_type === 'local'"
-          name="user-circle" scale="2" />
+              name="user-circle" scale="2"/>
         <icon v-else
-          name="user" scale="2" />
+              name="user" scale="2"/>
       </template>
       <h4 class="d-inline">{{ $t('Account information on api.fingerbank.org') }}</h4>
       <b-button v-if="urlSSO"
-        :href="urlSSO" target="_blank"
-        size="sm" variant="secondary" class="ml-2 float-right"
-      >{{ $t('View complete account profile') }} <icon class="ml-1" name="external-link-alt"/>
+                :href="urlSSO" target="_blank"
+                size="sm" variant="secondary" class="ml-2 float-right"
+      >{{ $t('View complete account profile') }}
+        <icon class="ml-1" name="external-link-alt"/>
       </b-button>
       <b-row align-v="center" class="mt-1">
         <b-col cols="3">
@@ -30,11 +31,11 @@
         <b-col cols="3">
           <small class="text-nowrap">{{ $t('Account type') }}</small>
           <p v-if="accountInfo.auth_type === 'github'"
-            class="mb-0">Github</p>
+             class="mb-0">Github</p>
           <p v-else-if="accountInfo.auth_type === 'local'"
-            class="mb-0">{{ $t('Corporate') }}</p>
+             class="mb-0">{{ $t('Corporate') }}</p>
           <p v-else
-            class="mb-0">{{ $t('Unknown') }}</p>
+             class="mb-0">{{ $t('Unknown') }}</p>
         </b-col>
         <b-col cols="auto">
           <small class="text-nowrap">{{ $t('Requests in the current hour') }}</small>
@@ -44,114 +45,130 @@
     </b-media>
 
     <form-group-upstream-api-key namespace="upstream.api_key"
-      :column-label="$i18n.t('API Key')"
-      :text="$i18n.t('API key to interact with upstream Fingerbank project. Changing this value requires to restart the Fingerbank collector.')"
+                                 :column-label="$i18n.t('API Key')"
+                                 :text="$i18n.t('API key to interact with upstream Fingerbank project. Changing this value requires to restart the Fingerbank collector.')"
     />
 
     <form-group-upstream-host namespace="upstream.host"
-      :column-label="$i18n.t('Upstream API host')"
-      :text="$i18n.t('The host on which the Fingerbank API should be reached.')"
+                              :column-label="$i18n.t('Upstream API host')"
+                              :text="$i18n.t('The host on which the Fingerbank API should be reached.')"
     />
 
     <form-group-upstream-port namespace="upstream.port"
-      :column-label="$i18n.t('Upstream API port')"
-      :text="$i18n.t('The port on which the Fingerbank API should be reached')"
+                              :column-label="$i18n.t('Upstream API port')"
+                              :text="$i18n.t('The port on which the Fingerbank API should be reached')"
     />
 
     <form-group-upstream-use-https namespace="upstream.use_https"
-      :column-label="$i18n.t('Upstream API HTTPS')"
-      :text="$i18n.t('Whether or not HTTPS should be used to communicate with the Fingerbank API.')"
+                                   :column-label="$i18n.t('Upstream API HTTPS')"
+                                   :text="$i18n.t('Whether or not HTTPS should be used to communicate with the Fingerbank API.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-upstream-database-path namespace="upstream.db_path"
-      :column-label="$i18n.t('Database API path')"
-      :text="$i18n.t('Path used to fetch the database on the Fingerbank API.')"
+                                       :column-label="$i18n.t('Database API path')"
+                                       :text="$i18n.t('Path used to fetch the database on the Fingerbank API.')"
     />
 
     <form-group-upstream-sqlite-database-retention namespace="upstream.sqlite_db_retention"
-      :column-label="$i18n.t('Retention of the upstream sqlite DB')"
-      :text="$i18n.t('Amount of upstream databases to retain on disk in db/. Should be at least one in case any running processes are still pointing on the old file descriptor of the database.')"
+                                                   :column-label="$i18n.t('Retention of the upstream sqlite DB')"
+                                                   :text="$i18n.t('Amount of upstream databases to retain on disk in db/. Should be at least one in case any running processes are still pointing on the old file descriptor of the database.')"
     />
 
     <form-group-collector-host namespace="collector.host"
-      :column-label="$i18n.t('Collector host')"
-      :text="$i18n.t('The host on which the Fingerbank collector should be reached.')"
+                               :column-label="$i18n.t('Collector host')"
+                               :text="$i18n.t('The host on which the Fingerbank collector should be reached.')"
     />
 
     <form-group-collector-port namespace="collector.port"
-      :column-label="$i18n.t('Collector port')"
-      :text="$i18n.t('The port on which the Fingerbank collector should be reached.')"
+                               :column-label="$i18n.t('Collector port')"
+                               :text="$i18n.t('The port on which the Fingerbank collector should be reached.')"
     />
 
     <form-group-collector-use-https namespace="collector.use_https"
-      :column-label="$i18n.t('Collector HTTPS')"
-      :text="$i18n.t('Whether or not HTTPS should be used to communicate with the collector.')"
+                                    :column-label="$i18n.t('Collector HTTPS')"
+                                    :text="$i18n.t('Whether or not HTTPS should be used to communicate with the collector.')"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
     />
 
-    <form-group-collector-inactive-endpoints-expiration namespace="collector.inactive_endpoints_expiration"
+    <form-group-collector-inactive-endpoints-expiration
+      namespace="collector.inactive_endpoints_expiration"
       :column-label="$i18n.t('Inactive endpoints expiration')"
       :text="$i18n.t('Amount of hours after which the information inactive endpoints should be removed from the collector.')"
     />
 
     <form-group-collector-arp-lookup namespace="collector.arp_lookup"
-      :column-label="$i18n.t('ARP lookups by the collector')"
-      :text="$i18n.t(`Whether or not the collector should perform ARP lookups for devices it doesn't have DHCP information. Use only on small deployments.`)"
+                                     :column-label="$i18n.t('ARP lookups by the collector')"
+                                     :text="$i18n.t(`Whether or not the collector should perform ARP lookups for devices it doesn't have DHCP information. Use only on small deployments.`)"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
 
     <form-group-collector-network-behavior-analysis namespace="collector.network_behavior_analysis"
-      :column-label="$i18n.t('Network behavior analysis')"
-      :text="$i18n.t('Whether or not the collector should perform network behavior analysis of the endpoints it sees.')"
+                                                    :column-label="$i18n.t('Network behavior analysis')"
+                                                    :text="$i18n.t('Whether or not the collector should perform network behavior analysis of the endpoints it sees.')"
+                                                    enabled-value="enabled"
+                                                    disabled-value="disabled"
     />
 
     <form-group-collector-query-cache-time namespace="collector.query_cache_time"
-      :column-label="$i18n.t('Query cache time in the collector')"
-      :text="$i18n.t('Amount of minutes for which the collector API query results are cached.')"
+                                           :column-label="$i18n.t('Query cache time in the collector')"
+                                           :text="$i18n.t('Amount of minutes for which the collector API query results are cached.')"
     />
 
-    <form-group-collector-database-persistence-interval namespace="collector.db_persistence_interval"
+    <form-group-collector-database-persistence-interval
+      namespace="collector.db_persistence_interval"
       :column-label="$i18n.t('Database persistence interval')"
       :text="$i18n.t('Interval in seconds at which the collector will persist its databases.')"
     />
 
     <form-group-collector-cluster-resync-interval namespace="collector.cluster_resync_interval"
-      :column-label="$i18n.t('Cluster resync interval')"
-      :text="$i18n.t('Interval in seconds at which the collector will fully resynchronize with its peers when in cluster mode. The collector synchronizes in real-time, so this only acts as a safety net when there is a communication error between the collectors.')"
+                                                  :column-label="$i18n.t('Cluster resync interval')"
+                                                  :text="$i18n.t('Interval in seconds at which the collector will fully resynchronize with its peers when in cluster mode. The collector synchronizes in real-time, so this only acts as a safety net when there is a communication error between the collectors.')"
     />
 
     <form-group-collector-additional-env namespace="collector.additional_env"
-      :column-label="$i18n.t('Collector environment')"
-      :text="$i18n.t('Additional environment variables to setup for the Fingerbank collector. One by line, following this format: COLLECTOR_ALL_HOSTS_CACHE_SIZE=100')"
+                                         :column-label="$i18n.t('Collector environment')"
+                                         :text="$i18n.t('Additional environment variables to setup for the Fingerbank collector. One by line, following this format: COLLECTOR_ALL_HOSTS_CACHE_SIZE=100')"
     />
 
     <form-group-query-record-unmatched namespace="query.record_unmatched"
-      :column-label="$i18n.t('Record Unmatched Parameters')"
-      :text="$i18n.t('Should the local instance of Fingerbank record unmatched parameters so that it will be possible to submit thoses unmatched parameters to the upstream Fingerbank project for contribution.')"
+                                       :column-label="$i18n.t('Record Unmatched Parameters')"
+                                       :text="$i18n.t('Should the local instance of Fingerbank record unmatched parameters so that it will be possible to submit thoses unmatched parameters to the upstream Fingerbank project for contribution.')"
+                                       enabled-value="enabled"
+                                       disabled-value="disabled"
     />
 
     <form-group-proxy-use-proxy namespace="proxy.use_proxy"
-      :column-label="$i18n.t('Use proxy')"
-      :text="$i18n.t('Should Fingerbank interact with WWW using a proxy?')"
+                                :column-label="$i18n.t('Use proxy')"
+                                :text="$i18n.t('Should Fingerbank interact with WWW using a proxy?')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-proxy-host namespace="proxy.host"
-      :column-label="$i18n.t('Proxy Host')"
-      :text="$i18n.t('Host the proxy is listening on. Only the host must be specified here without any port or protocol.')"
+                           :column-label="$i18n.t('Proxy Host')"
+                           :text="$i18n.t('Host the proxy is listening on. Only the host must be specified here without any port or protocol.')"
     />
 
     <form-group-proxy-port namespace="proxy.port"
-      :column-label="$i18n.t('Proxy Port')"
-      :text="$i18n.t('Port the proxy is listening on.')"
+                           :column-label="$i18n.t('Proxy Port')"
+                           :text="$i18n.t('Port the proxy is listening on.')"
     />
 
     <form-group-proxy-verify-ssl namespace="proxy.verify_ssl"
-      :column-label="$i18n.t('Verify SSL')"
-      :text="$i18n.t('Whether or not to verify SSL when using proxying.')"
+                                 :column-label="$i18n.t('Verify SSL')"
+                                 :text="$i18n.t('Whether or not to verify SSL when using proxying.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
     />
 
   </base-form>
 </template>
 <script>
-import { computed, onMounted } from '@vue/composition-api'
+import {computed, onMounted} from '@vue/composition-api'
 import {
   BaseForm
 } from '@/components/new/'
@@ -221,7 +238,7 @@ export const props = {
 
 export const setup = (props, context) => {
 
-  const { root: { $store } = {} } = context
+  const {root: {$store} = {}} = context
 
   const schema = computed(() => schemaFn(props))
 
@@ -231,7 +248,7 @@ export const setup = (props, context) => {
 
   const urlSSO = computed(() => {
     if (accountInfo.value) {
-      const { name, key, id } = accountInfo.value
+      const {name, key, id} = accountInfo.value
       return [
         'https://api.fingerbank.org:443/sso/login?',
         `username=${name}`,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/index.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/index.js
index e6a57d74114a..87a2ce2c11aa 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/index.js
@@ -4,7 +4,7 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -15,24 +15,24 @@ export {
   BaseFormGroupInput                  as FormGroupUpstreamApiKey,
   BaseFormGroupInput                  as FormGroupUpstreamHost,
   BaseFormGroupInputNumber            as FormGroupUpstreamPort,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUpstreamUseHttps,
+  BaseFormGroupSwitch                 as FormGroupUpstreamUseHttps,
   BaseFormGroupInput                  as FormGroupUpstreamDatabasePath,
   BaseFormGroupInputNumber            as FormGroupUpstreamSqliteDatabaseRetention,
   BaseFormGroupInput                  as FormGroupCollectorHost,
   BaseFormGroupInputNumber            as FormGroupCollectorPort,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCollectorUseHttps,
+  BaseFormGroupSwitch                 as FormGroupCollectorUseHttps,
   BaseFormGroupInput                  as FormGroupCollectorInactiveEndpointsExpiration,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCollectorArpLookup,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCollectorNetworkBehaviorAnalysis,
+  BaseFormGroupSwitch                 as FormGroupCollectorArpLookup,
+  BaseFormGroupSwitch                 as FormGroupCollectorNetworkBehaviorAnalysis,
   BaseFormGroupInputNumber            as FormGroupCollectorQueryCacheTime,
   BaseFormGroupInputNumber            as FormGroupCollectorDatabasePersistenceInterval,
   BaseFormGroupInputNumber            as FormGroupCollectorClusterResyncInterval,
   BaseFormGroupTextarea               as FormGroupCollectorAdditionalEnv,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupQueryRecordUnmatched,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupProxyUseProxy,
+  BaseFormGroupSwitch                 as FormGroupQueryRecordUnmatched,
+  BaseFormGroupSwitch                 as FormGroupProxyUseProxy,
   BaseFormGroupInput                  as FormGroupProxyHost,
   BaseFormGroupInputNumber            as FormGroupProxyPort,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupProxyVerifySsl,
+  BaseFormGroupSwitch                 as FormGroupProxyVerifySsl,
 
   BaseViewResource                    as BaseView,
   TheForm,

From 434fa369c82b4935b014c8e2145cff0ae6af3e54 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 10 Jul 2023 13:05:16 +0300
Subject: [PATCH 12/51] Change network behavior policy forms to use switch UI
 component

---
 .../_components/TheForm.vue                   | 64 +++++++++++--------
 .../_components/index.js                      | 16 ++---
 2 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheForm.vue
index 483341def24c..9a599b10829e 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheForm.vue
@@ -6,69 +6,74 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Profile Name')"
+                           :column-label="$i18n.t('Profile Name')"
     />
 
     <form-group-status namespace="status"
-      :column-label="$i18n.t('Status')"
-      :text="$i18n.t('Whether or not the policy should be enabled')"
+                       :column-label="$i18n.t('Status')"
+                       :text="$i18n.t('Whether or not the policy should be enabled')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-devices-included namespace="devices_included"
-      :column-label="$i18n.t('Devices Included')"
-      :text="$i18n.t('The list of Fingerbank devices that will be impacted by this Network Behavior Policy. Devices of this list implicitely includes all the children of the selected devices. Leaving this empty will have all devices impacted by this policy.')"
+                                 :column-label="$i18n.t('Devices Included')"
+                                 :text="$i18n.t('The list of Fingerbank devices that will be impacted by this Network Behavior Policy. Devices of this list implicitely includes all the children of the selected devices. Leaving this empty will have all devices impacted by this policy.')"
     />
 
     <form-group-devices-excluded namespace="devices_excluded"
-      :column-label="$i18n.t('Devices Excluded')"
-      :text="$i18n.t('The list of Fingerbank devices that should not be impacted by this Network Behavior Policy. Devices of this list implicitely includes all the children of the selected devices.')"
+                                 :column-label="$i18n.t('Devices Excluded')"
+                                 :text="$i18n.t('The list of Fingerbank devices that should not be impacted by this Network Behavior Policy. Devices of this list implicitely includes all the children of the selected devices.')"
     />
 
     <form-group-watch-blacklisted-ips namespace="watch_blacklisted_ips"
-      :column-label="$i18n.t('Monitor for blacklisted IPs')"
-      :text="$i18n.t('Whether or not the policy should check if the endpoints are communicating with blacklisted IP addresses.')"
+                                      :column-label="$i18n.t('Monitor for blacklisted IPs')"
+                                      :text="$i18n.t('Whether or not the policy should check if the endpoints are communicating with blacklisted IP addresses.')"
+                                      enabled-value="enabled"
+                                      disabled-value="disabled"
     />
 
     <form-group-whitelisted-ips namespace="whitelisted_ips"
-      :column-label="$i18n.t('Whitelisted IPs')"
-      :text="$i18n.t('Comma delimited list of IP addresses (can be CIDR) to ignore when checking against the blacklisted IPs list.')"
+                                :column-label="$i18n.t('Whitelisted IPs')"
+                                :text="$i18n.t('Comma delimited list of IP addresses (can be CIDR) to ignore when checking against the blacklisted IPs list.')"
     />
 
     <form-group-blacklisted-ip-hosts-window namespace="blacklisted_ip_hosts_window"
-      :column-label="$i18n.t('Blacklisted IP Hosts Window')"
-      :text="$i18n.t('The window to consider when counting the amount of blacklisted IPs the endpoint has communicated with.')"
+                                            :column-label="$i18n.t('Blacklisted IP Hosts Window')"
+                                            :text="$i18n.t('The window to consider when counting the amount of blacklisted IPs the endpoint has communicated with.')"
     />
 
     <form-group-blacklisted-ip-hosts-threshold namespace="blacklisted_ip_hosts_threshold"
-      :column-label="$i18n.t('Blacklisted IPs Threshold')"
-      :text="$i18n.t('If an endpoint talks with more than this amount of blacklisted IPs in the window defined above, then it triggers an event.')"
+                                               :column-label="$i18n.t('Blacklisted IPs Threshold')"
+                                               :text="$i18n.t('If an endpoint talks with more than this amount of blacklisted IPs in the window defined above, then it triggers an event.')"
     />
 
     <form-group-blacklisted-ports namespace="blacklisted_ports"
-      :column-label="$i18n.t('Blacklisted ports')"
-      :text="$i18n.t('Which ports should be considered as vulnerable/dangerous and trigger an event. Should be a comma delimited list of ports. Also supports ranges (ex: &quot;1000-1024&quot; configures ports 1000 to 1024 inclusively). This list is for the outbound communication of the endpoint.')"
+                                  :column-label="$i18n.t('Blacklisted ports')"
+                                  :text="$i18n.t('Which ports should be considered as vulnerable/dangerous and trigger an event. Should be a comma delimited list of ports. Also supports ranges (ex: &quot;1000-1024&quot; configures ports 1000 to 1024 inclusively). This list is for the outbound communication of the endpoint.')"
     />
 
     <form-group-blacklisted-ports-window namespace="blacklisted_ports_window"
-      :column-label="$i18n.t('Blacklisted ports window')"
-      :text="$i18n.t('The window to consider when checking for blacklisted ports communication.')"
+                                         :column-label="$i18n.t('Blacklisted ports window')"
+                                         :text="$i18n.t('The window to consider when checking for blacklisted ports communication.')"
     />
 
     <form-group-watched-device-attributes namespace="watched_device_attributes"
-      :column-label="$i18n.t('Watched Device Attributes')"
-      :text="$i18n.t('Defines the attributes that should be analysed when checking against the pristine profile of the endpoint. Leaving this empty will disable the feature.')"
+                                          :column-label="$i18n.t('Watched Device Attributes')"
+                                          :text="$i18n.t('Defines the attributes that should be analysed when checking against the pristine profile of the endpoint. Leaving this empty will disable the feature.')"
     />
 
     <form-group-device-attributes-diff-score namespace="device_attributes_diff_score"
-      :column-label="$i18n.t('Device attributes minimal score')"
-      :text="$i18n.t(`If an endpoint doesn't get at least this score when being matched against the pristine profile, then it triggers an event.`)"
+                                             :column-label="$i18n.t('Device attributes minimal score')"
+                                             :text="$i18n.t(`If an endpoint doesn't get at least this score when being matched against the pristine profile, then it triggers an event.`)"
     />
 
-    <form-group-device-attributes-diff-threshold-overrides namespace="device_attributes_diff_threshold_overrides"
+    <form-group-device-attributes-diff-threshold-overrides
+      namespace="device_attributes_diff_threshold_overrides"
       :column-label="$i18n.t('Device Attributes weight')"
       :text="$i18n.t('Override the weight of the different attributes when matching them against the pristine profiles.')"
     />
@@ -78,7 +83,10 @@
         <p v-t="'Default weights'"/>
         <table class="table table-responsive table-sm small mb-0 w-100">
           <tbody class="w-100">
-            <tr v-for="(attribute, index) in weights" :key="index" class="w-100"><th>{{ attribute.defaultWeight }}</th><td class="w-100">{{ attribute.text }}</td></tr>
+          <tr v-for="(attribute, index) in weights" :key="index" class="w-100">
+            <th>{{ attribute.defaultWeight }}</th>
+            <td class="w-100">{{ attribute.text }}</td>
+          </tr>
           </tbody>
         </table>
       </b-alert>
@@ -86,7 +94,7 @@
   </base-form>
 </template>
 <script>
-import { computed, provide, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import {computed, provide, reactive, ref, toRefs, watch} from '@vue/composition-api'
 import {
   BaseForm,
   BaseFormGroup
@@ -153,7 +161,7 @@ export const props = {
   }
 }
 
-import { deviceAttributes } from '../config'
+import {deviceAttributes} from '../config'
 
 export const setup = (props) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/index.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/index.js
index 38e2631bced9..bdf8be382d3f 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/index.js
@@ -1,16 +1,14 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
-
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
-import BaseFormGroupDeviceAttributesDiffThresholdOverrides from './BaseFormGroupDeviceAttributesDiffThresholdOverrides'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
+import BaseFormGroupDeviceAttributesDiffThresholdOverrides
+  from './BaseFormGroupDeviceAttributesDiffThresholdOverrides'
 import BaseFormGroupDevices from './BaseFormGroupDevices'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -30,8 +28,8 @@ export {
   BaseFormGroupDevices                                as FormGroupDevicesExcluded,
   BaseFormGroupDevices                                as FormGroupDevicesIncluded,
   BaseFormGroupInput                                  as FormGroupIdentifier,
-  BaseFormGroupToggleDisabledEnabled                  as FormGroupStatus,
-  BaseFormGroupToggleDisabledEnabled                  as FormGroupWatchBlacklistedIps,
+  BaseFormGroupSwitch                                 as FormGroupStatus,
+  BaseFormGroupSwitch                                 as FormGroupWatchBlacklistedIps,
   BaseFormGroupChosenMultiple                         as FormGroupWatchedDeviceAttributes,
   BaseFormGroupInput                                  as FormGroupWhitelistedIps,
 

From 3423a831ddcbfbb6997950ed2d4450dacf749ec2 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 10 Jul 2023 13:21:00 +0300
Subject: [PATCH 13/51] Change scan engines forms to use switch UI component

---
 .../BaseFormGroupToggleZeroOneAsOffOn.js      |  1 -
 .../_components/FormTypeNessus.vue            | 50 ++++++++-------
 .../_components/FormTypeNessus6.vue           | 60 +++++++++--------
 .../_components/FormTypeOpenvas.vue           | 58 +++++++++--------
 .../_components/FormTypeRapid7.vue            | 64 +++++++++++--------
 .../scanEngines/_components/index.js          | 19 ++----
 6 files changed, 137 insertions(+), 115 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/scanEngines/_components/BaseFormGroupToggleZeroOneAsOffOn.js

diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/BaseFormGroupToggleZeroOneAsOffOn.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/BaseFormGroupToggleZeroOneAsOffOn.js
deleted file mode 100644
index 8d1c8b69c3fc..000000000000
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/BaseFormGroupToggleZeroOneAsOffOn.js
+++ /dev/null
@@ -1 +0,0 @@
- 
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus.vue
index 1fc30ceb01df..c0b0a8e6d7e3 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus.vue
@@ -6,64 +6,70 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
+                           :column-label="$i18n.t('Name')"
     />
 
     <form-group-ip namespace="ip"
-      :column-label="$i18n.t('Hostname or IP Address')"
+                   :column-label="$i18n.t('Hostname or IP Address')"
     />
 
     <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+                         :column-label="$i18n.t('Username')"
     />
 
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+                         :column-label="$i18n.t('Password')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+                     :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
     />
 
     <form-group-nessus-clientpolicy namespace="nessus_clientpolicy"
-      :column-label="$i18n.t('Nessus client policy')"
-      :text="$i18n.t('Name of the policy to use on the nessus server.')"
+                                    :column-label="$i18n.t('Nessus client policy')"
+                                    :text="$i18n.t('Name of the policy to use on the nessus server.')"
     />
 
     <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
     />
 
     <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
     />
 
     <form-group-duration namespace="duration"
-      :column-label="$i18n.t('Duration')"
-      :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
+                         :column-label="$i18n.t('Duration')"
+                         :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
     />
 
     <form-group-pre-registration namespace="pre_registration"
-      :column-label="$i18n.t('Scan before registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :column-label="$i18n.t('Scan before registration')"
+                                 :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
     />
 
     <form-group-registration namespace="registration"
-      :column-label="$i18n.t('Scan on registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :column-label="$i18n.t('Scan on registration')"
+                             :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :enabled-value="1"
+                             :disabled-value="0"
     />
 
     <form-group-post-registration namespace="post_registration"
-      :column-label="$i18n.t('Scan after registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :column-label="$i18n.t('Scan after registration')"
+                                  :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCategories,
   FormGroupDuration,
@@ -96,7 +102,7 @@ const components = {
   FormGroupUsername
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus6.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus6.vue
index 2d200be852ca..62ae3c36b0e8 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus6.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeNessus6.vue
@@ -6,74 +6,82 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
+                           :column-label="$i18n.t('Name')"
     />
 
     <form-group-ip namespace="ip"
-      :column-label="$i18n.t('Hostname or IP Address')"
+                   :column-label="$i18n.t('Hostname or IP Address')"
     />
 
     <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+                         :column-label="$i18n.t('Username')"
     />
 
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+                         :column-label="$i18n.t('Password')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+                     :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
     />
 
     <form-group-verify-hostname namespace="verify_hostname"
-      :column-label="$i18n.t('Verify Hostname')"
-      :text="$i18n.t('Verify hostname of server when connecting to the API.')"
+                                :column-label="$i18n.t('Verify Hostname')"
+                                :text="$i18n.t('Verify hostname of server when connecting to the API.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-nessus-clientpolicy namespace="nessus_clientpolicy"
-      :column-label="$i18n.t('Nessus client policy')"
-      :text="$i18n.t('Name of the policy to use on the nessus server.')"
+                                    :column-label="$i18n.t('Nessus client policy')"
+                                    :text="$i18n.t('Name of the policy to use on the nessus server.')"
     />
 
     <form-group-scanner-name namespace="scannername"
-      :column-label="$i18n.t('Nessus scanner name')"
-      :text="$i18n.t('Name of the scanner to use on the nessus server.')"
+                             :column-label="$i18n.t('Nessus scanner name')"
+                             :text="$i18n.t('Name of the scanner to use on the nessus server.')"
     />
 
     <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
     />
 
     <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
     />
 
     <form-group-duration namespace="duration"
-      :column-label="$i18n.t('Duration')"
-      :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
+                         :column-label="$i18n.t('Duration')"
+                         :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
     />
 
     <form-group-pre-registration namespace="pre_registration"
-      :column-label="$i18n.t('Scan before registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :column-label="$i18n.t('Scan before registration')"
+                                 :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
     />
 
     <form-group-registration namespace="registration"
-      :column-label="$i18n.t('Scan on registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :column-label="$i18n.t('Scan on registration')"
+                             :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :enabled-value="1"
+                             :disabled-value="0"
     />
 
     <form-group-post-registration namespace="post_registration"
-      :column-label="$i18n.t('Scan after registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :column-label="$i18n.t('Scan after registration')"
+                                  :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCategories,
   FormGroupDuration,
@@ -110,7 +118,7 @@ const components = {
   FormGroupVerifyHostname
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeOpenvas.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeOpenvas.vue
index b9391267c8f0..9485132c5bcf 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeOpenvas.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeOpenvas.vue
@@ -6,72 +6,78 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
+                           :column-label="$i18n.t('Name')"
     />
 
     <form-group-ip namespace="ip"
-      :column-label="$i18n.t('Hostname or IP Address')"
+                   :column-label="$i18n.t('Hostname or IP Address')"
     />
 
     <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+                         :column-label="$i18n.t('Username')"
     />
 
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+                         :column-label="$i18n.t('Password')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+                     :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
     />
 
     <form-group-openvas-alert-identifier namespace="openvas_alertid"
-      :column-label="$i18n.t('Alert ID')"
-      :text="$i18n.t('ID of the alert configuration on the OpenVAS server.')"
+                                         :column-label="$i18n.t('Alert ID')"
+                                         :text="$i18n.t('ID of the alert configuration on the OpenVAS server.')"
     />
     <form-group-openvas-config-identifier namespace="openvas_configid"
-      :column-label="$i18n.t('Scan config ID')"
-      :text="$i18n.t('ID of the scanning configuration on the OpenVAS server.')"
+                                          :column-label="$i18n.t('Scan config ID')"
+                                          :text="$i18n.t('ID of the scanning configuration on the OpenVAS server.')"
     />
     <form-group-openvas-report-format-identifier namespace="openvas_reportformatid"
-      :column-label="$i18n.t('Report format ID')"
-      :text="$i18n.t(`ID of the 'CSV Results' report format on the OpenVAS server.`)"
+                                                 :column-label="$i18n.t('Report format ID')"
+                                                 :text="$i18n.t(`ID of the 'CSV Results' report format on the OpenVAS server.`)"
     />
 
     <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
     />
 
     <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
     />
 
     <form-group-duration namespace="duration"
-      :column-label="$i18n.t('Duration')"
-      :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
+                         :column-label="$i18n.t('Duration')"
+                         :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
     />
 
     <form-group-pre-registration namespace="pre_registration"
-      :column-label="$i18n.t('Scan before registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :column-label="$i18n.t('Scan before registration')"
+                                 :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
     />
 
     <form-group-registration namespace="registration"
-      :column-label="$i18n.t('Scan on registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :column-label="$i18n.t('Scan on registration')"
+                             :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :enabled-value="1"
+                             :disabled-value="0"
     />
 
     <form-group-post-registration namespace="post_registration"
-      :column-label="$i18n.t('Scan after registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :column-label="$i18n.t('Scan after registration')"
+                                  :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCategories,
   FormGroupDuration,
@@ -108,7 +114,7 @@ const components = {
   FormGroupUsername
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeRapid7.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeRapid7.vue
index c9542c13ba3a..f0cba53690e9 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeRapid7.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/FormTypeRapid7.vue
@@ -6,80 +6,88 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
+                           :column-label="$i18n.t('Name')"
     />
 
     <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+                     :column-label="$i18n.t('Host')"
     />
 
     <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+                         :column-label="$i18n.t('Username')"
     />
 
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+                         :column-label="$i18n.t('Password')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+                     :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
     />
 
     <form-group-verify-hostname namespace="verify_hostname"
-      :column-label="$i18n.t('Verify Hostname')"
-      :text="$i18n.t('Verify hostname of server when connecting to the API.')"
+                                :column-label="$i18n.t('Verify Hostname')"
+                                :text="$i18n.t('Verify hostname of server when connecting to the API.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-engine-identifier namespace="engine_id"
-      :column-label="$i18n.t('Scan Engine')"
-      :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
+                                  :column-label="$i18n.t('Scan Engine')"
+                                  :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
 
     />
 
     <form-group-template-identifier namespace="template_id"
-      :column-label="$i18n.t('Scan Template')"
-      :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
+                                    :column-label="$i18n.t('Scan Template')"
+                                    :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
     />
 
     <form-group-site-identifier namespace="site_id"
-      :column-label="$i18n.t('Site')"
-      :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
+                                :column-label="$i18n.t('Site')"
+                                :text="$i18n.t('After configuring this scan engine for the first time, you will be able to select this attribute from the available ones in Rapid7.')"
     />
 
     <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
     />
 
     <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
     />
 
     <form-group-duration namespace="duration"
-      :column-label="$i18n.t('Duration')"
-      :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
+                         :column-label="$i18n.t('Duration')"
+                         :text="$i18n.t('Approximate duration of a scan. User being scanned on registration are presented a progress bar for this duration, afterwards the browser refreshes until scan is complete.')"
     />
 
     <form-group-pre-registration namespace="pre_registration"
-      :column-label="$i18n.t('Scan before registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :column-label="$i18n.t('Scan before registration')"
+                                 :text="$i18n.t('If this option is enabled, the PF system will scan host before the registration.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
     />
 
     <form-group-registration namespace="registration"
-      :column-label="$i18n.t('Scan on registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :column-label="$i18n.t('Scan on registration')"
+                             :text="$i18n.t('If this option is enabled, the PF system will scan each host after registration is complete.')"
+                             :enabled-value="1"
+                             :disabled-value="0"
     />
 
     <form-group-post-registration namespace="post_registration"
-      :column-label="$i18n.t('Scan after registration')"
-      :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :column-label="$i18n.t('Scan after registration')"
+                                  :text="$i18n.t('If this option is enabled, the PF system will scan host after on the production VLAN.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCategories,
   FormGroupDuration,
@@ -118,7 +126,7 @@ const components = {
   FormGroupVerifyHostname
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/index.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/index.js
index 3c86a33117cf..6c879e40ef3e 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/index.js
@@ -1,4 +1,4 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
@@ -6,13 +6,9 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit,
-  BaseFormGroupOses,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit, BaseFormGroupOses} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -21,7 +17,6 @@ export {
   BaseFormButtonBar                         as FormButtonBar,
 
   BaseFormGroupChosenMultiple               as FormGroupCategories,
-  BaseFormGroupInput                        as FormGroupDomain,
   BaseFormGroupIntervalUnit                 as FormGroupDuration,
   BaseFormGroupChosenOne                    as FormGroupEngineIdentifier,
   BaseFormGroupInput                        as FormGroupHost,
@@ -33,15 +28,15 @@ export {
   BaseFormGroupInput                        as FormGroupOpenvasReportFormatIdentifier,
   BaseFormGroupOses                         as FormGroupOses,
   BaseFormGroupInputPassword                as FormGroupPassword,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupPreRegistration,
+  BaseFormGroupSwitch                       as FormGroupPreRegistration,
   BaseFormGroupInputNumber                  as FormGroupPort,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupPostRegistration,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupRegistration,
+  BaseFormGroupSwitch                       as FormGroupPostRegistration,
+  BaseFormGroupSwitch                       as FormGroupRegistration,
   BaseFormGroupInput                        as FormGroupScannerName,
   BaseFormGroupChosenOne                    as FormGroupSiteIdentifier,
   BaseFormGroupChosenOne                    as FormGroupTemplateIdentifier,
   BaseFormGroupInput                        as FormGroupUsername,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupVerifyHostname,
+  BaseFormGroupSwitch                       as FormGroupVerifyHostname,
 
   TheForm,
   TheView

From 43d8f19f308e3298e370a388e4f7ef480c9d3203 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 12 Jul 2023 10:15:28 +0300
Subject: [PATCH 14/51] Refactor switch component to be more flexible

---
 .../src/components/new/BaseInputSwitch.vue    |  80 ++---
 .../components/new/BaseInputSwitchLegacy.vue  | 295 ++++++++++++++++++
 2 files changed, 316 insertions(+), 59 deletions(-)
 create mode 100644 html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue

diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
index 524ff5b86a19..a168866bdee7 100644
--- a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
+++ b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
@@ -11,7 +11,7 @@
         'size-lg': size === 'lg',
         'switch-enabled' : rangeValue === 1,
       }"
-      :index="inputValue"
+      :index="value"
       @click.stop
     >
       <div style="pointer-events: none;">
@@ -32,8 +32,6 @@
              :min="0"
              :disabled="isLocked"
              @mouseup="onClick"
-             @focus="onFocus"
-             @blur="onBlur"
       />
     </div>
   </div>
@@ -47,11 +45,20 @@ import {computed, inject, unref} from '@vue/composition-api';
 import _ from 'lodash'
 
 export const useSwitchProps = {
-  enabledValue: {
-    default: true
+  onChange: {
+    type: Function
   },
-  disabledValue: {
-    default: false
+  label: {
+    default: null,
+    type: String
+  },
+  isFocus: {
+    default: false,
+    type: Boolean
+  },
+  isLocked: {
+    default: false,
+    type: Boolean
   },
   size: {
     type: String,
@@ -59,80 +66,34 @@ export const useSwitchProps = {
     validator: value => ['sm', 'md', 'lg'].includes(value)
   },
   value: {
-    default: null
-  },
-  disabled: {
-    type: Boolean
+    default: false
   },
   icon: {
     type: String
   },
-  color: {  // override default colors via JS
-    type: String
-  },
-  hints: { // dots/pills in range for hints (eg: [1, [1-2], 2])
-    type: Array,
-    default: () => ([])
-  }
 }
 
 export const props = {
   ...useInputProps,
-  ...useInputMetaProps,
   ...useInputValidatorProps,
-  ...useInputValueProps,
   ...useSwitchProps,
 }
 
-export const setup = (props, context) => {
-
-  const form = inject('form')
-
-  const metaProps = useInputMeta(props, context)
-
-  const {
-    placeholder,
-    readonly,
-    tabIndex,
-    text,
-    type,
-    isFocus,
-    isLocked,
-    onFocus,
-    onBlur
-  } = useInput(metaProps, context)
-
-  const {
-    value,
-  } = useInputValue(metaProps, context)
-
-  const onChange = (value) => {
-    setFormNamespace(props.namespace.split('.'), unref(form), value)
-  }
+export const setup = (props) => {
 
   const rangeValue = computed(() => {
-    return _.isEqual(unref(value), props.enabledValue) ? 1 : 0
+    return props.value ? 1 : 0
   })
 
   const toggle = () => {
-    if (_.isEqual(unref(value), props.enabledValue)) {
-      onChange(props.disabledValue)
+    if (unref(rangeValue) === 1) {
+      props.onChange(false)
     } else {
-      onChange(props.enabledValue)
+      props.onChange(true)
     }
   }
 
   return {
-    inputPlaceholder: placeholder,
-    inputReadonly: readonly,
-    inputTabIndex: tabIndex,
-    inputText: text,
-    inputType: type,
-    isFocus,
-    isLocked,
-    onFocus,
-    onBlur,
-    inputValue: value,
     rangeValue,
     onClick: toggle,
   }
@@ -176,6 +137,7 @@ export default {
 }
 
 div.base-input-switch-wrapper {
+  display: flex;
   border: none;
 }
 
diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue b/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue
new file mode 100644
index 000000000000..d88f4b545e1c
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="base-input-switch-wrapper">
+    <div
+      class="base-input-switch"
+      :class="{
+        'is-focus': isFocus,
+        'is-blur': !isFocus,
+        'is-disabled': isLocked,
+        'size-sm': size === 'sm',
+        'size-md': size === 'md',
+        'size-lg': size === 'lg',
+        'switch-enabled' : rangeValue === 1,
+      }"
+      :index="inputValue"
+      @click.stop
+    >
+      <div v-if="label !== false" v-t="label"
+      class="base-input-range-label col-form-label text-nowrap mr-2" :class="{
+        'text-black-50': isLocked
+      }" />
+      <div style="pointer-events: none;">
+        <span :class="[
+          'handle',
+          rangeValue === 1 ? 'handle-on' : 'handle-off'
+        ]">
+          <icon v-if="isLocked" name="lock"/>
+          <icon v-else-if="icon" :name="icon"/>
+          <slot v-else/> <!-- Icon slot -->
+        </span>
+      </div>
+      <input type="range" ref="input"
+             :tabIndex="tabIndex"
+             :value="rangeValue"
+             :step="1"
+             :max="1"
+             :min="0"
+             :disabled="isLocked"
+             @mouseup="onClick"
+             @focus="onFocus"
+             @blur="onBlur"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {useInput, useInputProps} from '@/composables/useInput'
+import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
+import {useInputValidatorProps} from '@/composables/useInputValidator'
+import {setFormNamespace, useInputValue, useInputValueProps} from '@/composables/useInputValue'
+import {computed, inject, unref} from '@vue/composition-api';
+import _ from 'lodash'
+
+export const useSwitchProps = {
+  label : {
+    default: null,
+    type: String
+  },
+  enabledValue: {
+    default: true
+  },
+  disabledValue: {
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  value: {
+    default: null
+  },
+  disabled: {
+    type: Boolean
+  },
+  icon: {
+    type: String
+  },
+  color: {  // override default colors via JS
+    type: String
+  },
+  hints: { // dots/pills in range for hints (eg: [1, [1-2], 2])
+    type: Array,
+    default: () => ([])
+  }
+}
+
+export const props = {
+  ...useInputProps,
+  ...useInputMetaProps,
+  ...useInputValidatorProps,
+  ...useInputValueProps,
+  ...useSwitchProps,
+}
+
+export const setup = (props, context) => {
+
+  const form = inject('form')
+
+  const metaProps = useInputMeta(props, context)
+
+  const {
+    placeholder,
+    readonly,
+    tabIndex,
+    text,
+    type,
+    isFocus,
+    isLocked,
+    onFocus,
+    onBlur
+  } = useInput(metaProps, context)
+
+  const {
+    value,
+  } = useInputValue(metaProps, context)
+
+  const onChange = (value) => {
+    setFormNamespace(props.namespace.split('.'), unref(form), value)
+  }
+
+  const rangeValue = computed(() => {
+    return _.isEqual(unref(value), props.enabledValue) ? 1 : 0
+  })
+
+  const toggle = () => {
+    if (_.isEqual(unref(value), props.enabledValue)) {
+      onChange(props.disabledValue)
+    } else {
+      onChange(props.enabledValue)
+    }
+  }
+
+  return {
+    inputPlaceholder: placeholder,
+    inputReadonly: readonly,
+    inputTabIndex: tabIndex,
+    inputText: text,
+    inputType: type,
+    isFocus,
+    isLocked,
+    onFocus,
+    onBlur,
+    inputValue: value,
+    rangeValue,
+    onClick: toggle,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-input-switch',
+  inheritAttrs: false,
+  props,
+  setup
+}
+</script>
+
+<style lang="scss">
+
+:root {
+  --range-length: 2;
+  --range-height: 22px;
+  --range-background-color: #{$input-placeholder-color};
+  --range-transition-delay: 0.3s;
+  --handle-height: 16px;
+  --handle-background-color: var(--white);
+  --handle-transition-delay: 0.3s;
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, #adb5bd);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out, box-shadow var(--range-transition-delay) ease-out, outline var(--range-transition-delay) ease-out;
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+}
+
+div.base-input-switch-wrapper {
+  border: none;
+}
+
+.base-input-switch .handle-on {
+  left: 100%;
+}
+
+.base-input-switch .handle-off {
+  left: 0;
+}
+
+div.base-input-switch.switch-enabled {
+  background-color: var(--primary);
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, $input-placeholder-color);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out,
+  box-shadow var(--range-transition-delay) ease-out,
+  outline var(--range-transition-delay) ease-out;
+
+  &.size-sm {
+    --handle-height: 8px;
+    --range-height: 12px;
+    width: calc(var(--range-length) * 10px);
+  }
+
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+
+  &.size-lg {
+    --handle-height: 32px;
+    --range-height: 44px;
+    width: calc(var(--range-length) * 40px);
+  }
+
+  &.is-focus {
+    box-shadow: 0 0 0 1px $input-focus-border-color;
+
+    .handle {
+      box-sizing: border-box;
+      border: 2px solid #fff;
+      background-color: rgba(0, 0, 0, 1);
+      animation: animateCursor 2s infinite;
+    }
+  }
+
+  &.is-invalid {
+    box-shadow: 0 0 0 1px $form-feedback-invalid-color;
+  }
+
+  &.is-disabled {
+    background-color: var(--range-background-color, $input-disabled-bg);
+    opacity: 0.6;
+
+    > .handle svg {
+      color: var(--range-background-color, $input-disabled-bg);
+    }
+  }
+
+  > div {
+    position: absolute;
+    right: calc(var(--range-height) / 2);
+    left: calc(var(--range-height) / 2);
+    height: var(--range-height);
+
+    > .handle {
+      position: absolute;
+      top: calc((var(--range-height) - var(--handle-height)) / 2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: var(--handle-height);
+      height: var(--handle-height);
+      margin-left: calc(var(--handle-height) / -2);
+      border-radius: 50%;
+      outline: none;
+      background-color: var(--handle-background-color);
+      color: var(--range-background-color, $input-placeholder-color); /* SVG icon */
+      font-size: 10px;
+      text-align: left;
+      transition: left var(--handle-transition-delay, 0s) ease-in-out,
+      background-color var(--range-transition-delay) ease-out,
+      color var(--range-transition-delay) ease-out;
+    }
+  }
+
+  > input[type=range] {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+    -webkit-appearance: none;
+    opacity: 0;
+  }
+}
+</style>

From f1c2c4d120ce546f00a0a8c46639696c2978cb21 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 12 Jul 2023 10:15:43 +0300
Subject: [PATCH 15/51] Add label UI component

---
 .../root/src/components/new/BaseLabel.vue     | 46 +++++++++++++++++++
 .../root/src/components/new/index.js          |  2 +
 2 files changed, 48 insertions(+)
 create mode 100644 html/pfappserver/root/src/components/new/BaseLabel.vue

diff --git a/html/pfappserver/root/src/components/new/BaseLabel.vue b/html/pfappserver/root/src/components/new/BaseLabel.vue
new file mode 100644
index 000000000000..0c17cf6054b3
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseLabel.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="base-label col-form-label text-nowrap mr-2"
+       :class="{ 'text-black-50': isLocked }">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export const useLabelProps = {
+  label: {
+    default: null,
+    type: String
+  },
+  isLocked: {
+    default: false,
+    type: Boolean
+  },
+}
+
+const props = {
+  ...useLabelProps,
+}
+
+export default {
+  name: 'base-label',
+  inheritAttrs: false,
+  props,
+}
+</script>
+
+
+<style scoped lang="scss">
+
+div.base-label {
+  font-size: $font-size-sm;
+  font-weight: 500;
+  line-height: $font-size-base / $font-size-sm * $line-height-base;
+  user-select: none;
+  padding: 0;
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+  }
+}
+
+</style>
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index 4a89781a5006..c7969140583b 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -79,6 +79,7 @@ import BaseTableSortable from './BaseTableSortable'
 import BaseUpload from './BaseUpload'
 import BaseView from './BaseView'
 import BaseFormGroupSwitch from './BaseFormGroupSwitch.vue';
+import BaseLabel from './BaseLabel.vue';
 
 import { mergeProps, renderHOCWithScopedSlots } from './utils'
 
@@ -139,6 +140,7 @@ export {
   BaseInputToggle, BaseInputToggleProps,
   BaseInputToggleAdvancedMode,
   BaseInputToggleFalseTrue,
+  BaseLabel,
 
   // bootstrap wrappers
   BaseInputGroupDate,

From 0564e665938cb16fd06c9f92bd2bd32f9e115018 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 12 Jul 2023 10:34:19 +0300
Subject: [PATCH 16/51] Refactor BaseFormGroupActions.vue to use new switch
 component

---
 .../_components/BaseFormGroupActions.vue      | 594 +++++++++---------
 .../_components/BaseInputToggleAutoreg.js     |  25 -
 .../_components/BaseInputToggleClose.js       |  25 -
 .../_components/BaseInputToggleEmailAdmin.js  |  25 -
 .../BaseInputToggleEmailRecipient.js          |  25 -
 .../_components/BaseInputToggleEmailUser.js   |  25 -
 .../_components/BaseInputToggleExternal.js    |  25 -
 .../_components/BaseInputToggleIsolate.js     |  25 -
 .../_components/BaseInputToggleUnreg.js       |  25 -
 9 files changed, 294 insertions(+), 500 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleAutoreg.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleClose.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailAdmin.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailRecipient.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailUser.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleExternal.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleIsolate.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleUnreg.js

diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseFormGroupActions.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseFormGroupActions.vue
index f3ff847a81a2..b1e0f4bf1fa0 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseFormGroupActions.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseFormGroupActions.vue
@@ -1,181 +1,188 @@
 <template>
   <b-form-group ref="form-group"
-    class="base-form-group"
-    :class="{
+                class="base-form-group"
+                :class="{
       'mb-0': !columnLabel
     }"
-    :content-cols="contentCols"
-    :content-cols-sm="contentColsSm"
-    :content-cols-md="contentColsMd"
-    :content-cols-lg="contentColsLg"
-    :content-cols-xl="contentColsXl"
-    :label="columnLabel"
-    :label-cols="labelCols"
-    :label-cols-sm="labelColsSm"
-    :label-cols-md="labelColsMd"
-    :label-cols-lg="labelColsLg"
-    :label-cols-xl="labelColsXl"
+                :content-cols="contentCols"
+                :content-cols-sm="contentColsSm"
+                :content-cols-md="contentColsMd"
+                :content-cols-lg="contentColsLg"
+                :content-cols-xl="contentColsXl"
+                :label="columnLabel"
+                :label-cols="labelCols"
+                :label-cols-sm="labelColsSm"
+                :label-cols-md="labelColsMd"
+                :label-cols-lg="labelColsLg"
+                :label-cols-xl="labelColsXl"
   >
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-unreg v-model="unreg"/>
-        </b-col>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-autoreg v-model="autoreg"/>
-        </b-col>
-        <b-collapse :visible="autoreg" class="col-sm-9 mt-3">
-
-          <form-group-target-category namespace="target_category"
-            :column-label="$t('Target Role')"
-          />
-
-          <form-group-access-duration namespace="access_duration"
-            :column-label="$t('Access Duration')"
-          />
-
-        </b-collapse>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-isolate v-model="isolate"/>
-        </b-col>
-        <b-collapse :visible="isolate" class="col-sm-9 mt-3">
-
-          <form-group-vlan namespace="vlan"
-            :column-label="$t('Role while isolated')"
-          />
-
-          <form-group-template namespace="template"
-            :column-label="$t('Template to use')"
-          />
-
-          <form-group-button-text namespace="button_text"
-            :column-label="$t('Button Text')"
-            :text="$t('Text displayed on the security event form to hosts.')"
-          />
-
-          <form-group-redirect-url namespace="redirect_url"
-            :column-label="$t('Redirection URL')"
-            :text="$t('Destination URL where PacketFence will forward the device. By default it will use the Redirection URL from the connection profile configuration.')"
-          />
-
-          <form-group-auto-enable namespace="auto_enable"
-            :column-label="$t('Auto Enable')"
-            :text="$t('Specifies if a host can self remediate the security event (enable network button) or if they can not and must call the help desk.')"
-          />
-
-          <form-group-max-enable namespace="max_enable"
-            :column-label="$t('Max Enables')"
-            :text="$t('Number of times a host will be able to try and self remediate before they are locked out and have to call the help desk. This is useful for users who just click through security event pages.')"
-          />
-
-        </b-collapse>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-email-admin v-model="email_admin"/>
-        </b-col>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-email-user v-model="email_user"/>
-        </b-col>
-        <b-collapse :visible="email_user" class="col-sm-9 mt-3">
-
-          <form-group-user-mail-message namespace="user_mail_message"
-            :column-label="$t('Additional message')"
-          />
-
-        </b-collapse>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-email-recipient v-model="email_recipient"/>
-        </b-col>
-        <b-collapse :visible="email_recipient" class="col-sm-9 mt-3">
-
-          <form-group-recipient-email namespace="recipient_email"
-            :column-label="$t('Email address')"
-          />
-          <form-group-recipient-message namespace="email_recipient_message"
-            :column-label="$t('Additional message')"
-          />
-          <form-group-recipient-template-message namespace="recipient_template_email"
-            :column-label="$t('Template to use')"
-          />
-
-        </b-collapse>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-external v-model="external"/>
-        </b-col>
-        <b-collapse :visible="external" class="col-sm-9 mt-3">
-
-          <form-group-external-command namespace="external_command"
-            :column-label="$t('Script path')"
-            :text="$t('Script need to be readable and executable by pf user.')"
-          />
-
-          <div class="alert alert-warning">
-            <p><strong>{{ $i18n.t('Note:') }}</strong> {{ $i18n.t('You can use the following variables in your script launch command:') }}</p>
-            <ul>
-              <li><code>$mac</code>: {{ $i18n.t('MAC address of the endpoint') }}</li>
-              <li><code>$ip</code>: {{ $i18n.t('IP address of the endpoint') }}</li>
-              <li><code>$vid</code>: {{ $i18n.t('ID of the security event') }}</li>
-            </ul>
-          </div>
-
-        </b-collapse>
-      </b-row>
-
-      <b-row no-gutters class="border-bottom">
-        <b-col cols="3">
-          <input-toggle-close v-model="close"/>
-        </b-col>
-        <b-collapse :visible="close" class="col-sm-9 mt-3">
-
-          <form-group-v-close namespace="vclose"
-            :column-label="$t('Security event to close')"
-          />
-
-        </b-collapse>
-      </b-row>
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="unregOnChange" :isLocked="isLocked" :value="unreg"/>
+        <base-label>Unregister</base-label>
+      </b-col>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch label="Register" :onChange="autoregOnChange"
+                           :isLocked="isLocked" :value="autoreg"/>
+        <base-label>Register</base-label>
+      </b-col>
+      <b-collapse :visible="autoreg" class="col-sm-9 mt-3">
+
+        <form-group-target-category namespace="target_category"
+                                    :column-label="$t('Target Role')"
+        />
+
+        <form-group-access-duration namespace="access_duration"
+                                    :column-label="$t('Access Duration')"
+        />
+
+      </b-collapse>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="reevaluateOnChange" :isLocked="isLocked" :value="reevaluate"/>
+        <base-label>Isolate</base-label>
+      </b-col>
+      <b-collapse :visible="reevaluate" class="col-sm-9 mt-3">
+
+        <form-group-vlan namespace="vlan"
+                         :column-label="$t('Role while isolated')"
+        />
+
+        <form-group-template namespace="template"
+                             :column-label="$t('Template to use')"
+        />
+
+        <form-group-button-text namespace="button_text"
+                                :column-label="$t('Button Text')"
+                                :text="$t('Text displayed on the security event form to hosts.')"
+        />
+
+        <form-group-redirect-url namespace="redirect_url"
+                                 :column-label="$t('Redirection URL')"
+                                 :text="$t('Destination URL where PacketFence will forward the device. By default it will use the Redirection URL from the connection profile configuration.')"
+        />
+
+        <form-group-auto-enable namespace="auto_enable"
+                                :column-label="$t('Auto Enable')"
+                                :text="$t('Specifies if a host can self remediate the security event (enable network button) or if they can not and must call the help desk.')"
+        />
+
+        <form-group-max-enable namespace="max_enable"
+                               :column-label="$t('Max Enables')"
+                               :text="$t('Number of times a host will be able to try and self remediate before they are locked out and have to call the help desk. This is useful for users who just click through security event pages.')"
+        />
+
+      </b-collapse>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="emailAdminOnChange" :isLocked="isLocked"
+                           :value="emailAdmin"/>
+        <base-label>Email administrator</base-label>
+      </b-col>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="emailUserOnChange" :isLocked="isLocked"
+                           :value="emailUser"/>
+        <base-label>Email endpoint owner</base-label>
+      </b-col>
+      <b-collapse :visible="emailUser" class="col-sm-9 mt-3">
+
+        <form-group-user-mail-message namespace="user_mail_message"
+                                      :column-label="$t('Additional message')"
+        />
+
+      </b-collapse>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="emailRecipientOnChange" :isLocked="isLocked"
+                           :value="emailRecipient"/>
+        <base-label>Email Recipient</base-label>
+      </b-col>
+      <b-collapse :visible="emailRecipient" class="col-sm-9 mt-3">
+
+        <form-group-recipient-email namespace="recipient_email"
+                                    :column-label="$t('Email address')"
+        />
+        <form-group-recipient-message namespace="email_recipient_message"
+                                      :column-label="$t('Additional message')"
+        />
+        <form-group-recipient-template-message namespace="recipient_template_email"
+                                               :column-label="$t('Template to use')"
+        />
+
+      </b-collapse>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="externalAccessOnChange" :isLocked="isLocked"
+                           :value="externalAccess"/>
+        <base-label>Execute script</base-label>
+      </b-col>
+      <b-collapse :visible="externalAccess" class="col-sm-9 mt-3">
+
+        <form-group-external-command namespace="external_command"
+                                     :column-label="$t('Script path')"
+                                     :text="$t('Script need to be readable and executable by pf user.')"
+        />
+
+        <div class="alert alert-warning">
+          <p><strong>{{ $i18n.t('Note:') }}</strong>
+            {{ $i18n.t('You can use the following variables in your script launch command:') }}</p>
+          <ul>
+            <li><code>$mac</code>: {{ $i18n.t('MAC address of the endpoint') }}</li>
+            <li><code>$ip</code>: {{ $i18n.t('IP address of the endpoint') }}</li>
+            <li><code>$vid</code>: {{ $i18n.t('ID of the security event') }}</li>
+          </ul>
+        </div>
+
+      </b-collapse>
+    </b-row>
+
+    <b-row no-gutters class="border-bottom">
+      <b-col cols="3" class="action-col">
+        <base-input-switch :onChange="closeOnChange" :isLocked="isLocked"
+                           :value="close"/>
+        <base-label>Close another security event</base-label>
+      </b-col>
+      <b-collapse :visible="close" class="col-sm-9 mt-3">
+
+        <form-group-v-close namespace="vclose"
+                            :column-label="$t('Security event to close')"
+        />
+
+      </b-collapse>
+    </b-row>
   </b-form-group>
 </template>
 <script>
 import {
-  BaseFormGroupChosenOne    as FormGroupAccessDuration,
-  BaseFormGroupToggleNY     as FormGroupAutoEnable,
-  BaseFormGroupInput        as FormGroupButtonText,
-  BaseFormGroupInput        as FormGroupExternalCommand,
-  BaseFormGroupInputNumber  as FormGroupMaxEnable,
-  BaseFormGroupInput        as FormGroupRedirectUrl,
-  BaseFormGroupChosenOne    as FormGroupTargetCategory,
-  BaseFormGroupChosenOne    as FormGroupTemplate,
-  BaseFormGroupTextarea     as FormGroupUserMailMessage,
-  BaseFormGroupInput        as FormGroupRecipientEmail,
-  BaseFormGroupTextarea     as FormGroupRecipientMessage,
-  BaseFormGroupInput        as FormGroupRecipientTemplateMessage,
-  BaseFormGroupChosenOne    as FormGroupVClose,
-  BaseFormGroupChosenOne    as FormGroupVlan,
+  BaseFormGroupChosenOne as FormGroupAccessDuration,
+  BaseFormGroupToggleNY as FormGroupAutoEnable,
+  BaseFormGroupInput as FormGroupButtonText,
+  BaseFormGroupInput as FormGroupExternalCommand,
+  BaseFormGroupInputNumber as FormGroupMaxEnable,
+  BaseFormGroupInput as FormGroupRedirectUrl,
+  BaseFormGroupChosenOne as FormGroupTargetCategory,
+  BaseFormGroupChosenOne as FormGroupTemplate,
+  BaseFormGroupTextarea as FormGroupUserMailMessage,
+  BaseFormGroupInput as FormGroupRecipientEmail,
+  BaseFormGroupTextarea as FormGroupRecipientMessage,
+  BaseFormGroupInput as FormGroupRecipientTemplateMessage,
+  BaseFormGroupChosenOne as FormGroupVClose,
+  BaseFormGroupChosenOne as FormGroupVlan, BaseLabel,
 } from '@/components/new'
-import BaseInputToggleAutoreg from './BaseInputToggleAutoreg'
-import BaseInputToggleClose from './BaseInputToggleClose'
-import BaseInputToggleEmailAdmin from './BaseInputToggleEmailAdmin'
-import BaseInputToggleEmailUser from './BaseInputToggleEmailUser'
-import BaseInputToggleEmailRecipient from './BaseInputToggleEmailRecipient'
-import BaseInputToggleExternal from './BaseInputToggleExternal'
-import BaseInputToggleIsolate from './BaseInputToggleIsolate'
-import BaseInputToggleUnreg from './BaseInputToggleUnreg'
 
 const components = {
   FormGroupAccessDuration,
@@ -192,23 +199,22 @@ const components = {
   FormGroupRecipientMessage,
   FormGroupRecipientTemplateMessage,
   FormGroupVlan,
-
-  InputToggleAutoreg:        BaseInputToggleAutoreg,
-  InputToggleClose:          BaseInputToggleClose,
-  InputToggleEmailAdmin:     BaseInputToggleEmailAdmin,
-  InputToggleEmailUser:      BaseInputToggleEmailUser,
-  InputToggleEmailRecipient: BaseInputToggleEmailRecipient,
-  InputToggleExternal:       BaseInputToggleExternal,
-  InputToggleIsolate:        BaseInputToggleIsolate,
-  InputToggleUnreg:          BaseInputToggleUnreg,
+  BaseInputSwitch,
+  BaseLabel,
 }
 
-import { customRef, inject, ref, unref, watch } from '@vue/composition-api'
-import { getFormNamespace, setFormNamespace } from '@/composables/useInputValue'
-import { useFormGroupProps as props } from '@/composables/useFormGroup'
+import {computed, customRef, inject, ref, unref, watch} from '@vue/composition-api'
+import {getFormNamespace, setFormNamespace} from '@/composables/useInputValue'
+import {useFormGroupProps as props} from '@/composables/useFormGroup'
+import BaseInputSwitch from '@/components/new/BaseInputSwitch.vue';
 
 const setup = () => {
 
+  const isLoading = inject('isLoading', ref(false))
+  const isReadonly = inject('isReadonly', ref(false))
+  const isLocked = computed(() => unref(isReadonly) || unref(isLoading))
+
+
   const form = inject('form', ref({}))
 
   const actionsValue = customRef((track, trigger) => ({
@@ -224,153 +230,131 @@ const setup = () => {
 
   const add = (action) => {
     remove(action) // remove duplicates
-    actionsValue.value = [ ...actionsValue.value, action ]
+    actionsValue.value = [...actionsValue.value, action]
   }
 
   const remove = (action) => {
     actionsValue.value = actionsValue.value.filter(a => a !== action)
   }
 
-  const unreg = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('unreg')
-    },
-    set(newValue) {
-      if (newValue) {
-        add('unreg')
-        remove('autoreg')
-        remove('role')
-      }
-      else
-        remove('unreg')
-      trigger()
+  const unregKey = 'unreg'
+  const autoregKey = 'autoreg'
+  const roleKey = 'role'
+  const reevaluateKey = 'reevaluate_access'
+  const emailAdminKey = 'email_admin'
+  const emailUserKey = 'email_user'
+  const emailRecipientKey = 'email_recipient'
+  const externalKey = 'external'
+  const closeKey = 'close'
+
+  const unreg = computed(() => unref(actionsValue).includes(unregKey))
+
+  const unregOnChange = (newValue) => {
+    if (newValue) {
+      add(unregKey)
+      remove(autoregKey)
+      remove(roleKey)
+    } else {
+      remove(unregKey)
     }
-  }))
+  }
 
-  const autoreg = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('autoreg')
-    },
-    set(newValue) {
-      if (newValue) {
-        add('autoreg')
-        remove('unreg')
-        if (form.value.target_category)
-          add('role')
-      }
-      else {
-        remove('autoreg')
-        remove('role')
-      }
-      trigger()
+  const autoreg = computed(() => unref(actionsValue).includes(autoregKey))
+  const autoregOnChange = (newValue) => {
+    if (newValue) {
+      add(autoregKey)
+      remove(unregKey)
+      if (form.value.target_category)
+        add(roleKey)
+    } else {
+      remove(autoregKey)
+      remove(roleKey)
     }
-  }))
+  }
 
-  const isolate = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('reevaluate_access')
-    },
-    set(newValue) {
-      if (newValue)
-        add('reevaluate_access')
-      else
-        remove('reevaluate_access')
-      trigger()
-    }
-  }))
 
-  const email_admin = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('email_admin')
-    },
-    set(newValue) {
-      if (newValue)
-        add('email_admin')
-      else
-        remove('email_admin')
-      trigger()
-    }
-  }))
+  const reevaluate = computed(() => unref(actionsValue).includes(reevaluateKey))
 
-  const email_user = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('email_user')
-    },
-    set(newValue) {
-      if (newValue)
-        add('email_user')
-      else
-        remove('email_user')
-      trigger()
-    }
-  }))
+  const reevaluateOnChange = (newValue) => {
+    if (newValue)
+      add(reevaluateKey)
+    else
+      remove(reevaluateKey)
+  }
 
-  const email_recipient = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('email_recipient')
-    },
-    set(newValue) {
-      if (newValue)
-        add('email_recipient')
-      else
-        remove('email_recipient')
-      trigger()
-    }
-  }))
+  const emailAdmin = computed(() => unref(actionsValue).includes(emailAdminKey))
 
-  const external = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('external')
-    },
-    set(newValue) {
-      if (newValue)
-        add('external')
-      else
-        remove('external')
-      trigger()
-    }
-  }))
+  const emailAdminOnChange = (newValue) => {
+    if (newValue)
+      add(emailAdminKey)
+    else
+      remove(emailAdminKey)
+  }
 
-  const close = customRef((track, trigger) => ({
-    get() {
-      track()
-      return actionsValue.value.includes('close')
-    },
-    set(newValue) {
-      if (newValue)
-        add('close')
-      else
-        remove('close')
-      trigger()
-    }
-  }))
+  const emailUser = computed(() => unref(actionsValue).includes(emailUserKey))
+
+  const emailUserOnChange = (newValue) => {
+    if (newValue)
+      add(emailUserKey)
+    else
+      remove(emailUserKey)
+  }
+
+  const emailRecipient = computed(() => unref(actionsValue).includes(emailRecipientKey))
+
+  const emailRecipientOnChange = (newValue) => {
+    if (newValue)
+      add(emailRecipientKey)
+    else
+      remove(emailRecipientKey)
+  }
+
+  const externalAccess = computed(() => unref(actionsValue).includes(externalKey))
+
+  const externalAccessOnChange = (newValue) => {
+    if (newValue)
+      add(externalKey)
+    else
+      remove(externalKey)
+  }
+
+  const close = computed(() => unref(actionsValue).includes(closeKey))
+
+  const closeOnChange = (newValue) => {
+    if (newValue)
+      add(closeKey)
+    else
+      remove(closeKey)
+  }
 
   watch(
     () => form.value.target_category,
     target_category => {
       if (target_category)
-        add('role')
+        add(roleKey)
       else
-        remove('role')
+        remove(roleKey)
     }
   )
 
   return {
+    isLocked,
     unreg,
+    unregOnChange,
     autoreg,
-    isolate,
-    email_admin,
-    email_user,
-    email_recipient,
-    external,
-    close
+    autoregOnChange,
+    reevaluate,
+    reevaluateOnChange,
+    emailAdmin,
+    emailAdminOnChange,
+    emailUser,
+    emailUserOnChange,
+    emailRecipient,
+    emailRecipientOnChange,
+    externalAccess,
+    externalAccessOnChange,
+    close,
+    closeOnChange,
   }
 }
 
@@ -383,3 +367,13 @@ export default {
   setup
 }
 </script>
+<style>
+.action-col {
+  display: flex;
+}
+
+.action-col div.base-label {
+  margin-left: 10px;
+}
+
+</style>
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleAutoreg.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleAutoreg.js
deleted file mode 100644
index d512b2d43c1f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleAutoreg.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Register') },
-      { value: true, label: i18n.t('Register'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-autoreg',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleClose.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleClose.js
deleted file mode 100644
index e2fe8bc0e09d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleClose.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Close another security event') },
-      { value: true, label: i18n.t('Close another security event'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-close',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailAdmin.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailAdmin.js
deleted file mode 100644
index 867d57c0a602..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailAdmin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Email administrator') },
-      { value: true, label: i18n.t('Email administrator'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-email-admin',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailRecipient.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailRecipient.js
deleted file mode 100644
index 28dd218a32e7..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailRecipient.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Email Recipient') },
-      { value: true, label: i18n.t('Email Recipient'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-email-recipient',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailUser.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailUser.js
deleted file mode 100644
index 62abf1c759fb..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleEmailUser.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Email endpoint owner') },
-      { value: true, label: i18n.t('Email endpoint owner'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-email-user',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleExternal.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleExternal.js
deleted file mode 100644
index b6e17bf58dd8..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleExternal.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Execute script') },
-      { value: true, label: i18n.t('Execute script'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-external',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleIsolate.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleIsolate.js
deleted file mode 100644
index 7c8fbb34ce63..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleIsolate.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Isolate') },
-      { value: true, label: i18n.t('Isolate'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-isolate',
-  extends: BaseInputToggle,
-  props
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleUnreg.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleUnreg.js
deleted file mode 100644
index 041f95372fcc..000000000000
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/BaseInputToggleUnreg.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { BaseInputToggle, BaseInputToggleProps } from '@/components/new/'
-import i18n from '@/utils/locale'
-
-export const props = {
-  ...BaseInputToggleProps,
-
-  // overload :options default
-  options: {
-    type: Array,
-    default: () => ([
-      { value: false, label: i18n.t('Unregister') },
-      { value: true, label: i18n.t('Unregister'), color: 'var(--primary)' }
-    ])
-  },
-  labelRight: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export default {
-  name: 'base-input-toggle-unreg',
-  extends: BaseInputToggle,
-  props
-}

From 65a198f96157c65f79600f33ca473e54cc546143 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 10:23:56 +0300
Subject: [PATCH 17/51] Handle focus internally in base input switch component

---
 .../src/components/new/BaseInputSwitch.vue    | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
index a168866bdee7..f1d464b49e0a 100644
--- a/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
+++ b/html/pfappserver/root/src/components/new/BaseInputSwitch.vue
@@ -3,8 +3,7 @@
     <div
       class="base-input-switch"
       :class="{
-        'is-focus': isFocus,
-        'is-blur': !isFocus,
+        'is-focus': focus,
         'is-disabled': isLocked,
         'size-sm': size === 'sm',
         'size-md': size === 'md',
@@ -31,31 +30,22 @@
              :max="1"
              :min="0"
              :disabled="isLocked"
+             @focus="() => setFocus(true)"
+             @focusout="() => setFocus(false)"
              @mouseup="onClick"
       />
     </div>
   </div>
 </template>
 <script>
-import {useInput, useInputProps} from '@/composables/useInput'
-import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
+import {useInputProps} from '@/composables/useInput'
 import {useInputValidatorProps} from '@/composables/useInputValidator'
-import {setFormNamespace, useInputValue, useInputValueProps} from '@/composables/useInputValue'
-import {computed, inject, unref} from '@vue/composition-api';
-import _ from 'lodash'
+import {computed, ref, unref} from '@vue/composition-api';
 
 export const useSwitchProps = {
   onChange: {
     type: Function
   },
-  label: {
-    default: null,
-    type: String
-  },
-  isFocus: {
-    default: false,
-    type: Boolean
-  },
   isLocked: {
     default: false,
     type: Boolean
@@ -85,6 +75,11 @@ export const setup = (props) => {
     return props.value ? 1 : 0
   })
 
+  const focus = ref(false)
+  const setFocus = (focusVal) => {
+    focus.value = focusVal
+  }
+
   const toggle = () => {
     if (unref(rangeValue) === 1) {
       props.onChange(false)
@@ -96,6 +91,8 @@ export const setup = (props) => {
   return {
     rangeValue,
     onClick: toggle,
+    focus,
+    setFocus,
   }
 }
 

From ba5031ffe11e82a95d4e28c0ac0652cde5e9ba49 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 10:24:28 +0300
Subject: [PATCH 18/51] Fixup BaseFormGroupSwitch.vue

---
 .../components/new/BaseFormGroupSwitch.vue    | 61 +++++++++++++------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue b/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
index 6da2e248a266..01fc937410aa 100644
--- a/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
+++ b/html/pfappserver/root/src/components/new/BaseFormGroupSwitch.vue
@@ -18,14 +18,11 @@
     :invalid-feedback="inputInvalidFeedback"
     :valid-feedback="inputValidFeedback"
   >
-    <base-input-switch :namespace="namespace"
-      :disabled="isLocked"
-      :size="size"
-      :enabled-value="enabledValue"
-      :disabled-value="disabledValue"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
+    <base-input-switch :disabled="isLocked"
+                       :size="size"
+                       :onChange="onChange"
+                       :value="inputValue"
+                       @blur="onBlur"
     />
     <template v-slot:prepend v-if="$slots.prepend">
       <slot name="prepend"></slot>
@@ -36,13 +33,19 @@
   </base-form-group>
 </template>
 <script>
-import { useFormGroupProps } from '@/composables/useFormGroup'
-import { useInput, useInputProps } from '@/composables/useInput'
-import { useInputMeta, useInputMetaProps } from '@/composables/useMeta'
-import { useInputValidator, useInputValidatorProps } from '@/composables/useInputValidator'
-import { useInputValue, useInputValueProps } from '@/composables/useInputValue'
+import {useFormGroupProps} from '@/composables/useFormGroup'
+import {useInput, useInputProps} from '@/composables/useInput'
+import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
+import {useInputValidator, useInputValidatorProps} from '@/composables/useInputValidator'
+import {
+  getFormNamespace,
+  setFormNamespace,
+  useInputValue,
+  useInputValueProps
+} from '@/composables/useInputValue'
 import BaseFormGroup from './BaseFormGroup'
-import BaseInputSwitch, {useSwitchProps} from './BaseInputSwitch.vue'
+import BaseInputSwitch from './BaseInputSwitch.vue'
+import {computed, inject, unref} from '@vue/composition-api';
 
 const components = {
   BaseFormGroup,
@@ -50,12 +53,23 @@ const components = {
 }
 
 export const props = {
+  enabledValue: {
+    type: [String, Number, Boolean],
+    default: true
+  },
+  disabledValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
   size: {
     type: String,
     default: 'md',
     validator: value => ['sm', 'md', 'lg'].includes(value)
   },
-  ...useSwitchProps,
+  isFocus: {
+    default: false,
+    type: Boolean
+  },
   ...useFormGroupProps,
   ...useInputProps,
   ...useInputMetaProps,
@@ -70,7 +84,6 @@ export const setup = (props, context) => {
     tabIndex,
     text,
     isLocked,
-    onFocus,
     onBlur
   } = useInput(metaProps, context)
 
@@ -85,13 +98,25 @@ export const setup = (props, context) => {
     validFeedback
   } = useInputValidator(metaProps, value)
 
+  const form = inject('form')
+  const onChange = (switchValue) => {
+    if (switchValue) {
+      setFormNamespace(props.namespace.split('.'), unref(form), props.enabledValue)
+    } else {
+      setFormNamespace(props.namespace.split('.'), unref(form), props.disabledValue)
+    }
+  }
+  const inputValue = computed(() =>
+    getFormNamespace(props.namespace.split('.'), unref(form)) === props.enabledValue
+  )
+
   return {
     // useInput
     inputTabIndex: tabIndex,
     inputText: text,
-    inputValue: value,
+    inputValue,
+    onChange,
     isLocked,
-    onFocus,
     onBlur,
     onInput,
 

From 4dba33455bf1ac01082566243d36158c19cd7c19 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 10:24:51 +0300
Subject: [PATCH 19/51] Remove BaseInputSwitchLegacy.vue

---
 .../components/new/BaseInputSwitchLegacy.vue  | 295 ------------------
 1 file changed, 295 deletions(-)
 delete mode 100644 html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue

diff --git a/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue b/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue
deleted file mode 100644
index d88f4b545e1c..000000000000
--- a/html/pfappserver/root/src/components/new/BaseInputSwitchLegacy.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<template>
-  <div class="base-input-switch-wrapper">
-    <div
-      class="base-input-switch"
-      :class="{
-        'is-focus': isFocus,
-        'is-blur': !isFocus,
-        'is-disabled': isLocked,
-        'size-sm': size === 'sm',
-        'size-md': size === 'md',
-        'size-lg': size === 'lg',
-        'switch-enabled' : rangeValue === 1,
-      }"
-      :index="inputValue"
-      @click.stop
-    >
-      <div v-if="label !== false" v-t="label"
-      class="base-input-range-label col-form-label text-nowrap mr-2" :class="{
-        'text-black-50': isLocked
-      }" />
-      <div style="pointer-events: none;">
-        <span :class="[
-          'handle',
-          rangeValue === 1 ? 'handle-on' : 'handle-off'
-        ]">
-          <icon v-if="isLocked" name="lock"/>
-          <icon v-else-if="icon" :name="icon"/>
-          <slot v-else/> <!-- Icon slot -->
-        </span>
-      </div>
-      <input type="range" ref="input"
-             :tabIndex="tabIndex"
-             :value="rangeValue"
-             :step="1"
-             :max="1"
-             :min="0"
-             :disabled="isLocked"
-             @mouseup="onClick"
-             @focus="onFocus"
-             @blur="onBlur"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import {useInput, useInputProps} from '@/composables/useInput'
-import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
-import {useInputValidatorProps} from '@/composables/useInputValidator'
-import {setFormNamespace, useInputValue, useInputValueProps} from '@/composables/useInputValue'
-import {computed, inject, unref} from '@vue/composition-api';
-import _ from 'lodash'
-
-export const useSwitchProps = {
-  label : {
-    default: null,
-    type: String
-  },
-  enabledValue: {
-    default: true
-  },
-  disabledValue: {
-    default: false
-  },
-  size: {
-    type: String,
-    default: 'md',
-    validator: value => ['sm', 'md', 'lg'].includes(value)
-  },
-  value: {
-    default: null
-  },
-  disabled: {
-    type: Boolean
-  },
-  icon: {
-    type: String
-  },
-  color: {  // override default colors via JS
-    type: String
-  },
-  hints: { // dots/pills in range for hints (eg: [1, [1-2], 2])
-    type: Array,
-    default: () => ([])
-  }
-}
-
-export const props = {
-  ...useInputProps,
-  ...useInputMetaProps,
-  ...useInputValidatorProps,
-  ...useInputValueProps,
-  ...useSwitchProps,
-}
-
-export const setup = (props, context) => {
-
-  const form = inject('form')
-
-  const metaProps = useInputMeta(props, context)
-
-  const {
-    placeholder,
-    readonly,
-    tabIndex,
-    text,
-    type,
-    isFocus,
-    isLocked,
-    onFocus,
-    onBlur
-  } = useInput(metaProps, context)
-
-  const {
-    value,
-  } = useInputValue(metaProps, context)
-
-  const onChange = (value) => {
-    setFormNamespace(props.namespace.split('.'), unref(form), value)
-  }
-
-  const rangeValue = computed(() => {
-    return _.isEqual(unref(value), props.enabledValue) ? 1 : 0
-  })
-
-  const toggle = () => {
-    if (_.isEqual(unref(value), props.enabledValue)) {
-      onChange(props.disabledValue)
-    } else {
-      onChange(props.enabledValue)
-    }
-  }
-
-  return {
-    inputPlaceholder: placeholder,
-    inputReadonly: readonly,
-    inputTabIndex: tabIndex,
-    inputText: text,
-    inputType: type,
-    isFocus,
-    isLocked,
-    onFocus,
-    onBlur,
-    inputValue: value,
-    rangeValue,
-    onClick: toggle,
-  }
-}
-
-// @vue/component
-export default {
-  name: 'base-input-switch',
-  inheritAttrs: false,
-  props,
-  setup
-}
-</script>
-
-<style lang="scss">
-
-:root {
-  --range-length: 2;
-  --range-height: 22px;
-  --range-background-color: #{$input-placeholder-color};
-  --range-transition-delay: 0.3s;
-  --handle-height: 16px;
-  --handle-background-color: var(--white);
-  --handle-transition-delay: 0.3s;
-}
-
-.base-input-switch {
-  position: relative;
-  flex-shrink: 0;
-  height: var(--range-height);
-  margin: 0px;
-  box-shadow: 0 0 0 1px transparent;
-  margin: 0px 1px;
-  border-radius: calc(var(--range-height) / 2);
-  background-color: var(--range-background-color, #adb5bd);
-  text-align: left;
-  transition: background-color var(--range-transition-delay) ease-out, box-shadow var(--range-transition-delay) ease-out, outline var(--range-transition-delay) ease-out;
-  --handle-height: 16px;
-  --range-height: 22px;
-  width: calc(var(--range-length) * 20px);
-}
-
-div.base-input-switch-wrapper {
-  border: none;
-}
-
-.base-input-switch .handle-on {
-  left: 100%;
-}
-
-.base-input-switch .handle-off {
-  left: 0;
-}
-
-div.base-input-switch.switch-enabled {
-  background-color: var(--primary);
-}
-
-.base-input-switch {
-  position: relative;
-  flex-shrink: 0;
-  height: var(--range-height);
-  margin: 0px;
-  box-shadow: 0 0 0 1px transparent;
-  margin: 0px 1px;
-  border-radius: calc(var(--range-height) / 2);
-  background-color: var(--range-background-color, $input-placeholder-color);
-  text-align: left;
-  transition: background-color var(--range-transition-delay) ease-out,
-  box-shadow var(--range-transition-delay) ease-out,
-  outline var(--range-transition-delay) ease-out;
-
-  &.size-sm {
-    --handle-height: 8px;
-    --range-height: 12px;
-    width: calc(var(--range-length) * 10px);
-  }
-
-  --handle-height: 16px;
-  --range-height: 22px;
-  width: calc(var(--range-length) * 20px);
-
-  &.size-lg {
-    --handle-height: 32px;
-    --range-height: 44px;
-    width: calc(var(--range-length) * 40px);
-  }
-
-  &.is-focus {
-    box-shadow: 0 0 0 1px $input-focus-border-color;
-
-    .handle {
-      box-sizing: border-box;
-      border: 2px solid #fff;
-      background-color: rgba(0, 0, 0, 1);
-      animation: animateCursor 2s infinite;
-    }
-  }
-
-  &.is-invalid {
-    box-shadow: 0 0 0 1px $form-feedback-invalid-color;
-  }
-
-  &.is-disabled {
-    background-color: var(--range-background-color, $input-disabled-bg);
-    opacity: 0.6;
-
-    > .handle svg {
-      color: var(--range-background-color, $input-disabled-bg);
-    }
-  }
-
-  > div {
-    position: absolute;
-    right: calc(var(--range-height) / 2);
-    left: calc(var(--range-height) / 2);
-    height: var(--range-height);
-
-    > .handle {
-      position: absolute;
-      top: calc((var(--range-height) - var(--handle-height)) / 2);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: var(--handle-height);
-      height: var(--handle-height);
-      margin-left: calc(var(--handle-height) / -2);
-      border-radius: 50%;
-      outline: none;
-      background-color: var(--handle-background-color);
-      color: var(--range-background-color, $input-placeholder-color); /* SVG icon */
-      font-size: 10px;
-      text-align: left;
-      transition: left var(--handle-transition-delay, 0s) ease-in-out,
-      background-color var(--range-transition-delay) ease-out,
-      color var(--range-transition-delay) ease-out;
-    }
-  }
-
-  > input[type=range] {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    pointer-events: all;
-    -webkit-appearance: none;
-    opacity: 0;
-  }
-}
-</style>

From db7182194b22bbfa61eddbc061e61a185f34ae4f Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 11:38:38 +0300
Subject: [PATCH 20/51] Change security events forms to use switch UI component

---
 conf/I18N/api/en.po                           |  2 +-
 conf/I18N/api/fr.po                           |  4 +-
 .../securityEvents/_components/TheForm.vue    | 40 ++++++++++---------
 .../securityEvents/_components/index.js       |  7 ++--
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/conf/I18N/api/en.po b/conf/I18N/api/en.po
index c26d66049653..e84527cf82ec 100644
--- a/conf/I18N/api/en.po
+++ b/conf/I18N/api/en.po
@@ -5702,7 +5702,7 @@ msgid "Enable profile"
 msgstr ""
 
 #: html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue:9
-msgid "Enable security event"
+msgid "Enable this event"
 msgstr ""
 
 #: html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue:25
diff --git a/conf/I18N/api/fr.po b/conf/I18N/api/fr.po
index 986e9c34a22c..705e26843c2d 100644
--- a/conf/I18N/api/fr.po
+++ b/conf/I18N/api/fr.po
@@ -6296,8 +6296,8 @@ msgid "Enable profile"
 msgstr "Activer le profil"
 
 #: html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue:9
-msgid "Enable security event"
-msgstr "Activer l'événement de sécurité"
+msgid "Enable this event"
+msgstr "Activer cet événement"
 
 #: html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue:25
 msgid "Enable the Configurator and the Configurator API."
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue
index 310852a1b916..74347546149d 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheForm.vue
@@ -6,32 +6,34 @@
     :isLoading="isLoading"
   >
     <form-group-enabled namespace="enabled"
-      :column-label="$i18n.t('Enable security event')"
+                        :column-label="$i18n.t('Enable this event')"
+                        enabled-value="Y"
+                        disabled-value="N"
     />
 
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Identifier')"
+                           :column-label="$i18n.t('Identifier')"
     />
 
     <form-group-description namespace="desc"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-priority namespace="priority"
-      :column-label="$i18n.t('Priority')"
-      :text="$i18n.t('When multiple violations are opened for an endpoint, the one with the lowest priority takes precedence.')"
+                         :column-label="$i18n.t('Priority')"
+                         :text="$i18n.t('When multiple violations are opened for an endpoint, the one with the lowest priority takes precedence.')"
     />
 
     <form-group-whitelisted-roles namespace="whitelisted_roles"
-      :column-label="$i18n.t('Ignored Roles')"
-      :text="$i18n.t(`Which roles shouldn't be impacted by this security event.`)"
+                                  :column-label="$i18n.t('Ignored Roles')"
+                                  :text="$i18n.t(`Which roles shouldn't be impacted by this security event.`)"
     />
 
     <form-group-triggers namespace="triggers"
-      :column-label="$i18n.t('Event Triggers')"
+                         :column-label="$i18n.t('Event Triggers')"
     >
       <template v-slot:header>
-        <form-group-triggers-header />
+        <form-group-triggers-header/>
       </template>
     </form-group-triggers>
 
@@ -40,28 +42,30 @@
     />
 
     <form-group-window-dynamic namespace="window_dynamic"
-      :column-label="$i18n.t('Dynamic Window')"
-      :text="$i18n.t('Only works for accounting security events. The security event will be opened according to the time you set in the accounting security event (ie. You have an accounting security event for 10GB/month. If you bust the bandwidth after 3 days, the security event will open and the release date will be set for the last day of the current month).')"
+                               :column-label="$i18n.t('Dynamic Window')"
+                               :text="$i18n.t('Only works for accounting security events. The security event will be opened according to the time you set in the accounting security event (ie. You have an accounting security event for 10GB/month. If you bust the bandwidth after 3 days, the security event will open and the release date will be set for the last day of the current month).')"
+                               enabled-value="1"
+                               disabled-value="0"
     />
 
     <form-group-grace namespace="grace"
-      :column-label="$i18n.t('Grace')"
-      :text="$i18n.t('Amount of time before the security event can reoccur. This is useful to allow hosts time (in the example 2 minutes) to download tools to fix their issue, or shutoff their peer-to-peer application.')"
+                      :column-label="$i18n.t('Grace')"
+                      :text="$i18n.t('Amount of time before the security event can reoccur. This is useful to allow hosts time (in the example 2 minutes) to download tools to fix their issue, or shutoff their peer-to-peer application.')"
     />
 
     <form-group-window namespace="window"
-      :column-label="$i18n.t('Window')"
-      :text="$i18n.t('Amount of time before a security event will be closed automatically. Instead of allowing people to reactivate the network, you may want to open a security event for a defined amount of time instead.')"
+                       :column-label="$i18n.t('Window')"
+                       :text="$i18n.t('Amount of time before a security event will be closed automatically. Instead of allowing people to reactivate the network, you may want to open a security event for a defined amount of time instead.')"
     />
 
     <form-group-delay-by namespace="delay_by"
-      :column-label="$i18n.t('Delay By')"
-      :text="$i18n.t('Delay before triggering the security event.')"
+                         :column-label="$i18n.t('Delay By')"
+                         :text="$i18n.t('Delay before triggering the security event.')"
     />
   </base-form>
 </template>
 <script>
-import { computed, provide, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import {computed, provide, reactive, ref, toRefs, watch} from '@vue/composition-api'
 import {
   BaseForm
 } from '@/components/new/'
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/index.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/index.js
index 4596c16f8946..777a6a828ff2 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/index.js
@@ -4,13 +4,12 @@ import {
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggle,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import {
   BaseFormGroupIntervalUnit
 } from '@/views/Configuration/_components/new/'
 import BaseFormGroupActions from './BaseFormGroupActions'
-import BaseFormGroupEnabled from './BaseFormGroupEnabled'
 import BaseFormGroupTriggers from './BaseFormGroupTriggers'
 import BaseFormGroupTriggersHeader from './BaseFormGroupTriggersHeader'
 import TheForm from './TheForm'
@@ -24,7 +23,7 @@ export {
   BaseFormGroupActions        as FormGroupActions,
   BaseFormGroupIntervalUnit   as FormGroupDelayBy,
   BaseFormGroupInput          as FormGroupDescription,
-  BaseFormGroupEnabled        as FormGroupEnabled,
+  BaseFormGroupSwitch         as FormGroupEnabled,
   BaseFormGroupIntervalUnit   as FormGroupGrace,
   BaseFormGroupInput          as FormGroupIdentifier,
   BaseFormGroupInputNumber    as FormGroupPriority,
@@ -32,7 +31,7 @@ export {
   BaseFormGroupTriggersHeader as FormGroupTriggersHeader,
   BaseFormGroupChosenMultiple as FormGroupWhitelistedRoles,
   BaseFormGroupIntervalUnit   as FormGroupWindow,
-  BaseFormGroupToggle         as FormGroupWindowDynamic,
+  BaseFormGroupSwitch         as FormGroupWindowDynamic,
 
   TheForm,
   TheView,

From b0ef8793da155a8665e68ed23576dd001f2e602a Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 11:47:38 +0300
Subject: [PATCH 21/51] Change firewalls forms to use switch UI component

---
 .../_components/FormTypeBarracudaNg.vue       | 73 +++++++++--------
 .../_components/FormTypeCheckpoint.vue        | 69 ++++++++--------
 .../_components/FormTypeCiscoIsePic.vue       | 65 ++++++++-------
 .../_components/FormTypeContentKeeper.vue     | 61 +++++++-------
 .../_components/FormTypeFamilyZone.vue        | 75 ++++++++---------
 .../_components/FormTypeFortiGate.vue         | 69 ++++++++--------
 .../firewalls/_components/FormTypeIboss.vue   | 75 ++++++++---------
 .../firewalls/_components/FormTypeJsonRpc.vue | 73 +++++++++--------
 .../_components/FormTypeJuniperSrx.vue        | 73 +++++++++--------
 .../_components/FormTypeLightSpeedRocket.vue  | 69 ++++++++--------
 .../_components/FormTypePaloAlto.vue          | 81 ++++++++++---------
 .../_components/FormTypeSmoothWall.vue        | 69 ++++++++--------
 .../_components/FormTypeWatchGuard.vue        | 69 ++++++++--------
 .../firewalls/_components/index.js            | 39 +++++----
 14 files changed, 498 insertions(+), 462 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeBarracudaNg.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeBarracudaNg.vue
index 892597fd14e1..c4fac4fe2d51 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeBarracudaNg.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeBarracudaNg.vue
@@ -1,67 +1,71 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+    <form-group-username :column-label="$i18n.t('Username')"
+                         namespace="username"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this firewall.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this firewall.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
 
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -75,6 +79,7 @@ import {
   FormGroupUsername,
   FormGroupUsernameFormat,
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -92,8 +97,6 @@ const components = {
   FormGroupUsernameFormat,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-barracuda-ng',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCheckpoint.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCheckpoint.vue
index 0a1b907061b1..820313d3fcd5 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCheckpoint.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCheckpoint.vue
@@ -1,62 +1,66 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -71,6 +75,7 @@ import {
   FormGroupUsernameFormat,
   FormGroupVsys
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -89,8 +94,6 @@ const components = {
   FormGroupVsys
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-checkpoint',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCiscoIsePic.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCiscoIsePic.vue
index 39d60f9ede10..fc076cd103e5 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCiscoIsePic.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeCiscoIsePic.vue
@@ -1,58 +1,62 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -64,6 +68,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -79,8 +84,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-cisco-ise-pic',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeContentKeeper.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeContentKeeper.vue
index 994c1220799a..080af4dc2ccb 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeContentKeeper.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeContentKeeper.vue
@@ -1,57 +1,59 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -63,6 +65,7 @@ import {
   FormGroupPort,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -78,8 +81,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-content-keeper',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFamilyZone.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFamilyZone.vue
index fe4a519579f8..f49d30272035 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFamilyZone.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFamilyZone.vue
@@ -1,67 +1,71 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :text="$i18n.t('Include the region in the FQDN when using the cloud version (ex: login.myregion.linewize.net).')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           :text="$i18n.t('Include the region in the FQDN when using the cloud version (ex: login.myregion.linewize.net).')"
+                           namespace="id"
     />
 
-    <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+    <form-group-username :column-label="$i18n.t('Username')"
+                         namespace="username"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-device-identifier namespace="deviceid"
-      :column-label="$i18n.t('DeviceID')"
-      :text="$i18n.t('Please define the DeviceID.')"
+    <form-group-device-identifier :column-label="$i18n.t('DeviceID')"
+                                  :text="$i18n.t('Please define the DeviceID.')"
+                                  namespace="deviceid"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -75,6 +79,7 @@ import {
   FormGroupUsername,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -92,8 +97,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-family-zone',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFortiGate.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFortiGate.vue
index 90eb54e86a1d..a6b1f56dab3c 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFortiGate.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeFortiGate.vue
@@ -1,62 +1,66 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -69,6 +73,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -85,8 +90,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-forti-gate',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeIboss.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeIboss.vue
index f4dc5f343271..5a0d48e04c44 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeIboss.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeIboss.vue
@@ -1,67 +1,71 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-nac-name namespace="nac_name"
-      :column-label="$i18n.t('NAC name')"
-      :text="$i18n.t('Should match the NAC name from the Iboss configuration.')"
+    <form-group-nac-name :column-label="$i18n.t('NAC name')"
+                         :text="$i18n.t('Should match the NAC name from the Iboss configuration.')"
+                         namespace="nac_name"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -75,6 +79,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -92,8 +97,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-iboss',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJsonRpc.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJsonRpc.vue
index 8217ffe53f6e..ff8bb3e5a0ae 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJsonRpc.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJsonRpc.vue
@@ -1,66 +1,70 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+    <form-group-username :column-label="$i18n.t('Username')"
+                         namespace="username"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Password')"
+    <form-group-password :column-label="$i18n.t('Password')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -74,6 +78,7 @@ import {
   FormGroupUsername,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -91,8 +96,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-json-rpc',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJuniperSrx.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJuniperSrx.vue
index e219b73c0dd4..faf2baf8dd3e 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJuniperSrx.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeJuniperSrx.vue
@@ -1,66 +1,70 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+    <form-group-username :column-label="$i18n.t('Username')"
+                         namespace="username"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -74,6 +78,7 @@ import {
   FormGroupUsername,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -91,8 +96,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-juniper-srx',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeLightSpeedRocket.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeLightSpeedRocket.vue
index 9e862d73a94b..b2553bbf31bf 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeLightSpeedRocket.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeLightSpeedRocket.vue
@@ -1,62 +1,66 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -69,6 +73,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -85,8 +90,6 @@ const components = {
   FormGroupUsernameFormat,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-light-speed-rocket',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypePaloAlto.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypePaloAlto.vue
index b82f9d51805f..91f5d6f56304 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypePaloAlto.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypePaloAlto.vue
@@ -1,72 +1,76 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-vsys namespace="vsys"
-      :column-label="$i18n.t('Vsys')"
-      :text="$i18n.t('Please define the Virtual System number. This only has an effect when used with the HTTP transport.')"
+    <form-group-vsys :column-label="$i18n.t('Vsys')"
+                     :text="$i18n.t('Please define the Virtual System number. This only has an effect when used with the HTTP transport.')"
+                     namespace="vsys"
     />
 
-    <form-group-transport namespace="transport"
-      :column-label="$i18n.t('Transport')"
+    <form-group-transport :column-label="$i18n.t('Transport')"
+                          namespace="transport"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify. This parameter is ignored when the Syslog transport is selected.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify. This parameter is ignored when the Syslog transport is selected.')"
+                     namespace="port"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
-      :text="$i18n.t('If using the HTTP transport, specify the password for the Palo Alto API.')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         :text="$i18n.t('If using the HTTP transport, specify the password for the Palo Alto API.')"
+                         namespace="password"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -81,6 +85,7 @@ import {
   FormGroupUsernameFormat,
   FormGroupVsys
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -99,8 +104,6 @@ const components = {
   FormGroupVsys
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-palo-alto',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeSmoothWall.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeSmoothWall.vue
index 9d9bbae941de..9d2651e0e6cd 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeSmoothWall.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeSmoothWall.vue
@@ -1,62 +1,66 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -69,6 +73,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -85,8 +90,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-smooth-wall',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeWatchGuard.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeWatchGuard.vue
index ce19fbc88aeb..fd7da5ab6ea1 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeWatchGuard.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/FormTypeWatchGuard.vue
@@ -1,62 +1,66 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Hostname or IP Address')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Hostname or IP Address')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Secret or Key')"
+    <form-group-password :column-label="$i18n.t('Secret or Key')"
+                         namespace="password"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port of the service')"
-      :text="$i18n.t('If you use an alternative port, please specify.')"
+    <form-group-port :column-label="$i18n.t('Port of the service')"
+                     :text="$i18n.t('If you use an alternative port, please specify.')"
+                     namespace="port"
     />
 
-    <form-group-categories namespace="categories"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-categories :column-label="$i18n.t('Roles')"
+                           :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                           namespace="categories"
     />
 
-    <form-group-networks namespace="networks"
-      :column-label="$i18n.t('Networks on which to do SSO')"
-      :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+    <form-group-networks :column-label="$i18n.t('Networks on which to do SSO')"
+                         :text="$i18n.t('Comma delimited list of networks on which the SSO applies.\nFormat : 192.168.0.0/24')"
+                         namespace="networks"
     />
 
-    <form-group-cache-updates namespace="cache_updates"
-      :column-label="$i18n.t('Cache updates')"
-      :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+    <form-group-cache-updates :column-label="$i18n.t('Cache updates')"
+                              :text="$i18n.t(`Enable this to debounce updates to the Firewall.\nBy default, PacketFence will send a SSO on every DHCP request for every device. Enabling this enables 'sleep' periods during which the update is not sent if the informations stay the same.`)"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="cache_updates"
     />
 
-    <form-group-cache-timeout namespace="cache_timeout"
-      :column-label="$i18n.t('Cache timeout')"
-      :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+    <form-group-cache-timeout :column-label="$i18n.t('Cache timeout')"
+                              :text="$i18n.t(`Adjust the 'Cache timeout' to half the expiration delay in your firewall.\nYour DHCP renewal interval should match this value.`)"
+                              namespace="cache_timeout"
     />
 
-    <form-group-username-format namespace="username_format"
-      :column-label="$i18n.t('Username format')"
-      :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+    <form-group-username-format :column-label="$i18n.t('Username format')"
+                                :text="$i18n.t('Defines how to format the username that is sent to your firewall. $username represents the username and $realm represents the realm of your user if applicable. $pf_username represents the unstripped username as it is stored in the PacketFence database. If left empty, it will use the username as stored in PacketFence (value of $pf_username).')"
+                                namespace="username_format"
     />
 
-    <form-group-default-realm namespace="default_realm"
-      :column-label="$i18n.t('Default realm')"
-      :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+    <form-group-default-realm :column-label="$i18n.t('Default realm')"
+                              :text="$i18n.t('The default realm to be used while formatting the username when no realm can be extracted from the username.')"
+                              namespace="default_realm"
     />
 
-    <form-group-use-connector namespace="use_connector"
-      :column-label="$i18n.t('Use Connector')"
-      :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+    <form-group-use-connector :column-label="$i18n.t('Use Connector')"
+                              :text="$i18n.t('Use the available PacketFence connectors to connect to this authentication source. By default, a local connector is hosted on this server. Using remote connectors is only supported on a standalone instance at the moment.')"
+                              disabled-value="0"
+                              enabled-value="1"
+                              namespace="use_connector"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCacheTimeout,
   FormGroupCacheUpdates,
@@ -69,6 +73,7 @@ import {
   FormGroupUseConnector,
   FormGroupUsernameFormat
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -85,8 +90,6 @@ const components = {
   FormGroupUsernameFormat
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-watch-guard',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/index.js b/html/pfappserver/root/src/views/Configuration/firewalls/_components/index.js
index be13bbc1b39f..37b6baed2bcf 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/index.js
@@ -1,4 +1,4 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
@@ -6,31 +6,30 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
-  BaseFormGroupToggle,
-  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseViewCollectionItem              as BaseView,
-  BaseFormButtonBar                   as FormButtonBar,
+  BaseViewCollectionItem as BaseView,
+  BaseFormButtonBar as FormButtonBar,
 
-  BaseFormGroupInputNumber            as FormGroupCacheTimeout,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCacheUpdates,
-  BaseFormGroupChosenMultiple         as FormGroupCategories,
-  BaseFormGroupInput                  as FormGroupDefaultRealm,
-  BaseFormGroupInput                  as FormGroupDeviceIdentifier,
-  BaseFormGroupInput                  as FormGroupIdentifier,
-  BaseFormGroupInput                  as FormGroupNacName,
-  BaseFormGroupInput                  as FormGroupNetworks,
-  BaseFormGroupInputPassword          as FormGroupPassword,
-  BaseFormGroupInputNumber            as FormGroupPort,
-  BaseFormGroupChosenOne              as FormGroupTransport,
-  BaseFormGroupToggle                 as FormGroupUseConnector,
-  BaseFormGroupInput                  as FormGroupUsername,
-  BaseFormGroupInput                  as FormGroupUsernameFormat,
-  BaseFormGroupInput                  as FormGroupVsys,
+  BaseFormGroupInputNumber as FormGroupCacheTimeout,
+  BaseFormGroupSwitch as FormGroupCacheUpdates,
+  BaseFormGroupChosenMultiple as FormGroupCategories,
+  BaseFormGroupInput as FormGroupDefaultRealm,
+  BaseFormGroupInput as FormGroupDeviceIdentifier,
+  BaseFormGroupInput as FormGroupIdentifier,
+  BaseFormGroupInput as FormGroupNacName,
+  BaseFormGroupInput as FormGroupNetworks,
+  BaseFormGroupInputPassword as FormGroupPassword,
+  BaseFormGroupInputNumber as FormGroupPort,
+  BaseFormGroupChosenOne as FormGroupTransport,
+  BaseFormGroupSwitch as FormGroupUseConnector,
+  BaseFormGroupInput as FormGroupUsername,
+  BaseFormGroupInput as FormGroupUsernameFormat,
+  BaseFormGroupInput as FormGroupVsys,
 
   TheForm,
   TheView

From 22f1eaaaad1b2920d1886a9817058ecd11ea20e0 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 12:24:52 +0300
Subject: [PATCH 22/51] Change switch template form to use switch UI component

---
 .../switchTemplates/_components/TheForm.vue   | 46 +++++++++----------
 .../switchTemplates/_components/index.js      |  4 +-
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheForm.vue
index bedcb60830c7..3bf47c9811e3 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheForm.vue
@@ -6,74 +6,74 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Identifier')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Identifier')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-radius-disconnect namespace="radiusDisconnect"
-      :column-label="$i18n.t('RADIUS Disconnect')"
+                                  :column-label="$i18n.t('RADIUS Disconnect')"
     />
 
     <form-group-snmp-disconnect namespace="snmpDisconnect"
-      :column-label="$i18n.t('SNMP Disconnect')"
-      :text="$i18n.t('Use SNMP instead of RADIUS to perform access reevaluation. This will perform an SNMP up/down on the port using the standard MIB.')"
+                                :column-label="$i18n.t('SNMP Disconnect')"
+                                :text="$i18n.t('Use SNMP instead of RADIUS to perform access reevaluation. This will perform an SNMP up/down on the port using the standard MIB.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-accept-vlans namespace="acceptVlan"
-      :column-label="$i18n.t('Accept VLAN Scope')"
+                             :column-label="$i18n.t('Accept VLAN Scope')"
     />
 
     <form-group-accept-roles namespace="acceptRole"
-      :column-label="$i18n.t('Accept Role Scope')"
+                             :column-label="$i18n.t('Accept Role Scope')"
     />
 
     <form-group-disconnect namespace="disconnect"
-      :column-label="$i18n.t('Disconnect Scope')"
+                           :column-label="$i18n.t('Disconnect Scope')"
     />
 
     <form-group-coa namespace="coa"
-      :column-label="$i18n.t('CoA Scope')"
+                    :column-label="$i18n.t('CoA Scope')"
     />
 
     <form-group-coa namespace="reject"
-      :column-label="$i18n.t('Reject Scope')"
+                    :column-label="$i18n.t('Reject Scope')"
     />
 
     <form-group-voip namespace="voip"
-      :column-label="$i18n.t('VOIP Scope')"
+                     :column-label="$i18n.t('VOIP Scope')"
     />
 
     <form-group-bounce namespace="bounce"
-      :column-label="$i18n.t('Bounce Port Scope')"
+                       :column-label="$i18n.t('Bounce Port Scope')"
     />
 
     <form-group-acl-template namespace="acl_template"
-      :column-label="$i18n.t('ACL template')"
-      :text="$i18n.t('The template to use to generate an access list for this module.')"
+                             :column-label="$i18n.t('ACL template')"
+                             :text="$i18n.t('The template to use to generate an access list for this module.')"
     />
 
     <form-group-cli-authorize-read namespace="cliAuthorizeRead"
-      :column-label="$i18n.t('CLI Authorize Read Scope')"
+                                   :column-label="$i18n.t('CLI Authorize Read Scope')"
     />
 
     <form-group-cli-authorize-write namespace="cliAuthorizeWrite"
-      :column-label="$i18n.t('CLI Authorize Write Scope')"
+                                    :column-label="$i18n.t('CLI Authorize Write Scope')"
     />
 
     <form-group-nas-port-to-if-index namespace="nasPortToIfindex"
-      :column-label="$i18n.t('NasPortToIfindex template')"
+                                     :column-label="$i18n.t('NasPortToIfindex template')"
     />
   </base-form>
 </template>
 <script>
-import { computed, onMounted, provide, ref } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed, onMounted, provide, ref} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAcceptRoles,
@@ -141,7 +141,7 @@ export const setup = (props, context) => {
   const schema = computed(() => schemaFn(props))
 
   // provide RADIUS attributes to all child nodes
-  const { root: { $store } = {} } = context
+  const {root: {$store} = {}} = context
   const radiusAttributes = ref({})
   provide('radiusAttributes', radiusAttributes)
   onMounted(() => {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/index.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/index.js
index f99cdad0437d..938b63c037cd 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/index.js
@@ -4,7 +4,7 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupBounce from './BaseFormGroupBounce'
 import BaseFormGroupCliAuthorizeRead from './BaseFormGroupCliAuthorizeRead'
@@ -29,7 +29,7 @@ export {
   BaseFormGroupInput                  as FormGroupNasPortToIfIndex,
   BaseFormGroupChosenOne              as FormGroupRadiusDisconnect,
   BaseFormGroupRadiusAttributes       as FormGroupReject,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSnmpDisconnect,
+  BaseFormGroupSwitch                 as FormGroupSnmpDisconnect,
   BaseFormGroupRadiusAttributes       as FormGroupVoip,
 
   BaseViewCollectionItem              as BaseView,

From b5cb14a0e0caec7598fb03c50dad7dc5596686da Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 13:01:25 +0300
Subject: [PATCH 23/51] Change syslog parsers form to use switch UI component

---
 .../_components/FormTypeGeneric.vue           | 24 ++++++++-----------
 .../_components/FormTypeRegex.vue             | 19 ++++++++-------
 .../syslogParsers/_components/index.js        |  4 ++--
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeGeneric.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeGeneric.vue
index 92dff80c70c6..9750a98b41a7 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeGeneric.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeGeneric.vue
@@ -6,31 +6,29 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Detector')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Detector')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-status namespace="status"
-      :column-label="$i18n.t('Status')"
+                       :column-label="$i18n.t('Enabled')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-path namespace="path"
-      :column-label="$i18n.t('Alert pipe')"
+                     :column-label="$i18n.t('Alert pipe')"
     />
 
     <form-group-rate-limit namespace="rate_limit"
-      :column-label="$i18n.t('Rate limit')"
+                           :column-label="$i18n.t('Rate limit')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
-import {
-  FormGroupIdentifier,
-  FormGroupPath,
-  FormGroupRateLimit,
-  FormGroupStatus,
-} from './'
+import {BaseForm} from '@/components/new/'
+import {FormGroupIdentifier, FormGroupPath, FormGroupRateLimit, FormGroupStatus,} from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -41,8 +39,6 @@ const components = {
   FormGroupStatus,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-generic',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeRegex.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeRegex.vue
index 44b4d8ff9a7a..e59f373cd290 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeRegex.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/FormTypeRegex.vue
@@ -6,29 +6,31 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Detector')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Detector')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-status namespace="status"
-      :column-label="$i18n.t('Status')"
+                       :column-label="$i18n.t('Enabled')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-path namespace="path"
-      :column-label="$i18n.t('Alert pipe')"
+                     :column-label="$i18n.t('Alert pipe')"
     />
 
     <form-group-rules namespace="rules"
-      :column-label="$i18n.t('Rules')"
+                      :column-label="$i18n.t('Rules')"
     />
 
     <form-group-test namespace="lines"
-      :column-label="$i18n.t('Sample Log Lines')"
+                     :column-label="$i18n.t('Sample Log Lines')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupIdentifier,
   FormGroupPath,
@@ -36,6 +38,7 @@ import {
   FormGroupStatus,
   FormGroupTest
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -47,8 +50,6 @@ const components = {
   FormGroupTest
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-regex',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/index.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/index.js
index 7cf41334281d..2d02381a0f83 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/index.js
@@ -2,7 +2,7 @@ import { BaseViewCollectionItem } from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import {
   BaseFormGroupIntervalUnit
@@ -21,7 +21,7 @@ export {
   BaseFormGroupInput                        as FormGroupPath,
   BaseFormGroupIntervalUnit                 as FormGroupRateLimit,
   BaseFormGroupRules                        as FormGroupRules,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupStatus,
+  BaseFormGroupSwitch                       as FormGroupStatus,
   BaseFormGroupTest                         as FormGroupTest,
 
   TheForm,

From 98ca66c74edcecec14b794e58491790b7a1a8578 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 14:45:49 +0300
Subject: [PATCH 24/51] Change syslog forwarders form to use switch UI
 component

---
 .../_components/FormTypeFile.vue              | 23 ++++++++-----------
 .../_components/FormTypeServer.vue            | 23 ++++++++++---------
 .../syslogForwarders/_components/index.js     |  4 ++--
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeFile.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeFile.vue
index 3f20adcd7652..e4ead43f52db 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeFile.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeFile.vue
@@ -6,27 +6,26 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Syslog Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Syslog Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-all-logs namespace="all_logs"
-      :column-label="$i18n.t('All logs')"
+                         :column-label="$i18n.t('All logs')"
     />
 
     <form-group-logs v-show="form.all_logs === 'disabled'"
-      namespace="logs"
-      :column-label="$i18n.t('Logs')"
+                     namespace="logs"
+                     :column-label="$i18n.t('Logs')"
+                     enabled-value="enabled"
+                     disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
-import {
-  FormGroupAllLogs,
-  FormGroupIdentifier,
-  FormGroupLogs
-} from './'
+import {BaseForm} from '@/components/new/'
+import {FormGroupAllLogs, FormGroupIdentifier, FormGroupLogs} from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -36,8 +35,6 @@ const components = {
   FormGroupLogs
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-file',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeServer.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeServer.vue
index c9fc4bc9520b..547dd24fcf5b 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeServer.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/FormTypeServer.vue
@@ -6,34 +6,36 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Syslog Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Syslog Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-proto namespace="proto"
-      :column-label="$i18n.t('Protocol')"
+                      :column-label="$i18n.t('Protocol')"
     />
 
     <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+                     :column-label="$i18n.t('Host')"
     />
 
     <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+                     :column-label="$i18n.t('Port')"
     />
 
     <form-group-all-logs namespace="all_logs"
-      :column-label="$i18n.t('All logs')"
+                         :column-label="$i18n.t('All logs')"
     />
 
     <form-group-logs v-show="form.all_logs === 'disabled'"
-      namespace="logs"
-      :column-label="$i18n.t('Logs')"
+                     namespace="logs"
+                     :column-label="$i18n.t('Logs')"
+                     enabled-value="enabled"
+                     disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAllLogs,
   FormGroupHost,
@@ -42,6 +44,7 @@ import {
   FormGroupPort,
   FormGroupProto
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -54,8 +57,6 @@ const components = {
   FormGroupProto
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-server',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
index 8239d1e1e07a..eec837c8f4c9 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
@@ -5,7 +5,7 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -14,7 +14,7 @@ export {
   BaseViewCollectionItem              as BaseView,
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAllLogs,
+  BaseFormGroupSwitch                 as FormGroupAllLogs,
   BaseFormGroupInput                  as FormGroupHost,
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupChosenMultiple         as FormGroupLogs,

From 03d34dc771107f409480d8c8b096332c748081fe Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 15:35:26 +0300
Subject: [PATCH 25/51] Change wrix locations form to use switch UI component

---
 .../wrix/_components/TheForm.vue              | 143 +++++++++---------
 .../Configuration/wrix/_components/index.js   |   8 +-
 2 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheForm.vue
index 981277a102ee..34e0a661ffb8 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheForm.vue
@@ -8,174 +8,177 @@
     <b-tabs>
       <base-form-tab :title="$i18n.t('Identification')" active>
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Identifier')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Identifier')"
+                               :disabled="!isNew && !isClone"
         />
         <form-group-provider-identifier namespace="Provider_Identifier"
-          :column-label="$i18n.t('Provider Identifier')"
+                                        :column-label="$i18n.t('Provider Identifier')"
         />
         <form-group-location-identifier namespace="Location_Identifier"
-          :column-label="$i18n.t('Location Identifier')"
+                                        :column-label="$i18n.t('Location Identifier')"
         />
         <form-group-service-provider-brand namespace="Service_Provider_Brand"
-          :column-label="$i18n.t('Service Provider Brand')"
+                                           :column-label="$i18n.t('Service Provider Brand')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Location')">
         <form-group-location-type namespace="Location_Type"
-          :column-label="$i18n.t('Location Type')"
+                                  :column-label="$i18n.t('Location Type')"
         />
         <form-group-sub-location-type namespace="Sub_Location_Type"
-          :column-label="$i18n.t('Sub Location Type')"
+                                      :column-label="$i18n.t('Sub Location Type')"
         />
         <form-group-english-location-name namespace="English_Location_Name"
-          :column-label="$i18n.t('English Location Name')"
+                                          :column-label="$i18n.t('English Location Name')"
         />
         <form-group-location-address1 namespace="Location_Address1"
-          :column-label="$i18n.t('Location Address1')"
+                                      :column-label="$i18n.t('Location Address1')"
         />
         <form-group-location-address2 namespace="Location_Address2"
-          :column-label="$i18n.t('Location Address2')"
+                                      :column-label="$i18n.t('Location Address2')"
         />
         <form-group-english-location-city namespace="English_Location_City"
-          :column-label="$i18n.t('English Location City')"
+                                          :column-label="$i18n.t('English Location City')"
         />
         <form-group-location-zip-postal-code namespace="Location_Zip_Postal_Code"
-          :column-label="$i18n.t('Location Zip Postal Code')"
+                                             :column-label="$i18n.t('Location Zip Postal Code')"
         />
         <form-group-location-state-province-name namespace="Location_State_Province_Name"
-          :column-label="$i18n.t('Location State Province Name')"
+                                                 :column-label="$i18n.t('Location State Province Name')"
         />
         <form-group-location-country-name namespace="Location_Country_Name"
-          :column-label="$i18n.t('Location Country Name')"
+                                          :column-label="$i18n.t('Location Country Name')"
         />
         <form-group-location-phone-number namespace="Location_Phone_Number"
-          :column-label="$i18n.t('Location Phone Number')"
+                                          :column-label="$i18n.t('Location Phone Number')"
         />
         <form-group-location-url namespace="Location_URL"
-          :column-label="$i18n.t('Location URL')"
+                                 :column-label="$i18n.t('Location URL')"
         />
         <form-group-coverage-area namespace="Coverage_Area"
-          :column-label="$i18n.t('Coverage Area')"
+                                  :column-label="$i18n.t('Coverage Area')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('SSID')">
         <form-group-ssid-open-auth namespace="SSID_Open_Auth"
-          :column-label="$i18n.t('SSID Open Auth')"
+                                   :column-label="$i18n.t('SSID Open Auth')"
         />
         <form-group-ssid-broadcasted namespace="SSID_Broadcasted"
-          :column-label="$i18n.t('SSID Broadcasted')"
+                                     :column-label="$i18n.t('SSID Broadcasted')"
+                                     enabled-value="Y"
+                                     disabled-value="N"
         />
         <form-group-wep-key namespace="WEP_Key"
-          :column-label="$i18n.t('WEP Key')"
+                            :column-label="$i18n.t('WEP Key')"
         />
         <form-group-wep-key-entry-method namespace="WEP_Key_Entry_Method"
-          :column-label="$i18n.t('WEP Key Entry Method')"
+                                         :column-label="$i18n.t('WEP Key Entry Method')"
         />
         <form-group-wep-key-size namespace="WEP_Key_Size"
-          :column-label="$i18n.t('WEP Key Size')"
+                                 :column-label="$i18n.t('WEP Key Size')"
         />
         <form-group-ssid1x namespace="SSID_1X"
-          :column-label="$i18n.t('SSID 1X')"
+                           :column-label="$i18n.t('SSID 1X')"
         />
         <form-group-ssid1x-broadcasted namespace="SSID_1X_Broadcasted"
-          :column-label="$i18n.t('SSID 1X Broadcasted')"
+                                       :column-label="$i18n.t('SSID 1X Broadcasted')"
         />
         <form-group-security-protocol1x namespace="Security_Protocol_1X"
-          :column-label="$i18n.t('Security Protocol 1X')"
+                                        :column-label="$i18n.t('Security Protocol 1X')"
+                                        enabled-value="Y"
+                                        disabled-value="N"
         />
         <form-group-restricted-access namespace="Restricted_Access"
-          :column-label="$i18n.t('Restricted Access')"
+                                      :column-label="$i18n.t('Restricted Access')"
+                                      enabled-value="Y"
+                                      disabled-value="N"
         />
         <form-group-client-support namespace="Client_Support"
-          :column-label="$i18n.t('Client Support')"
+                                   :column-label="$i18n.t('Client Support')"
         />
         <form-group-mac-address namespace="MAC_Address"
-          :column-label="$i18n.t('MAC Address')"
+                                :column-label="$i18n.t('MAC Address')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Hours')">
         <form-group-utc-timezone namespace="UTC_Timezone"
-          :column-label="$i18n.t('UTC Timezone')"
+                                 :column-label="$i18n.t('UTC Timezone')"
         />
         <form-group-open-monday namespace="Open_Monday"
-          :column-label="$i18n.t('Open Monday')"
+                                :column-label="$i18n.t('Open Monday')"
         />
         <form-group-open-tuesday namespace="Open_Tuesday"
-          :column-label="$i18n.t('Open Tuesday')"
+                                 :column-label="$i18n.t('Open Tuesday')"
         />
         <form-group-open-wednesday namespace="Open_Wednesday"
-          :column-label="$i18n.t('Open Wednesday')"
+                                   :column-label="$i18n.t('Open Wednesday')"
         />
         <form-group-open-thursday namespace="Open_Thursday"
-          :column-label="$i18n.t('Open Thursday')"
+                                  :column-label="$i18n.t('Open Thursday')"
         />
         <form-group-open-friday namespace="Open_Friday"
-          :column-label="$i18n.t('Open Friday')"
+                                :column-label="$i18n.t('Open Friday')"
         />
         <form-group-open-saturday namespace="Open_Saturday"
-          :column-label="$i18n.t('Open Saturday')"
+                                  :column-label="$i18n.t('Open Saturday')"
         />
         <form-group-open-sunday namespace="Open_Sunday"
-          :column-label="$i18n.t('Open Sunday')"
+                                :column-label="$i18n.t('Open Sunday')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Longitude/Latitude')">
         <form-group-longitude namespace="Longitude"
-          :column-label="$i18n.t('Longitude')"
+                              :column-label="$i18n.t('Longitude')"
         />
         <form-group-latitude namespace="Latitude"
-          :column-label="$i18n.t('Latitude')"
+                             :column-label="$i18n.t('Latitude')"
         />
       </base-form-tab>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm,
-  BaseFormTab
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm, BaseFormTab} from '@/components/new/'
 import schemaFn from '../schema'
 import {
-  FormGroupIdentifier,
-  FormGroupProviderIdentifier,
-  FormGroupLocationIdentifier,
-  FormGroupServiceProviderBrand,
-  FormGroupLocationType,
-  FormGroupSubLocationType,
+  FormGroupClientSupport,
+  FormGroupCoverageArea,
+  FormGroupEnglishLocationCity,
   FormGroupEnglishLocationName,
+  FormGroupIdentifier,
+  FormGroupLatitude,
   FormGroupLocationAddress1,
   FormGroupLocationAddress2,
-  FormGroupEnglishLocationCity,
-  FormGroupLocationZipPostalCode,
-  FormGroupLocationStateProvinceName,
   FormGroupLocationCountryName,
+  FormGroupLocationIdentifier,
   FormGroupLocationPhoneNumber,
+  FormGroupLocationStateProvinceName,
+  FormGroupLocationType,
   FormGroupLocationUrl,
-  FormGroupCoverageArea,
-  FormGroupSsidOpenAuth,
-  FormGroupSsidBroadcasted,
-  FormGroupWepKey,
-  FormGroupWepKeyEntryMethod,
-  FormGroupWepKeySize,
-  FormGroupSsid1x,
-  FormGroupSsid1xBroadcasted,
-  FormGroupSecurityProtocol1x,
-  FormGroupRestrictedAccess,
-  FormGroupClientSupport,
+  FormGroupLocationZipPostalCode,
+  FormGroupLongitude,
   FormGroupMacAddress,
-  FormGroupUtcTimezone,
-  FormGroupOpenMonday,
-  FormGroupOpenTuesday,
-  FormGroupOpenWednesday,
-  FormGroupOpenThursday,
   FormGroupOpenFriday,
+  FormGroupOpenMonday,
   FormGroupOpenSaturday,
   FormGroupOpenSunday,
-  FormGroupLongitude,
-  FormGroupLatitude
+  FormGroupOpenThursday,
+  FormGroupOpenTuesday,
+  FormGroupOpenWednesday,
+  FormGroupProviderIdentifier,
+  FormGroupRestrictedAccess,
+  FormGroupSecurityProtocol1x,
+  FormGroupServiceProviderBrand,
+  FormGroupSsid1x,
+  FormGroupSsid1xBroadcasted,
+  FormGroupSsidBroadcasted,
+  FormGroupSsidOpenAuth,
+  FormGroupSubLocationType,
+  FormGroupUtcTimezone,
+  FormGroupWepKey,
+  FormGroupWepKeyEntryMethod,
+  FormGroupWepKeySize
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/index.js b/html/pfappserver/root/src/views/Configuration/wrix/_components/index.js
index a397b07a5350..a0247dfdf2f7 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupChosenTimezone,
   BaseFormGroupInput,
-  BaseFormGroupToggleNY
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupSecurityProtocol1x from './BaseFormGroupSecurityProtocol1x'
 import TheForm from './TheForm'
@@ -30,14 +30,14 @@ export {
   BaseFormGroupInput                  as FormGroupLocationUrl,
   BaseFormGroupInput                  as FormGroupCoverageArea,
   BaseFormGroupInput                  as FormGroupSsidOpenAuth,
-  BaseFormGroupToggleNY               as FormGroupSsidBroadcasted,
+  BaseFormGroupSwitch                 as FormGroupSsidBroadcasted,
   BaseFormGroupInput                  as FormGroupWepKey,
   BaseFormGroupInput                  as FormGroupWepKeyEntryMethod,
   BaseFormGroupInput                  as FormGroupWepKeySize,
   BaseFormGroupInput                  as FormGroupSsid1x,
-  BaseFormGroupToggleNY               as FormGroupSsid1xBroadcasted,
+  BaseFormGroupSwitch                 as FormGroupSsid1xBroadcasted,
   BaseFormGroupSecurityProtocol1x     as FormGroupSecurityProtocol1x,
-  BaseFormGroupToggleNY               as FormGroupRestrictedAccess,
+  BaseFormGroupSwitch                 as FormGroupRestrictedAccess,
   BaseFormGroupInput                  as FormGroupClientSupport,
   BaseFormGroupInput                  as FormGroupMacAddress,
   BaseFormGroupChosenTimezone         as FormGroupUtcTimezone,

From 1a7b36a4caa37ec7212a070671bd54f67f736c67 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 15:50:57 +0300
Subject: [PATCH 26/51] Change PKI template form to use switch UI component

---
 .../pki/profiles/_components/TheForm.vue      | 219 +++++++++---------
 .../pki/profiles/_components/index.js         |  27 +--
 2 files changed, 123 insertions(+), 123 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheForm.vue
index 83e3ba55c8b6..3c39c755a9df 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheForm.vue
@@ -7,39 +7,39 @@
     <b-tabs>
       <base-form-tab :title="$i18n.t('General')" active>
         <form-group-identifier v-if="!isNew && !isClone"
-          namespace="id"
-          :column-label="$i18n.t('Identifier')"
-          :disabled="!isNew && !isClone"
+                               namespace="id"
+                               :column-label="$i18n.t('Identifier')"
+                               :disabled="!isNew && !isClone"
         />
         <form-group-ca-id namespace="ca_id"
-          :column-label="$i18n.t('Certificate Authority')"
-          :disabled="!isNew && !isClone"
+                          :column-label="$i18n.t('Certificate Authority')"
+                          :disabled="!isNew && !isClone"
         />
         <form-group-name namespace="name"
-          :column-label="$i18n.t('Name')"
-          :text="$i18n.t('Profile Name.')"
+                         :column-label="$i18n.t('Name')"
+                         :text="$i18n.t('Profile Name.')"
         />
         <form-group-mail namespace="mail"
-          :column-label="$i18n.t('Email')"
-          :text="$i18n.t('Email address of the user. The email with the certificate will be sent to this address.')"
+                         :column-label="$i18n.t('Email')"
+                         :text="$i18n.t('Email address of the user. The email with the certificate will be sent to this address.')"
         />
         <form-group-organisational-unit namespace="organisational_unit"
-          :column-label="$i18n.t('Organisational Unit')"
+                                        :column-label="$i18n.t('Organisational Unit')"
         />
         <form-group-organisation namespace="organisation"
-          :column-label="$i18n.t('Organisation')"
+                                 :column-label="$i18n.t('Organisation')"
         />
         <form-group-country namespace="country"
-          :column-label="$i18n.t('Country')"
+                            :column-label="$i18n.t('Country')"
         />
         <form-group-state namespace="state"
-          :column-label="$i18n.t('State or Province')"
+                          :column-label="$i18n.t('State or Province')"
         />
         <form-group-locality namespace="locality"
-          :column-label="$i18n.t('Locality')"
+                             :column-label="$i18n.t('Locality')"
         />
         <form-group-street-address namespace="street_address"
-          :column-label="$i18n.t('Street Address')"
+                                   :column-label="$i18n.t('Street Address')"
         />
         <!-- temporarily hidden
         <form-group-postal-code namespace="postal_code"
@@ -47,112 +47,120 @@
         />
         -->
         <form-group-validity namespace="validity"
-          :column-label="$i18n.t('Validity')"
-          :text="$i18n.t('Number of days the certificate will be valid.')"
+                             :column-label="$i18n.t('Validity')"
+                             :text="$i18n.t('Number of days the certificate will be valid.')"
         />
         <form-group-key-type namespace="key_type"
-          :column-label="$i18n.t('Key type')"
+                             :column-label="$i18n.t('Key type')"
         />
         <form-group-key-size namespace="key_size"
-          :column-label="$i18n.t('Key size')"
-          :options="keySizeOptions"
+                             :column-label="$i18n.t('Key size')"
+                             :options="keySizeOptions"
         />
         <form-group-digest namespace="digest"
-          :column-label="$i18n.t('Digest')"
+                           :column-label="$i18n.t('Digest')"
         />
         <form-group-key-usage namespace="key_usage"
-          :column-label="$i18n.t('Key usage')"
-          :text="$i18n.t('Optional. One or many of: digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment, keyAgreement, keyCertSign, cRLSign, encipherOnly, decipherOnly.')"
+                              :column-label="$i18n.t('Key usage')"
+                              :text="$i18n.t('Optional. One or many of: digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment, keyAgreement, keyCertSign, cRLSign, encipherOnly, decipherOnly.')"
         />
         <form-group-extended-key-usage namespace="extended_key_usage"
-          :column-label="$i18n.t('Extended key usage')"
-          :text="$i18n.t('Optional. One or many of: serverAuth, clientAuth, codeSigning, emailProtection, timeStamping, msCodeInd, msCodeCom, msCTLSign, msSGC, msEFS, nsSGC.')"
+                                       :column-label="$i18n.t('Extended key usage')"
+                                       :text="$i18n.t('Optional. One or many of: serverAuth, clientAuth, codeSigning, emailProtection, timeStamping, msCodeInd, msCodeCom, msCTLSign, msSGC, msEFS, nsSGC.')"
         />
         <form-group-ocsp-url namespace="ocsp_url"
-          :column-label="$i18n.t('OCSP URL')"
-          :text="$i18n.t('Optional. This is the URL of the OCSP server that will be added in the certificate. If empty then the ca one will be used')"
+                             :column-label="$i18n.t('OCSP URL')"
+                             :text="$i18n.t('Optional. This is the URL of the OCSP server that will be added in the certificate. If empty then the ca one will be used')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('PKCS 12')">
         <form-group-p12-mail-password namespace="p12_mail_password"
-          :column-label="$i18n.t('P12 mail password')"
-          :text="$i18n.t('Email the password of the pkcs12 file.')"
+                                      :column-label="$i18n.t('P12 mail password')"
+                                      :text="$i18n.t('Email the password of the pkcs12 file.')"
+                                      :enabled-value="1"
+                                      :disabled-value="0"
         />
         <form-group-p12-mail-subject namespace="p12_mail_subject"
-          :column-label="$i18n.t('P12 mail subject')"
-          :text="$i18n.t('Email subject.')"
+                                     :column-label="$i18n.t('P12 mail subject')"
+                                     :text="$i18n.t('Email subject.')"
         />
         <form-group-p12-mail-from namespace="p12_mail_from"
-          :column-label="$i18n.t('P12 mail from')"
-          :text="$i18n.t('Sender email address.')"
+                                  :column-label="$i18n.t('P12 mail from')"
+                                  :text="$i18n.t('Sender email address.')"
         />
         <form-group-p12-mail-header namespace="p12_mail_header"
-          :column-label="$i18n.t('P12 mail header')"
-          :text="$i18n.t('Email header.')"
-          auto-fit
+                                    :column-label="$i18n.t('P12 mail header')"
+                                    :text="$i18n.t('Email header.')"
+                                    auto-fit
         />
         <form-group-p12-mail-footer namespace="p12_mail_footer"
-          :column-label="$i18n.t('P12 mail footer')"
-          :text="$i18n.t('Email footer.')"
-          auto-fit
+                                    :column-label="$i18n.t('P12 mail footer')"
+                                    :text="$i18n.t('Email footer.')"
+                                    auto-fit
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('SCEP')">
         <form-group-scep-enabled namespace="scep_enabled"
-          :column-label="$i18n.t('Enable SCEP')"
-          :text="$i18n.t('Enable SCEP for this template.')"
+                                 :column-label="$i18n.t('Enable SCEP')"
+                                 :text="$i18n.t('Enable SCEP for this template.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
         />
         <form-group-scep-challenge-password namespace="scep_challenge_password"
-          :column-label="$i18n.t('SCEP challenge password')"
-          :text="$i18n.t('SCEP challenge password.')"
+                                            :column-label="$i18n.t('SCEP challenge password')"
+                                            :text="$i18n.t('SCEP challenge password.')"
         />
         <form-group-scep-days-before-renewal namespace="scep_days_before_renewal"
-          :column-label="$i18n.t('SCEP days before renewal')"
-          :text="$i18n.t('Number of days before SCEP authorize renewal')"
+                                             :column-label="$i18n.t('SCEP days before renewal')"
+                                             :text="$i18n.t('Number of days before SCEP authorize renewal')"
         />
         <form-group-cloud-enabled namespace="cloud_enabled"
-          :column-label="$i18n.t('Enable Cloud Integration')"
-          :text="$i18n.t('Enable Cloud integration for this template.')"
+                                  :column-label="$i18n.t('Enable Cloud Integration')"
+                                  :text="$i18n.t('Enable Cloud integration for this template.')"
+                                  :enabled-value="1"
+                                  :disabled-value="0"
         />
         <form-group-cloud-service namespace="cloud_service"
-          :column-label="$i18n.t('Cloud Service')"
-          :text="$i18n.t('Cloud Service to integrate.')"
+                                  :column-label="$i18n.t('Cloud Service')"
+                                  :text="$i18n.t('Cloud Service to integrate.')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Renewal Configuration')">
         <form-group-days-before-renewal namespace="days_before_renewal"
-          :column-label="$i18n.t('Days before renewal')"
-          :text="$i18n.t('Number of days before the PKI authorizes renewal. Setting it to 0 means renewal is always allowed.')"
+                                        :column-label="$i18n.t('Days before renewal')"
+                                        :text="$i18n.t('Number of days before the PKI authorizes renewal. Setting it to 0 means renewal is always allowed.')"
         />
         <form-group-renewal-mail namespace="renewal_mail"
-          :column-label="$i18n.t('Renewal Email')"
-          :text="$i18n.t('Send an email to the owner of the certificate when it is about to expire.')"
+                                 :column-label="$i18n.t('Renewal Email')"
+                                 :text="$i18n.t('Send an email to the owner of the certificate when it is about to expire.')"
+                                 :enabled-value="1"
+                                 :disabled-value="0"
         />
         <form-group-days-before-renewal-mail namespace="days_before_renewal_mail"
-          :column-label="$i18n.t('Days before sending renewal email')"
-          :text="$i18n.t('Number of days before certificate expiration to trigger sending email.')"
+                                             :column-label="$i18n.t('Days before sending renewal email')"
+                                             :text="$i18n.t('Number of days before certificate expiration to trigger sending email.')"
         />
         <form-group-renewal-mail-subject namespace="renewal_mail_subject"
-          :column-label="$i18n.t('Renewal mail subject')"
-          :text="$i18n.t('Subject of the renewal email.')"
+                                         :column-label="$i18n.t('Renewal mail subject')"
+                                         :text="$i18n.t('Subject of the renewal email.')"
         />
         <form-group-renewal-mail-from namespace="renewal_mail_from"
-          :column-label="$i18n.t('Renewal mail from')"
-          :text="$i18n.t('Sender address of the renewal email.')"
+                                      :column-label="$i18n.t('Renewal mail from')"
+                                      :text="$i18n.t('Sender address of the renewal email.')"
         />
         <form-group-renewal-mail-header namespace="renewal_mail_header"
-          :column-label="$i18n.t('Renewal mail header')"
-          :text="$i18n.t('Renewal email header.')"
-          auto-fit
+                                        :column-label="$i18n.t('Renewal mail header')"
+                                        :text="$i18n.t('Renewal email header.')"
+                                        auto-fit
         />
         <form-group-renewal-mail-footer namespace="renewal_mail_footer"
-          :column-label="$i18n.t('Renewal mail footer')"
-          :text="$i18n.t('Renewal email footer.')"
-          auto-fit
+                                        :column-label="$i18n.t('Renewal mail footer')"
+                                        :text="$i18n.t('Renewal email footer.')"
+                                        auto-fit
         />
         <form-group-revoked-valid-until namespace="revoked_valid_until"
-          :column-label="$i18n.t('Days after revoked certificate is valid')"
-          :text="$i18n.t('Number of days an old certificate is still valid after it has been revoked.')"
+                                        :column-label="$i18n.t('Days after revoked certificate is valid')"
+                                        :text="$i18n.t('Number of days an old certificate is still valid after it has been revoked.')"
         />
       </base-form-tab>
 
@@ -161,60 +169,60 @@
           <b-button
             size="sm" variant="outline-primary" class="mr-1 text-nowrap"
             :disabled="!isServiceAlive" :to="{ name: 'newPkiCert', params: { profile_id: id } }"
-          >{{ $t('New Certificate') }}</b-button>
+          >{{ $t('New Certificate') }}
+          </b-button>
           <b-button
             size="sm" variant="outline-primary" class="text-nowrap"
             :disabled="!isServiceAlive" :to="{ name: 'csrPkiProfile', params: { id } }"
-          >{{ $i18n.t('Sign CSR') }}</b-button>
+          >{{ $i18n.t('Sign CSR') }}
+          </b-button>
         </div>
       </template>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import {
-  BaseForm,
-  BaseFormTab
-} from '@/components/new/'
+import {BaseForm, BaseFormTab} from '@/components/new/'
 import schemaFn from '../schema'
 import {
-  FormGroupIdentifier,
   FormGroupCaId,
-  FormGroupName,
-  FormGroupMail,
-  FormGroupOrganisationalUnit,
-  FormGroupOrganisation,
+  FormGroupCloudEnabled,
+  FormGroupCloudService,
   FormGroupCountry,
-  FormGroupState,
-  FormGroupLocality,
-  FormGroupStreetAddress,
-  // FormGroupPostalCode,
-  FormGroupValidity,
-  FormGroupKeyType,
-  FormGroupKeySize,
+  FormGroupDaysBeforeRenewal,
+  FormGroupDaysBeforeRenewalMail,
   FormGroupDigest,
-  FormGroupKeyUsage,
   FormGroupExtendedKeyUsage,
+  FormGroupIdentifier,
+  FormGroupKeySize,
+  FormGroupKeyType,
+  FormGroupKeyUsage,
+  FormGroupLocality,
+  FormGroupMail,
+  FormGroupName,
   FormGroupOcspUrl,
-  FormGroupP12MailPassword,
-  FormGroupP12MailSubject,
+  FormGroupOrganisation,
+  FormGroupOrganisationalUnit,
+  FormGroupP12MailFooter,
   FormGroupP12MailFrom,
   FormGroupP12MailHeader,
-  FormGroupP12MailFooter,
-  FormGroupScepEnabled,
-  FormGroupScepChallengePassword,
-  FormGroupScepDaysBeforeRenewal,
-  FormGroupCloudEnabled,
-  FormGroupCloudService,
-  FormGroupDaysBeforeRenewal,
+  FormGroupP12MailPassword,
+  FormGroupP12MailSubject,
   FormGroupRenewalMail,
-  FormGroupDaysBeforeRenewalMail,
-  FormGroupRenewalMailSubject,
+  FormGroupRenewalMailFooter,
   FormGroupRenewalMailFrom,
   FormGroupRenewalMailHeader,
-  FormGroupRenewalMailFooter,
-  FormGroupRevokedValidUntil
+  FormGroupRenewalMailSubject,
+  FormGroupRevokedValidUntil,
+  FormGroupScepChallengePassword,
+  FormGroupScepDaysBeforeRenewal,
+  FormGroupScepEnabled,
+  FormGroupState,
+  FormGroupStreetAddress,
+  FormGroupValidity
 } from './'
+import {computed, toRefs} from '@vue/composition-api'
+import {keySizes, keyTypes} from '../../config'
 
 const components = {
   BaseForm,
@@ -282,30 +290,27 @@ export const props = {
   }
 }
 
-import { computed, toRefs } from '@vue/composition-api'
-import { keyTypes, keySizes } from '../../config'
-
 export const setup = (props, context) => {
 
   const {
     form
   } = toRefs(props)
 
-  const { root: { $store } = {} } = context
+  const {root: {$store} = {}} = context
 
   const schema = computed(() => schemaFn(props))
 
   const keySizeOptions = computed(() => {
-    const { key_type } = form.value || {}
+    const {key_type} = form.value || {}
     if (key_type) {
-      const { [+key_type]: { sizes = [] } = {} } = keyTypes
-      return sizes.map(size => ({ text: `${size}`, value: `${size}` }))
+      const {[+key_type]: {sizes = []} = {}} = keyTypes
+      return sizes.map(size => ({text: `${size}`, value: `${size}`}))
     }
     return keySizes
   })
 
   const isServiceAlive = computed(() => {
-    const { pfpki: { hasAlive = false } = {} } = $store.getters['cluster/servicesByServer']
+    const {pfpki: {hasAlive = false} = {}} = $store.getters['cluster/servicesByServer']
     return hasAlive
   })
 
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/index.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/index.js
index f1f83754d76b..9ae1394678ae 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/index.js
@@ -1,25 +1,21 @@
-import { BaseViewCollectionItem } from '../../../_components/new/'
+import {BaseViewCollectionItem} from '../../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenCountry,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupTextarea
+  BaseFormGroupSwitch,
+  BaseFormGroupTextarea,
 } from '@/components/new/'
-import {
-  BaseFormGroupToggleZeroOneStringAsOffOn
-} from '@/views/Configuration/_components/new/'
 import {
   BaseFormGroupChosenOneCa,
-  BaseFormGroupKeyType,
-  BaseFormGroupKeySize,
   BaseFormGroupDigest,
-  BaseFormGroupKeyUsage,
   BaseFormGroupExtendedKeyUsage,
+  BaseFormGroupKeySize,
+  BaseFormGroupKeyType,
+  BaseFormGroupKeyUsage,
 } from '../../_components/'
-import {
-  BaseFormGroupChosenOneCloud,
-} from '@/views/Configuration/clouds/_components/'
+import {BaseFormGroupChosenOneCloud,} from '@/views/Configuration/clouds/_components/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -38,25 +34,24 @@ export {
   BaseFormGroupInput                      as FormGroupState,
   BaseFormGroupInput                      as FormGroupLocality,
   BaseFormGroupInput                      as FormGroupStreetAddress,
-  BaseFormGroupInput                      as FormGroupPostalCode,
   BaseFormGroupKeyType                    as FormGroupKeyType,
   BaseFormGroupKeySize                    as FormGroupKeySize,
   BaseFormGroupDigest                     as FormGroupDigest,
   BaseFormGroupKeyUsage                   as FormGroupKeyUsage,
   BaseFormGroupExtendedKeyUsage           as FormGroupExtendedKeyUsage,
   BaseFormGroupInput                      as FormGroupOcspUrl,
-  BaseFormGroupToggleZeroOneStringAsOffOn as FormGroupP12MailPassword,
+  BaseFormGroupSwitch                     as FormGroupP12MailPassword,
   BaseFormGroupInput                      as FormGroupP12MailSubject,
   BaseFormGroupInput                      as FormGroupP12MailFrom,
   BaseFormGroupTextarea                   as FormGroupP12MailHeader,
   BaseFormGroupTextarea                   as FormGroupP12MailFooter,
-  BaseFormGroupToggleZeroOneStringAsOffOn as FormGroupScepEnabled,
+  BaseFormGroupSwitch                     as FormGroupScepEnabled,
   BaseFormGroupInput                      as FormGroupScepChallengePassword,
   BaseFormGroupInputNumber                as FormGroupScepDaysBeforeRenewal,
-  BaseFormGroupToggleZeroOneStringAsOffOn as FormGroupCloudEnabled,
+  BaseFormGroupSwitch                     as FormGroupCloudEnabled,
   BaseFormGroupChosenOneCloud             as FormGroupCloudService,
   BaseFormGroupInputNumber                as FormGroupDaysBeforeRenewal,
-  BaseFormGroupToggleZeroOneStringAsOffOn as FormGroupRenewalMail,
+  BaseFormGroupSwitch                     as FormGroupRenewalMail,
   BaseFormGroupInputNumber                as FormGroupDaysBeforeRenewalMail,
   BaseFormGroupInput                      as FormGroupRenewalMailSubject,
   BaseFormGroupInput                      as FormGroupRenewalMailFrom,

From 863b9e018fcfa95c4cc0fb352e39a535376e79e6 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 16:01:32 +0300
Subject: [PATCH 27/51] Change captive portal form to use switch UI component

---
 .../captivePortal/_components/TheForm.vue     | 116 ++++++++++--------
 .../captivePortal/_components/index.js        |  16 +--
 2 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheForm.vue
index 79896869cffc..018d3d82b54d 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheForm.vue
@@ -6,68 +6,76 @@
     :isLoading="isLoading"
   >
     <form-group-ip-address namespace="ip_address"
-      :column-label="$i18n.t('IP address')"
-      :text="$i18n.t('The IP address the portal uses in the registration and isolation networks. Do not change unless you know what you are doing. Changing this requires to restart all of the PacketFence services.')"
+                           :column-label="$i18n.t('IP address')"
+                           :text="$i18n.t('The IP address the portal uses in the registration and isolation networks. Do not change unless you know what you are doing. Changing this requires to restart all of the PacketFence services.')"
     />
 
     <form-group-network-detection namespace="network_detection"
-      :column-label="$i18n.t('Network detection')"
-      :text="$i18n.t('Enable the automatic network detection feature for registration auto-redirect.')"
+                                  :column-label="$i18n.t('Network detection')"
+                                  :text="$i18n.t('Enable the automatic network detection feature for registration auto-redirect.')"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
 
     <form-group-network-detection-ip namespace="network_detection_ip"
-      :column-label="$i18n.t('Network detection IP')"
-      :text="$i18n.t(`This IP is used as the webserver who hosts the common/network-access-detection.gif which is used to detect if network access was enabled. It cannot be a domain name since it is used in registration or quarantine where DNS is blackholed. It is recommended that you allow your users to reach your PacketFence server and put your LAN's PacketFence IP. By default we will make this reach PacketFence's website as an easy solution.`)"
+                                     :column-label="$i18n.t('Network detection IP')"
+                                     :text="$i18n.t(`This IP is used as the webserver who hosts the common/network-access-detection.gif which is used to detect if network access was enabled. It cannot be a domain name since it is used in registration or quarantine where DNS is blackholed. It is recommended that you allow your users to reach your PacketFence server and put your LAN's PacketFence IP. By default we will make this reach PacketFence's website as an easy solution.`)"
     />
 
     <form-group-network-detection-initial-delay namespace="network_detection_initial_delay"
-      :column-label="$i18n.t('Initial delay')"
-      :text="$i18n.t('The amount of time before network connectivity detection is started.')"
+                                                :column-label="$i18n.t('Initial delay')"
+                                                :text="$i18n.t('The amount of time before network connectivity detection is started.')"
     />
 
     <form-group-network-detection-retry-delay namespace="network_detection_retry_delay"
-      :column-label="$i18n.t('Retry delay')"
-      :text="$i18n.t('The amount of time between network connectivity detection checks.')"
+                                              :column-label="$i18n.t('Retry delay')"
+                                              :text="$i18n.t('The amount of time between network connectivity detection checks.')"
     />
 
     <form-group-network-redirect-delay namespace="network_redirect_delay"
-      :column-label="$i18n.t('Redirection delay')"
-      :text="$i18n.t('How long to display the progress bar during trap release. Default value is based on VLAN enforcement techniques. Inline enforcement only users could lower the value.')"
+                                       :column-label="$i18n.t('Redirection delay')"
+                                       :text="$i18n.t('How long to display the progress bar during trap release. Default value is based on VLAN enforcement techniques. Inline enforcement only users could lower the value.')"
     />
 
     <form-group-image-path namespace="image_path"
-      :column-label="$i18n.t('Image path')"
-      :text="$i18n.t('This is the path where the gif is on the webserver to detect if the network access has been enabled.')"
+                           :column-label="$i18n.t('Image path')"
+                           :text="$i18n.t('This is the path where the gif is on the webserver to detect if the network access has been enabled.')"
     />
 
     <form-group-request-timeout namespace="request_timeout"
-      :column-label="$i18n.t('Request timeout')"
-      :text="$i18n.t('The amount of seconds before a request times out in the captive portal.')"
+                                :column-label="$i18n.t('Request timeout')"
+                                :text="$i18n.t('The amount of seconds before a request times out in the captive portal.')"
     />
 
     <form-group-loadbalancers-ip namespace="loadbalancers_ip"
-      :column-label="$i18n.t('Load balancers IP')"
-      :text="$i18n.t('If the captive portal is put behind load-balancer(s) that act at Layer 7 (HTTP level) effectively doing reverse proxying then the captive portal no longer sees the IP of the node trying to access the portal. In that case, the load-balancers must do SSL offloading and add a X-Forwarded-By header in the HTTP traffic they forward to PacketFence. Most do by default. Then in this parameter you must specify the IP of the various load balancers. This will instruct the captive portal to look for client IPs in the X-Forwarded-For instead of the actual TCP session when it matches an IP in the list. Format is a comma separated list of IPs. Note: Apache access log format is not changed to automatically log the X-Forwarded-By header. Modify conf/httpd.conf.d/captive-portal-common.conf to use load balanced combined instead of combined in CustomLog statement.')"
+                                 :column-label="$i18n.t('Load balancers IP')"
+                                 :text="$i18n.t('If the captive portal is put behind load-balancer(s) that act at Layer 7 (HTTP level) effectively doing reverse proxying then the captive portal no longer sees the IP of the node trying to access the portal. In that case, the load-balancers must do SSL offloading and add a X-Forwarded-By header in the HTTP traffic they forward to PacketFence. Most do by default. Then in this parameter you must specify the IP of the various load balancers. This will instruct the captive portal to look for client IPs in the X-Forwarded-For instead of the actual TCP session when it matches an IP in the list. Format is a comma separated list of IPs. Note: Apache access log format is not changed to automatically log the X-Forwarded-By header. Modify conf/httpd.conf.d/captive-portal-common.conf to use load balanced combined instead of combined in CustomLog statement.')"
     />
 
     <form-group-secure-redirect namespace="secure_redirect"
-      :column-label="$i18n.t('Secure redirect')"
-      :text="$i18n.t('Force the captive portal to use HTTPS for all portal clients.Note that clients will be forced to use HTTPS on all URLs.This requires a restart of the httpd.portal process to be fully effective.')"
+                                :column-label="$i18n.t('Secure redirect')"
+                                :text="$i18n.t('Force the captive portal to use HTTPS for all portal clients.Note that clients will be forced to use HTTPS on all URLs.This requires a restart of the httpd.portal process to be fully effective.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-status-only-on-production namespace="status_only_on_production"
-      :column-label="$i18n.t('Status URI only on management interface')"
-      :text="$i18n.t('When enabled the /status page will only be available when accessed on the management interface. Requires to restart httpd.portal in order to apply the change.')"
+                                          :column-label="$i18n.t('Status URI only on management interface')"
+                                          :text="$i18n.t('When enabled the /status page will only be available when accessed on the management interface. Requires to restart httpd.portal in order to apply the change.')"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
     />
 
     <form-group-detection-mecanism-bypass namespace="detection_mecanism_bypass"
-      :column-label="$i18n.t('Captive Portal detection mechanism bypass')"
-      :text="$i18n.t('Bypass the captive-portal detection mechanism of some browsers / end-points by proxying the detection request.')"
+                                          :column-label="$i18n.t('Captive Portal detection mechanism bypass')"
+                                          :text="$i18n.t('Bypass the captive-portal detection mechanism of some browsers / end-points by proxying the detection request.')"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
     />
 
     <form-group-detection-mecanism-urls namespace="detection_mecanism_urls"
-      :column-label="$i18n.t('Captive Portal detection mechanism URLs')"
-      :text="$i18n.t('Comma-separated list of URLs known to be used by devices to detect the presence of a captive portal and trigger their captive portal mechanism.')"
+                                        :column-label="$i18n.t('Captive Portal detection mechanism URLs')"
+                                        :text="$i18n.t('Comma-separated list of URLs known to be used by devices to detect the presence of a captive portal and trigger their captive portal mechanism.')"
     />
     <b-row v-if="impliedDetectionMechanismUrls.length">
       <b-col cols="3"></b-col>
@@ -75,63 +83,69 @@
         <div class="alert alert-info mr-3">
           <p><strong>{{ $i18n.t('Built-in Captive Portal detection mechanism URLs:') }}</strong></p>
           <span v-for="url in impliedDetectionMechanismUrls" :key="url"
-            class="badge badge-info mr-1">{{ url }}</span>
+                class="badge badge-info mr-1">{{ url }}</span>
         </div>
       </b-col>
     </b-row>
 
     <form-group-wispr-redirection namespace="wispr_redirection"
-      :column-label="$i18n.t('WISPr redirection capabilities')"
-      :text="$i18n.t('Enable or disable WISPr redirection capabilities on the captive-portal.')"
+                                  :column-label="$i18n.t('WISPr redirection capabilities')"
+                                  :text="$i18n.t('Enable or disable WISPr redirection capabilities on the captive-portal.')"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
 
     <form-group-rate-limiting namespace="rate_limiting"
-      :column-label="$i18n.t('Rate limiting')"
-      :text="$i18n.t('Temporarily deny access to a user that performs too many requests on the captive portal on invalid URLs. Requires to restart haproxy-portal in order to apply the change.')"
+                              :column-label="$i18n.t('Rate limiting')"
+                              :text="$i18n.t('Temporarily deny access to a user that performs too many requests on the captive portal on invalid URLs. Requires to restart haproxy-portal in order to apply the change.')"
+                              enabled-value="enabled"
+                              disabled-value="disabled"
     />
 
     <form-group-rate-limiting-threshold namespace="rate_limiting_threshold"
-      :column-label="$i18n.t('Rate limiting threshold')"
-      :text="$i18n.t('Amount of requests on invalid URLs after which the rate limiting will kick in for this device. Requires to restart haproxy-portal in order to apply the change.')"
+                                        :column-label="$i18n.t('Rate limiting threshold')"
+                                        :text="$i18n.t('Amount of requests on invalid URLs after which the rate limiting will kick in for this device. Requires to restart haproxy-portal in order to apply the change.')"
     />
-    
-    <form-group-expose-fingerbank-info-all-templates namespace="expose_fingerbank_info_all_templates"
+
+    <form-group-expose-fingerbank-info-all-templates
+      namespace="expose_fingerbank_info_all_templates"
       :column-label="$i18n.t('Expose fingerbank_info in all portal templates')"
       :text="$i18n.t('Expose the fingerbank_info to all the captive portal templates. Increases the response time of the portal due to it being slightly expensive to compute.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <form-group-other-domain-names namespace="other_domain_names"
-      :column-label="$i18n.t('Other domain name')"
-      :text="$i18n.t('Other domain names under which the captive portal responds. Requires to restart haproxy-portal to be fully effective.')"
+                                   :column-label="$i18n.t('Other domain name')"
+                                   :text="$i18n.t('Other domain names under which the captive portal responds. Requires to restart haproxy-portal to be fully effective.')"
     />
   </base-form>
 </template>
 <script>
-import { computed, toRefs } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed, toRefs} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
+  FormGroupDetectionMecanismBypass,
+  FormGroupDetectionMecanismUrls,
   FormGroupExposeFingerbankInfoAllTemplates,
+  FormGroupImagePath,
   FormGroupIpAddress,
+  FormGroupLoadbalancersIp,
   FormGroupNetworkDetection,
-  FormGroupNetworkDetectionIp,
   FormGroupNetworkDetectionInitialDelay,
+  FormGroupNetworkDetectionIp,
   FormGroupNetworkDetectionRetryDelay,
   FormGroupNetworkRedirectDelay,
-  FormGroupImagePath,
+  FormGroupOtherDomainNames,
+  FormGroupRateLimiting,
+  FormGroupRateLimitingThreshold,
   FormGroupRequestTimeout,
-  FormGroupLoadbalancersIp,
   FormGroupSecureRedirect,
   FormGroupStatusOnlyOnProduction,
-  FormGroupDetectionMecanismBypass,
-  FormGroupDetectionMecanismUrls,
-  FormGroupWisprRedirection,
-  FormGroupRateLimiting,
-  FormGroupRateLimitingThreshold,
-  FormGroupOtherDomainNames
+  FormGroupWisprRedirection
 } from './'
+import {useNamespaceMetaImplied} from '@/composables/useMeta'
 
 const components = {
   BaseForm,
@@ -169,8 +183,6 @@ export const props = {
   }
 }
 
-import { useNamespaceMetaImplied } from '@/composables/useMeta'
-
 export const setup = (props) => {
 
   const {
diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/index.js b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/index.js
index 6251ed1c61da..4f79a2d54c72 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import { BaseFormGroupIntervalUnit } from '@/views/Configuration/_components/new/'
 import { BaseViewResource } from '../../_components/new/'
@@ -13,9 +13,9 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupExposeFingerbankInfoAllTemplates,
+  BaseFormGroupSwitch                 as FormGroupExposeFingerbankInfoAllTemplates,
   BaseFormGroupInput                  as FormGroupIpAddress,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetworkDetection,
+  BaseFormGroupSwitch                 as FormGroupNetworkDetection,
   BaseFormGroupInput                  as FormGroupNetworkDetectionIp,
   BaseFormGroupIntervalUnit           as FormGroupNetworkDetectionInitialDelay,
   BaseFormGroupIntervalUnit           as FormGroupNetworkDetectionRetryDelay,
@@ -23,12 +23,12 @@ export {
   BaseFormGroupInput                  as FormGroupImagePath,
   BaseFormGroupInputNumber            as FormGroupRequestTimeout,
   BaseFormGroupTextarea               as FormGroupLoadbalancersIp,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSecureRedirect,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupStatusOnlyOnProduction,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDetectionMecanismBypass,
+  BaseFormGroupSwitch                 as FormGroupSecureRedirect,
+  BaseFormGroupSwitch                 as FormGroupStatusOnlyOnProduction,
+  BaseFormGroupSwitch                 as FormGroupDetectionMecanismBypass,
   BaseFormGroupTextarea               as FormGroupDetectionMecanismUrls,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupWisprRedirection,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRateLimiting,
+  BaseFormGroupSwitch                 as FormGroupWisprRedirection,
+  BaseFormGroupSwitch                 as FormGroupRateLimiting,
   BaseFormGroupInputNumber            as FormGroupRateLimitingThreshold,
   BaseFormGroupTextarea               as FormGroupOtherDomainNames,
 

From 845e15334f4cee253ee03a568d23ceb08b6856ff Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 16:51:31 +0300
Subject: [PATCH 28/51] Change filter engines form to use switch UI component

---
 ...witch.js => BaseFormGroupNetworkSwitch.js} |   2 +-
 .../filterEngines/_components/TheForm.vue     | 118 +++++++++---------
 .../filterEngines/_components/index.js        |  16 ++-
 3 files changed, 70 insertions(+), 66 deletions(-)
 rename html/pfappserver/root/src/views/Configuration/filterEngines/_components/{BaseFormGroupSwitch.js => BaseFormGroupNetworkSwitch.js} (90%)

diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupSwitch.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupNetworkSwitch.js
similarity index 90%
rename from html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupSwitch.js
rename to html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupNetworkSwitch.js
index 6ae4f1a9e263..280f9c14e5a6 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupSwitch.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/BaseFormGroupNetworkSwitch.js
@@ -16,7 +16,7 @@ export const props = {
 }
 
 export default {
-  name: 'base-form-group-switch',
+  name: 'base-form-group-network-switch',
   extends: BaseFormGroupChosenOne,
   props
 }
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
index d6a934d1e352..e677dbbb81b0 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
@@ -6,106 +6,112 @@
     :isLoading="isLoading"
   >
 
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Name')"
-      :text="$i18n.t('Specify a unique name for your filter.')"
-      :disabled="!isNew && !isClone"
+    <form-group-filter-enabled v-if="fields.includes('status')"
+                               namespace="status"
+                               :column-label="$i18n.t('Enabled')"
+                               enabled-value="enabled"
+                               disabled-value="disabled"
     />
 
-    <form-group-description v-if="fields.includes('description')"
-      namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-identifier namespace="id"
+                           :column-label="$i18n.t('Name')"
+                           :text="$i18n.t('Specify a unique name for your filter.')"
+                           :disabled="!isNew && !isClone"
     />
 
-    <form-group-status v-if="fields.includes('status')"
-      namespace="status"
-      :column-label="$i18n.t('Enabled')"
+    <form-group-description v-if="fields.includes('description')"
+                            namespace="description"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-condition v-if="fields.includes('condition')"
-      namespace="condition"
-      :column-label="$i18n.t('Condition')"
-      :text="$i18n.t('Specify a condition to match.')"
+                          namespace="condition"
+                          :column-label="$i18n.t('Condition')"
+                          :text="$i18n.t('Specify a condition to match.')"
     />
 
     <form-group-run-actions v-if="fields.includes('actions')"
-      namespace="run_actions"
-      :column-label="$i18n.t('Perform Actions')"
-      :text="$i18n.t('Enable to perform the following actions. Disable to only apply the role.')"
+                            namespace="run_actions"
+                            :column-label="$i18n.t('Perform Actions')"
+                            :text="$i18n.t('Enable to perform the following actions. Disable to only apply the role.')"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
 
     <form-group-actions v-if="fields.includes('actions') && form.run_actions === 'enabled'"
-      namespace="actions"
-      :column-label="$i18n.t('Actions')"
-      :text="$i18n.t('Specify actions to perform when condition is met.')"
+                        namespace="actions"
+                        :column-label="$i18n.t('Actions')"
+                        :text="$i18n.t('Specify actions to perform when condition is met.')"
     />
 
     <form-group-actions-synchronous v-if="fields.includes('actions')"
-      namespace="actions_synchronous"
-      :column-label="$i18n.t('Perform Actions Synchronously')"
-      :text="$i18n.t('By default, actions are performing asynchronously to the request. Enable this to make them synchronous so that the result of the actions may impact the current RADIUS request.')"
+                                    namespace="actions_synchronous"
+                                    :column-label="$i18n.t('Perform Actions Synchronously')"
+                                    :text="$i18n.t('By default, actions are performing asynchronously to the request. Enable this to make them synchronous so that the result of the actions may impact the current RADIUS request.')"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
     />
 
     <form-group-log v-if="fields.includes('log')"
-      namespace="log"
-      :column-label="$i18n.t('Log Entry')"
-      :text="$i18n.t('Specify the message to write to packetfence.log')"
+                    namespace="log"
+                    :column-label="$i18n.t('Log Entry')"
+                    :text="$i18n.t('Specify the message to write to packetfence.log')"
     />
 
     <form-group-params v-if="fields.includes('params')"
-      namespace="params"
-      :column-label="$i18n.t('Parameters')"
-      :text="$i18n.t('Specify parameters to apply when condition is met.')"
+                       namespace="params"
+                       :column-label="$i18n.t('Parameters')"
+                       :text="$i18n.t('Specify parameters to apply when condition is met.')"
     />
 
     <form-group-merge-answer v-if="fields.includes('merge_answer')"
-      namespace="merge_answer"
-      :column-label="$i18n.t('Merge Answer')"
-      :text="$i18n.t('Enable to merge the following answers with the original RADIUS answers.')"
+                             namespace="merge_answer"
+                             :column-label="$i18n.t('Merge Answer')"
+                             :text="$i18n.t('Enable to merge the following answers with the original RADIUS answers.')"
+                             enabled-value="yes"
+                             disabled-value="no"
     />
 
     <form-group-answers v-if="fields.includes('answers')"
-      namespace="answers"
-      :column-label="$i18n.t('Answers')"
+                        namespace="answers"
+                        :column-label="$i18n.t('Answers')"
     />
 
     <form-group-answer v-if="fields.includes('answer')"
-      namespace="answer"
-      :column-label="$i18n.t('Answer')"
+                       namespace="answer"
+                       :column-label="$i18n.t('Answer')"
     />
 
     <form-group-role v-if="fields.includes('role')"
-      namespace="role"
-      :column-label="$i18n.t('Role')"
+                     namespace="role"
+                     :column-label="$i18n.t('Role')"
     />
 
     <form-group-scopes v-if="fields.includes('scopes')"
-      namespace="scopes"
-      :column-label="$i18n.t('Scopes')"
+                       namespace="scopes"
+                       :column-label="$i18n.t('Scopes')"
     />
 
-    <form-group-switch v-if="fields.includes('switch')"
-      namespace="switch"
-      :column-label="$i18n.t('Switch')"
-      :text="$i18n.t('Specify which switch module to use.')"
+    <form-group-network-switch v-if="fields.includes('switch')"
+                               namespace="switch"
+                               :column-label="$i18n.t('Switch')"
+                               :text="$i18n.t('Specify which switch module to use.')"
     />
 
     <form-group-response-code v-if="fields.includes('rcode')"
-      namespace="rcode"
-      :column-label="$i18n.t('Response Code')"
+                              namespace="rcode"
+                              :column-label="$i18n.t('Response Code')"
     />
 
     <form-group-radius-status v-if="fields.includes('radius_status')"
-      namespace="radius_status"
-      :column-label="$i18n.t('RADIUS Status')"
+                              namespace="radius_status"
+                              :column-label="$i18n.t('RADIUS Status')"
     />
 
   </base-form>
 </template>
 <script>
-import {
-  BaseForm,
-} from '@/components/new/'
+import {BaseForm,} from '@/components/new/'
 import {
   FormGroupActions,
   FormGroupActionsSynchronous,
@@ -113,6 +119,7 @@ import {
   FormGroupAnswers,
   FormGroupCondition,
   FormGroupDescription,
+  FormGroupFilterEnabled,
   FormGroupIdentifier,
   FormGroupLog,
   FormGroupMergeAnswer,
@@ -122,9 +129,10 @@ import {
   FormGroupRole,
   FormGroupRunActions,
   FormGroupScopes,
-  FormGroupStatus,
-  FormGroupSwitch
+  FormGroupNetworkSwitch,
 } from './'
+import {useForm, useFormProps as props} from '../_composables/useForm'
+
 const components = {
   BaseForm,
   FormGroupActions,
@@ -142,12 +150,10 @@ const components = {
   FormGroupRole,
   FormGroupRunActions,
   FormGroupScopes,
-  FormGroupStatus,
-  FormGroupSwitch
+  FormGroupFilterEnabled,
+  FormGroupNetworkSwitch,
 }
 
-import { useForm, useFormProps as props } from '../_composables/useForm'
-
 export const setup = (props, context) => useForm(props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/index.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/index.js
index c62786acaa6c..39511d0debf9 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/index.js
@@ -4,15 +4,13 @@ import {
   BaseFormGroupChosenMultiple,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupToggleNoYes
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupActions from './BaseFormGroupActions'
 import BaseFormGroupAnswers from './BaseFormGroupAnswers'
 import BaseFormGroupCondition from './BaseFormGroupCondition'
 import BaseFormGroupParams from './BaseFormGroupParams'
-import BaseFormGroupStatus from './BaseFormGroupStatus'
-import BaseFormGroupSwitch from './BaseFormGroupSwitch'
+import BaseFormGroupNetworkSwitch from './BaseFormGroupNetworkSwitch'
 import TheForm from './TheForm'
 import TheView from './TheView'
 import ToggleStatus from './ToggleStatus'
@@ -21,22 +19,22 @@ export {
   BaseFormButtonBar                   as FormButtonBar,
 
   BaseFormGroupActions                as FormGroupActions,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupActionsSynchronous,
+  BaseFormGroupSwitch                 as FormGroupActionsSynchronous,
   BaseFormGroupInput                  as FormGroupAnswer,
   BaseFormGroupAnswers                as FormGroupAnswers,
   BaseFormGroupCondition              as FormGroupCondition,
   BaseFormGroupInput                  as FormGroupDescription,
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupInput                  as FormGroupLog,
-  BaseFormGroupToggleNoYes            as FormGroupMergeAnswer,
+  BaseFormGroupSwitch                 as FormGroupMergeAnswer,
   BaseFormGroupParams                 as FormGroupParams,
   BaseFormGroupChosenOne              as FormGroupRadiusStatus,
   BaseFormGroupChosenOne              as FormGroupResponseCode,
   BaseFormGroupChosenOne              as FormGroupRole,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRunActions,
+  BaseFormGroupSwitch                 as FormGroupRunActions,
   BaseFormGroupChosenMultiple         as FormGroupScopes,
-  BaseFormGroupStatus                 as FormGroupStatus,
-  BaseFormGroupSwitch                 as FormGroupSwitch,
+  BaseFormGroupSwitch                 as FormGroupFilterEnabled,
+  BaseFormGroupNetworkSwitch          as FormGroupNetworkSwitch,
 
   BaseViewCollectionItem              as BaseView,
   TheForm,

From e17c6f35e1085b894a5b5d4c39e4a7317ce82e73 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 16:58:26 +0300
Subject: [PATCH 29/51] Change billing tiers form to use switch UI component

---
 .../billingTiers/_components/TheForm.vue      | 32 +++++++++----------
 .../billingTiers/_components/index.js         |  8 ++---
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
index 6a40d274627c..35c6fd3ca336 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
@@ -6,50 +6,50 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Billing Tier')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('Billing Tier')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-name namespace="name"
-      :column-label="$i18n.t('Name')"
+                     :column-label="$i18n.t('Name')"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-price namespace="price"
-      :column-label="$i18n.t('Price')"
+                      :column-label="$i18n.t('Price')"
     />
 
     <form-group-role namespace="role"
-      :column-label="$i18n.t('Role')"
+                     :column-label="$i18n.t('Role')"
     />
 
     <form-group-access-duration namespace="access_duration"
-      :column-label="$i18n.t('Access Duration')"
-      :text="$i18n.t('The access duration of the devices that use this tier.')"
+                                :column-label="$i18n.t('Access Duration')"
+                                :text="$i18n.t('The access duration of the devices that use this tier.')"
     />
 
     <form-group-use-time-balance namespace="use_time_balance"
-      :column-label="$i18n.t('Use Time Balance')"
-      :text="$i18n.t('Check this box to have the access duration be a real time usage.<br/>This requires a working accounting configuration.')"
+                                 :column-label="$i18n.t('Use Time Balance')"
+                                 :text="$i18n.t('Check this box to have the access duration be a real time usage.<br/>This requires a working accounting configuration.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
+  FormGroupAccessDuration,
+  FormGroupDescription,
   FormGroupIdentifier,
   FormGroupName,
-  FormGroupDescription,
   FormGroupPrice,
   FormGroupRole,
-  FormGroupAccessDuration,
   FormGroupUseTimeBalance
 } from './'
 
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/index.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/index.js
index 919587b6162e..3db4a92468b6 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/index.js
@@ -1,12 +1,12 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import { BaseFormGroupIntervalUnit } from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -20,7 +20,7 @@ export {
   BaseFormGroupInputNumber            as FormGroupPrice,
   BaseFormGroupChosenOne              as FormGroupRole,
   BaseFormGroupIntervalUnit           as FormGroupAccessDuration,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUseTimeBalance,
+  BaseFormGroupSwitch                 as FormGroupUseTimeBalance,
 
   TheForm,
   TheView

From 4e7b29755decda9fefbd7494461b2f714f4315de Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 13 Jul 2023 17:05:03 +0300
Subject: [PATCH 30/51] Change PKI providers form to use switch UI component

---
 .../_components/FormTypePacketfencePki.vue    | 63 ++++++++++---------
 .../pkiProviders/_components/index.js         |  4 +-
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/FormTypePacketfencePki.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/FormTypePacketfencePki.vue
index 75efc72738dd..7ad0062df9ec 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/FormTypePacketfencePki.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/FormTypePacketfencePki.vue
@@ -6,75 +6,77 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      :column-label="$i18n.t('PKI Provider Name')"
-      :disabled="!isNew && !isClone"
+                           :column-label="$i18n.t('PKI Provider Name')"
+                           :disabled="!isNew && !isClone"
     />
 
     <form-group-profile namespace="profile"
-      :column-label="$i18n.t('Template')"
-      :text="$i18n.t('Template used for the generation of certificate.')"
+                        :column-label="$i18n.t('Template')"
+                        :text="$i18n.t('Template used for the generation of certificate.')"
     />
 
     <form-group-country namespace="country"
-      :column-label="$i18n.t('Country')"
-      :text="$i18n.t('Country for the certificate.')"
+                        :column-label="$i18n.t('Country')"
+                        :text="$i18n.t('Country for the certificate.')"
     />
 
     <form-group-state namespace="state"
-      :column-label="$i18n.t('State')"
-      :text="$i18n.t('State for the certificate.')"
+                      :column-label="$i18n.t('State')"
+                      :text="$i18n.t('State for the certificate.')"
     />
 
     <form-group-street-address namespace="streetaddress"
-      :column-label="$i18n.t('Street Address')"
-      :text="$i18n.t('Street address for the certificate.')"
+                               :column-label="$i18n.t('Street Address')"
+                               :text="$i18n.t('Street address for the certificate.')"
     />
 
     <form-group-postal-code namespace="postalcode"
-      :column-label="$i18n.t('Postal Code')"
-      :text="$i18n.t('Postal Code for the certificate.')"
+                            :column-label="$i18n.t('Postal Code')"
+                            :text="$i18n.t('Postal Code for the certificate.')"
     />
 
     <form-group-locality namespace="locality"
-      :column-label="$i18n.t('Locality')"
-      :text="$i18n.t('Locality for the certificate.')"
+                         :column-label="$i18n.t('Locality')"
+                         :text="$i18n.t('Locality for the certificate.')"
     />
 
     <form-group-organization namespace="organization"
-      :column-label="$i18n.t('Organization')"
-      :text="$i18n.t('Organization for the certificate.')"
+                             :column-label="$i18n.t('Organization')"
+                             :text="$i18n.t('Organization for the certificate.')"
     />
 
     <form-group-common-name-attribute namespace="cn_attribute"
-      :column-label="$i18n.t('Common Name Attribute')"
-      :text="$i18n.t('Defines what attribute of the node to use as the common name during the certificate generation.')"
+                                      :column-label="$i18n.t('Common Name Attribute')"
+                                      :text="$i18n.t('Defines what attribute of the node to use as the common name during the certificate generation.')"
     />
 
     <form-group-common-name-format namespace="cn_format"
-      :column-label="$i18n.t('Common Name Format')"
-      :text="$i18n.t('Defines how the common name will be formated. %s will expand to the defined Common Name Attribute value.')"
+                                   :column-label="$i18n.t('Common Name Format')"
+                                   :text="$i18n.t('Defines how the common name will be formated. %s will expand to the defined Common Name Attribute value.')"
     />
 
     <form-group-revoke-on-registration namespace="revoke_on_unregistration"
-      :column-label="$i18n.t('Revoke on unregistration')"
-      :text="$i18n.t('Enable to revoke the certificate when the node using it is unregistered. Do not use if multiple devices share the same certificate.')"
+                                       :column-label="$i18n.t('Revoke on unregistration')"
+                                       :text="$i18n.t('Enable to revoke the certificate when the node using it is unregistered. Do not use if multiple devices share the same certificate.')"
+                                       enabled-value="Y"
+                                       disabled-value="N"
     />
 
     <form-group-ca-cert-path namespace="ca_cert_path"
-      :column-label="$i18n.t('CA certificate file')"
-      :title="$i18n.t('Upload CA certificate file')"
-      :text="$i18n.t('CA certificate used to generate client certificate/key combination.')"
+                             :column-label="$i18n.t('CA certificate file')"
+                             :title="$i18n.t('Upload CA certificate file')"
+                             :text="$i18n.t('CA certificate used to generate client certificate/key combination.')"
     />
 
     <form-group-server-cert-path namespace="server_cert_path"
-      :column-label="$i18n.t('Server certificate file')"
-      :title="$i18n.t('Upload server certificate file')"
-      :text="$i18n.t('RADIUS server authentication certificate.')"
+                                 :column-label="$i18n.t('Server certificate file')"
+                                 :title="$i18n.t('Upload server certificate file')"
+                                 :text="$i18n.t('RADIUS server authentication certificate.')"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupCaCertPath,
   FormGroupCommonNameAttribute,
@@ -90,6 +92,7 @@ import {
   FormGroupState,
   FormGroupStreetAddress
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -109,8 +112,6 @@ const components = {
   FormGroupStreetAddress
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-packetfence-local',
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/index.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/index.js
index f4a0bb936462..f087399d34e8 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/index.js
@@ -6,7 +6,7 @@ import {
   BaseFormGroupFileUpload,
   BaseFormGroupInput,
   BaseFormGroupInputPassword,
-  BaseFormGroupToggleNY
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import {
   BaseFormGroupChosenOneProfile
@@ -31,7 +31,7 @@ export {
   BaseFormGroupInputPassword    as FormGroupPassword,
   BaseFormGroupInput            as FormGroupPostalCode,
   BaseFormGroupChosenOneProfile as FormGroupProfile,
-  BaseFormGroupToggleNY         as FormGroupRevokeOnRegistration,
+  BaseFormGroupSwitch           as FormGroupRevokeOnRegistration,
   BaseFormGroupFileUpload       as FormGroupServerCertPath,
   BaseFormGroupInput            as FormGroupState,
   BaseFormGroupInput            as FormGroupStreetAddress,

From 6c0c1bada2f4b7bb0df667f4b301e73ce8c7850b Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 13:41:06 +0300
Subject: [PATCH 31/51] Change network settings form to use switch UI component

---
 .../networks/network/_components/TheForm.vue  | 74 +++++++++++--------
 .../networks/network/_components/index.js     | 26 +++----
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheForm.vue
index 9f5f591c901a..ff5f254266b0 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheForm.vue
@@ -6,78 +6,90 @@
     :isLoading="isLoading"
   >
     <form-group-dhcpdetector namespace="dhcpdetector"
-      :column-label="$i18n.t('DHCP detector')"
-      :text="$i18n.t('If enabled, PacketFence will monitor DHCP-specific items such as rogue DHCP services, DHCP-based OS fingerprinting, computername/hostname resolution, and (optionnally) option-82 location-based information. The monitored DHCP packets are DHCPDISCOVERs and DHCPREQUESTs - both are broadcasts, meaning a span port is not necessary. This feature is highly recommended if the internal network is DHCP-based.')"
+                             :column-label="$i18n.t('DHCP detector')"
+                             :text="$i18n.t('If enabled, PacketFence will monitor DHCP-specific items such as rogue DHCP services, DHCP-based OS fingerprinting, computername/hostname resolution, and (optionnally) option-82 location-based information. The monitored DHCP packets are DHCPDISCOVERs and DHCPREQUESTs - both are broadcasts, meaning a span port is not necessary. This feature is highly recommended if the internal network is DHCP-based.')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-dhcp-rate-limiting namespace="dhcp_rate_limiting"
-      :column-label="$i18n.t('DHCP detector rate limiting')"
-      :text="$i18n.t('Will rate-limit DHCP packets that contain the same information.For example, a DHCPREQUEST for the same MAC/IP will only be processed once in the timeframe configured below. This is independant of the DHCP server/relay handling the packet and is only based on the IP, MAC Address and DHCP type inside the packet. A value of 0 will disable the rate limitation.')"
+                                   :column-label="$i18n.t('DHCP detector rate limiting')"
+                                   :text="$i18n.t('Will rate-limit DHCP packets that contain the same information.For example, a DHCPREQUEST for the same MAC/IP will only be processed once in the timeframe configured below. This is independant of the DHCP server/relay handling the packet and is only based on the IP, MAC Address and DHCP type inside the packet. A value of 0 will disable the rate limitation.')"
     />
 
     <form-group-rogue-dhcp-detection namespace="rogue_dhcp_detection"
-      :column-label="$i18n.t('Rogue DHCP detecti')"
-      :text="$i18n.t('Tries to identify Rogue DHCP Servers and triggers the 1100010 violation if one is found. This feature is only available if the dhcpdetector is activated.')"
+                                     :column-label="$i18n.t('Rogue DHCP detecti')"
+                                     :text="$i18n.t('Tries to identify Rogue DHCP Servers and triggers the 1100010 violation if one is found. This feature is only available if the dhcpdetector is activated.')"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
 
     <form-group-rogueinterval namespace="rogueinterval"
-      :column-label="$i18n.t('Rogue interval')"
-      :text="$i18n.t('When rogue DHCP server detection is enabled, this parameter defines how often to email administrators. With its default setting of 10, it will email administrators the details of the previous 10 DHCP offers.')"
+                              :column-label="$i18n.t('Rogue interval')"
+                              :text="$i18n.t('When rogue DHCP server detection is enabled, this parameter defines how often to email administrators. With its default setting of 10, it will email administrators the details of the previous 10 DHCP offers.')"
     />
 
     <form-group-hostname-change-detection namespace="hostname_change_detection"
-      :column-label="$i18n.t('Detect hostname changes')"
-      :text="$i18n.t('Will identify hostname changes and send an e-mail with these changes. This can help detect MAC spoofing.')"
+                                          :column-label="$i18n.t('Detect hostname changes')"
+                                          :text="$i18n.t('Will identify hostname changes and send an e-mail with these changes. This can help detect MAC spoofing.')"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
     />
 
     <form-group-connection-type-change-detection namespace="connection_type_change_detection"
-      :column-label="$i18n.t('Detect changes in connection type')"
-      :text="$i18n.t('Will identify if a device switches from wired to wireless (or the opposite) and send an e-mail with these changes. This can help detect MAC spoofing.')"
+                                                 :column-label="$i18n.t('Detect changes in connection type')"
+                                                 :text="$i18n.t('Will identify if a device switches from wired to wireless (or the opposite) and send an e-mail with these changes. This can help detect MAC spoofing.')"
+                                                 enabled-value="enabled"
+                                                 disabled-value="disabled"
     />
 
     <form-group-dhcpoption82logger namespace="dhcpoption82logger"
-      :column-label="$i18n.t('DHCP option82')"
-      :text="$i18n.t('If enabled PacketFence will monitor DHCP option82 location-based information. This feature is only available if the dhcpdetector is activated.')"
+                                   :column-label="$i18n.t('DHCP option82')"
+                                   :text="$i18n.t('If enabled PacketFence will monitor DHCP option82 location-based information. This feature is only available if the dhcpdetector is activated.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-dhcp-process-ipv6 namespace="dhcp_process_ipv6"
-      :column-label="$i18n.t('IPv6 DHCP handling')"
-      :text="$i18n.t('IPv6 DHCP packet processing by pfdhcplistener.')"
+                                  :column-label="$i18n.t('IPv6 DHCP handling')"
+                                  :text="$i18n.t('IPv6 DHCP packet processing by pfdhcplistener.')"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
 
     <form-group-force-listener-update-on-ack namespace="force_listener_update_on_ack"
-      :column-label="$i18n.t('Force Listener update on DHCPACK')"
-      :text="$i18n.t('This will only do the iplog update and other DHCP related task on a DHCPACK. You need to make sure the UDP reflector is in place so this works on the production network. This is implicitly activated on registration interfaces on which dhcpd runs.')"
+                                             :column-label="$i18n.t('Force Listener update on DHCPACK')"
+                                             :text="$i18n.t('This will only do the iplog update and other DHCP related task on a DHCPACK. You need to make sure the UDP reflector is in place so this works on the production network. This is implicitly activated on registration interfaces on which dhcpd runs.')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
     />
 
     <form-group-interface-snat namespace="interfaceSNAT"
-      :column-label="$i18n.t('SNAT Interface for passthroughs')"
-      :text="$i18n.t(`Choose interface(s) where you want to enable SNAT for passthroughs (by default it's the management interface)`)"
+                               :column-label="$i18n.t('SNAT Interface for passthroughs')"
+                               :text="$i18n.t(`Choose interface(s) where you want to enable SNAT for passthroughs (by default it's the management interface)`)"
     />
 
     <form-group-staticroutes namespace="staticroutes"
-      :column-label="$i18n.t('Static routes')"
-      :text="$i18n.t('Add custom static routes managed by keepalived, one line per static route. (like: <code>10.0.0.0/24 dev eth1</code> or <code>10.0.0.0/24 via 10.0.0.1 dev eth1</code>)')"
+                             :column-label="$i18n.t('Static routes')"
+                             :text="$i18n.t('Add custom static routes managed by keepalived, one line per static route. (like: <code>10.0.0.0/24 dev eth1</code> or <code>10.0.0.0/24 via 10.0.0.1 dev eth1</code>)')"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
-  FormGroupDhcpdetector,
-  FormGroupDhcpRateLimiting,
-  FormGroupRogueDhcpDetection,
-  FormGroupRogueinterval,
-  FormGroupHostnameChangeDetection,
   FormGroupConnectionTypeChangeDetection,
+  FormGroupDhcpdetector,
   FormGroupDhcpoption82logger,
   FormGroupDhcpProcessIpv6,
+  FormGroupDhcpRateLimiting,
   FormGroupForceListenerUpdateOnAck,
+  FormGroupHostnameChangeDetection,
   FormGroupInterfaceSnat,
+  FormGroupRogueDhcpDetection,
+  FormGroupRogueinterval,
   FormGroupStaticroutes
 } from './'
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/network/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/network/_components/index.js
index 2ebd8c165197..69b21ad6218b 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/network/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/network/_components/index.js
@@ -1,12 +1,6 @@
-import { BaseViewResource } from '../../../_components/new/'
-import {
-  BaseFormButtonBar,
-  BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
-} from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
+import {BaseViewResource} from '../../../_components/new/'
+import {BaseFormButtonBar, BaseFormGroupInput, BaseFormGroupSwitch,} from '@/components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import BaseFormGroupStaticRoutes from './BaseFormGroupStaticRoutes'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -14,15 +8,15 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDhcpdetector,
+  BaseFormGroupSwitch                as FormGroupDhcpdetector,
   BaseFormGroupIntervalUnit           as FormGroupDhcpRateLimiting,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRogueDhcpDetection,
+  BaseFormGroupSwitch                as FormGroupRogueDhcpDetection,
   BaseFormGroupInput                  as FormGroupRogueinterval,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHostnameChangeDetection,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupConnectionTypeChangeDetection,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDhcpoption82logger,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDhcpProcessIpv6,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupForceListenerUpdateOnAck,
+  BaseFormGroupSwitch                as FormGroupHostnameChangeDetection,
+  BaseFormGroupSwitch                as FormGroupConnectionTypeChangeDetection,
+  BaseFormGroupSwitch                as FormGroupDhcpoption82logger,
+  BaseFormGroupSwitch                as FormGroupDhcpProcessIpv6,
+  BaseFormGroupSwitch                as FormGroupForceListenerUpdateOnAck,
   BaseFormGroupInput                  as FormGroupInterfaceSnat,
   BaseFormGroupStaticRoutes           as FormGroupStaticroutes,
 

From ae8fc2e2b4cee6bdec5b08c196eddf86a6630418 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 16:09:33 +0300
Subject: [PATCH 32/51] Change interface settings form to use switch UI
 component

---
 .../interfaces/_components/TheForm.vue        | 110 ++++++++++--------
 .../networks/interfaces/_components/index.js  |  19 ++-
 2 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheForm.vue
index 1938469957db..e15fafd09f39 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheForm.vue
@@ -5,117 +5,131 @@
     :isLoading="isLoading"
   >
     <form-group-identifier :namespace="(form.master) ? 'master' : 'id'"
-      :column-label="$i18n.t('Interface')"
-      disabled
+                           :column-label="$i18n.t('Interface')"
+                           disabled
     />
 
     <form-group-vlan v-show="isNew || isClone || form.master"
-      namespace="vlan"
-      :column-label="$i18n.t('Virtual LAN ID')"
-      :disabled="!isNew && !isClone"
+                     namespace="vlan"
+                     :column-label="$i18n.t('Virtual LAN ID')"
+                     :disabled="!isNew && !isClone"
     />
 
     <form-group-ip-address namespace="ipaddress"
-      :column-label="$i18n.t('IPv4 Address')"
+                           :column-label="$i18n.t('IPv4 Address')"
     />
 
     <form-group-netmask namespace="netmask"
-      :column-label="$i18n.t('Netmask')"
+                        :column-label="$i18n.t('Netmask')"
     />
 
     <form-group-ipv6-address namespace="ipv6_address"
-      :column-label="$i18n.t('IPv6 Address')"
+                             :column-label="$i18n.t('IPv6 Address')"
     />
 
     <form-group-ipv6-prefix namespace="ipv6_prefix"
-      :column-label="$i18n.t('IPv6 Prefix')"
+                            :column-label="$i18n.t('IPv6 Prefix')"
     />
 
     <form-group-type namespace="type"
-      :column-label="$i18n.t('Type')"
-      :options="typeOptions"
+                     :column-label="$i18n.t('Type')"
+                     :options="typeOptions"
     />
 
     <b-form-group v-show="isType('inlinel2')"
-      label-cols="3">
+                  label-cols="3">
       <div class="alert alert-warning mb-0">
         <strong>{{ $i18n.t('Note:') }}</strong>
-        {{ $i18n.t(`Remember to enable ip_forward on your operating system for the inline mode to work.`) }}
+        {{
+          $i18n.t(`Remember to enable ip_forward on your operating system for the inline mode to work.`)
+        }}
       </div>
     </b-form-group>
 
     <form-group-additional-listenening-daemons namespace="additional_listening_daemons"
-      :column-label="$i18n.t('Additional listening daemon(s)')"
-      :options="daemonOptions"
+                                               :column-label="$i18n.t('Additional listening daemon(s)')"
+                                               :options="daemonOptions"
     />
 
     <form-group-dns v-show="isType('inlinel2')"
-      namespace="dns"
-      :column-label="$i18n.t('DNS')"
-      :text="$i18n.t('The DNS server(s) of your network. (comma limited)')"
+                    namespace="dns"
+                    :column-label="$i18n.t('DNS')"
+                    :text="$i18n.t('The DNS server(s) of your network. (comma limited)')"
     />
 
-    <form-group-dhcpd-enabled v-show="isType('dns-enforcement', 'inlinel2', 'vlan-isolation', 'vlan-registration')"
+    <form-group-dhcpd-enabled
+      v-show="isType('dns-enforcement', 'inlinel2', 'vlan-isolation', 'vlan-registration')"
       namespace="dhcpd_enabled"
       :column-label="$i18n.t('Enable DHCP Server')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <template v-if="isType('inlinel2')">
       <form-group-nat-enabled namespace="nat_enabled"
-        :column-label="$i18n.t('Enable NAT')"
+                              :column-label="$i18n.t('Enable NAT')"
+                              enabled-value="enabled"
+                              disabled-value="disabled"
       />
       <b-form-group v-show="form.nat_enabled !== 'enabled'"
-        label-cols="3">
+                    label-cols="3">
         <div class="alert alert-warning mb-0">
           <strong>{{ $i18n.t('Note:') }}</strong>
-          {{ $i18n.t(`Since NAT is disabled, PacketFence will adjust iptables to route traffic rather than using NAT. Make sure to add the routes on the system.`) }}
+          {{
+            $i18n.t(`Since NAT is disabled, PacketFence will adjust iptables to route traffic rather than using NAT. Make sure to add the routes on the system.`)
+          }}
         </div>
       </b-form-group>
       <form-group-nat-dns namespace="nat_dns"
-        :column-label="$i18n.t('Proxy DNS')"
-        :text="$i18n.t('Use pfdns to proxy the request to the DNS server defined above when the device is registered.')"
+                          :column-label="$i18n.t('Proxy DNS')"
+                          :text="$i18n.t('Use pfdns to proxy the request to the DNS server defined above when the device is registered.')"
+                          enabled-value="enabled"
+                          disabled-value="disabled"
       />
     </template>
 
     <form-group-split-network v-show="isType('inlinel2')"
-      namespace="split_network"
-      :column-label="$i18n.t('Split network by role')"
-      :text="$i18n.t('This will create a small network for each roles.')"
+                              namespace="split_network"
+                              :column-label="$i18n.t('Split network by role')"
+                              :text="$i18n.t('This will create a small network for each roles.')"
+                              enabled-value="enabled"
+                              disabled-value="disabled"
     />
 
     <form-group-reg-network v-show="isType('inlinel2')"
-      namespace="reg_network"
-      :column-label="$i18n.t('Registration IP Address CIDR format')"
-      :text="$i18n.t('When split network by role is enabled then this network will be used as the registration network (example: 192.168.0.1/24).')"
+                            namespace="reg_network"
+                            :column-label="$i18n.t('Registration IP Address CIDR format')"
+                            :text="$i18n.t('When split network by role is enabled then this network will be used as the registration network (example: 192.168.0.1/24).')"
     />
 
     <form-group-coa v-show="isType('inlinel2')"
-      namespace="coa"
-      :column-label="$i18n.t('Enable CoA')"
-      :text="$i18n.t('Enabling this will send a CoA request to the equipment to reevaluate network access of endpoints.')"
+                    namespace="coa"
+                    :column-label="$i18n.t('Enable CoA')"
+                    :text="$i18n.t('Enabling this will send a CoA request to the equipment to reevaluate network access of endpoints.')"
+                    enabled-value="enabled"
+                    disabled-value="disabled"
     />
 
     <form-group-netflow-accounting-enabled v-show="isType('inlinel2')"
-      namespace="netflow_accounting_enabled"
-      :column-label="$i18n.t('Netflow Accounting Enabled')"
-      :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                           namespace="netflow_accounting_enabled"
+                                           :column-label="$i18n.t('Netflow Accounting Enabled')"
+                                           :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
     />
 
     <form-group-high-availability v-show="isType('none', 'management')"
-      namespace="high_availability"
-      :column-label="$i18n.t('High availability')"
+                                  namespace="high_availability"
+                                  :column-label="$i18n.t('High availability')"
+                                  enabled-value="1"
+                                  disabled-value="0"
     />
   </base-form>
 </template>
 <script>
-import { computed, toRefs } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
-import {
-  daemonOptions,
-  typeOptions
-} from '../config'
+import {computed, toRefs} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
+import {daemonOptions, typeOptions} from '../config'
 import schemaFn from '../schema'
 import {
   FormGroupAdditionalListeneningDaemons,
@@ -127,8 +141,8 @@ import {
   FormGroupIpAddress,
   FormGroupIpv6Address,
   FormGroupIpv6Prefix,
-  FormGroupNatEnabled,
   FormGroupNatDns,
+  FormGroupNatEnabled,
   FormGroupNetflowAccountingEnabled,
   FormGroupNetmask,
   FormGroupRegNetwork,
@@ -189,7 +203,7 @@ export const setup = (props) => {
   const schema = computed(() => schemaFn(props))
 
   const isType = (...types) => {
-    const { type } = form.value || {}
+    const {type} = form.value || {}
     return types.includes(type)
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/index.js
index 55c5b3bdb130..e7e190e6414c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/index.js
@@ -5,11 +5,8 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import {
-  BaseFormGroupToggleZeroOneIntegerAsOffOn
-} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 import ToggleStatus from './ToggleStatus'
@@ -19,20 +16,20 @@ export {
   BaseFormButtonBar                         as FormButtonBar,
 
   BaseFormGroupChosenMultiple               as FormGroupAdditionalListeneningDaemons,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupCoa,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupDhcpdEnabled,
+  BaseFormGroupSwitch                       as FormGroupCoa,
+  BaseFormGroupSwitch                       as FormGroupDhcpdEnabled,
   BaseFormGroupInput                        as FormGroupDns,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupHighAvailability,
+  BaseFormGroupSwitch                       as FormGroupHighAvailability,
   BaseFormGroupInput                        as FormGroupIdentifier,
   BaseFormGroupInput                        as FormGroupIpAddress,
   BaseFormGroupInput                        as FormGroupIpv6Address,
   BaseFormGroupInputNumber                  as FormGroupIpv6Prefix,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupNatEnabled,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupNatDns,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupNetflowAccountingEnabled,
+  BaseFormGroupSwitch                       as FormGroupNatEnabled,
+  BaseFormGroupSwitch                       as FormGroupNatDns,
+  BaseFormGroupSwitch                       as FormGroupNetflowAccountingEnabled,
   BaseFormGroupInput                        as FormGroupNetmask,
   BaseFormGroupInput                        as FormGroupRegNetwork,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupSplitNetwork,
+  BaseFormGroupSwitch                       as FormGroupSplitNetwork,
   BaseFormGroupChosenOne                    as FormGroupType,
   BaseFormGroupInput                        as FormGroupVlan,
 

From 7cbb37e2823b61ef0cc0bdeb4fb56a259da8b2bf Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 17:55:43 +0300
Subject: [PATCH 33/51] Change provisioners form to use switch UI component

---
 .../_components/FormTypeAccept.vue            |  59 +++----
 .../_components/FormTypeAirwatch.vue          |  91 ++++++-----
 .../_components/FormTypeAndroid.vue           | 117 +++++++-------
 .../provisioners/_components/FormTypeDeny.vue |  59 +++----
 .../provisioners/_components/FormTypeDpsk.vue |  75 +++++----
 .../FormTypeGoogleWorkspaceChromebook.vue     |  85 +++++-----
 .../_components/FormTypeIntune.vue            | 109 ++++++-------
 .../provisioners/_components/FormTypeJamf.vue | 105 +++++++------
 .../_components/FormTypeKandji.vue            |  81 +++++-----
 .../_components/FormTypeMobileconfig.vue      | 146 ++++++++++--------
 .../_components/FormTypeMobileiron.vue        |  91 +++++------
 .../_components/FormTypeSentinelone.vue       |  87 ++++++-----
 .../_components/FormTypeWindows.vue           | 117 +++++++-------
 .../provisioners/_components/index.js         |  42 ++---
 14 files changed, 673 insertions(+), 591 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAccept.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAccept.vue
index 3a86bae0925a..af1a611f4f8b 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAccept.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAccept.vue
@@ -1,52 +1,58 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -57,6 +63,7 @@ import {
   FormGroupOses,
   FormGroupRoleToApply
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -71,8 +78,6 @@ const components = {
   FormGroupRoleToApply
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-accept',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAirwatch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAirwatch.vue
index 88355a98ef8c..21d64aea7b15 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAirwatch.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAirwatch.vue
@@ -1,81 +1,89 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-sync-pid namespace="sync_pid"
-      :column-label="$i18n.t('Sync PID')"
-      :text="$i18n.t('Whether or not the PID (username) should be synchronized from the provisioner to PacketFence.')"
+    <form-group-sync-pid :column-label="$i18n.t('Sync PID')"
+                         :text="$i18n.t('Whether or not the PID (username) should be synchronized from the provisioner to PacketFence.')"
+                         disabled-value="disabled"
+                         enabled-value="enabled"
+                         namespace="sync_pid"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+    <form-group-port :column-label="$i18n.t('Port')"
+                     namespace="port"
     />
 
-    <form-group-protocol namespace="protocol"
-      :column-label="$i18n.t('Protocol')"
+    <form-group-protocol :column-label="$i18n.t('Protocol')"
+                         namespace="protocol"
     />
 
-    <form-group-api-username namespace="api_username"
-      :column-label="$i18n.t('API username')"
+    <form-group-api-username :column-label="$i18n.t('API username')"
+                             namespace="api_username"
     />
 
-    <form-group-api-password namespace="api_password"
-      :column-label="$i18n.t('API password')"
+    <form-group-api-password :column-label="$i18n.t('API password')"
+                             namespace="api_password"
     />
 
-    <form-group-tenant-code namespace="tenant_code"
-      :column-label="$i18n.t('Tenant code')"
+    <form-group-tenant-code :column-label="$i18n.t('Tenant code')"
+                            namespace="tenant_code"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApiPassword,
   FormGroupApiUsername,
@@ -93,6 +101,7 @@ import {
   FormGroupSyncPid,
   FormGroupTenantCode
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -114,8 +123,6 @@ const components = {
   FormGroupTenantCode
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-airwatch',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAndroid.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAndroid.vue
index c42ea6d7faa5..71144cdeaeae 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAndroid.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeAndroid.vue
@@ -1,103 +1,115 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-ssid namespace="ssid"
-      :column-label="$i18n.t('SSID')"
+    <form-group-ssid :column-label="$i18n.t('SSID')"
+                     namespace="ssid"
     />
 
-    <form-group-broadcast namespace="broadcast"
-      :column-label="$i18n.t('Broadcast network')"
-      :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+    <form-group-broadcast :column-label="$i18n.t('Broadcast network')"
+                          :disabled-value="0"
+                          :enabled-value="1"
+                          :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+                          namespace="broadcast"
     />
 
-    <form-group-security-type namespace="security_type"
-      :column-label="$i18n.t('Security type')"
-      :text="$i18n.t('Select the type of security applied for your SSID.')"
+    <form-group-security-type :column-label="$i18n.t('Security type')"
+                              :text="$i18n.t('Select the type of security applied for your SSID.')"
+                              namespace="security_type"
     />
 
     <form-group-eap-type v-if="wantsEapType"
-      namespace="eap_type"
-      :column-label="$i18n.t('EAP type')"
-      :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                         :column-label="$i18n.t('EAP type')"
+                         :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                         namespace="eap_type"
     />
 
     <form-group-dpsk v-if="wantsDpsk"
-      namespace="dpsk"
-      :column-label="$i18n.t('Enable DPSK')"
-      :text="$i18n.t('Define if the PSK needs to be generated.')"
+                     :column-label="$i18n.t('Enable DPSK')"
+                     :text="$i18n.t('Define if the PSK needs to be generated.')"
+                     disabled-value="0"
+                     enabled-value="1"
+                     namespace="dpsk"
     />
 
     <form-group-dpsk-use-local-password v-if="wantsDpsk"
-      namespace="dpsk_use_local_password"
-      :column-label="$i18n.t('Reuse the local password for DPSK')"
-      :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                        :column-label="$i18n.t('Reuse the local password for DPSK')"
+                                        :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                        disabled-value="disabled"
+                                        enabled-value="enabled"
+                                        namespace="dpsk_use_local_password"
     />
 
     <form-group-passcode v-if="wantsPasscode"
-      namespace="passcode"
-      :column-label="$i18n.t('Wifi Key')"
+                         :column-label="$i18n.t('Wifi Key')"
+                         namespace="passcode"
     />
 
     <form-group-server-certificate-path v-if="wantsServerCertificatePath"
-      namespace="server_certificate_path"
-      :column-label="$i18n.t('RADIUS server certificate file')"
-      :title="$i18n.t('Upload RADIUS server certificate file')"
-      :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                        :column-label="$i18n.t('RADIUS server certificate file')"
+                                        :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                        :title="$i18n.t('Upload RADIUS server certificate file')"
+                                        namespace="server_certificate_path"
     />
 
     <form-group-ca-cert-path v-if="wantsServerRadiusCaPath"
-      namespace="ca_cert_path"
-      :column-label="$i18n.t('RADIUS server CA file')"
-      :title="$i18n.t('Upload RADIUS server CA file')"
-      :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                             :column-label="$i18n.t('RADIUS server CA file')"
+                             :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                             :title="$i18n.t('Upload RADIUS server CA file')"
+                             namespace="ca_cert_path"
     />
 
     <form-group-pki-provider v-if="wantsPkiProvider"
-      namespace="pki_provider"
-      :column-label="$i18n.t('PKI Provider')"
+                             :column-label="$i18n.t('PKI Provider')"
+                             namespace="pki_provider"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -117,6 +129,7 @@ import {
   FormGroupServerCertificatePath,
   FormGroupSsid
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -140,8 +153,6 @@ const components = {
   FormGroupSsid
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-android',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDeny.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDeny.vue
index 03d0eb169163..aa097df0db05 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDeny.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDeny.vue
@@ -1,52 +1,58 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -57,6 +63,7 @@ import {
   FormGroupOses,
   FormGroupRoleToApply
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -71,8 +78,6 @@ const components = {
   FormGroupRoleToApply
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-deny',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDpsk.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDpsk.vue
index 01fc6071ee38..66025fcb68b9 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDpsk.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeDpsk.vue
@@ -1,67 +1,77 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-ssid namespace="ssid"
-      :column-label="$i18n.t('SSID')"
+    <form-group-ssid :column-label="$i18n.t('SSID')"
+                     namespace="ssid"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
     <form-group-dpsk-use-local-password
-      namespace="dpsk_use_local_password"
       :column-label="$i18n.t('Reuse the local password for DPSK')"
       :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+      disabled-value="disabled"
+      enabled-value="enabled"
+      namespace="dpsk_use_local_password"
     />
 
-    <form-group-psk-size namespace="psk_size"
-      :column-label="$i18n.t('PSK length')"
-      :text="$i18n.t('This is the length of the PSK key you want to generate. The minimum length is eight characters.')"
+    <form-group-psk-size :column-label="$i18n.t('PSK length')"
+                         :text="$i18n.t('This is the length of the PSK key you want to generate. The minimum length is eight characters.')"
+                         disabled-value="disabled"
+                         enabled-value="enabled"
+                         namespace="psk_size"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -75,6 +85,7 @@ import {
   FormGroupRoleToApply,
   FormGroupSsid
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -92,8 +103,6 @@ const components = {
   FormGroupSsid
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-dpsk',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeGoogleWorkspaceChromebook.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeGoogleWorkspaceChromebook.vue
index 37b5d4379dc9..904ea7880646 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeGoogleWorkspaceChromebook.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeGoogleWorkspaceChromebook.vue
@@ -1,72 +1,78 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-   <form-group-non-compliance-security-event namespace="non_compliance_security_event"
-     :column-label="$i18n.t('Non compliance security event')"
-     :text="$i18n.t('Which security event should be raised when non compliance is detected.')"
-   />
+    <form-group-non-compliance-security-event :column-label="$i18n.t('Non compliance security event')"
+                                              :text="$i18n.t('Which security event should be raised when non compliance is detected.')"
+                                              namespace="non_compliance_security_event"
+    />
 
-    <form-group-user namespace="user"
-      :column-label="$i18n.t('User')"
-      :text="$i18n.t('User the service account will impersonate.')"
+    <form-group-user :column-label="$i18n.t('User')"
+                     :text="$i18n.t('User the service account will impersonate.')"
+                     namespace="user"
     />
 
-    <form-group-customer-id namespace="customerId"
-      :column-label="$i18n.t('Customer ID')"
-      :text="$i18n.t('Customer ID.')"
+    <form-group-customer-id :column-label="$i18n.t('Customer ID')"
+                            :text="$i18n.t('Customer ID.')"
+                            namespace="customerId"
     />
 
-    <form-group-service-account namespace="service_account"
-      :column-label="$i18n.t('Service Account JSON data')"
-      :text="$i18n.t('Service Account JSON data.')"
+    <form-group-service-account :column-label="$i18n.t('Service Account JSON data')"
+                                :text="$i18n.t('Service Account JSON data.')"
+                                namespace="service_account"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -83,6 +89,7 @@ import {
   FormGroupServiceAccount,
   FormGroupUser,
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -102,8 +109,6 @@ const components = {
   FormGroupUser,
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-accept',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeIntune.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeIntune.vue
index 9d5bf6275b0e..daa6595ab27d 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeIntune.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeIntune.vue
@@ -1,101 +1,107 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-application-identifier namespace="applicationID"
-      :column-label="$i18n.t('Application ID')"
+    <form-group-application-identifier :column-label="$i18n.t('Application ID')"
+                                       namespace="applicationID"
     />
 
-    <form-group-application-secret namespace="applicationSecret"
-      :column-label="$i18n.t('Application Secret')"
+    <form-group-application-secret :column-label="$i18n.t('Application Secret')"
+                                   namespace="applicationSecret"
     />
 
-    <form-group-tenant-identifier namespace="tenantID"
-      :column-label="$i18n.t('Tenant ID')"
+    <form-group-tenant-identifier :column-label="$i18n.t('Tenant ID')"
+                                  namespace="tenantID"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+    <form-group-port :column-label="$i18n.t('Port')"
+                     namespace="port"
     />
 
-    <form-group-protocol namespace="protocol"
-      :column-label="$i18n.t('Protocol')"
+    <form-group-protocol :column-label="$i18n.t('Protocol')"
+                         namespace="protocol"
     />
 
-    <form-group-login-url namespace="loginUrl"
-      :column-label="$i18n.t('Login URL')"
+    <form-group-login-url :column-label="$i18n.t('Login URL')"
+                          namespace="loginUrl"
     />
 
-    <form-group-android-agent-download-uri namespace="android_agent_download_uri"
-      :column-label="$i18n.t('Android agent download URI')"
+    <form-group-android-agent-download-uri :column-label="$i18n.t('Android agent download URI')"
+                                           namespace="android_agent_download_uri"
     />
 
-    <form-group-ios-agent-download-uri namespace="ios_agent_download_uri"
-      :column-label="$i18n.t('IOS agent download URI')"
+    <form-group-ios-agent-download-uri :column-label="$i18n.t('IOS agent download URI')"
+                                       namespace="ios_agent_download_uri"
     />
 
-    <form-group-windows-agent-download-uri namespace="windows_agent_download_uri"
-      :column-label="$i18n.t('Windows agent download URI')"
+    <form-group-windows-agent-download-uri :column-label="$i18n.t('Windows agent download URI')"
+                                           namespace="windows_agent_download_uri"
     />
 
-    <form-group-mac-osx-agent-download-uri namespace="mac_osx_agent_download_uri"
-      :column-label="$i18n.t('Mac OSX agent download URI')"
+    <form-group-mac-osx-agent-download-uri :column-label="$i18n.t('Mac OSX agent download URI')"
+                                           namespace="mac_osx_agent_download_uri"
     />
 
-    <form-group-domains namespace="domains"
-      :column-label="$i18n.t('Authorized domains')"
-      :text="$i18n.t('A comma-separated list of domains that will be resolved with the correct IP addresses.')"
+    <form-group-domains :column-label="$i18n.t('Authorized domains')"
+                        :text="$i18n.t('A comma-separated list of domains that will be resolved with the correct IP addresses.')"
+                        namespace="domains"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAndroidAgentDownloadUri,
   FormGroupApplicationIdentifier,
@@ -118,6 +124,7 @@ import {
   FormGroupTenantIdentifier,
   FormGroupWindowsAgentDownloadUri
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -144,8 +151,6 @@ const components = {
   FormGroupWindowsAgentDownloadUri
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-intune',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeJamf.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeJamf.vue
index 366941c4b280..517608c5ad37 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeJamf.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeJamf.vue
@@ -1,89 +1,103 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-sync-pid namespace="sync_pid"
-      :column-label="$i18n.t('Sync PID')"
-      :text="$i18n.t('Whether or not the PID (username) should be synchronized from the provisioner to PacketFence.')"
+    <form-group-sync-pid :column-label="$i18n.t('Sync PID')"
+                         :text="$i18n.t('Whether or not the PID (username) should be synchronized from the provisioner to PacketFence.')"
+                         disabled-value="disabled"
+                         enabled-value="enabled"
+                         namespace="sync_pid"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+    <form-group-port :column-label="$i18n.t('Port')"
+                     namespace="port"
     />
 
-    <form-group-protocol namespace="protocol"
-      :column-label="$i18n.t('Protocol')"
+    <form-group-protocol :column-label="$i18n.t('Protocol')"
+                         namespace="protocol"
     />
 
-    <form-group-api-username namespace="api_username"
-      :column-label="$i18n.t('API username')"
+    <form-group-api-username :column-label="$i18n.t('API username')"
+                             namespace="api_username"
     />
 
-    <form-group-api-password namespace="api_password"
-      :column-label="$i18n.t('API password')"
+    <form-group-api-password :column-label="$i18n.t('API password')"
+                             namespace="api_password"
     />
 
-    <form-group-device-type-detection namespace="device_type_detection"
-      :column-label="$i18n.t('Automatic device detection')"
+    <form-group-device-type-detection :column-label="$i18n.t('Automatic device detection')"
+                                      disabled-value="disabled"
+                                      enabled-value="enabled"
+                                      namespace="device_type_detection"
     />
 
-    <form-group-query-computers namespace="query_computers"
-      :column-label="$i18n.t('Query JAMF computers inventory')"
+    <form-group-query-computers :column-label="$i18n.t('Query JAMF computers inventory')"
+                                disabled-value="disabled"
+                                enabled-value="enabled"
+                                namespace="query_computers"
     />
 
-    <form-group-query-mobile-devices namespace="query_mobiledevices"
-      :column-label="$i18n.t('Query JAMF mobile devices inventory')"
+    <form-group-query-mobile-devices :column-label="$i18n.t('Query JAMF mobile devices inventory')"
+                                     disabled-value="disabled"
+                                     enabled-value="enabled"
+                                     namespace="query_mobiledevices"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApiPassword,
   FormGroupApiUsername,
@@ -103,6 +117,7 @@ import {
   FormGroupRoleToApply,
   FormGroupSyncPid
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -126,8 +141,6 @@ const components = {
   FormGroupSyncPid
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-jamf',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeKandji.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeKandji.vue
index 45669ccf7baa..5589f4ac45df 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeKandji.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeKandji.vue
@@ -1,74 +1,80 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioner name')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioner name')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-api-token namespace="api_token"
-      :column-label="$i18n.t('API token')"
+    <form-group-api-token :column-label="$i18n.t('API token')"
+                          namespace="api_token"
     />
 
-    <form-group-protocol namespace="protocol"
-      :column-label="$i18n.t('Protocol')"
+    <form-group-protocol :column-label="$i18n.t('Protocol')"
+                         namespace="protocol"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+    <form-group-port :column-label="$i18n.t('Port')"
+                     namespace="port"
     />
 
-    <form-group-enroll-url namespace="enroll_url"
-      :column-label="$i18n.t('Enroll URL')"
-      :text="$i18n.t('Which URL the endpoints should use to enroll. This should point to the Kandji self-service portal. When empty, it will default to the /enroll path on the protocol+host+port defined above which is Kandji\'s default')"
+    <form-group-enroll-url :column-label="$i18n.t('Enroll URL')"
+                           :text="$i18n.t('Which URL the endpoints should use to enroll. This should point to the Kandji self-service portal. When empty, it will default to the /enroll path on the protocol+host+port defined above which is Kandji\'s default')"
+                           namespace="enroll_url"
     />
 
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApiToken,
   FormGroupApplyRole,
@@ -84,6 +90,7 @@ import {
   FormGroupProtocol,
   FormGroupRoleToApply
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -103,8 +110,6 @@ const components = {
   FormGroupRoleToApply
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-kandji',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileconfig.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileconfig.vue
index 00f055ef93a2..02eec209a6cb 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileconfig.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileconfig.vue
@@ -1,137 +1,148 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
     <b-tabs>
       <base-form-tab :title="$i18n.t('Settings')" active>
-        <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Provisioning ID')"
-          :disabled="!isNew && !isClone"
+        <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                               :disabled="!isNew && !isClone"
+                               namespace="id"
         />
 
-        <form-group-description namespace="description"
-          :column-label="$i18n.t('Description')"
+        <form-group-description :column-label="$i18n.t('Description')"
+                                namespace="description"
         />
 
-        <form-group-enforce namespace="enforce"
-          :column-label="$i18n.t('Enforce')"
-          :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+        <form-group-enforce :column-label="$i18n.t('Enforce')"
+                            :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                            disabled-value="disabled"
+                            enabled-value="enabled"
+                            namespace="enforce"
         />
 
-        <form-group-auto-register namespace="autoregister"
-          :column-label="$i18n.t('Auto register')"
-          :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+        <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                                  :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                                  disabled-value="disabled"
+                                  enabled-value="enabled"
+                                  namespace="autoregister"
         />
 
-        <form-group-apply-role namespace="apply_role"
-          :column-label="$i18n.t('Apply role')"
-          :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+        <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                               :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                               disabled-value="disabled"
+                               enabled-value="enabled"
+                               namespace="apply_role"
         />
 
-        <form-group-role-to-apply namespace="role_to_apply"
-          :column-label="$i18n.t('Role to apply')"
-          :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+        <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                                  :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                                  namespace="role_to_apply"
         />
 
-        <form-group-category namespace="category"
-          :column-label="$i18n.t('Roles')"
-          :text="$i18n.t('Nodes with the selected roles will be affected.')"
+        <form-group-category :column-label="$i18n.t('Roles')"
+                             :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                             namespace="category"
         />
 
-        <form-group-ssid namespace="ssid"
-          :column-label="$i18n.t('SSID')"
+        <form-group-ssid :column-label="$i18n.t('SSID')"
+                         namespace="ssid"
         />
 
-        <form-group-broadcast namespace="broadcast"
-          :column-label="$i18n.t('Broadcast network')"
-          :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+        <form-group-broadcast :column-label="$i18n.t('Broadcast network')"
+                              :disabled-value="0"
+                              :enabled-value="1"
+                              :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+                              namespace="broadcast"
         />
 
-        <form-group-security-type namespace="security_type"
-          :column-label="$i18n.t('Security type')"
-          :text="$i18n.t('Select the type of security applied for your SSID.')"
+        <form-group-security-type :column-label="$i18n.t('Security type')"
+                                  :text="$i18n.t('Select the type of security applied for your SSID.')"
+                                  namespace="security_type"
         />
 
         <form-group-eap-type v-if="wantsEapType"
-          namespace="eap_type"
-          :column-label="$i18n.t('EAP type')"
-          :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                             :column-label="$i18n.t('EAP type')"
+                             :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                             namespace="eap_type"
         />
 
         <form-group-dpsk v-if="wantsDpsk"
-          namespace="dpsk"
-          :column-label="$i18n.t('Enable DPSK')"
-          :text="$i18n.t('Define if the PSK needs to be generated.')"
+                         :column-label="$i18n.t('Enable DPSK')"
+                         :text="$i8n.t('Define if the PSK needs to be generated.')"
+                         disabled-value="0"
+                         enabled-value="1"
+                         namespace="dpsk"
         />
 
         <form-group-dpsk-use-local-password v-if="wantsDpsk"
-          namespace="dpsk_use_local_password"
-          :column-label="$i18n.t('Reuse the local password for DPSK')"
-          :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                            :column-label="$i18n.t('Reuse the local password for DPSK')"
+                                            :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                            disabled-value="disabled"
+                                            enabled-value="enabled"
+                                            namespace="dpsk_use_local_password"
         />
 
         <form-group-passcode v-if="wantsPasscode"
-          namespace="passcode"
-          :column-label="$i18n.t('Wifi Key')"
+                             :column-label="$i18n.t('Wifi Key')"
+                             namespace="passcode"
         />
 
         <form-group-server-certificate-path v-if="wantsServerCertificatePath"
-          namespace="server_certificate_path"
-          :column-label="$i18n.t('RADIUS server certificate file')"
-          :title="$i18n.t('Upload RADIUS server certificate file')"
-          :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                            :column-label="$i18n.t('RADIUS server certificate file')"
+                                            :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                            :title="$i18n.t('Upload RADIUS server certificate file')"
+                                            namespace="server_certificate_path"
         />
 
         <form-group-ca-cert-path v-if="wantsServerRadiusCaPath"
-          namespace="ca_cert_path"
-          :column-label="$i18n.t('RADIUS server CA file')"
-          :title="$i18n.t('Upload RADIUS server CA file')"
-          :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                                 :column-label="$i18n.t('RADIUS server CA file')"
+                                 :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                                 :title="$i18n.t('Upload RADIUS server CA file')"
+                                 namespace="ca_cert_path"
         />
 
         <form-group-pki-provider v-if="wantsPkiProvider"
-          namespace="pki_provider"
-          :column-label="$i18n.t('PKI Provider')"
+                                 :column-label="$i18n.t('PKI Provider')"
+                                 namespace="pki_provider"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Signing')">
-        <form-group-can-sign-profile namespace="can_sign_profile"
-          :column-label="$i18n.t('Sign Profile')"
+        <form-group-can-sign-profile :column-label="$i18n.t('Sign Profile')"
+                                     disabled-value="0"
+                                     enabled-value="1"
+                                     namespace="can_sign_profile"
         />
 
-        <form-group-certificate namespace="certificate"
-          :column-label="$i18n.t('The certificate for signing profile')"
-          :text="$i18n.t('The certificate for signing in PEM format.')"
+        <form-group-certificate :column-label="$i18n.t('The certificate for signing profile')"
+                                :text="$i18n.t('The certificate for signing in PEM format.')"
+                                namespace="certificate"
         />
 
-        <form-group-private-key namespace="private_key"
-          :column-label="$i18n.t('The private key for signing profile')"
-          :text="$i18n.t('The private key for signing in PEM format.')"
+        <form-group-private-key :column-label="$i18n.t('The private key for signing profile')"
+                                :text="$i18n.t('The private key for signing in PEM format.')"
+                                namespace="private_key"
         />
 
-        <form-group-cert-chain namespace="cert_chain"
-          :column-label="$i18n.t('The certificate chain for the signer certificate')"
-          :text="$i18n.t('The certificate chain of the signer certificate in PEM format.')"
+        <form-group-cert-chain :column-label="$i18n.t('The certificate chain for the signer certificate')"
+                               :text="$i18n.t('The certificate chain of the signer certificate in PEM format.')"
+                               namespace="cert_chain"
         />
       </base-form-tab>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import {
-  BaseForm,
-  BaseFormTab
-} from '@/components/new/'
+import {BaseForm, BaseFormTab} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
   FormGroupBroadcast,
   FormGroupCaCertPath,
-  FormGroupCategory,
   FormGroupCanSignProfile,
+  FormGroupCategory,
   FormGroupCertChain,
   FormGroupCertificate,
   FormGroupDescription,
@@ -148,6 +159,7 @@ import {
   FormGroupServerCertificatePath,
   FormGroupSsid
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -176,8 +188,6 @@ const components = {
   FormGroupSsid
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-mobileconfig',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileiron.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileiron.vue
index 237d1fec1ef4..35e9bac95a03 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileiron.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeMobileiron.vue
@@ -1,84 +1,90 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-username namespace="username"
-      :column-label="$i18n.t('Username')"
+    <form-group-username :column-label="$i18n.t('Username')"
+                         namespace="username"
     />
 
-    <form-group-password namespace="password"
-      :column-label="$i18n.t('Client Secret')"
+    <form-group-password :column-label="$i18n.t('Client Secret')"
+                         namespace="password"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-android-download-uri namespace="android_download_uri"
-      :column-label="$i18n.t('Android download URI')"
+    <form-group-android-download-uri :column-label="$i18n.t('Android download URI')"
+                                     namespace="android_download_uri"
     />
 
-    <form-group-ios-download-uri namespace="ios_download_uri"
-      :column-label="$i18n.t('IOS download URI')"
+    <form-group-ios-download-uri :column-label="$i18n.t('IOS download URI')"
+                                 namespace="ios_download_uri"
     />
 
-    <form-group-windows-phone-download-uri namespace="windows_phone_download_uri"
-      :column-label="$i18n.t('Windows phone download URI')"
+    <form-group-windows-phone-download-uri :column-label="$i18n.t('Windows phone download URI')"
+                                           namespace="windows_phone_download_uri"
     />
 
-    <form-group-boarding-host namespace="boarding_host"
-      :column-label="$i18n.t('Boarding host')"
+    <form-group-boarding-host :column-label="$i18n.t('Boarding host')"
+                              namespace="boarding_host"
     />
 
-    <form-group-boarding-port namespace="boarding_port"
-      :column-label="$i18n.t('Boarding port')"
+    <form-group-boarding-port :column-label="$i18n.t('Boarding port')"
+                              namespace="boarding_port"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupAndroidDownloadUri,
   FormGroupApplyRole,
@@ -97,6 +103,7 @@ import {
   FormGroupUsername,
   FormGroupWindowsPhoneDownloadUri
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -119,8 +126,6 @@ const components = {
   FormGroupWindowsPhoneDownloadUri
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-mobileiron',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeSentinelone.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeSentinelone.vue
index b6e050308337..7ab2c014abc0 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeSentinelone.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeSentinelone.vue
@@ -1,80 +1,86 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-oses namespace="oses"
-      :column-label="$i18n.t('OS')"
-      :text="$i18n.t('Nodes with the selected OS will be affected.')"
+    <form-group-oses :column-label="$i18n.t('OS')"
+                     :text="$i18n.t('Nodes with the selected OS will be affected.')"
+                     namespace="oses"
     />
 
-    <form-group-host namespace="host"
-      :column-label="$i18n.t('Host')"
+    <form-group-host :column-label="$i18n.t('Host')"
+                     namespace="host"
     />
 
-    <form-group-port namespace="port"
-      :column-label="$i18n.t('Port')"
+    <form-group-port :column-label="$i18n.t('Port')"
+                     namespace="port"
     />
 
-    <form-group-protocol namespace="protocol"
-      :column-label="$i18n.t('Protocol')"
+    <form-group-protocol :column-label="$i18n.t('Protocol')"
+                         namespace="protocol"
     />
 
-    <form-group-api-username namespace="api_username"
-      :column-label="$i18n.t('API username')"
+    <form-group-api-username :column-label="$i18n.t('API username')"
+                             namespace="api_username"
     />
 
-    <form-group-api-password namespace="api_password"
-      :column-label="$i18n.t('API password')"
+    <form-group-api-password :column-label="$i18n.t('API password')"
+                             namespace="api_password"
     />
 
-    <form-group-windows-agent-download-uri namespace="windows_agent_download_uri"
-      :column-label="$i18n.t('Windows agent download URI')"
+    <form-group-windows-agent-download-uri :column-label="$i18n.t('Windows agent download URI')"
+                                           namespace="windows_agent_download_uri"
     />
 
-    <form-group-mac-osx-agent-download-uri namespace="mac_osx_agent_download_uri"
-      :column-label="$i18n.t('Mac OSX agent download URI')"
+    <form-group-mac-osx-agent-download-uri :column-label="$i18n.t('Mac OSX agent download URI')"
+                                           namespace="mac_osx_agent_download_uri"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApiPassword,
   FormGroupApiUsername,
@@ -92,6 +98,7 @@ import {
   FormGroupRoleToApply,
   FormGroupWindowsAgentDownloadUri
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -113,8 +120,6 @@ const components = {
   FormGroupWindowsAgentDownloadUri
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-sentinelone',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeWindows.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeWindows.vue
index 9552828ff9eb..9fb9ad522c71 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeWindows.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/FormTypeWindows.vue
@@ -1,103 +1,115 @@
 <template>
   <base-form
     :form="form"
+    :isLoading="isLoading"
     :meta="meta"
     :schema="schema"
-    :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Provisioning ID')"
-      :disabled="!isNew && !isClone"
+    <form-group-identifier :column-label="$i18n.t('Provisioning ID')"
+                           :disabled="!isNew && !isClone"
+                           namespace="id"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+    <form-group-description :column-label="$i18n.t('Description')"
+                            namespace="description"
     />
 
-    <form-group-enforce namespace="enforce"
-      :column-label="$i18n.t('Enforce')"
-      :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+    <form-group-enforce :column-label="$i18n.t('Enforce')"
+                        :text="$i18n.t('Whether or not the provisioner should be enforced. This will trigger checks to validate the device is compliant with the provisioner during RADIUS authentication and on the captive portal.')"
+                        disabled-value="disabled"
+                        enabled-value="enabled"
+                        namespace="enforce"
     />
 
-    <form-group-auto-register namespace="autoregister"
-      :column-label="$i18n.t('Auto register')"
-      :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+    <form-group-auto-register :column-label="$i18n.t('Auto register')"
+                              :text="$i18n.t('Whether or not devices should be automatically registered on the network if they are authorized in the provisioner.')"
+                              disabled-value="disabled"
+                              enabled-value="enabled"
+                              namespace="autoregister"
     />
 
-    <form-group-apply-role namespace="apply_role"
-      :column-label="$i18n.t('Apply role')"
-      :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+    <form-group-apply-role :column-label="$i18n.t('Apply role')"
+                           :text="$i18n.t('When enabled, this will apply the configured role to the endpoint if it is authorized in the provisioner.')"
+                           disabled-value="disabled"
+                           enabled-value="enabled"
+                           namespace="apply_role"
     />
 
-    <form-group-role-to-apply namespace="role_to_apply"
-      :column-label="$i18n.t('Role to apply')"
-      :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+    <form-group-role-to-apply :column-label="$i18n.t('Role to apply')"
+                              :text="$i18n.t(`When 'Apply role' is enabled, this defines the role to apply when the device is authorized with the provisioner.`)"
+                              namespace="role_to_apply"
     />
 
-    <form-group-category namespace="category"
-      :column-label="$i18n.t('Roles')"
-      :text="$i18n.t('Nodes with the selected roles will be affected.')"
+    <form-group-category :column-label="$i18n.t('Roles')"
+                         :text="$i18n.t('Nodes with the selected roles will be affected.')"
+                         namespace="category"
     />
 
-    <form-group-ssid namespace="ssid"
-      :column-label="$i18n.t('SSID')"
+    <form-group-ssid :column-label="$i18n.t('SSID')"
+                     namespace="ssid"
     />
 
-    <form-group-broadcast namespace="broadcast"
-      :column-label="$i18n.t('Broadcast network')"
-      :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+    <form-group-broadcast :column-label="$i18n.t('Broadcast network')"
+                          :disabled-value="0"
+                          :enabled-value="1"
+                          :text="$i18n.t('Disable this box if you are using a hidden SSID.')"
+                          namespace="broadcast"
     />
 
-    <form-group-security-type namespace="security_type"
-      :column-label="$i18n.t('Security type')"
-      :text="$i18n.t('Select the type of security applied for your SSID.')"
+    <form-group-security-type :column-label="$i18n.t('Security type')"
+                              :text="$i18n.t('Select the type of security applied for your SSID.')"
+                              namespace="security_type"
     />
 
     <form-group-eap-type v-if="wantsEapType"
-      namespace="eap_type"
-      :column-label="$i18n.t('EAP type')"
-      :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                         :column-label="$i18n.t('EAP type')"
+                         :text="$i18n.t('Select the EAP type of your SSID. Leave empty for no EAP.')"
+                         namespace="eap_type"
     />
 
     <form-group-dpsk v-if="wantsDpsk"
-      namespace="dpsk"
-      :column-label="$i18n.t('Enable DPSK')"
-      :text="$i18n.t('Define if the PSK needs to be generated.')"
+                     :column-label="$i18n.t('Enable DPSK')"
+                     :text="$i18n.t('Define if the PSK needs to be generated.')"
+                     disabled-value="0"
+                     enabled-value="1"
+                     namespace="dpsk"
     />
 
     <form-group-dpsk-use-local-password v-if="wantsDpsk"
-      namespace="dpsk_use_local_password"
-      :column-label="$i18n.t('Reuse the local password for DPSK')"
-      :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                        :column-label="$i18n.t('Reuse the local password for DPSK')"
+                                        :text="$i18n.t('When DPSK is enabled and a local account with a plaintext password exists for the user, then it will reuse this password instead of generating a new PSK. This feature will only work with local users that have a plaintext password entry.')"
+                                        disabled-value="disabled"
+                                        enabled-value="enabled"
+                                        namespace="dpsk_use_local_password"
     />
 
     <form-group-passcode v-if="wantsPasscode"
-      namespace="passcode"
-      :column-label="$i18n.t('Wifi Key')"
+                         :column-label="$i18n.t('Wifi Key')"
+                         namespace="passcode"
     />
 
     <form-group-server-certificate-path v-if="wantsServerCertificatePath"
-      namespace="server_certificate_path"
-      :column-label="$i18n.t('RADIUS server certificate file')"
-      :title="$i18n.t('Upload RADIUS server certificate file')"
-      :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                        :column-label="$i18n.t('RADIUS server certificate file')"
+                                        :text="$i18n.t('The path to the RADIUS server certificate.')"
+                                        :title="$i18n.t('Upload RADIUS server certificate file')"
+                                        namespace="server_certificate_path"
     />
 
     <form-group-ca-cert-path v-if="wantsServerRadiusCaPath"
-      namespace="ca_cert_path"
-      :column-label="$i18n.t('RADIUS server CA file')"
-      :title="$i18n.t('Upload RADIUS server CA file')"
-      :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                             :column-label="$i18n.t('RADIUS server CA file')"
+                             :text="$i18n.t('The path to the RADIUS server CA which signed the RADIUS server certificate.')"
+                             :title="$i18n.t('Upload RADIUS server CA file')"
+                             namespace="ca_cert_path"
     />
 
     <form-group-pki-provider v-if="wantsPkiProvider"
-      namespace="pki_provider"
-      :column-label="$i18n.t('PKI Provider')"
+                             :column-label="$i18n.t('PKI Provider')"
+                             namespace="pki_provider"
     />
   </base-form>
 </template>
 <script>
-import { BaseForm } from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import {
   FormGroupApplyRole,
   FormGroupAutoRegister,
@@ -117,6 +129,7 @@ import {
   FormGroupServerCertificatePath,
   FormGroupSsid
 } from './'
+import {useForm as setup, useFormProps as props} from '../_composables/useForm'
 
 const components = {
   BaseForm,
@@ -140,8 +153,6 @@ const components = {
   FormGroupSsid
 }
 
-import { useForm as setup, useFormProps as props } from '../_composables/useForm'
-
 // @vue/component
 export default {
   name: 'form-type-windows',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/index.js b/html/pfappserver/root/src/views/Configuration/provisioners/_components/index.js
index a573165ba24c..424bf4081081 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/index.js
@@ -1,4 +1,4 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
@@ -7,14 +7,10 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
+  BaseFormGroupSwitch,
   BaseFormGroupTextareaUpload,
-  BaseFormGroupToggleDisabledEnabled
 } from '@/components/new/'
-import {
-  BaseFormGroupOses,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn,
-  BaseFormGroupToggleZeroOneStringAsOffOn
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupOses} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -22,38 +18,32 @@ export {
   BaseViewCollectionItem                    as BaseView,
   BaseFormButtonBar                         as FormButtonBar,
 
-  BaseFormGroupInput                        as FormGroupAccessToken,
-  BaseFormGroupInput                        as FormGroupAgentDownloadUri,
-  BaseFormGroupInput                        as FormGroupAltAgentDownloadUri,
   BaseFormGroupInput                        as FormGroupAndroidAgentDownloadUri,
   BaseFormGroupInput                        as FormGroupAndroidDownloadUri,
   BaseFormGroupInputPassword                as FormGroupApiPassword,
   BaseFormGroupInputPassword                as FormGroupApiToken,
-  BaseFormGroupInput                        as FormGroupApiUri,
   BaseFormGroupInput                        as FormGroupApiUsername,
   BaseFormGroupInput                        as FormGroupApplicationIdentifier,
   BaseFormGroupInputPassword                as FormGroupApplicationSecret,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupApplyRole,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupAutoRegister,
+  BaseFormGroupSwitch                       as FormGroupApplyRole,
+  BaseFormGroupSwitch                       as FormGroupAutoRegister,
   BaseFormGroupInput                        as FormGroupBoardingHost,
   BaseFormGroupInputNumber                  as FormGroupBoardingPort,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupBroadcast,
+  BaseFormGroupSwitch                       as FormGroupBroadcast,
   BaseFormGroupFileUpload                   as FormGroupCaCertPath,
-  BaseFormGroupToggleZeroOneStringAsOffOn   as FormGroupCanSignProfile,
+  BaseFormGroupSwitch                       as FormGroupCanSignProfile,
   BaseFormGroupChosenMultiple               as FormGroupCategory,
   BaseFormGroupTextareaUpload               as FormGroupCertChain,
   BaseFormGroupTextareaUpload               as FormGroupCertificate,
-  BaseFormGroupInput                        as FormGroupClientIdentifier,
   BaseFormGroupInputPassword                as FormGroupClientSecret,
-  BaseFormGroupInputNumber                  as FormGroupCriticalIssuesThreshold,
   BaseFormGroupInput                        as FormGroupCustomerId,
   BaseFormGroupInput                        as FormGroupDescription,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupDeviceTypeDetection,
+  BaseFormGroupSwitch                       as FormGroupDeviceTypeDetection,
   BaseFormGroupInput                        as FormGroupDomains,
-  BaseFormGroupToggleZeroOneStringAsOffOn   as FormGroupDpsk,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupDpskUseLocalPassword,
+  BaseFormGroupSwitch                       as FormGroupDpsk,
+  BaseFormGroupSwitch                       as FormGroupDpskUseLocalPassword,
   BaseFormGroupChosenOne                    as FormGroupEapType,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupEnforce,
+  BaseFormGroupSwitch                       as FormGroupEnforce,
   BaseFormGroupInput                        as FormGroupEnrollUrl,
   BaseFormGroupInputNumber                  as FormGroupExpiresIn,
   BaseFormGroupInputNumber                  as FormGroupExpiresJitter,
@@ -61,7 +51,6 @@ export {
   BaseFormGroupInput                        as FormGroupIdentifier,
   BaseFormGroupInput                        as FormGroupIosAgentDownloadUri,
   BaseFormGroupInput                        as FormGroupIosDownloadUri,
-  BaseFormGroupInput                        as FormGroupLinuxAgentDownloadUri,
   BaseFormGroupInput                        as FormGroupLoginUrl,
   BaseFormGroupInput                        as FormGroupMacOsxAgentDownloadUri,
   BaseFormGroupChosenOne                    as FormGroupNonComplianceSecurityEvent,
@@ -73,17 +62,14 @@ export {
   BaseFormGroupTextareaUpload               as FormGroupPrivateKey,
   BaseFormGroupChosenOne                    as FormGroupProtocol,
   BaseFormGroupInputNumber                  as FormGroupPskSize,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupQueryComputers,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupQueryMobileDevices,
-  BaseFormGroupInput                        as FormGroupRefreshToken,
+  BaseFormGroupSwitch                       as FormGroupQueryComputers,
+  BaseFormGroupSwitch                       as FormGroupQueryMobileDevices,
   BaseFormGroupChosenOne                    as FormGroupRoleToApply,
   BaseFormGroupChosenOne                    as FormGroupSecurityType,
   BaseFormGroupFileUpload                   as FormGroupServerCertificatePath,
   BaseFormGroupTextareaUpload               as FormGroupServiceAccount,
   BaseFormGroupInput                        as FormGroupSsid,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupSyncPid,
-  BaseFormGroupInput                        as FormGroupTableForAgent,
-  BaseFormGroupInput                        as FormGroupTableForMac,
+  BaseFormGroupSwitch                       as FormGroupSyncPid,
   BaseFormGroupInput                        as FormGroupTenantCode,
   BaseFormGroupInput                        as FormGroupTenantIdentifier,
   BaseFormGroupInput                        as FormGroupUsername,

From 52e2380f3d6e15e02e2ae44784d630d2ace917b2 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 17:59:42 +0300
Subject: [PATCH 34/51] Change self services form to use switch UI component

---
 .../selfServices/_components/TheForm.vue      | 39 ++++++++++---------
 .../selfServices/_components/index.js         |  4 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheForm.vue
index 64c6b96cf1cc..d850719cb92b 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheForm.vue
@@ -8,60 +8,61 @@
     <b-tabs>
       <base-form-tab :title="$i18n.t('General')" active>
         <form-group-identifier namespace="id"
-          :column-label="$i18n.t('Profile Name')"
-          :disabled="!isNew && !isClone"
+                               :column-label="$i18n.t('Profile Name')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-description namespace="description"
-          :column-label="$i18n.t('Description')"
+                                :column-label="$i18n.t('Description')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Status Page')">
         <form-group-roles-allowed-to-unregister namespace="roles_allowed_to_unregister"
-          :column-label="$i18n.t('Allowed roles')"
-          :text="$i18n.t('The list of roles that are allowed to unregister devices using the self-service portal. Leaving this empty will allow all users to unregister their devices.')"
+                                                :column-label="$i18n.t('Allowed roles')"
+                                                :text="$i18n.t('The list of roles that are allowed to unregister devices using the self-service portal. Leaving this empty will allow all users to unregister their devices.')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('Self Service')">
         <form-group-device-registration-roles namespace="device_registration_roles"
-          :column-label="$i18n.t('Role to assign')"
-          :text="$i18n.t('The role to assign to devices registered from the self-service portal. If none is specified, the role of the registrant is used. If multiples are defined then the user will have to choose.')"
+                                              :column-label="$i18n.t('Role to assign')"
+                                              :text="$i18n.t('The role to assign to devices registered from the self-service portal. If none is specified, the role of the registrant is used. If multiples are defined then the user will have to choose.')"
         />
 
-        <form-group-device-registration-access-duration namespace="device_registration_access_duration"
+        <form-group-device-registration-access-duration
+          namespace="device_registration_access_duration"
           :column-label="$i18n.t('Access duration to assign')"
           :text="$i18n.t('The access duration to assign to devices registered from the self-service portal. If zero is specified, the access duration of the registrant is used.')"
         />
 
-        <form-group-device-registration-allowed-devices namespace="device_registration_allowed_devices"
+        <form-group-device-registration-allowed-devices
+          namespace="device_registration_allowed_devices"
           :column-label="$i18n.t('Allowed OS')"
           :text="$i18n.t('List of OS which will be allowed to be register via the self service portal.')"
         />
       </base-form-tab>
       <base-form-tab :title="$i18n.t('DPSK')">
         <form-group-dynamic-pre-shared-key namespace="dynamic_pre_shared_key"
-          :column-label="$i18n.t('Show the user WPA pre-shared key')"
-          :text="$i18n.t('Will display the WPA pre-shared key on the status page when a DPSK provisioner is configured.')"
+                                           :column-label="$i18n.t('Show the user WPA pre-shared key')"
+                                           :text="$i18n.t('Will display the WPA pre-shared key on the status page when a DPSK provisioner is configured.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
         />
       </base-form-tab>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm,
-  BaseFormTab
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm, BaseFormTab} from '@/components/new/'
 import schemaFn from '../schema'
 import {
-  FormGroupIdentifier,
   FormGroupDescription,
   FormGroupDeviceRegistrationAccessDuration,
   FormGroupDeviceRegistrationAllowedDevices,
   FormGroupDeviceRegistrationRoles,
-  FormGroupRolesAllowedToUnregister,
-  FormGroupDynamicPreSharedKey
+  FormGroupDynamicPreSharedKey,
+  FormGroupIdentifier,
+  FormGroupRolesAllowedToUnregister
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/index.js b/html/pfappserver/root/src/views/Configuration/selfServices/_components/index.js
index eaea7907ffc2..416ccfcc5f5f 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import {
   BaseFormGroupIntervalUnit,
@@ -22,7 +22,7 @@ export {
   BaseFormGroupOses                  as FormGroupDeviceRegistrationAllowedDevices,
   BaseFormGroupChosenMultiple        as FormGroupDeviceRegistrationRoles,
   BaseFormGroupChosenMultiple        as FormGroupRolesAllowedToUnregister,
-  BaseFormGroupToggleDisabledEnabled as FormGroupDynamicPreSharedKey,
+  BaseFormGroupSwitch                as FormGroupDynamicPreSharedKey,
   TheForm,
   TheView
 }

From 3e02a2aec512a77fd472672700a3d64d10321bcb Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 18:21:55 +0300
Subject: [PATCH 35/51] Change remaining network forms to use switch UI
 component

---
 .../networks/fencing/_components/TheForm.vue  |  67 ++++-----
 .../networks/fencing/_components/index.js     |   8 +-
 .../networks/inline/_components/TheForm.vue   |  26 ++--
 .../networks/inline/_components/index.js      |   8 +-
 .../layer2Networks/_components/TheForm.vue    |  71 +++++-----
 .../layer2Networks/_components/index.js       |   4 +-
 .../networks/parking/_components/TheForm.vue  |  30 ++--
 .../networks/parking/_components/index.js     |  20 ++-
 .../routedNetworks/_components/TheForm.vue    | 129 ++++++++++--------
 .../routedNetworks/_components/index.js       |  19 ++-
 10 files changed, 191 insertions(+), 191 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheForm.vue
index 76bf1365d98b..8c29ac9df03e 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheForm.vue
@@ -6,28 +6,30 @@
     :isLoading="isLoading"
   >
     <form-group-wait-for-redirect namespace="wait_for_redirect"
-      :column-label="$i18n.t('Wait for redirect')"
-      :text="$i18n.t(`How many seconds the webservice should wait before deassociating or reassigning VLAN. If we don't wait, the device may switch VLAN before it has a chance to load the redirection page.`)"
+                                  :column-label="$i18n.t('Wait for redirect')"
+                                  :text="$i18n.t(`How many seconds the webservice should wait before deassociating or reassigning VLAN. If we don't wait, the device may switch VLAN before it has a chance to load the redirection page.`)"
     />
 
     <form-group-range namespace="range"
-      :column-label="$i18n.t('Addresses ranges')"
-      :text="$i18n.t('Address ranges/CIDR blocks that PacketFence will monitor/detect/trap on. Gateway, network, and broadcast addresses are ignored. Comma-separated entries should be of the form\na.b.c.0/24\na.b.c.0-255\na.b.c.0-a.b.c.255\na.b.c.d')"
+                      :column-label="$i18n.t('Addresses ranges')"
+                      :text="$i18n.t('Address ranges/CIDR blocks that PacketFence will monitor/detect/trap on. Gateway, network, and broadcast addresses are ignored. Comma-separated entries should be of the form\na.b.c.0/24\na.b.c.0-255\na.b.c.0-a.b.c.255\na.b.c.d')"
     />
 
     <form-group-passthrough namespace="passthrough"
-      :column-label="$i18n.t('Passthrough')"
-      :text="$i18n.t('When enabled, PacketFence uses pfdns if you defined Passthroughs or Apache mod-proxy if you defined Proxy passthroughs to allow trapped devices to reach web sites. Modifying this parameter requires to restart pfdns and iptables to be fully effective.')"
+                            :column-label="$i18n.t('Passthrough')"
+                            :text="$i18n.t('When enabled, PacketFence uses pfdns if you defined Passthroughs or Apache mod-proxy if you defined Proxy passthroughs to allow trapped devices to reach web sites. Modifying this parameter requires to restart pfdns and iptables to be fully effective.')"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
 
     <form-group-passthroughs namespace="passthroughs"
-      :column-label="$i18n.t('Passthroughs Domains')"
-      :text="$i18n.t('Comma-separated list of domains to allow access from the registration VLAN.If no port is specified for the domain (ex: example.com), it opens TCP 80 and 443. You can specify a specific port to open (ex: example.com:tcp:25) which opens port 25 in TCP. When no protocol is specified (ex: example.com:25), this opens the port for both the UDP and TCP protocol. You can specify the same domain with a different port multiple times and they will be combined. The configuration parameter passthrough must be enabled for passthroughs to be effective. These passthroughs are only effective in registration networks, for passthroughs in isolation, use fencing.isolation_passthroughs.')"
+                             :column-label="$i18n.t('Passthroughs Domains')"
+                             :text="$i18n.t('Comma-separated list of domains to allow access from the registration VLAN.If no port is specified for the domain (ex: example.com), it opens TCP 80 and 443. You can specify a specific port to open (ex: example.com:tcp:25) which opens port 25 in TCP. When no protocol is specified (ex: example.com:25), this opens the port for both the UDP and TCP protocol. You can specify the same domain with a different port multiple times and they will be combined. The configuration parameter passthrough must be enabled for passthroughs to be effective. These passthroughs are only effective in registration networks, for passthroughs in isolation, use fencing.isolation_passthroughs.')"
     />
 
     <form-group-proxy-passthroughs namespace="proxy_passthroughs"
-      :column-label="$i18n.t('Proxy Passthroughs')"
-      :text="$i18n.t('Comma-separated list of domains to be used with apache passthroughs. The configuration parameter passthrough must be enabled for passthroughs to be effective.')"
+                                   :column-label="$i18n.t('Proxy Passthroughs')"
+                                   :text="$i18n.t('Comma-separated list of domains to be used with apache passthroughs. The configuration parameter passthrough must be enabled for passthroughs to be effective.')"
     />
     <b-row v-if="impliedProxyPassthroughs.length">
       <b-col cols="3"></b-col>
@@ -35,48 +37,52 @@
         <div class="alert alert-info mr-3">
           <p><strong>{{ $i18n.t('Built-in Proxy Passthroughs:') }}</strong></p>
           <span v-for="passthrough in impliedProxyPassthroughs" :key="passthrough"
-            class="badge badge-info mr-1">{{ passthrough }}</span>
+                class="badge badge-info mr-1">{{ passthrough }}</span>
         </div>
       </b-col>
     </b-row>
 
     <form-group-isolation-passthrough namespace="isolation_passthrough"
-      :column-label="$i18n.t('Isolation Passthrough')"
-      :text="$i18n.t('When enabled, PacketFence uses pfdns if you defined Isolation Passthroughs to allow trapped devices in isolation state to reach web sites. Modifying this parameter requires to restart pfdns and iptables to be fully effective.')"
+                                      :column-label="$i18n.t('Isolation Passthrough')"
+                                      :text="$i18n.t('When enabled, PacketFence uses pfdns if you defined Isolation Passthroughs to allow trapped devices in isolation state to reach web sites. Modifying this parameter requires to restart pfdns and iptables to be fully effective.')"
+                                      enabled-value="enabled"
+                                      disabled-value="disabled"
     />
 
     <form-group-isolation-passthroughs namespace="isolation_passthroughs"
-      :column-label="$i18n.t('Isolation Passthroughs Domains')"
-      :text="$i18n.t('Comma-separated list of domains to allow access from the isolation VLAN. If no port is specified for the domain (ex: example.com), it opens TCP 80 and 443.You can specify a specific port to open (ex: example.com:tcp:25) which opens port 25 in TCP. When no protocol is specified (ex: example.com:25), this opens the port for both the UDP and TCP protocol. You can specify the same domain with a different port multiple times and they will be combined. The configuration parameter isolation_passthrough must be enabled for passthroughs to be effective.')"
+                                       :column-label="$i18n.t('Isolation Passthroughs Domains')"
+                                       :text="$i18n.t('Comma-separated list of domains to allow access from the isolation VLAN. If no port is specified for the domain (ex: example.com), it opens TCP 80 and 443.You can specify a specific port to open (ex: example.com:tcp:25) which opens port 25 in TCP. When no protocol is specified (ex: example.com:25), this opens the port for both the UDP and TCP protocol. You can specify the same domain with a different port multiple times and they will be combined. The configuration parameter isolation_passthrough must be enabled for passthroughs to be effective.')"
     />
 
     <form-group-interception-proxy namespace="interception_proxy"
-      :column-label="$i18n.t('Proxy Interception')"
-      :text="$i18n.t('If enabled, we will intercept proxy request on the specified ports to forward to the captive portal.')"
+                                   :column-label="$i18n.t('Proxy Interception')"
+                                   :text="$i18n.t('If enabled, we will intercept proxy request on the specified ports to forward to the captive portal.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-interception-proxy-port namespace="interception_proxy_port"
-      :column-label="$i18n.t('Proxy Interception Port')"
-      :text="$i18n.t('Comma-separated list of port used by proxy interception.')"
+                                        :column-label="$i18n.t('Proxy Interception Port')"
+                                        :text="$i18n.t('Comma-separated list of port used by proxy interception.')"
     />
   </base-form>
 </template>
 <script>
-import { computed, toRefs } from '@vue/composition-api'
+import {computed, toRefs} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import {
-  BaseForm
-} from '@/components/new/'
-import {
-  FormGroupWaitForRedirect,
-  FormGroupRange,
+  FormGroupInterceptionProxy,
+  FormGroupInterceptionProxyPort,
+  FormGroupIsolationPassthrough,
+  FormGroupIsolationPassthroughs,
   FormGroupPassthrough,
   FormGroupPassthroughs,
   FormGroupProxyPassthroughs,
-  FormGroupIsolationPassthrough,
-  FormGroupIsolationPassthroughs,
-  FormGroupInterceptionProxy,
-  FormGroupInterceptionProxyPort
+  FormGroupRange,
+  FormGroupWaitForRedirect
 } from './'
+import {useNamespaceMetaImplied} from '@/composables/useMeta'
+import schemaFn from '../schema'
 
 const components = {
   BaseForm,
@@ -105,9 +111,6 @@ export const props = {
   }
 }
 
-import { useNamespaceMetaImplied } from '@/composables/useMeta'
-import schemaFn from '../schema'
-
 export const setup = (props) => {
 
   const {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/index.js
index d4b4853aff9e..042fd0011901 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupInput,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -13,12 +13,12 @@ export {
 
   BaseFormGroupInput                  as FormGroupWaitForRedirect,
   BaseFormGroupTextarea               as FormGroupRange,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPassthrough,
+  BaseFormGroupSwitch                 as FormGroupPassthrough,
   BaseFormGroupTextarea               as FormGroupPassthroughs,
   BaseFormGroupTextarea               as FormGroupProxyPassthroughs,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupIsolationPassthrough,
+  BaseFormGroupSwitch                 as FormGroupIsolationPassthrough,
   BaseFormGroupTextarea               as FormGroupIsolationPassthroughs,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupInterceptionProxy,
+  BaseFormGroupSwitch                 as FormGroupInterceptionProxy,
   BaseFormGroupTextarea               as FormGroupInterceptionProxyPort,
 
   BaseViewResource                    as BaseView,
diff --git a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheForm.vue
index b1c0ca1df445..1a5c462ad24c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheForm.vue
@@ -6,32 +6,28 @@
     :isLoading="isLoading"
   >
     <form-group-ports-redirect namespace="ports_redirect"
-      :column-label="$i18n.t('Ports redirect')"
-      :text="$i18n.t(`Ports to intercept and redirect for trapped and unregistered systems. Defaults to 80/tcp (HTTP), 443/tcp (HTTPS). Redirecting 443/tcp (SSL) will work, although users might get certificate errors if you didn't install a valid certificate or if you don't use DNS (although IP-based certificates supposedly exist). Redirecting 53/udp (DNS) seems to have issues and is also not recommended.`)"
+                               :column-label="$i18n.t('Ports redirect')"
+                               :text="$i18n.t(`Ports to intercept and redirect for trapped and unregistered systems. Defaults to 80/tcp (HTTP), 443/tcp (HTTPS). Redirecting 443/tcp (SSL) will work, although users might get certificate errors if you didn't install a valid certificate or if you don't use DNS (although IP-based certificates supposedly exist). Redirecting 53/udp (DNS) seems to have issues and is also not recommended.`)"
     />
 
     <form-group-should-reauth-on-vlan-change namespace="should_reauth_on_vlan_change"
-      :column-label="$i18n.t('Reauthenticate node')"
-      :text="$i18n.t('Should have to reauthenticate the node if vlan change.')"
+                                             :column-label="$i18n.t('Reauthenticate node')"
+                                             :text="$i18n.t('Should have to reauthenticate the node if vlan change.')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
     />
 
     <form-group-interface-snat namespace="interfaceSNAT"
-      :column-label="$i18n.t('SNAT Interface')"
-      :text="$i18n.t('Comma-separated list of interfaces used to SNAT inline level 2 traffic.')"
+                               :column-label="$i18n.t('SNAT Interface')"
+                               :text="$i18n.t('Comma-separated list of interfaces used to SNAT inline level 2 traffic.')"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
-import {
-  FormGroupPortsRedirect,
-  FormGroupShouldReauthOnVlanChange,
-  FormGroupInterfaceSnat
-} from './'
+import {FormGroupInterfaceSnat, FormGroupPortsRedirect, FormGroupShouldReauthOnVlanChange} from './'
 
 const components = {
   BaseForm,
diff --git a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/index.js
index 75f5e768689d..1556c0893351 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/index.js
@@ -2,9 +2,8 @@ import { BaseViewResource } from '../../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
-  BaseFormGroupInputNumber,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -12,11 +11,8 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAccounting,
-  BaseFormGroupInputNumber            as FormGroupLayer3AccountingSessionTimeout,
-  BaseFormGroupInputNumber            as FormGroupLayer3AccountingSyncInterval,
   BaseFormGroupInput                  as FormGroupPortsRedirect,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupShouldReauthOnVlanChange,
+  BaseFormGroupSwitch                 as FormGroupShouldReauthOnVlanChange,
   BaseFormGroupTextarea               as FormGroupInterfaceSnat,
 
   BaseViewResource                    as BaseView,
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheForm.vue
index cd3ed2c1614a..67f9a78c015b 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheForm.vue
@@ -6,80 +6,80 @@
     :isLoading="isLoading"
   >
     <form-group-identifier namespace="id"
-      disabled
-      :column-label="$i18n.t('Layer2 Network')"
+                           disabled
+                           :column-label="$i18n.t('Layer2 Network')"
     />
 
     <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
+                            :column-label="$i18n.t('Description')"
     />
 
     <form-group-algorithm namespace="algorithm"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Algorithm')"
+                          :disabled="isFakeMac"
+                          :column-label="$i18n.t('Algorithm')"
     />
 
     <form-group-pool-backend namespace="pool_backend"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('DHCP Pool Backend Type')"
+                             :disabled="isFakeMac"
+                             :column-label="$i18n.t('DHCP Pool Backend Type')"
     />
 
     <form-group-dhcp-start namespace="dhcp_start"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Starting IP Address')"
+                           :disabled="isFakeMac"
+                           :column-label="$i18n.t('Starting IP Address')"
     />
 
     <form-group-dhcp-end namespace="dhcp_end"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Ending IP Address')"
+                         :disabled="isFakeMac"
+                         :column-label="$i18n.t('Ending IP Address')"
     />
 
     <form-group-dhcp-default-lease-time namespace="dhcp_default_lease_time"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Default Lease Time')"
+                                        :disabled="isFakeMac"
+                                        :column-label="$i18n.t('Default Lease Time')"
     />
 
     <form-group-dhcp-max-lease-time namespace="dhcp_max_lease_time"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Max Lease Time')"
+                                    :disabled="isFakeMac"
+                                    :column-label="$i18n.t('Max Lease Time')"
     />
 
     <form-group-ip-reserved namespace="ip_reserved"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('IP Addresses reserved')"
-      :text="$i18n.t('Range like 192.168.0.1-192.168.0.20 and or IP like 192.168.0.22,192.168.0.24 will be excluded from the DHCP pool.')"
+                            :disabled="isFakeMac"
+                            :column-label="$i18n.t('IP Addresses reserved')"
+                            :text="$i18n.t('Range like 192.168.0.1-192.168.0.20 and or IP like 192.168.0.22,192.168.0.24 will be excluded from the DHCP pool.')"
     />
 
     <form-group-ip-assigned namespace="ip_assigned"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('IP Addresses assigned')"
-      :text="$i18n.t('List like 00:11:22:33:44:55:192.168.0.12,11:22:33:44:55:66:192.168.0.13.')"
+                            :disabled="isFakeMac"
+                            :column-label="$i18n.t('IP Addresses assigned')"
+                            :text="$i18n.t('List like 00:11:22:33:44:55:192.168.0.12,11:22:33:44:55:66:192.168.0.13.')"
     />
 
     <form-group-portal-fqdn namespace="portal_fqdn"
-      :disabled="isFakeMac"
-      :column-label="$i18n.t('Portal FQDN')"
-      :text="$i18n.t('Define the FQDN of the portal for this network. Leaving empty will use the FQDN of the PacketFence server.')"
+                            :disabled="isFakeMac"
+                            :column-label="$i18n.t('Portal FQDN')"
+                            :text="$i18n.t('Define the FQDN of the portal for this network. Leaving empty will use the FQDN of the PacketFence server.')"
     />
 
     <form-group-netflow-accounting-enabled v-if="isInline"
-      namespace="netflow_accounting_enabled"
-      :column-label="$i18n.t('Netflow Accounting Enabled')"
-      :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                           namespace="netflow_accounting_enabled"
+                                           :column-label="$i18n.t('Netflow Accounting Enabled')"
+                                           :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import {
-  BaseForm
-} from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAlgorithm,
   FormGroupDescription,
   FormGroupDhcpDefaultLeaseTime,
-  FormGroupDhcpMaxLeaseTime,
   FormGroupDhcpEnd,
+  FormGroupDhcpMaxLeaseTime,
   FormGroupDhcpStart,
   FormGroupIdentifier,
   FormGroupIpAssigned,
@@ -88,6 +88,8 @@ import {
   FormGroupPoolBackend,
   FormGroupPortalFqdn
 } from './'
+import {computed, toRefs} from '@vue/composition-api'
+import {useFormMetaSchema} from '@/composables/useMeta'
 
 const components = {
   BaseForm,
@@ -122,9 +124,6 @@ export const props = {
   }
 }
 
-import { computed, toRefs } from '@vue/composition-api'
-import { useFormMetaSchema } from '@/composables/useMeta'
-
 export const setup = (props) => {
 
   const {
@@ -137,12 +136,12 @@ export const setup = (props) => {
   const metaSchema = computed(() => useFormMetaSchema(meta, schema))
 
   const isInline = computed(() => {
-    const { type } = form.value || {}
+    const {type} = form.value || {}
     return type === 'inlinel2'
   })
 
   const isFakeMac = computed(() => {
-    const { fake_mac_enabled } = form.value || {}
+    const {fake_mac_enabled} = form.value || {}
     return fake_mac_enabled === '1'
   })
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/index.js
index e3c2595e021b..118ff80600f3 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/index.js
@@ -6,7 +6,7 @@ import {
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -24,7 +24,7 @@ export {
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupTextarea               as FormGroupIpAssigned,
   BaseFormGroupTextarea               as FormGroupIpReserved,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetflowAccountingEnabled,
+  BaseFormGroupSwitch                 as FormGroupNetflowAccountingEnabled,
   BaseFormGroupChosenOne              as FormGroupPoolBackend,
   BaseFormGroupInput                  as FormGroupPortalFqdn,
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheForm.vue
index d362bfe50e8b..6dcde9b597d3 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheForm.vue
@@ -6,37 +6,39 @@
     :isLoading="isLoading"
   >
     <form-group-lease-length namespace="lease_length"
-      :column-label="$i18n.t('Parking lease length')"
-      :text="$i18n.t('Lease length (in seconds) when a device is in parking.')"
+                             :column-label="$i18n.t('Parking lease length')"
+                             :text="$i18n.t('Lease length (in seconds) when a device is in parking.')"
     />
 
     <form-group-threshold namespace="threshold"
-      :column-label="$i18n.t('Parking threshold')"
-      :text="$i18n.t('The threshold (in seconds) after which a device will be placed in parking. A value of 0 deactivates the parking detection. The detection works by looking at the time in seconds a device has been in the registration role and comparing it with this threshold.')"
+                          :column-label="$i18n.t('Parking threshold')"
+                          :text="$i18n.t('The threshold (in seconds) after which a device will be placed in parking. A value of 0 deactivates the parking detection. The detection works by looking at the time in seconds a device has been in the registration role and comparing it with this threshold.')"
     />
 
     <form-group-place-in-dhcp-parking-group namespace="place_in_dhcp_parking_group"
-      :column-label="$i18n.t('Place in DHCP parking group')"
-      :text="$i18n.t('Place the device in the DHCP parking group when it is detected doing parking.')"
+                                            :column-label="$i18n.t('Place in DHCP parking group')"
+                                            :text="$i18n.t('Place the device in the DHCP parking group when it is detected doing parking.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
     />
 
     <form-group-show-parking-portal namespace="show_parking_portal"
-      :column-label="$i18n.t('Show parking portal')"
-      :text="$i18n.t('Show the parking portal to the device instead of the usual portal.')"
+                                    :column-label="$i18n.t('Show parking portal')"
+                                    :text="$i18n.t('Show the parking portal to the device instead of the usual portal.')"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupLeaseLength,
-  FormGroupThreshold,
   FormGroupPlaceInDhcpParkingGroup,
-  FormGroupShowParkingPortal
+  FormGroupShowParkingPortal,
+  FormGroupThreshold
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/index.js
index 78295db67267..5f326dec766b 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/index.js
@@ -1,21 +1,17 @@
-import { BaseViewResource } from '../../../_components/new/'
-import {
-  BaseFormButtonBar,
-  BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
-} from '@/components/new/'
+import {BaseViewResource} from '../../../_components/new/'
+import {BaseFormButtonBar, BaseFormGroupInput, BaseFormGroupSwitch} from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseFormButtonBar                   as FormButtonBar,
+  BaseFormButtonBar as FormButtonBar,
 
-  BaseFormGroupInput                  as FormGroupLeaseLength,
-  BaseFormGroupInput                  as FormGroupThreshold,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPlaceInDhcpParkingGroup,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupShowParkingPortal,
+  BaseFormGroupInput as FormGroupLeaseLength,
+  BaseFormGroupInput as FormGroupThreshold,
+  BaseFormGroupSwitch as FormGroupPlaceInDhcpParkingGroup,
+  BaseFormGroupSwitch as FormGroupShowParkingPortal,
 
-  BaseViewResource                    as BaseView,
+  BaseViewResource as BaseView,
   TheForm,
   TheView
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheForm.vue
index aad7c7a39891..152d1cceaa5f 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheForm.vue
@@ -8,52 +8,63 @@
     <b-tabs>
       <base-form-tab :title="$i18n.t('General')" active>
         <form-group-identifier namespace="id"
-          :column-label="(isType('other')) ? $i18n.t('IP Address') : $i18n.t('Routed Network')"
-          :disabled="!isNew && !isClone"
+                               :column-label="(isType('other')) ? $i18n.t('IP Address') : $i18n.t('Routed Network')"
+                               :disabled="!isNew && !isClone"
         />
 
         <form-group-netmask namespace="netmask"
-          :column-label="$i18n.t('Netmask')"
+                            :column-label="$i18n.t('Netmask')"
         />
 
         <form-group-description namespace="description"
-          :column-label="$i18n.t('Description')"
+                                :column-label="$i18n.t('Description')"
         />
 
         <form-group-type namespace="type"
-          :column-label="$i18n.t('Type')"
+                         :column-label="$i18n.t('Type')"
         />
 
         <form-group-nat-enabled v-show="isType('inlinel3')"
-          namespace="nat_enabled"
-          :column-label="$i18n.t('Enable NAT')"
+                                namespace="nat_enabled"
+                                :column-label="$i18n.t('Enable NAT')"
+                                :enabled-value="1"
+                                :disabled-value="0"
         />
 
         <form-group-nat-dns v-show="isType('inlinel3')"
-          namespace="nat_dns"
-          :column-label="$i18n.t('Enable DNS NAT')"
+                            namespace="nat_dns"
+                            :column-label="$i18n.t('Enable DNS NAT')"
+                            :enabled-value="1"
+                            :disabled-value="0"
         />
 
         <form-group-fake-mac-enabled v-show="isType('inlinel3')"
-          namespace="fake_mac_enabled"
-          :column-label="$i18n.t('Fake MAC Address')"
+                                     namespace="fake_mac_enabled"
+                                     :column-label="$i18n.t('Fake MAC Address')"
+                                     :enabled-value="1"
+                                     :disabled-value="0"
         />
 
         <form-group-coa v-show="isType('inlinel3')"
-          namespace="coa"
-          :column-label="$i18n.t('Enable CoA')"
-          :text="$i18n.t('Enabling this will send a CoA request to the equipment to reevaluate network access of endpoints.')"
+                        namespace="coa"
+                        :column-label="$i18n.t('Enable CoA')"
+                        :text="$i18n.t('Enabling this will send a CoA request to the equipment to reevaluate network access of endpoints.')"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
         />
 
         <form-group-netflow-accounting-enabled v-show="isType('inlinel3')"
-          namespace="netflow_accounting_enabled"
-          :column-label="$i18n.t('Netflow Accounting Enabled')"
-          :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                               namespace="netflow_accounting_enabled"
+                                               :column-label="$i18n.t('Netflow Accounting Enabled')"
+                                               :text="$i18n.t('Enable Netflow on this network to enable accounting.')"
+                                               enabled-value="enabled"
+                                               disabled-value="disabled"
         />
       </base-form-tab>
-      <base-form-tab :title="$i18n.t('DHCP')" v-if="isType('vlan-isolation', 'vlan-registration', 'dns-enforcement', 'inlinel3')">
+      <base-form-tab :title="$i18n.t('DHCP')"
+                     v-if="isType('vlan-isolation', 'vlan-registration', 'dns-enforcement', 'inlinel3')">
         <b-form-group v-show="isFakeMacEnabled"
-          label-cols="3">
+                      label-cols="3">
           <div class="alert alert-warning mb-0">
             <strong>{{ $i18n.t('Note:') }}</strong>
             {{ $i18n.t('DHCP Server is disabled when Fake MAC Address is enabled.') }}
@@ -61,84 +72,84 @@
         </b-form-group>
 
         <form-group-dhcpd namespace="dhcpd"
-          :column-label="$i18n.t('DHCP Server')"
-          :disabled="isFakeMacEnabled"
+                          :column-label="$i18n.t('DHCP Server')"
+                          :disabled="isFakeMacEnabled"
+                          enabled-value="enabled"
+                          disabled-value="disabled"
         />
 
         <form-group-algorithm namespace="algorithm"
-          :column-label="$i18n.t('Algorithm')"
-          :disabled="isFakeMacEnabled"
+                              :column-label="$i18n.t('Algorithm')"
+                              :disabled="isFakeMacEnabled"
         />
 
         <form-group-pool-backend namespace="pool_backend"
-          :column-label="$i18n.t('DHCP Pool Backend Type')"
-          :disabled="isFakeMacEnabled"
+                                 :column-label="$i18n.t('DHCP Pool Backend Type')"
+                                 :disabled="isFakeMacEnabled"
         />
 
         <form-group-dhcp-start namespace="dhcp_start"
-          :column-label="$i18n.t('Starting IP Address')"
-          :disabled="isFakeMacEnabled"
+                               :column-label="$i18n.t('Starting IP Address')"
+                               :disabled="isFakeMacEnabled"
         />
 
         <form-group-dhcp-end namespace="dhcp_end"
-          :column-label="$i18n.t('Ending IP Address')"
-          :disabled="isFakeMacEnabled"
+                             :column-label="$i18n.t('Ending IP Address')"
+                             :disabled="isFakeMacEnabled"
         />
 
         <form-group-dhcp-default-lease-time namespace="dhcp_default_lease_time"
-          :column-label="$i18n.t('Default Lease Time')"
-          :disabled="isFakeMacEnabled"
+                                            :column-label="$i18n.t('Default Lease Time')"
+                                            :disabled="isFakeMacEnabled"
         />
 
         <form-group-dhcp-max-lease-time namespace="dhcp_max_lease_time"
-          :column-label="$i18n.t('Max Lease Time')"
-          :disabled="isFakeMacEnabled"
+                                        :column-label="$i18n.t('Max Lease Time')"
+                                        :disabled="isFakeMacEnabled"
         />
 
         <form-group-ip-reserved namespace="ip_reserved"
-          :column-label="$i18n.t('IP Addresses reserved')"
-          :text="$i18n.t('Range like 192.168.0.1-192.168.0.20 and or IP like 192.168.0.22,192.168.0.24 will be excluded from the DHCP pool.')"
-          :disabled="isFakeMacEnabled"
+                                :column-label="$i18n.t('IP Addresses reserved')"
+                                :text="$i18n.t('Range like 192.168.0.1-192.168.0.20 and or IP like 192.168.0.22,192.168.0.24 will be excluded from the DHCP pool.')"
+                                :disabled="isFakeMacEnabled"
         />
 
         <form-group-ip-assigned namespace="ip_assigned"
-          :column-label="$i18n.t('IP Addresses assigned')"
-          :text="$i18n.t('List like 00:11:22:33:44:55:192.168.0.12,11:22:33:44:55:66:192.168.0.13.')"
-          :disabled="isFakeMacEnabled"
+                                :column-label="$i18n.t('IP Addresses assigned')"
+                                :text="$i18n.t('List like 00:11:22:33:44:55:192.168.0.12,11:22:33:44:55:66:192.168.0.13.')"
+                                :disabled="isFakeMacEnabled"
         />
 
         <form-group-dns namespace="dns"
-          :column-label="$i18n.t('DNS Server')"
-          :text="$i18n.t('Should match the IP of a registration interface or the production DNS server(s) if the network is Inline L2/L3 (comma delimited list of IP addresses).')"
-          :disabled="isFakeMacEnabled"
+                        :column-label="$i18n.t('DNS Server')"
+                        :text="$i18n.t('Should match the IP of a registration interface or the production DNS server(s) if the network is Inline L2/L3 (comma delimited list of IP addresses).')"
+                        :disabled="isFakeMacEnabled"
         />
 
         <form-group-portal-fqdn namespace="portal_fqdn"
-          :column-label="$i18n.t('Portal FQDN')"
-          :text="$i18n.t('Define the FQDN of the portal for this network. Leaving empty will use the FQDN of the PacketFence server.')"
-          :disabled="isFakeMacEnabled"
+                                :column-label="$i18n.t('Portal FQDN')"
+                                :text="$i18n.t('Define the FQDN of the portal for this network. Leaving empty will use the FQDN of the PacketFence server.')"
+                                :disabled="isFakeMacEnabled"
         />
 
         <form-group-gateway namespace="gateway"
-          :column-label="$i18n.t('Client Gateway')"
-          :disabled="isFakeMacEnabled"
+                            :column-label="$i18n.t('Client Gateway')"
+                            :disabled="isFakeMacEnabled"
         />
       </base-form-tab>
-      <base-form-tab :title="$i18n.t('Routing')" v-if="isType('vlan-isolation', 'vlan-registration', 'dns-enforcement', 'inlinel3')">
+      <base-form-tab :title="$i18n.t('Routing')"
+                     v-if="isType('vlan-isolation', 'vlan-registration', 'dns-enforcement', 'inlinel3')">
         <form-group-next-hop namespace="next_hop"
-          :column-label="$i18n.t('Router IP')"
-          :text="$i18n.t('IP address of the router to reach this network.')"
+                             :column-label="$i18n.t('Router IP')"
+                             :text="$i18n.t('IP address of the router to reach this network.')"
         />
       </base-form-tab>
     </b-tabs>
   </base-form>
 </template>
 <script>
-import { computed, toRefs, watch } from '@vue/composition-api'
-import {
-  BaseForm,
-  BaseFormTab,
-} from '@/components/new/'
+import {computed, toRefs, watch} from '@vue/composition-api'
+import {BaseForm, BaseFormTab,} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAlgorithm,
@@ -155,8 +166,8 @@ import {
   FormGroupIdentifier,
   FormGroupIpAssigned,
   FormGroupIpReserved,
-  FormGroupNatEnabled,
   FormGroupNatDns,
+  FormGroupNatEnabled,
   FormGroupNetflowAccountingEnabled,
   FormGroupNetmask,
   FormGroupNextHop,
@@ -226,19 +237,19 @@ export const setup = (props) => {
   const schema = computed(() => schemaFn(props))
 
   const isFakeMacEnabled = computed(() => {
-    const { fake_mac_enabled } = form.value || {}
+    const {fake_mac_enabled} = form.value || {}
     return fake_mac_enabled === 1
   })
 
   const isType = (...types) => {
-    const { type } = form.value || {}
+    const {type} = form.value || {}
     return types.includes(type)
   }
 
   watch(
     () => form.value && form.value.type, // when `form.type` is mutated
     () => {
-      const { type } = form.value || {}
+      const {type} = form.value || {}
       if (type !== 'inlinel3') // and `type` is not 'inlinel3'
         form.value.fake_mac_enabled = 0 // disable `fake_mac_enabled`
       if (type === 'other') // and `type` is 'other'
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/index.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/index.js
index 8452755277ad..f8d97fafc26d 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/index.js
@@ -1,14 +1,11 @@
-import { BaseViewCollectionItem } from '../../../_components/new/'
+import {BaseViewCollectionItem} from '../../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
+  BaseFormGroupSwitch,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
 } from '@/components/new/'
-import {
-  BaseFormGroupToggleZeroOneIntegerAsOffOn
-} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -16,22 +13,22 @@ export {
   BaseFormButtonBar                         as FormButtonBar,
 
   BaseFormGroupChosenOne                    as FormGroupAlgorithm,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupCoa,
+  BaseFormGroupSwitch                       as FormGroupCoa,
   BaseFormGroupInput                        as FormGroupDescription,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupDhcpd,
+  BaseFormGroupSwitch                       as FormGroupDhcpd,
   BaseFormGroupInput                        as FormGroupDhcpDefaultLeaseTime,
   BaseFormGroupInput                        as FormGroupDhcpEnd,
   BaseFormGroupInput                        as FormGroupDhcpMaxLeaseTime,
   BaseFormGroupInput                        as FormGroupDhcpStart,
   BaseFormGroupInput                        as FormGroupDns,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupFakeMacEnabled,
+  BaseFormGroupSwitch                       as FormGroupFakeMacEnabled,
   BaseFormGroupInput                        as FormGroupGateway,
   BaseFormGroupInput                        as FormGroupIdentifier,
   BaseFormGroupTextarea                     as FormGroupIpAssigned,
   BaseFormGroupTextarea                     as FormGroupIpReserved,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupNatEnabled,
-  BaseFormGroupToggleZeroOneIntegerAsOffOn  as FormGroupNatDns,
-  BaseFormGroupToggleDisabledEnabled        as FormGroupNetflowAccountingEnabled,
+  BaseFormGroupSwitch                       as FormGroupNatEnabled,
+  BaseFormGroupSwitch                       as FormGroupNatDns,
+  BaseFormGroupSwitch                       as FormGroupNetflowAccountingEnabled,
   BaseFormGroupInput                        as FormGroupNetmask,
   BaseFormGroupInput                        as FormGroupNextHop,
   BaseFormGroupChosenOne                    as FormGroupPoolBackend,

From 73cab1257ee3a3d79e9af9c93acb33ea3d35f30d Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 18:32:22 +0300
Subject: [PATCH 36/51] Change SNMP form to use switch UI component

---
 .../snmpTraps/_components/TheForm.vue         | 28 +++++++++----------
 .../snmpTraps/_components/index.js            |  4 +--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheForm.vue
index f98414cc2535..307900f26078 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheForm.vue
@@ -6,37 +6,37 @@
     :isLoading="isLoading"
   >
     <form-group-bounce-duration namespace="bounce_duration"
-      :column-label="$i18n.t('Bounce duration')"
-      :text="$i18n.t('Delay to wait between the shut / no-shut on a port. Some OS need a higher value than others. Default should be reasonable for almost every OS but is too long for the usual proprietary OS.')"
+                                :column-label="$i18n.t('Bounce duration')"
+                                :text="$i18n.t('Delay to wait between the shut / no-shut on a port. Some OS need a higher value than others. Default should be reasonable for almost every OS but is too long for the usual proprietary OS.')"
     />
 
     <form-group-trap-limit namespace="trap_limit"
-      :column-label="$i18n.t('Trap limiting')"
-      :text="$i18n.t('Controls whether or not the trap limit feature is enabled. Trap limiting is a way to limit the damage done by malicious users or misbehaving switch that sends too many traps to PacketFence causing it to be overloaded. Trap limiting is controlled by the trap limit threshold and trap limit action parameters. Default is enabled.')"
+                           :column-label="$i18n.t('Trap limiting')"
+                           :text="$i18n.t('Controls whether or not the trap limit feature is enabled. Trap limiting is a way to limit the damage done by malicious users or misbehaving switch that sends too many traps to PacketFence causing it to be overloaded. Trap limiting is controlled by the trap limit threshold and trap limit action parameters. Default is enabled.')"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-trap-limit-threshold namespace="trap_limit_threshold"
-      :column-label="$i18n.t('Trap limiting threshold')"
-      :text="$i18n.t('Maximum number of SNMP traps that a switchport can send to PacketFence within a minute without being flagged as DoS. Defaults to 100.')"
+                                     :column-label="$i18n.t('Trap limiting threshold')"
+                                     :text="$i18n.t('Maximum number of SNMP traps that a switchport can send to PacketFence within a minute without being flagged as DoS. Defaults to 100.')"
     />
 
     <form-group-trap-limit-action namespace="trap_limit_action"
-      :column-label="$i18n.t('Trap limit action')"
-      :text="$i18n.t(`Action that PacketFence will take if the snmp_traps.trap_limit_threshold is reached. Defaults to none. Email will send an email every hour if the limit's still reached. shut will shut the port on the switch and will also send an email even if email is not specified.`)"
+                                  :column-label="$i18n.t('Trap limit action')"
+                                  :text="$i18n.t(`Action that PacketFence will take if the snmp_traps.trap_limit_threshold is reached. Defaults to none. Email will send an email every hour if the limit's still reached. shut will shut the port on the switch and will also send an email even if email is not specified.`)"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupBounceDuration,
   FormGroupTrapLimit,
-  FormGroupTrapLimitThreshold,
-  FormGroupTrapLimitAction
+  FormGroupTrapLimitAction,
+  FormGroupTrapLimitThreshold
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/index.js b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/index.js
index b6abdbd3162d..533577782fbe 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch
 } from '@/components/new/'
 import {
   BaseFormGroupIntervalUnit
@@ -15,7 +15,7 @@ export {
   BaseFormButtonBar                   as FormButtonBar,
 
   BaseFormGroupIntervalUnit           as FormGroupBounceDuration,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupTrapLimit,
+  BaseFormGroupSwitch                 as FormGroupTrapLimit,
   BaseFormGroupInput                  as FormGroupTrapLimitThreshold,
   BaseFormGroupChosenMultiple         as FormGroupTrapLimitAction,
 

From c734ba222de03b29c1e379add5d1d415fb6a3614 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 17 Jul 2023 18:41:08 +0300
Subject: [PATCH 37/51] Change floating devices form to use switch UI component

---
 .../Configuration/floatingDevices/_components/TheForm.vue     | 2 ++
 .../views/Configuration/floatingDevices/_components/index.js  | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
index 71f35894a846..80e418a8c4e1 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
@@ -26,6 +26,8 @@
       namespace="trunkPort"
       :column-label="$i18n.t('Trunk Port')"
       :text="$i18n.t('The port must be configured as a muti-vlan port.')"
+      enabled-value="yes"
+      disabled-value="no"
     />
 
     <form-group-tagged-vlan v-show="form.trunkPort === 'yes'"
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/index.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/index.js
index 773749ad94f5..1a5028297f0b 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/index.js
@@ -2,7 +2,7 @@ import { BaseViewCollectionItem } from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
-  BaseFormGroupToggleNoYes
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -14,7 +14,7 @@ export {
   BaseFormGroupInput        as FormGroupIdentifier,
   BaseFormGroupInput        as FormGroupIp,
   BaseFormGroupInput        as FormGroupPvid,
-  BaseFormGroupToggleNoYes  as FormGroupTrunkPort,
+  BaseFormGroupSwitch       as FormGroupTrunkPort,
   BaseFormGroupInput        as FormGroupTaggedVlan,
 
   TheForm,

From e3b97ddf2180e688c11c33bd0cac596a528571df Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:06:54 +0300
Subject: [PATCH 38/51] Change main configuration forms to use switch UI
 component

---
 .../advanced/_components/TheForm.vue          | 145 ++++++----
 .../advanced/_components/index.js             |  66 +++--
 .../alerting/_components/TheForm.vue          |  52 ++--
 .../alerting/_components/index.js             |   4 +-
 .../general/_components/TheForm.vue           |  24 +-
 .../general/_components/index.js              |   6 +-
 .../maintenanceTasks/_components/TheForm.vue  | 156 +++++------
 .../maintenanceTasks/_components/index.js     |  17 +-
 .../Configuration/monit/_components/index.js  |   4 +-
 .../services/_components/TheForm.vue          | 254 ++++++++++++------
 .../services/_components/index.js             |  82 +++---
 11 files changed, 456 insertions(+), 354 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue
index c331bbb94fb6..e9892f7036a6 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_components/TheForm.vue
@@ -6,68 +6,82 @@
     :isLoading="isLoading"
   >
     <form-group-language namespace="language"
-      :column-label="$i18n.t('Language of communication')"
-      :text="$i18n.t('Language choice for the communication with administrators.')"
+                         :column-label="$i18n.t('Language of communication')"
+                         :text="$i18n.t('Language choice for the communication with administrators.')"
     />
 
     <form-group-api-inactivity-timeout namespace="api_inactivity_timeout"
-      :column-label="$i18n.t('API inactivity timeout')"
-      :text="$i18n.t('The inactivity timeout of an API token. Requires to restart the api-frontend service to be fully effective.')"
+                                       :column-label="$i18n.t('API inactivity timeout')"
+                                       :text="$i18n.t('The inactivity timeout of an API token. Requires to restart the api-frontend service to be fully effective.')"
     />
 
     <form-group-api-max-expiration namespace="api_max_expiration"
-      :column-label="$i18n.t('API token max expiration')"
-      :text="$i18n.t('The maximum amount of time an API token can be valid. Requires to restart the api-frontend service to be fully effective.')"
+                                   :column-label="$i18n.t('API token max expiration')"
+                                   :text="$i18n.t('The maximum amount of time an API token can be valid. Requires to restart the api-frontend service to be fully effective.')"
     />
 
     <form-group-configurator namespace="configurator"
-      :column-label="$i18n.t('Configurator')"
-      :text="$i18n.t('Enable the Configurator and the Configurator API.')"
+                             :column-label="$i18n.t('Configurator')"
+                             :text="$i18n.t('Enable the Configurator and the Configurator API.')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-admin-csp-security-headers namespace="admin_csp_security_headers"
-      :column-label="$i18n.t('CSP headers for Admin')"
-      :text="$i18n.t('(Experimental) Enforce Content-Security-Policy (CSP) HTTP response header in admin interface.')"
+                                           :column-label="$i18n.t('CSP headers for Admin')"
+                                           :text="$i18n.t('(Experimental) Enforce Content-Security-Policy (CSP) HTTP response header in admin interface.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
     />
 
     <form-group-portal-csp-security-headers namespace="portal_csp_security_headers"
-      :column-label="$i18n.t('CSP headers for Captive portal')"
-      :text="$i18n.t('(Experimental) Enforce Content-Security-Policy (CSP) HTTP response header in captive portal interface.')"
+                                            :column-label="$i18n.t('CSP headers for Captive portal')"
+                                            :text="$i18n.t('(Experimental) Enforce Content-Security-Policy (CSP) HTTP response header in captive portal interface.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
     />
 
     <form-group-sso-on-access-reevaluation namespace="sso_on_access_reevaluation"
-      :column-label="$i18n.t('SSO on access reevaluation')"
-      :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on access reevaluation.')"
+                                           :column-label="$i18n.t('SSO on access reevaluation')"
+                                           :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on access reevaluation.')"
+                                           enabled-value="enabled"
+                                           disabled-value="disabled"
     />
 
     <form-group-scan-on-accounting namespace="scan_on_accounting"
-      :column-label="$i18n.t('Scan on accounting')"
-      :text="$i18n.t('Trigger scan engines on accounting.')"
+                                   :column-label="$i18n.t('Scan on accounting')"
+                                   :text="$i18n.t('Trigger scan engines on accounting.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-sso-on-accounting namespace="sso_on_accounting"
-      :column-label="$i18n.t('SSO on accounting')"
-      :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on accounting.')"
+                                  :column-label="$i18n.t('SSO on accounting')"
+                                  :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on accounting.')"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
 
     <form-group-sso-on-dhcp namespace="sso_on_dhcp"
-      :column-label="$i18n.t('SSO on DHCP')"
-      :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on dhcp.')"
+                            :column-label="$i18n.t('SSO on DHCP')"
+                            :text="$i18n.t('Trigger Single-Sign-On (Firewall SSO) on dhcp.')"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
 
     <form-group-hash-passwords namespace="hash_passwords"
-      :column-label="$i18n.t('Database passwords hashing method')"
-      :text="$i18n.t('The algorithm used to hash the passwords in the database. This will only affect newly created or reset passwords.')"
+                               :column-label="$i18n.t('Database passwords hashing method')"
+                               :text="$i18n.t('The algorithm used to hash the passwords in the database. This will only affect newly created or reset passwords.')"
     />
 
     <form-group-hashing-cost namespace="hashing_cost"
-      :column-label="$i18n.t('Hashing Cost')"
-      :text="$i18n.t('The cost factor to apply to the password hashing if applicable. Currently only applies to bcrypt.')"
+                             :column-label="$i18n.t('Hashing Cost')"
+                             :text="$i18n.t('The cost factor to apply to the password hashing if applicable. Currently only applies to bcrypt.')"
     />
 
     <form-group-ldap-attributes namespace="ldap_attributes"
-      :column-label="$i18n.t('LDAP Attributes')"
-      :text="$i18n.t('List of LDAP attributes that can be used in the sources configuration.')"
+                                :column-label="$i18n.t('LDAP Attributes')"
+                                :text="$i18n.t('List of LDAP attributes that can be used in the sources configuration.')"
     />
     <b-row v-if="impliedLdapAttributes.length">
       <b-col cols="3"></b-col>
@@ -75,78 +89,94 @@
         <div class="alert alert-info mr-3">
           <p><strong>{{ $i18n.t('Built-in LDAP Attributes:') }}</strong></p>
           <span v-for="ldapAttribute in impliedLdapAttributes" :key="ldapAttribute"
-            class="badge badge-info mr-1">{{ ldapAttribute }}</span>
+                class="badge badge-info mr-1">{{ ldapAttribute }}</span>
         </div>
       </b-col>
     </b-row>
 
     <form-group-pffilter-processes namespace="pffilter_processes"
-      :column-label="$i18n.t('PfFilter Processes')"
-      :text="$i18n.t('Amount of pffilter processes to start.')"
+                                   :column-label="$i18n.t('PfFilter Processes')"
+                                   :text="$i18n.t('Amount of pffilter processes to start.')"
     />
 
     <form-group-pfperl-api-processes namespace="pfperl_api_processes"
-      :column-label="$i18n.t('PfPerl API Processes')"
-      :text="$i18n.t('Amount of pfperl-api processes to start.')"
+                                     :column-label="$i18n.t('PfPerl API Processes')"
+                                     :text="$i18n.t('Amount of pfperl-api processes to start.')"
     />
 
     <form-group-pfperl-api-timeout namespace="pfperl_api_timeout"
-      :column-label="$i18n.t('PfPerl API Timeout')"
-      :text="$i18n.t('The timeout in seconds for an API request.')"
+                                   :column-label="$i18n.t('PfPerl API Timeout')"
+                                   :text="$i18n.t('The timeout in seconds for an API request.')"
     />
 
     <form-group-update-iplog-with-accounting namespace="update_iplog_with_accounting"
-      :column-label="$i18n.t('Update the iplog using the accounting')"
-      :text="$i18n.t('Use the information included in the accounting to update the iplog.')"
+                                             :column-label="$i18n.t('Update the iplog using the accounting')"
+                                             :text="$i18n.t('Use the information included in the accounting to update the iplog.')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
     />
 
-    <form-group-update-iplog-with-external-portal-requests namespace="update_iplog_with_external_portal_requests"
+    <form-group-update-iplog-with-external-portal-requests
+      namespace="update_iplog_with_external_portal_requests"
       :column-label="$i18n.t('Update the iplog using the external portal requests')"
       :text="$i18n.t('Use the information included in the external portal requests to update the iplog.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
-    <form-group-locationlog-close-on-accounting-stop namespace="locationlog_close_on_accounting_stop"
+    <form-group-locationlog-close-on-accounting-stop
+      namespace="locationlog_close_on_accounting_stop"
       :column-label="$i18n.t('Close locationlog on accounting stop')"
       :text="$i18n.t('Close the locationlog for a node on accounting stop.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <form-group-timing-stats-level namespace="timing_stats_level"
-      :column-label="$i18n.t('Stats timing level')"
-      :text="$i18n.t('Level of timing stats to keep - 0 is the lowest - 10 the highest amount to log. Do not change unless you know what you are doing')"
+                                   :column-label="$i18n.t('Stats timing level')"
+                                   :text="$i18n.t('Level of timing stats to keep - 0 is the lowest - 10 the highest amount to log. Do not change unless you know what you are doing')"
     />
 
-    <form-group-source-to-send-sms-when-creating-users namespace="source_to_send_sms_when_creating_users"
+    <form-group-source-to-send-sms-when-creating-users
+      namespace="source_to_send_sms_when_creating_users"
       :column-label="$i18n.t('SMS Source for sending user create messages')"
       :text="$i18n.t('The source to use to send an SMS when creating a user.')"
     />
 
     <form-group-multihost namespace="multihost"
-      :column-label="$i18n.t('Multihost')"
-      :text="$i18n.t('Ability to manage all active devices from a same switch port.')"
+                          :column-label="$i18n.t('Multihost')"
+                          :text="$i18n.t('Ability to manage all active devices from a same switch port.')"
+                          enabled-value="enabled"
+                          disabled-value="disabled"
     />
 
-    <form-group-active-directory-os-join-check-bypass namespace="active_directory_os_join_check_bypass"
+    <form-group-active-directory-os-join-check-bypass
+      namespace="active_directory_os_join_check_bypass"
       :column-label="$i18n.t('Disable OS AD join check')"
       :text="$i18n.t('Enable to bypass the operating system domain join verification.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <form-group-pfupdate-custom-script-path namespace="pfupdate_custom_script_path"
-      :column-label="$i18n.t('Path to a custom script called by pfupdate')"
-      :text="$i18n.t('Path to a custom script called by pfupdate if present.')"
+                                            :column-label="$i18n.t('Path to a custom script called by pfupdate')"
+                                            :text="$i18n.t('Path to a custom script called by pfupdate if present.')"
     />
 
     <form-group-netflow-on-all-networks namespace="netflow_on_all_networks"
-      :column-label="$i18n.t('NetFlow on all networks')"
-      :text="$i18n.t('Listen to NetFlow on all networks. Changing this requires to restart pfacct.')"
+                                        :column-label="$i18n.t('NetFlow on all networks')"
+                                        :text="$i18n.t('Listen to NetFlow on all networks. Changing this requires to restart pfacct.')"
+                                        enabled-value="enabled"
+                                        disabled-value="disabled"
     />
 
     <form-group-accounting-timebucket-size namespace="accounting_timebucket_size"
-      :column-label="$i18n.t('Accounting timebucket size')"
-      :text="$i18n.t('Accounting timebucket size. Changing this requires to restart pfacct.')"
+                                           :column-label="$i18n.t('Accounting timebucket size')"
+                                           :text="$i18n.t('Accounting timebucket size. Changing this requires to restart pfacct.')"
     />
 
     <form-group-openid-attributes namespace="openid_attributes"
-      :column-label="$i18n.t('OpenID Attributes')"
+                                  :column-label="$i18n.t('OpenID Attributes')"
     />
     <b-row v-if="impliedOpenIdAttributes.length">
       <b-col cols="3"></b-col>
@@ -154,16 +184,14 @@
         <div class="alert alert-info mr-3">
           <p><strong>{{ $i18n.t('Built-in OpenID Attributes:') }}</strong></p>
           <span v-for="openIdAttribute in impliedOpenIdAttributes" :key="openIdAttribute"
-            class="badge badge-info mr-1">{{ openIdAttribute }}</span>
+                class="badge badge-info mr-1">{{ openIdAttribute }}</span>
         </div>
       </b-col>
     </b-row>
   </base-form>
 </template>
 <script>
-import {
-  BaseForm
-} from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAccountingTimebucketSize,
@@ -172,8 +200,8 @@ import {
   FormGroupApiInactivityTimeout,
   FormGroupApiMaxExpiration,
   FormGroupConfigurator,
-  FormGroupHashPasswords,
   FormGroupHashingCost,
+  FormGroupHashPasswords,
   FormGroupLanguage,
   FormGroupLdapAttributes,
   FormGroupLocationlogCloseOnAccountingStop,
@@ -183,8 +211,8 @@ import {
   FormGroupPffilterProcesses,
   FormGroupPfperlApiProcesses,
   FormGroupPfperlApiTimeout,
-  FormGroupPortalCspSecurityHeaders,
   FormGroupPfupdateCustomScriptPath,
+  FormGroupPortalCspSecurityHeaders,
   FormGroupScanOnAccounting,
   FormGroupSourceToSendSmsWhenCreatingUsers,
   FormGroupSsoOnAccessReevaluation,
@@ -194,6 +222,8 @@ import {
   FormGroupUpdateIplogWithAccounting,
   FormGroupUpdateIplogWithExternalPortalRequests
 } from './'
+import {computed, toRefs} from '@vue/composition-api'
+import {useNamespaceMetaImplied} from '@/composables/useMeta'
 
 const components = {
   BaseForm,
@@ -240,9 +270,6 @@ export const props = {
   }
 }
 
-import { computed, toRefs } from '@vue/composition-api'
-import { useNamespaceMetaImplied } from '@/composables/useMeta'
-
 export const setup = (props) => {
 
   const {
diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_components/index.js b/html/pfappserver/root/src/views/Configuration/advanced/_components/index.js
index 8e4d50190797..d3f236fe83c7 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_components/index.js
@@ -1,51 +1,49 @@
-import { BaseViewResource } from '../../_components/new/'
+import {BaseViewResource} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
+  BaseFormGroupSwitch,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import BaseFormGroupOpenidAttributes from './BaseFormGroupOpenidAttributes'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseFormButtonBar                   as FormButtonBar,
+  BaseFormButtonBar as FormButtonBar,
 
-  BaseFormGroupIntervalUnit           as FormGroupAccountingTimebucketSize,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupActiveDirectoryOsJoinCheckBypass,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAdminCspSecurityHeaders,
-  BaseFormGroupIntervalUnit           as FormGroupApiInactivityTimeout,
-  BaseFormGroupIntervalUnit           as FormGroupApiMaxExpiration,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupConfigurator,
-  BaseFormGroupChosenOne              as FormGroupHashPasswords,
-  BaseFormGroupInput                  as FormGroupHashingCost,
-  BaseFormGroupChosenOne              as FormGroupLanguage,
-  BaseFormGroupTextarea               as FormGroupLdapAttributes,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupLocationlogCloseOnAccountingStop,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupMultihost,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetflowOnAllNetworks,
-  BaseFormGroupOpenidAttributes       as FormGroupOpenidAttributes,
-  BaseFormGroupInputNumber            as FormGroupPffilterProcesses,
-  BaseFormGroupInputNumber            as FormGroupPfperlApiProcesses,
-  BaseFormGroupInputNumber            as FormGroupPfperlApiTimeout,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPortalCspSecurityHeaders,
-  BaseFormGroupInput                  as FormGroupPfupdateCustomScriptPath,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupScanOnAccounting,
-  BaseFormGroupChosenOne              as FormGroupSourceToSendSmsWhenCreatingUsers,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSsoOnAccessReevaluation,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSsoOnAccounting,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSsoOnDhcp,
-  BaseFormGroupInputNumber            as FormGroupTimingStatsLevel,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUpdateIplogWithAccounting,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUpdateIplogWithExternalPortalRequests,
+  BaseFormGroupIntervalUnit as FormGroupAccountingTimebucketSize,
+  BaseFormGroupSwitch as FormGroupActiveDirectoryOsJoinCheckBypass,
+  BaseFormGroupSwitch as FormGroupAdminCspSecurityHeaders,
+  BaseFormGroupIntervalUnit as FormGroupApiInactivityTimeout,
+  BaseFormGroupIntervalUnit as FormGroupApiMaxExpiration,
+  BaseFormGroupSwitch as FormGroupConfigurator,
+  BaseFormGroupChosenOne as FormGroupHashPasswords,
+  BaseFormGroupInput as FormGroupHashingCost,
+  BaseFormGroupChosenOne as FormGroupLanguage,
+  BaseFormGroupTextarea as FormGroupLdapAttributes,
+  BaseFormGroupSwitch as FormGroupLocationlogCloseOnAccountingStop,
+  BaseFormGroupSwitch as FormGroupMultihost,
+  BaseFormGroupSwitch as FormGroupNetflowOnAllNetworks,
+  BaseFormGroupOpenidAttributes as FormGroupOpenidAttributes,
+  BaseFormGroupInputNumber as FormGroupPffilterProcesses,
+  BaseFormGroupInputNumber as FormGroupPfperlApiProcesses,
+  BaseFormGroupInputNumber as FormGroupPfperlApiTimeout,
+  BaseFormGroupSwitch as FormGroupPortalCspSecurityHeaders,
+  BaseFormGroupInput as FormGroupPfupdateCustomScriptPath,
+  BaseFormGroupSwitch as FormGroupScanOnAccounting,
+  BaseFormGroupChosenOne as FormGroupSourceToSendSmsWhenCreatingUsers,
+  BaseFormGroupSwitch as FormGroupSsoOnAccessReevaluation,
+  BaseFormGroupSwitch as FormGroupSsoOnAccounting,
+  BaseFormGroupSwitch as FormGroupSsoOnDhcp,
+  BaseFormGroupInputNumber as FormGroupTimingStatsLevel,
+  BaseFormGroupSwitch as FormGroupUpdateIplogWithAccounting,
+  BaseFormGroupSwitch as FormGroupUpdateIplogWithExternalPortalRequests,
 
-  BaseViewResource                    as BaseView,
+  BaseViewResource as BaseView,
   TheForm,
   TheView
 }
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/alerting/_components/TheForm.vue
index e15adcf7fa40..328aaf5f272d 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_components/TheForm.vue
@@ -6,66 +6,66 @@
     :isLoading="isLoading"
   >
     <form-group-email-addr namespace="emailaddr"
-      :column-label="$i18n.t('Recipients')"
-      :text="$i18n.t('Comma-separated list of email addresses to which notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message goes to.')"
+                           :column-label="$i18n.t('Recipients')"
+                           :text="$i18n.t('Comma-separated list of email addresses to which notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message goes to.')"
     />
 
     <form-group-from-addr namespace="fromaddr"
-      :column-label="$i18n.t('Sender')"
-      :text="$i18n.t('Email address from which notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message are sent. Empty means root@<server-domain-name>.')"
+                          :column-label="$i18n.t('Sender')"
+                          :text="$i18n.t('Email address from which notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message are sent. Empty means root@<server-domain-name>.')"
     />
 
     <form-group-smtp-server namespace="smtpserver"
-      :column-label="$i18n.t('SMTP server')"
-      :text="$i18n.t(`Server through which to send messages to the above emailaddr. The default is localhost - be sure you're running an SMTP host locally if you don't change it!`)"
+                            :column-label="$i18n.t('SMTP server')"
+                            :text="$i18n.t(`Server through which to send messages to the above emailaddr. The default is localhost - be sure you're running an SMTP host locally if you don't change it!`)"
     />
 
     <form-group-subject-prefix namespace="subjectprefix"
-      :column-label="$i18n.t('Subject prefix')"
-      :text="$i18n.t('Subject prefix for email notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message.')"
+                               :column-label="$i18n.t('Subject prefix')"
+                               :text="$i18n.t('Subject prefix for email notifications of rogue DHCP servers, violations with an action of email, or any other PacketFence-related message.')"
     />
 
     <form-group-smtp-encryption namespace="smtp_encryption"
-      :column-label="$i18n.t('SMTP encryption')"
-      :text="$i18n.t('Encryption style when connecting to the SMTP server.')"
+                                :column-label="$i18n.t('SMTP encryption')"
+                                :text="$i18n.t('Encryption style when connecting to the SMTP server.')"
     />
 
     <form-group-smtp-port namespace="smtp_port"
-      :column-label="$i18n.t('SMTP port')"
-      :text="$i18n.t('The port of the SMTP server. If the port is set to 0 then port is calculated by the encryption type. none: 25, ssl: 465, starttls: 587.')"
+                          :column-label="$i18n.t('SMTP port')"
+                          :text="$i18n.t('The port of the SMTP server. If the port is set to 0 then port is calculated by the encryption type. none: 25, ssl: 465, starttls: 587.')"
     />
 
     <form-group-smtp-username namespace="smtp_username"
-      :column-label="$i18n.t('SMTP username')"
-      :text="$i18n.t('The username used to connect to the SMTP server.')"
+                              :column-label="$i18n.t('SMTP username')"
+                              :text="$i18n.t('The username used to connect to the SMTP server.')"
     />
 
     <form-group-smtp-password namespace="smtp_password"
-      :column-label="$i18n.t('SMTP password')"
-      :text="$i18n.t('The password used to connect to the SMTP server.')"
+                              :column-label="$i18n.t('SMTP password')"
+                              :text="$i18n.t('The password used to connect to the SMTP server.')"
     />
 
     <form-group-smtp-verify-ssl namespace="smtp_verifyssl"
-      :column-label="$i18n.t('SMTP Check SSL')"
-      :text="$i18n.t('Verify SSL connection.')"
+                                :column-label="$i18n.t('SMTP Check SSL')"
+                                :text="$i18n.t('Verify SSL connection.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-smtp-timeout namespace="smtp_timeout"
-      :column-label="$i18n.t('SMTP timeout')"
-      :text="$i18n.t('The timeout in seconds for sending an email.')"
+                             :column-label="$i18n.t('SMTP timeout')"
+                             :text="$i18n.t('The timeout in seconds for sending an email.')"
     />
 
     <form-group-test-email-addr namespace="test_emailaddr"
-      :column-label="$i18n.t('SMTP test')"
-      :text="$i18n.t('Comma-delimited list of email address(es) to receive test message.')"
+                                :column-label="$i18n.t('SMTP test')"
+                                :text="$i18n.t('Comma-delimited list of email address(es) to receive test message.')"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupEmailAddr,
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_components/index.js b/html/pfappserver/root/src/views/Configuration/alerting/_components/index.js
index 74771c491505..dea9ab2fc5a0 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_components/index.js
@@ -6,7 +6,7 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupInputPassword,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupTestSmtp from './BaseFormGroupTestSmtp'
 import TheForm from './TheForm'
@@ -23,7 +23,7 @@ export {
   BaseFormGroupInput                  as FormGroupSmtpServer,
   BaseFormGroupInputNumber            as FormGroupSmtpTimeout,
   BaseFormGroupInput                  as FormGroupSmtpUsername,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSmtpVerifySsl,
+  BaseFormGroupSwitch                 as FormGroupSmtpVerifySsl,
   BaseFormGroupInput                  as FormGroupSubjectPrefix,
   BaseFormGroupTestSmtp               as FormGroupTestEmailAddr,
 
diff --git a/html/pfappserver/root/src/views/Configuration/general/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/general/_components/TheForm.vue
index d8064cfd6ee2..fee416f8c955 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/general/_components/TheForm.vue
@@ -6,18 +6,18 @@
     :isLoading="isLoading"
   >
     <form-group-domain namespace="domain"
-      :column-label="$i18n.t('Domain')"
-      :text="$i18n.t('Domain name of PacketFence system. Changing this requires to restart haproxy-portal.')"
+                       :column-label="$i18n.t('Domain')"
+                       :text="$i18n.t('Domain name of PacketFence system. Changing this requires to restart haproxy-portal.')"
     />
 
     <form-group-hostname namespace="hostname"
-      :column-label="$i18n.t('Hostname')"
-      :text="$i18n.t('Hostname of PacketFence system. This is concatenated with the domain in Apache rewriting rules and therefore must be resolvable by clients. Changing this requires to restart haproxy-portal.')"
+                         :column-label="$i18n.t('Hostname')"
+                         :text="$i18n.t('Hostname of PacketFence system. This is concatenated with the domain in Apache rewriting rules and therefore must be resolvable by clients. Changing this requires to restart haproxy-portal.')"
     />
 
     <form-group-dhcp-servers namespace="dhcpservers"
-      :column-label="$i18n.t('DHCP servers')"
-      :text="$i18n.t('Comma-separated list of DHCP servers.')"
+                             :column-label="$i18n.t('DHCP servers')"
+                             :text="$i18n.t('Comma-separated list of DHCP servers.')"
     />
 
     <form-group-timezone
@@ -27,17 +27,17 @@
     />
 
     <form-group-send-anonymous-stats namespace="send_anonymous_stats"
-      :column-label="$i18n.t('Send anonymous stats')"
-      :text="$i18n.t('Whether or not to send anonymous statistics on how PacketFence is used. Enabling this will help us prioritize the features you use.')"
+                                     :column-label="$i18n.t('Send anonymous stats')"
+                                     :text="$i18n.t('Whether or not to send anonymous statistics on how PacketFence is used. Enabling this will help us prioritize the features you use.')"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
 
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupDhcpServers,
diff --git a/html/pfappserver/root/src/views/Configuration/general/_components/index.js b/html/pfappserver/root/src/views/Configuration/general/_components/index.js
index 7fae51e575d7..011d8877554e 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/general/_components/index.js
@@ -4,18 +4,18 @@ import {
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseFormButtonBar       as FormButtonBar,
+  BaseFormButtonBar                   as FormButtonBar,
 
   BaseFormGroupTextarea               as FormGroupDhcpServers,
   BaseFormGroupInput                  as FormGroupDomain,
   BaseFormGroupInput                  as FormGroupHostname,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSendAnonymousStats,
+  BaseFormGroupSwitch                 as FormGroupSendAnonymousStats,
   BaseFormGroupChosenOne              as FormGroupTimezone,
 
   BaseViewResource        as BaseView,
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheForm.vue
index ad0a098d352b..643bc17d09d9 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheForm.vue
@@ -5,149 +5,153 @@
     :schema="schema"
     :isLoading="isLoading"
   >
-    <form-group-identifier namespace="id"
-      :column-label="$i18n.t('Maintenance Task Name')"
-      disabled
+    <form-group-status namespace="status"
+                       :column-label="$i18n.t('Status')"
+                       :text="$i18n.t('Whether or not this task is enabled.\nRequires a restart of pfcron to be effective.')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
-    <form-group-description namespace="description"
-      :column-label="$i18n.t('Description')"
-      disabled
+    <form-group-identifier namespace="id"
+                           :column-label="$i18n.t('Maintenance Task Name')"
+                           disabled
     />
 
-    <form-group-status namespace="status"
-      :column-label="$i18n.t('Status')"
-      :text="$i18n.t('Whether or not this task is enabled.\nRequires a restart of pfcron to be effective.')"
+    <form-group-description namespace="description"
+                            :column-label="$i18n.t('Description')"
+                            disabled
     />
 
     <form-group-schedule v-show="wants('schedule')"
-      namespace="schedule"
-      :column-label="$i18n.t('Schedule')"
-      :options="schedulesOptions"
-      taggable
+                         namespace="schedule"
+                         :column-label="$i18n.t('Schedule')"
+                         :options="schedulesOptions"
+                         taggable
     />
 
     <form-group-batch v-show="wants('batch')"
-      namespace="batch"
-      :column-label="$i18n.t('Batch')"
-      :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
+                      namespace="batch"
+                      :column-label="$i18n.t('Batch')"
+                      :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
     />
 
     <form-group-timeout v-show="wants('timeout')"
-      namespace="timeout"
-      :column-label="$i18n.t('Timeout')"
-      :text="$i18n.t('Maximum amount of time this task can run.')"
+                        namespace="timeout"
+                        :column-label="$i18n.t('Timeout')"
+                        :text="$i18n.t('Maximum amount of time this task can run.')"
     />
 
     <form-group-window v-show="wants('window')"
-      namespace="window"
-      :column-label="$i18n.t('Window')"
-      :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
+                       namespace="window"
+                       :column-label="$i18n.t('Window')"
+                       :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
     />
 
     <form-group-history-batch v-show="wants('history_batch')"
-      namespace="history_batch"
-      :column-label="$i18n.t('History Batch')"
-      :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
+                              namespace="history_batch"
+                              :column-label="$i18n.t('History Batch')"
+                              :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
     />
 
     <form-group-history-timeout v-show="wants('history_timeout')"
-      namespace="history_timeout"
-      :column-label="$i18n.t('History Timeout')"
-      :text="$i18n.t('Maximum amount of time this task can run.')"
+                                namespace="history_timeout"
+                                :column-label="$i18n.t('History Timeout')"
+                                :text="$i18n.t('Maximum amount of time this task can run.')"
     />
 
     <form-group-history-window v-show="wants('history_window')"
-      namespace="history_window"
-      :column-label="$i18n.t('History Window')"
-      :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
+                               namespace="history_window"
+                               :column-label="$i18n.t('History Window')"
+                               :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
     />
 
     <form-group-session-batch v-show="wants('session_batch')"
-      namespace="session_batch"
-      :column-label="$i18n.t('Session Batch')"
-      :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
+                              namespace="session_batch"
+                              :column-label="$i18n.t('Session Batch')"
+                              :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
     />
 
     <form-group-session-timeout v-show="wants('session_timeout')"
-      namespace="session_timeout"
-      :column-label="$i18n.t('Session Timeout')"
-      :text="$i18n.t('Maximum amount of time this task can run.')"
+                                namespace="session_timeout"
+                                :column-label="$i18n.t('Session Timeout')"
+                                :text="$i18n.t('Maximum amount of time this task can run.')"
     />
 
     <form-group-session-window v-show="wants('session_window')"
-      namespace="session_window"
-      :column-label="$i18n.t('Session Window')"
-      :text="$i18n.t('Window to keep a sesson open.')"
+                               namespace="session_window"
+                               :column-label="$i18n.t('Session Window')"
+                               :text="$i18n.t('Window to keep a sesson open.')"
     />
 
     <form-group-rotate v-show="wants('rotate')"
-      namespace="rotate"
-      :column-label="$i18n.t('Rotate')"
-      :text="$i18n.t(`Enable or disable ${logName} rotation (moving ${logName}_history records to ${logName}_archive)\nIf disabled, this task will delete from the ${logName}_history table rather than the ${logName}_archive.`)"
+                       namespace="rotate"
+                       :column-label="$i18n.t('Rotate')"
+                       :text="$i18n.t(`Enable or disable ${logName} rotation (moving ${logName}_history records to ${logName}_archive)\nIf disabled, this task will delete from the ${logName}_history table rather than the ${logName}_archive.`)"
     />
 
     <form-group-rotate-batch v-show="wants('rotate_batch')"
-      namespace="rotate_batch"
-      :column-label="$i18n.t('Rotate Batch')"
-      :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
+                             namespace="rotate_batch"
+                             :column-label="$i18n.t('Rotate Batch')"
+                             :text="$i18n.t('Amount of items that will be processed in each batch of this task. Batches are executed until there is no more items to process or until the timeout is reached.')"
     />
 
     <form-group-rotate-timeout v-show="wants('rotate_timeout')"
-      namespace="rotate_timeout"
-      :column-label="$i18n.t('Rotate Timeout')"
-      :text="$i18n.t('Maximum amount of time this task can run.')"
+                               namespace="rotate_timeout"
+                               :column-label="$i18n.t('Rotate Timeout')"
+                               :text="$i18n.t('Maximum amount of time this task can run.')"
     />
 
     <form-group-rotate-window v-show="wants('rotate_window')"
-      namespace="rotate_window"
-      :column-label="$i18n.t('Rotate Window')"
-      :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
+                              namespace="rotate_window"
+                              :column-label="$i18n.t('Rotate Window')"
+                              :text="$i18n.t('Window to apply the job to. In the case of a deletion, setting this to 7 days would delete affected data older than 7 days.')"
     />
 
     <form-group-unreg-window v-show="wants('unreg_window')"
-      namespace="unreg_window"
-      :column-label="$i18n.t('Unreg Window')"
-      :text="$i18n.t('How long can a registered node be inactive before it becomes unregistered.')"
+                             namespace="unreg_window"
+                             :column-label="$i18n.t('Unreg Window')"
+                             :text="$i18n.t('How long can a registered node be inactive before it becomes unregistered.')"
     />
 
     <form-group-delete-window v-show="wants('delete_window')"
-      namespace="delete_window"
-      :column-label="$i18n.t('Delete Window')"
-      :text="$i18n.t(`How long can an unregistered node be inactive before being deleted.\nThis shouldn't be used if you are using port-security.`)"
+                              namespace="delete_window"
+                              :column-label="$i18n.t('Delete Window')"
+                              :text="$i18n.t(`How long can an unregistered node be inactive before being deleted.\nThis shouldn't be used if you are using port-security.`)"
     />
 
     <form-group-delay v-show="wants('delay')"
-      namespace="delay"
-      :column-label="$i18n.t('Delay')"
-      :text="$i18n.t('Minimum gap before certificate expiration date (will the certificate expires in ...).')"
+                      namespace="delay"
+                      :column-label="$i18n.t('Delay')"
+                      :text="$i18n.t('Minimum gap before certificate expiration date (will the certificate expires in ...).')"
     />
 
     <form-group-certificates v-show="wants('certificates')"
-      namespace="certificates"
-      :column-label="$i18n.t('Certificates')"
-      :text="$i18n.t('SSL certificate(s) to monitor. Comma-separated list.')"
+                             namespace="certificates"
+                             :column-label="$i18n.t('Certificates')"
+                             :text="$i18n.t('SSL certificate(s) to monitor. Comma-separated list.')"
     />
 
     <form-group-process-switchranges v-show="wants('process_switchranges')"
-      namespace="process_switchranges"
-      :column-label="$i18n.t('Process switchranges')"
-      :text="$i18n.t('Whether or not a switch range should be expanded to process each of its IPs.')"
+                                     namespace="process_switchranges"
+                                     :column-label="$i18n.t('Process switchranges')"
+                                     :text="$i18n.t('Whether or not a switch range should be expanded to process each of its IPs.')"
+                                     enabled-value="Y"
+                                     disabled-value="N"
     />
 
     <form-group-voip v-show="wants('voip')"
-      namespace="voip"
-      :column-label="$i18n.t('Process switchranges')"
-      :text="$i18n.t('Whether or not the VoIP devices should be handled by this maintenance task.')"
+                     namespace="voip"
+                     :column-label="$i18n.t('Process switchranges')"
+                     :text="$i18n.t('Whether or not the VoIP devices should be handled by this maintenance task.')"
+                     enabled-value="enabled"
+                     disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed, toRefs } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
-import { pfSchedulesList as schedulesOptions } from '@/globals/pfSchedules'
+import {computed, toRefs} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
+import {pfSchedulesList as schedulesOptions} from '@/globals/pfSchedules'
 import schemaFn from '../schema'
 import {
   FormGroupBatch,
@@ -159,12 +163,12 @@ import {
   FormGroupHistoryTimeout,
   FormGroupHistoryWindow,
   FormGroupIdentifier,
-  FormGroupSchedule,
   FormGroupProcessSwitchranges,
   FormGroupRotate,
   FormGroupRotateBatch,
   FormGroupRotateTimeout,
   FormGroupRotateWindow,
+  FormGroupSchedule,
   FormGroupSessionBatch,
   FormGroupSessionTimeout,
   FormGroupSessionWindow,
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/index.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/index.js
index 5bee0a5b120c..69968d740ad6 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/index.js
@@ -1,16 +1,13 @@
-import { BaseViewCollectionItem } from '../../_components/new/'
+import {BaseViewCollectionItem} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupChosenOne,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
+  BaseFormGroupSwitch,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupToggleNY
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 import ToggleStatus from './ToggleStatus'
@@ -29,18 +26,18 @@ export {
   BaseFormGroupIntervalUnit           as FormGroupHistoryWindow,
   BaseFormGroupInput                  as FormGroupIdentifier,
   BaseFormGroupChosenOne              as FormGroupSchedule,
-  BaseFormGroupToggleNY               as FormGroupProcessSwitchranges,
-  BaseFormGroupToggleNY               as FormGroupRotate,
+  BaseFormGroupSwitch                 as FormGroupProcessSwitchranges,
+  BaseFormGroupSwitch                 as FormGroupRotate,
   BaseFormGroupInputNumber            as FormGroupRotateBatch,
   BaseFormGroupIntervalUnit           as FormGroupRotateTimeout,
   BaseFormGroupIntervalUnit           as FormGroupRotateWindow,
   BaseFormGroupInputNumber            as FormGroupSessionBatch,
   BaseFormGroupIntervalUnit           as FormGroupSessionTimeout,
   BaseFormGroupIntervalUnit           as FormGroupSessionWindow,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupStatus,
+  BaseFormGroupSwitch                 as FormGroupStatus,
   BaseFormGroupIntervalUnit           as FormGroupTimeout,
   BaseFormGroupIntervalUnit           as FormGroupUnregWindow,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupVoip,
+  BaseFormGroupSwitch                 as FormGroupVoip,
   BaseFormGroupIntervalUnit           as FormGroupWindow,
 
   TheForm,
diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/index.js b/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
index 4847957ad35c..23b7031c7bc2 100644
--- a/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupInput,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -15,7 +15,7 @@ export {
   BaseFormGroupTextarea               as FormGroupAlertEmailTo,
   BaseFormGroupInput                  as FormGroupConfigurations,
   BaseFormGroupInput                  as FormGroupMailserver,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupStatus,
+  BaseFormGroupSwitch                 as FormGroupStatus,
   BaseFormGroupInput                  as FormGroupSubjectPrefix,
 
   BaseViewResource as BaseView,
diff --git a/html/pfappserver/root/src/views/Configuration/services/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/services/_components/TheForm.vue
index f689992e91a1..0e2545597120 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/services/_components/TheForm.vue
@@ -6,216 +6,292 @@
     :isLoading="isLoading"
   >
     <form-group-api-frontend namespace="api-frontend"
-      column-label="api-frontend"
-      :text="$i18n.t('Should api-frontend be managed by PacketFence?')"
+                             column-label="api-frontend"
+                             :text="$i18n.t('Should api-frontend be managed by PacketFence?')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-galera-autofix namespace="galera-autofix"
-      column-label="galera-autofix"
-      :text="$i18n.t('Should galera-autofix be managed by PacketFence?')"
+                               column-label="galera-autofix"
+                               :text="$i18n.t('Should galera-autofix be managed by PacketFence?')"
+                               enabled-value="enabled"
+                               disabled-value="disabled"
     />
 
     <form-group-fingerbank-collector namespace="fingerbank-collector"
-      column-label="fingerbank-collector"
-      :text="$i18n.t('Should the fingerbank-collector be managed by PacketFence?')"
+                                     column-label="fingerbank-collector"
+                                     :text="$i18n.t('Should the fingerbank-collector be managed by PacketFence?')"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
 
     <form-group-haproxy-admin namespace="haproxy-admin"
-      column-label="haproxy-admin"
-      :text="$i18n.t(`Should haproxy-admin be started? Keep enabled unless you know what you're doing.`)"
+                              column-label="haproxy-admin"
+                              :text="$i18n.t(`Should haproxy-admin be started? Keep enabled unless you know what you're doing.`)"
+                              enabled-value="enabled"
+                              disabled-value="disabled"
     />
 
     <form-group-haproxy-db namespace="haproxy-db"
-      column-label="haproxy-db"
-      :text="$i18n.t(`Should haproxy-db be started? Keep enabled unless you know what you're doing.`)"
+                           column-label="haproxy-db"
+                           :text="$i18n.t(`Should haproxy-db be started? Keep enabled unless you know what you're doing.`)"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-haproxy-portal namespace="haproxy-portal"
-      column-label="haproxy-portal"
-      :text="$i18n.t(`Should haproxy-portal be started? Keep enabled unless you know what you're doing.`)"
+                               column-label="haproxy-portal"
+                               :text="$i18n.t(`Should haproxy-portal be started? Keep enabled unless you know what you're doing.`)"
+                               enabled-value="enabled"
+                               disabled-value="disabled"
     />
 
     <form-group-httpd-aaa namespace="httpd_aaa"
-      column-label="httpd.aaa"
-      :text="$i18n.t(`Should httpd.aaa be started? Keep enabled unless you know what you're doing.`)"
+                          column-label="httpd.aaa"
+                          :text="$i18n.t(`Should httpd.aaa be started? Keep enabled unless you know what you're doing.`)"
+                          enabled-value="enabled"
+                          disabled-value="disabled"
     />
 
     <form-group-httpd-admin-dispatcher namespace="httpd_admin_dispatcher"
-      column-label="httpd.admin_dispatcher"
-      :text="$i18n.t(`Should httpd.admin_dispatcher be started? Keep enabled unless you know what you're doing.`)"
+                                       column-label="httpd.admin_dispatcher"
+                                       :text="$i18n.t(`Should httpd.admin_dispatcher be started? Keep enabled unless you know what you're doing.`)"
+                                       enabled-value="enabled"
+                                       disabled-value="disabled"
     />
 
     <form-group-httpd-dispatcher namespace="httpd_dispatcher"
-      column-label="httpd.dispatcher"
-      :text="$i18n.t(`Should httpd.dispatcher be started? Keep enabled unless you know what you're doing.`)"
+                                 column-label="httpd.dispatcher"
+                                 :text="$i18n.t(`Should httpd.dispatcher be started? Keep enabled unless you know what you're doing.`)"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
     />
 
     <form-group-httpd-portal namespace="httpd_portal"
-      column-label="httpd.portal"
-      :text="$i18n.t(`Should httpd.portal be started? Keep enabled unless you know what you're doing.`)"
+                             column-label="httpd.portal"
+                             :text="$i18n.t(`Should httpd.portal be started? Keep enabled unless you know what you're doing.`)"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-httpd-webservices namespace="httpd_webservices"
-      column-label="httpd.webservices"
-      :text="$i18n.t(`Should httpd.webservices be started? Keep enabled unless you know what you're doing.`)"
+                                  column-label="httpd.webservices"
+                                  :text="$i18n.t(`Should httpd.webservices be started? Keep enabled unless you know what you're doing.`)"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
 
     <form-group-iptables namespace="iptables"
-      column-label="iptables"
-      :text="$i18n.t(`Should iptables be managed by PacketFence? Keep enabled unless you know what you're doing.`)"
+                         column-label="iptables"
+                         :text="$i18n.t(`Should iptables be managed by PacketFence? Keep enabled unless you know what you're doing.`)"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
     />
 
     <form-group-ip6tables namespace="ip6tables"
-      column-label="ip6tables"
-      :text="$i18n.t(`Should ip6tables be managed by PacketFence? Keep enabled unless you know what you're doing.`)"
+                          column-label="ip6tables"
+                          :text="$i18n.t(`Should ip6tables be managed by PacketFence? Keep enabled unless you know what you're doing.`)"
+                          enabled-value="enabled"
+                          disabled-value="disabled"
     />
 
     <form-group-keepalived namespace="keepalived"
-      column-label="keepalived"
-      :text="$i18n.t(`Should keepalived be started? Keep enabled unless you know what you're doing.`)"
+                           column-label="keepalived"
+                           :text="$i18n.t(`Should keepalived be started? Keep enabled unless you know what you're doing.`)"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-netdata namespace="netdata"
-      column-label="netdata"
-      :text="$i18n.t('Should netdata be managed by PacketFence?')"
+                        column-label="netdata"
+                        :text="$i18n.t('Should netdata be managed by PacketFence?')"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
     />
 
     <form-group-pfacct namespace="pfacct"
-      column-label="pfacct"
-      :text="$i18n.t(`Should pfacct be started? Keep enabled unless you know what you're doing.`)"
+                       column-label="pfacct"
+                       :text="$i18n.t(`Should pfacct be started? Keep enabled unless you know what you're doing.`)"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-netflow-address namespace="netflow_address"
-      :column-label="$i18n.t('Netflow address')"
-      :text="$i18n.t(`The network address to listen to listen on. Do not change unless you know what you're doing.`)"
+                                :column-label="$i18n.t('Netflow address')"
+                                :text="$i18n.t(`The network address to listen to listen on. Do not change unless you know what you're doing.`)"
     />
 
     <form-group-pfdhcp namespace="pfdhcp"
-      column-label="pfdhcp"
-      :text="$i18n.t('Should pfdhcp be managed by PacketFence?')"
+                       column-label="pfdhcp"
+                       :text="$i18n.t('Should pfdhcp be managed by PacketFence?')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-pfdhcplistener namespace="pfdhcplistener"
-      column-label="pfdhcplistener"
-      :text="$i18n.t(`Should pfdhcplistener be started? Keep enabled unless you know what you're doing`)"
+                               column-label="pfdhcplistener"
+                               :text="$i18n.t(`Should pfdhcplistener be started? Keep enabled unless you know what you're doing`)"
+                               enabled-value="enabled"
+                               disabled-value="disabled"
     />
 
     <form-group-pfdhcplistener-packet-size namespace="pfdhcplistener_packet_size"
-      :column-label="$i18n.t('pfdhcplistener Packet Size')"
-      :text="$i18n.t(`Set the max size of DHCP packets. Do not change unless you know what you're doing.`)"
+                                           :column-label="$i18n.t('pfdhcplistener Packet Size')"
+                                           :text="$i18n.t(`Set the max size of DHCP packets. Do not change unless you know what you're doing.`)"
     />
 
     <form-group-pfdns namespace="pfdns"
-      column-label="pfdns"
-      :text="$i18n.t('Should pfdns be managed by PacketFence?')"
+                      column-label="pfdns"
+                      :text="$i18n.t('Should pfdns be managed by PacketFence?')"
+                      enabled-value="enabled"
+                      disabled-value="disabled"
     />
 
     <form-group-pffilter namespace="pffilter"
-      column-label="pffilter"
-      :text="$i18n.t('Should pffilter be managed by PacketFence?')"
+                         column-label="pffilter"
+                         :text="$i18n.t('Should pffilter be managed by PacketFence?')"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
     />
 
     <form-group-pfipset namespace="pfipset"
-      column-label="pfipset"
-      :text="$i18n.t('Should pfipset be managed by PacketFence?')"
+                        column-label="pfipset"
+                        :text="$i18n.t('Should pfipset be managed by PacketFence?')"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
     />
 
     <form-group-pfcron namespace="pfcron"
-      column-label="pfcron"
-      :text="$i18n.t(`Should pfcron be started? Keep enabled unless you know what you're doing.`)"
+                       column-label="pfcron"
+                       :text="$i18n.t(`Should pfcron be started? Keep enabled unless you know what you're doing.`)"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-pfperl-api namespace="pfperl-api"
-      column-label="pfperl-api"
-      :text="$i18n.t(`Should pfperl-api be started? Keep enabled unless you know what you're doing.`)"
+                           column-label="pfperl-api"
+                           :text="$i18n.t(`Should pfperl-api be started? Keep enabled unless you know what you're doing.`)"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-pfpki namespace="pfpki"
-      column-label="pfpki"
-      :text="$i18n.t(`Should pfpki be started? Keep enabled unless you know what you're doing.`)"
+                      column-label="pfpki"
+                      :text="$i18n.t(`Should pfpki be started? Keep enabled unless you know what you're doing.`)"
+                      enabled-value="enabled"
+                      disabled-value="disabled"
     />
 
     <form-group-pfqueue namespace="pfqueue"
-      column-label="pfqueue"
-      :text="$i18n.t(`Should pfqueue be started? Keep enabled unless you know what you're doing.`)"
+                        column-label="pfqueue"
+                        :text="$i18n.t(`Should pfqueue be started? Keep enabled unless you know what you're doing.`)"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
     />
 
     <form-group-pfsso namespace="pfsso"
-      column-label="pfsso"
-      :text="$i18n.t('Should pfsso be managed by PacketFence?')"
+                      column-label="pfsso"
+                      :text="$i18n.t('Should pfsso be managed by PacketFence?')"
+                      enabled-value="enabled"
+                      disabled-value="disabled"
     />
 
     <form-group-pfstats namespace="pfstats"
-      column-label="pfstats"
-      :text="$i18n.t('Should pfstats be managed by PacketFence?')"
+                        column-label="pfstats"
+                        :text="$i18n.t('Should pfstats be managed by PacketFence?')"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
     />
 
     <form-group-proxysql namespace="proxysql"
-      column-label="proxysql"
-      :text="$i18n.t('Should proxysql be managed by PacketFence?')"
+                         column-label="proxysql"
+                         :text="$i18n.t('Should proxysql be managed by PacketFence?')"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
     />
 
     <form-group-radiusd namespace="radiusd"
-      column-label="radiusd"
-      :text="$i18n.t('Should radiusd be managed by PacketFence?')"
+                        column-label="radiusd"
+                        :text="$i18n.t('Should radiusd be managed by PacketFence?')"
+                        enabled-value="enabled"
+                        disabled-value="disabled"
     />
 
     <form-group-radiusd-acct namespace="radiusd_acct"
-      column-label="radiusd-acct"
-      :text="$i18n.t(`Should radiusd-acct be started? Keep enabled unless you know what you're doing.`)"
+                             column-label="radiusd-acct"
+                             :text="$i18n.t(`Should radiusd-acct be started? Keep enabled unless you know what you're doing.`)"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-radiusd-auth namespace="radiusd_auth"
-      column-label="radiusd_auth"
-      :text="$i18n.t(`Should radiusd-auth be started? Keep enabled unless you know what you're doing.`)"
+                             column-label="radiusd_auth"
+                             :text="$i18n.t(`Should radiusd-auth be started? Keep enabled unless you know what you're doing.`)"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-radsniff namespace="radsniff"
-      column-label="radsniff"
-      :text="$i18n.t('Should radsniff be managed by PacketFence?')"
+                         column-label="radsniff"
+                         :text="$i18n.t('Should radsniff be managed by PacketFence?')"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
     />
 
     <form-group-redis-cache namespace="redis_cache"
-      column-label="redis_cache"
-      :text="$i18n.t(`Should Redis for caching be started? Keep enabled unless you know what you're doing.`)"
+                            column-label="redis_cache"
+                            :text="$i18n.t(`Should Redis for caching be started? Keep enabled unless you know what you're doing.`)"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
 
     <form-group-redis-ntlm-cache namespace="redis_ntlm_cache"
-      column-label="redis_ntlm_cache"
-      :text="$i18n.t(`Should the Redis NTLM cache be started? Use this if you are enabling an Active Directory NTLM cache.`)"
+                                 column-label="redis_ntlm_cache"
+                                 :text="$i18n.t(`Should the Redis NTLM cache be started? Use this if you are enabling an Active Directory NTLM cache.`)"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
     />
 
     <form-group-redis-queue namespace="redis_queue"
-      column-label="redis_queue"
-      :text="$i18n.t(`Should Redis be started? Keep enabled unless you know what you're doing.`)"
+                            column-label="redis_queue"
+                            :text="$i18n.t(`Should Redis be started? Keep enabled unless you know what you're doing.`)"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
 
     <form-group-snmp-trapd namespace="snmptrapd"
-      column-label="snmptrapd"
-      :text="$i18n.t(`Should snmptrapd be started? Keep enabled unless you know what you're doing.`)"
+                           column-label="snmptrapd"
+                           :text="$i18n.t(`Should snmptrapd be started? Keep enabled unless you know what you're doing.`)"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-tracking-config namespace="tracking-config"
-      column-label="tracking-config"
-      :text="$i18n.t('Should tracking-config be managed by PacketFence?')"
+                                column-label="tracking-config"
+                                :text="$i18n.t('Should tracking-config be managed by PacketFence?')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-winbindd namespace="winbindd"
-      column-label="winbindd"
-      :text="$i18n.t(`Should winbindd be started? Keep enabled unless you know what you're doing.`)"
+                         column-label="winbindd"
+                         :text="$i18n.t(`Should winbindd be started? Keep enabled unless you know what you're doing.`)"
+                         enabled-value="enabled"
+                         disabled-value="disabled"
     />
 
     <form-group-mysql-probe namespace="mysql-probe"
-      column-label="mysql-probe"
-      :text="$i18n.t(`Should mysql-probe be started? Keep enabled unless you know what you're doing.`)"
+                            column-label="mysql-probe"
+                            :text="$i18n.t(`Should mysql-probe be started? Keep enabled unless you know what you're doing.`)"
+                            enabled-value="enabled"
+                            disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupApiFrontend,
@@ -230,9 +306,10 @@ import {
   FormGroupHttpdDispatcher,
   FormGroupHttpdPortal,
   FormGroupHttpdWebservices,
-  FormGroupIptables,
   FormGroupIp6tables,
+  FormGroupIptables,
   FormGroupKeepalived,
+  FormGroupMysqlProbe,
   FormGroupNetdata,
   FormGroupNetflowAddress,
   FormGroupPfacct,
@@ -258,8 +335,7 @@ import {
   FormGroupRedisQueue,
   FormGroupSnmpTrapd,
   FormGroupTrackingConfig,
-  FormGroupWinbindd,
-  FormGroupMysqlProbe
+  FormGroupWinbindd
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/services/_components/index.js b/html/pfappserver/root/src/views/Configuration/services/_components/index.js
index 7081484e7dc5..6cbe3deb22bc 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/services/_components/index.js
@@ -3,7 +3,7 @@ import {
   BaseFormButtonBar,
   BaseFormGroupInput,
   BaseFormGroupInputNumber,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -11,48 +11,48 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupApiFrontend,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFingerbankCollector,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupGaleraAutofix,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHaproxyAdmin,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHaproxyDb,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHaproxyPortal,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdAaa,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdAdmin,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdAdminDispatcher,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdDispatcher,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdPortal,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupHttpdWebservices,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupIptables,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupIp6tables,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupKeepalived,
+  BaseFormGroupSwitch                 as FormGroupApiFrontend,
+  BaseFormGroupSwitch                 as FormGroupFingerbankCollector,
+  BaseFormGroupSwitch                 as FormGroupGaleraAutofix,
+  BaseFormGroupSwitch                 as FormGroupHaproxyAdmin,
+  BaseFormGroupSwitch                 as FormGroupHaproxyDb,
+  BaseFormGroupSwitch                 as FormGroupHaproxyPortal,
+  BaseFormGroupSwitch                 as FormGroupHttpdAaa,
+  BaseFormGroupSwitch                 as FormGroupHttpdAdmin,
+  BaseFormGroupSwitch                 as FormGroupHttpdAdminDispatcher,
+  BaseFormGroupSwitch                 as FormGroupHttpdDispatcher,
+  BaseFormGroupSwitch                 as FormGroupHttpdPortal,
+  BaseFormGroupSwitch                 as FormGroupHttpdWebservices,
+  BaseFormGroupSwitch                 as FormGroupIptables,
+  BaseFormGroupSwitch                 as FormGroupIp6tables,
+  BaseFormGroupSwitch                 as FormGroupKeepalived,
   BaseFormGroupInput                  as FormGroupNetflowAddress,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNetdata,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfacct,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfcron,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfdhcp,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfdhcplistener,
+  BaseFormGroupSwitch                 as FormGroupNetdata,
+  BaseFormGroupSwitch                 as FormGroupPfacct,
+  BaseFormGroupSwitch                 as FormGroupPfcron,
+  BaseFormGroupSwitch                 as FormGroupPfdhcp,
+  BaseFormGroupSwitch                 as FormGroupPfdhcplistener,
   BaseFormGroupInputNumber            as FormGroupPfdhcplistenerPacketSize,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfdns,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPffilter,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfipset,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfperlApi,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfpki,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfqueue,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfsso,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPfstats,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupProxysql,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusd,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusdAcct,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusdAuth,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadsniff,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRedisCache,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRedisNtlmCache,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRedisQueue,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupSnmpTrapd,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupTrackingConfig,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupWinbindd,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupMysqlProbe,
+  BaseFormGroupSwitch                 as FormGroupPfdns,
+  BaseFormGroupSwitch                 as FormGroupPffilter,
+  BaseFormGroupSwitch                 as FormGroupPfipset,
+  BaseFormGroupSwitch                 as FormGroupPfperlApi,
+  BaseFormGroupSwitch                 as FormGroupPfpki,
+  BaseFormGroupSwitch                 as FormGroupPfqueue,
+  BaseFormGroupSwitch                 as FormGroupPfsso,
+  BaseFormGroupSwitch                 as FormGroupPfstats,
+  BaseFormGroupSwitch                 as FormGroupProxysql,
+  BaseFormGroupSwitch                 as FormGroupRadiusd,
+  BaseFormGroupSwitch                 as FormGroupRadiusdAcct,
+  BaseFormGroupSwitch                 as FormGroupRadiusdAuth,
+  BaseFormGroupSwitch                 as FormGroupRadsniff,
+  BaseFormGroupSwitch                 as FormGroupRedisCache,
+  BaseFormGroupSwitch                 as FormGroupRedisNtlmCache,
+  BaseFormGroupSwitch                 as FormGroupRedisQueue,
+  BaseFormGroupSwitch                 as FormGroupSnmpTrapd,
+  BaseFormGroupSwitch                 as FormGroupTrackingConfig,
+  BaseFormGroupSwitch                 as FormGroupWinbindd,
+  BaseFormGroupSwitch                 as FormGroupMysqlProbe,
 
   BaseViewResource                    as BaseView,
   TheForm,

From 52f18c1b347f5c8b8d609211c0eea7696c523a53 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:12:38 +0300
Subject: [PATCH 39/51] Change database configuration to use switch UI
 component

---
 .../database/proxysql/_components/TheForm.vue | 26 ++++++++-----------
 .../database/proxysql/_components/index.js    |  6 ++---
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/TheForm.vue
index fc8669824cbc..002feaaa6458 100644
--- a/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/TheForm.vue
@@ -6,33 +6,29 @@
     :isLoading="isLoading"
   >
     <form-group-status namespace="status"
-      :column-label="$i18n.t('Enable')"
-      :text="$i18n.t('Enable an external server for proxysql.')"
+                       :column-label="$i18n.t('Enable')"
+                       :text="$i18n.t('Enable an external server for proxysql.')"
+                       enabled-value="enabled"
+                       disabled-value="disabled"
     />
 
     <form-group-cacert namespace="cacert"
-      :column-label="$i18n.t('CA Certificate')"
-      :text="$i18n.t('CA Certificate')"
+                       :column-label="$i18n.t('CA Certificate')"
+                       :text="$i18n.t('CA Certificate')"
     />
 
     <form-group-backend namespace="backend"
-      :column-label="$i18n.t('Backend')"
-      :text="$i18n.t('Backend Host')"
+                        :column-label="$i18n.t('Backend')"
+                        :text="$i18n.t('Backend Host')"
     />
 
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
-import {
-  FormGroupCacert,
-  FormGroupBackend,
-  FormGroupStatus
-} from './'
+import {FormGroupBackend, FormGroupCacert, FormGroupStatus} from './'
 
 const components = {
   BaseForm,
diff --git a/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/index.js b/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/index.js
index 2b5b90518063..b0c692efc9a5 100644
--- a/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/database/proxysql/_components/index.js
@@ -2,8 +2,8 @@ import { BaseViewResource } from '../../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupFileUpload
+  BaseFormGroupFileUpload,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -11,7 +11,7 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupStatus,
+  BaseFormGroupSwitch                 as FormGroupStatus,
   BaseFormGroupFileUpload             as FormGroupCacert,
   BaseFormGroupInput                  as FormGroupBackend,
   BaseViewResource                    as BaseView,

From e8a8418c1b9cb256d1c57c8c7798d5bccbeafe4a Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:28:42 +0300
Subject: [PATCH 40/51] Change cluster configuration form to use switch UI
 component

---
 .../activeActive/_components/TheForm.vue      | 100 +++++++++++-------
 .../activeActive/_components/index.js         |  44 ++++----
 2 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheForm.vue
index 0b5eaa410764..134ec539f0e8 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheForm.vue
@@ -6,92 +6,112 @@
     :isLoading="isLoading"
   >
     <form-group-password namespace="password"
-      :column-label="$i18n.t('Shared Key')"
-      :text="$i18n.t('Shared Key for VRRP protocol (must be the same on all members).')"
+                         :column-label="$i18n.t('Shared Key')"
+                         :text="$i18n.t('Shared Key for VRRP protocol (must be the same on all members).')"
     />
 
     <form-group-virtual-router-identifier namespace="virtual_router_id"
-      :column-label="$i18n.t('Virtual Router ID')"
-      :text="$i18n.t('The virtual router id for keepalive. Leave untouched unless you have another keepalive cluster in this network. Must be between 1 and 255.')"
+                                          :column-label="$i18n.t('Virtual Router ID')"
+                                          :text="$i18n.t('The virtual router id for keepalive. Leave untouched unless you have another keepalive cluster in this network. Must be between 1 and 255.')"
     />
 
     <form-group-vrrp-unicast namespace="vrrp_unicast"
-      :column-label="$i18n.t('VRRP Unicast')"
-      :text="$i18n.t('Enable keepalived in unicast mode instead of multicast.')"
+                             :column-label="$i18n.t('VRRP Unicast')"
+                             :text="$i18n.t('Enable keepalived in unicast mode instead of multicast.')"
+                             enabled-value="enabled"
+                             disabled-value="disabled"
     />
 
     <form-group-dns-on-vip-only namespace="dns_on_vip_only"
-      :column-label="$i18n.t('pfdns on VIP only')"
-      :text="$i18n.t('Set the name server option in DHCP replies to point only to the VIP in cluster mode rather than to all servers in the cluster.')"
+                                :column-label="$i18n.t('pfdns on VIP only')"
+                                :text="$i18n.t('Set the name server option in DHCP replies to point only to the VIP in cluster mode rather than to all servers in the cluster.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-gateway-on-vip-only namespace="gateway_on_vip_only"
-      :column-label="$i18n.t('Gateway on VIP only')"
-      :text="$i18n.t('Set the gateway option in DHCP replies to point only to the VIP in cluster mode rather than to all servers in the cluster.')"
+                                    :column-label="$i18n.t('Gateway on VIP only')"
+                                    :text="$i18n.t('Set the gateway option in DHCP replies to point only to the VIP in cluster mode rather than to all servers in the cluster.')"
+                                    enabled-value="enabled"
+                                    disabled-value="disabled"
     />
 
     <form-group-centralize-vips namespace="centralize_vips"
-      :column-label="$i18n.t('Centralized virtual IPs')"
-      :text="$i18n.t('Centralize the virtual IP addresses on the same node instead of distributing them on the two first nodes of the cluster.')"
+                                :column-label="$i18n.t('Centralized virtual IPs')"
+                                :text="$i18n.t('Centralize the virtual IP addresses on the same node instead of distributing them on the two first nodes of the cluster.')"
+                                enabled-value="enabled"
+                                disabled-value="disabled"
     />
 
     <form-group-centralized-deauth namespace="centralized_deauth"
-      :column-label="$i18n.t('Centralized access reevaluation')"
-      :text="$i18n.t('Centralize the deauthentication to the management node of the cluster.')"
+                                   :column-label="$i18n.t('Centralized access reevaluation')"
+                                   :text="$i18n.t('Centralize the deauthentication to the management node of the cluster.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-use-vip-for-deauth namespace="use_vip_for_deauth"
-      :column-label="$i18n.t('Use virtual IP for access reevaluation')"
-      :text="$i18n.t('Use the virtual IP as the source IP during access reevaluation.')"
+                                   :column-label="$i18n.t('Use virtual IP for access reevaluation')"
+                                   :text="$i18n.t('Use the virtual IP as the source IP during access reevaluation.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-radius-proxy-with-vip namespace="radius_proxy_with_vip"
-      :column-label="$i18n.t('Proxy RADIUS using virtual IP')"
-      :text="$i18n.t('Proxy the RADIUS requests received on the RADIUS load balancer using the VIP. When deploying in an environment where the virtual IP is a software load balancer, disable this so that servers proxy the requests using their own IP address')"
+                                      :column-label="$i18n.t('Proxy RADIUS using virtual IP')"
+                                      :text="$i18n.t('Proxy the RADIUS requests received on the RADIUS load balancer using the VIP. When deploying in an environment where the virtual IP is a software load balancer, disable this so that servers proxy the requests using their own IP address')"
+                                      enabled-value="enabled"
+                                      disabled-value="disabled"
     />
 
     <form-group-auth-on-management namespace="auth_on_management"
-      :column-label="$i18n.t('RADIUS authentication on management')"
-      :text="$i18n.t('Process RADIUS authentication requests on the management server (the current load balancer). Disabling it will make the management server only proxy requests to other servers. Useful if your load balancer cannot handle both tasks. Changing this requires to restart radiusd.')"
+                                   :column-label="$i18n.t('RADIUS authentication on management')"
+                                   :text="$i18n.t('Process RADIUS authentication requests on the management server (the current load balancer). Disabling it will make the management server only proxy requests to other servers. Useful if your load balancer cannot handle both tasks. Changing this requires to restart radiusd.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-portal-on-management namespace="portal_on_management"
-      :column-label="$i18n.t('Portal authentication on management')"
-      :text="$i18n.t('Process captive portal requests requests on the management server (the current load balancer). Disabling it will make the management server only proxy requests to other servers. Useful if your load balancer cannot handle both tasks. Changing this requires to restart haproxy-portal.')"
+                                     :column-label="$i18n.t('Portal authentication on management')"
+                                     :text="$i18n.t('Process captive portal requests requests on the management server (the current load balancer). Disabling it will make the management server only proxy requests to other servers. Useful if your load balancer cannot handle both tasks. Changing this requires to restart haproxy-portal.')"
+                                     enabled-value="enabled"
+                                     disabled-value="disabled"
     />
 
     <form-group-conflict-resolution-threshold namespace="conflict_resolution_threshold"
-      :column-label="$i18n.t('Conflict resolution threshold')"
-      :text="$i18n.t('Defines the amount of seconds after which pfcron attempts to resolve a configuration version conflict between cluster members. For example, if this is set to 5 minutes, then a resolution will be attempted when the members will be detected running a different version for more than 5 minutes.')"
+                                              :column-label="$i18n.t('Conflict resolution threshold')"
+                                              :text="$i18n.t('Defines the amount of seconds after which pfcron attempts to resolve a configuration version conflict between cluster members. For example, if this is set to 5 minutes, then a resolution will be attempted when the members will be detected running a different version for more than 5 minutes.')"
     />
 
     <form-group-galera-replication namespace="galera_replication"
-      :column-label="$i18n.t('Galera replication')"
-      :text="$i18n.t('Whether or not to activate galera cluster when using a cluster.')"
+                                   :column-label="$i18n.t('Galera replication')"
+                                   :text="$i18n.t('Whether or not to activate galera cluster when using a cluster.')"
+                                   enabled-value="enabled"
+                                   disabled-value="disabled"
     />
 
     <form-group-galera-replication-username namespace="galera_replication_username"
-      :column-label="$i18n.t('Galera replication username')"
-      :text="$i18n.t('Defines the replication username to be used for the MariaDB Galera cluster replication.')"
+                                            :column-label="$i18n.t('Galera replication username')"
+                                            :text="$i18n.t('Defines the replication username to be used for the MariaDB Galera cluster replication.')"
     />
 
     <form-group-galera-replication-password namespace="galera_replication_password"
-      :column-label="$i18n.t('Galera replication password')"
-      :text="$i18n.t('Defines the replication password to be used for the MariaDB Galera cluster replication.')"
+                                            :column-label="$i18n.t('Galera replication password')"
+                                            :text="$i18n.t('Defines the replication password to be used for the MariaDB Galera cluster replication.')"
     />
 
     <form-group-probe-mysql-from-haproxy-db namespace="probe_mysql_from_haproxy_db"
-      :column-label="$i18n.t('Probe Mysql from haproxy-db')"
-      :text="$i18n.t('Enable mysql-probe in haproxy-db to detect the availability of the MariaDB servers.')"
+                                            :column-label="$i18n.t('Probe Mysql from haproxy-db')"
+                                            :text="$i18n.t('Enable mysql-probe in haproxy-db to detect the availability of the MariaDB servers.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
     />
 
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAuthOnManagement,
@@ -99,17 +119,17 @@ import {
   FormGroupCentralizeVips,
   FormGroupConflictResolutionThreshold,
   FormGroupDnsOnVipOnly,
-  FormGroupGatewayOnVipOnly,
   FormGroupGaleraReplication,
-  FormGroupGaleraReplicationUsername,
   FormGroupGaleraReplicationPassword,
+  FormGroupGaleraReplicationUsername,
+  FormGroupGatewayOnVipOnly,
   FormGroupPassword,
   FormGroupPortalOnManagement,
+  FormGroupProbeMysqlFromHaproxyDb,
   FormGroupRadiusProxyWithVip,
   FormGroupUseVipForDeauth,
   FormGroupVirtualRouterIdentifier,
-  FormGroupVrrpUnicast,
-  FormGroupProbeMysqlFromHaproxyDb
+  FormGroupVrrpUnicast
 } from './'
 
 const components = {
diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_components/index.js b/html/pfappserver/root/src/views/Configuration/activeActive/_components/index.js
index 5c7e28a1076a..b2453bf06447 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_components/index.js
@@ -1,37 +1,35 @@
-import { BaseViewResource } from '../../_components/new/'
+import {BaseViewResource} from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
   BaseFormGroupInputPassword,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
-import {
-  BaseFormGroupIntervalUnit
-} from '@/views/Configuration/_components/new/'
+import {BaseFormGroupIntervalUnit} from '@/views/Configuration/_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseFormButtonBar                   as FormButtonBar,
+  BaseFormButtonBar as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupAuthOnManagement,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCentralizedDeauth,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupCentralizeVips,
-  BaseFormGroupIntervalUnit           as FormGroupConflictResolutionThreshold,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupDnsOnVipOnly,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupGatewayOnVipOnly,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupGaleraReplication,
-  BaseFormGroupInput                  as FormGroupGaleraReplicationUsername,
-  BaseFormGroupInputPassword          as FormGroupGaleraReplicationPassword,
-  BaseFormGroupInputPassword          as FormGroupPassword,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupPortalOnManagement,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRadiusProxyWithVip,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupUseVipForDeauth,
-  BaseFormGroupInput                  as FormGroupVirtualRouterIdentifier,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupVrrpUnicast,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupProbeMysqlFromHaproxyDb,
+  BaseFormGroupSwitch as FormGroupAuthOnManagement,
+  BaseFormGroupSwitch as FormGroupCentralizedDeauth,
+  BaseFormGroupSwitch as FormGroupCentralizeVips,
+  BaseFormGroupIntervalUnit as FormGroupConflictResolutionThreshold,
+  BaseFormGroupSwitch as FormGroupDnsOnVipOnly,
+  BaseFormGroupSwitch as FormGroupGatewayOnVipOnly,
+  BaseFormGroupSwitch as FormGroupGaleraReplication,
+  BaseFormGroupInput as FormGroupGaleraReplicationUsername,
+  BaseFormGroupInputPassword as FormGroupGaleraReplicationPassword,
+  BaseFormGroupInputPassword as FormGroupPassword,
+  BaseFormGroupSwitch as FormGroupPortalOnManagement,
+  BaseFormGroupSwitch as FormGroupRadiusProxyWithVip,
+  BaseFormGroupSwitch as FormGroupUseVipForDeauth,
+  BaseFormGroupInput as FormGroupVirtualRouterIdentifier,
+  BaseFormGroupSwitch as FormGroupVrrpUnicast,
+  BaseFormGroupSwitch as FormGroupProbeMysqlFromHaproxyDb,
 
-  BaseViewResource                    as BaseView,
+  BaseViewResource as BaseView,
   TheForm,
   TheView
 }

From 9185039ddda22553b3bdf3fb2c67c04d3bde7bc2 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:43:10 +0300
Subject: [PATCH 41/51] Change radius configuration form to use switch UI
 component

---
 .../radius/general/_components/TheForm.vue    | 141 +++++++++++-------
 .../radius/general/_components/index.js       |  50 +++----
 2 files changed, 110 insertions(+), 81 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheForm.vue
index 3d8a8943bc00..43818ae88e78 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheForm.vue
@@ -6,80 +6,107 @@
     :isLoading="isLoading"
   >
     <form-group-record-accounting-in-sql namespace="record_accounting_in_sql"
-      :column-label="$i18n.t('Record accounting in SQL tables')"
-      :text="$i18n.t('Record the accounting data in the SQL tables. Requires a restart of radiusd to be effective.')"
+                                         :column-label="$i18n.t('Record accounting in SQL tables')"
+                                         :text="$i18n.t('Record the accounting data in the SQL tables. Requires a restart of radiusd to be effective.')"
+                                         enabled-value="enabled"
+                                         disabled-value="disabled"
     />
 
     <form-group-filter-in-packetfence-authorize namespace="filter_in_packetfence_authorize"
-      :column-label="$i18n.t('Use RADIUS filters in packetfence authorize')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.authorize section. Requires a restart of radiusd to be effective.')"
+                                                :column-label="$i18n.t('Use RADIUS filters in packetfence authorize')"
+                                                :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.authorize section. Requires a restart of radiusd to be effective.')"
+                                                enabled-value="enabled"
+                                                disabled-value="disabled"
     />
 
     <form-group-filter-in-packetfence-pre-proxy namespace="filter_in_packetfence_pre_proxy"
-      :column-label="$i18n.t('Use RADIUS filters in packetfence pre_proxy')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.pre_proxy section. Requires a restart of radiusd to be effective.')"
+                                                :column-label="$i18n.t('Use RADIUS filters in packetfence pre_proxy')"
+                                                :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.pre_proxy section. Requires a restart of radiusd to be effective.')"
+                                                enabled-value="enabled"
+                                                disabled-value="disabled"
     />
 
     <form-group-filter-in-packetfence-post-proxy namespace="filter_in_packetfence_post_proxy"
-      :column-label="$i18n.t('Use RADIUS filters in packetfence post_proxy')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.post_proxy section. Requires a restart of radiusd to be effective.')"
+                                                 :column-label="$i18n.t('Use RADIUS filters in packetfence post_proxy')"
+                                                 :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.post_proxy section. Requires a restart of radiusd to be effective.')"
+                                                 enabled-value="enabled"
+                                                 disabled-value="disabled"
     />
     <form-group-filter-in-packetfence-preacct namespace="filter_in_packetfence_preacct"
-      :column-label="$i18n.t('Use RADIUS filters in packetfence preacct')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.preacct section. Requires a restart of radiusd to be effective.')"
+                                              :column-label="$i18n.t('Use RADIUS filters in packetfence preacct')"
+                                              :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.preacct section. Requires a restart of radiusd to be effective.')"
+                                              enabled-value="enabled"
+                                              disabled-value="disabled"
     />
 
     <form-group-filter-in-packetfence-accounting namespace="filter_in_packetfence_accounting"
-      :column-label="$i18n.t('Use RADIUS filters in packetfence accounting')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.accounting section. Requires a restart of radiusd to be effective.')"
+                                                 :column-label="$i18n.t('Use RADIUS filters in packetfence accounting')"
+                                                 :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence.accounting section. Requires a restart of radiusd to be effective.')"
+                                                 enabled-value="enabled"
+                                                 disabled-value="disabled"
     />
-    <form-group-filter-in-packetfence-tunnel-authorize namespace="filter_in_packetfence-tunnel_authorize"
+    <form-group-filter-in-packetfence-tunnel-authorize
+      namespace="filter_in_packetfence-tunnel_authorize"
       :column-label="$i18n.t('Use RADIUS filters in packetfence-tunnel authorize')"
       :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS packetfence-tunnel.authorize section. Requires a restart of radiusd to be effective.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <form-group-filter-in-eduroam-authorize namespace="filter_in_eduroam_authorize"
-      :column-label="$i18n.t('Use RADIUS filters in eduroam authorize')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.authorize section. Requires a restart of radiusd to be effective.')"
+                                            :column-label="$i18n.t('Use RADIUS filters in eduroam authorize')"
+                                            :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.authorize section. Requires a restart of radiusd to be effective.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
     />
     <form-group-filter-in-eduroam-pre-proxy namespace="filter_in_eduroam_pre_proxy"
-      :column-label="$i18n.t('Use RADIUS filters in eduroam pre_proxy')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.pre_proxy section. Requires a restart of radiusd to be effective.')"
+                                            :column-label="$i18n.t('Use RADIUS filters in eduroam pre_proxy')"
+                                            :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.pre_proxy section. Requires a restart of radiusd to be effective.')"
+                                            enabled-value="enabled"
+                                            disabled-value="disabled"
     />
 
     <form-group-filter-in-eduroam-post-proxy namespace="filter_in_eduroam_post_proxy"
-      :column-label="$i18n.t('Use RADIUS filters in eduroam post_proxy')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.post_proxy section. Requires a restart of radiusd to be effective.')"
+                                             :column-label="$i18n.t('Use RADIUS filters in eduroam post_proxy')"
+                                             :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.post_proxy section. Requires a restart of radiusd to be effective.')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
     />
 
     <form-group-filter-in-eduroam-preacct namespace="filter_in_eduroam_preacct"
-      :column-label="$i18n.t('Use RADIUS filters in eduroam preacct')"
-      :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.preacct section. Requires a restart of radiusd to be effective.')"
+                                          :column-label="$i18n.t('Use RADIUS filters in eduroam preacct')"
+                                          :text="$i18n.t('Send the RADIUS request in the RADIUS filter from the RADIUS eduroam.preacct section. Requires a restart of radiusd to be effective.')"
+                                          enabled-value="enabled"
+                                          disabled-value="disabled"
     />
 
     <form-group-ntlm-redis-cache namespace="ntlm_redis_cache"
-      :column-label="$i18n.t('NTLM Redis cache')"
-      :text="$i18n.t('Enables a Redis driven cache for NTLM authentication.In order for this to work, you need to setup proper NT hash syncronization between your PacketFence server and your AD. Refer to the Administration guide for more details. Applying this requires a restart of radiusd.')"
+                                 :column-label="$i18n.t('NTLM Redis cache')"
+                                 :text="$i18n.t('Enables a Redis driven cache for NTLM authentication.In order for this to work, you need to setup proper NT hash syncronization between your PacketFence server and your AD. Refer to the Administration guide for more details. Applying this requires a restart of radiusd.')"
+                                 enabled-value="enabled"
+                                 disabled-value="disabled"
     />
 
     <form-group-process-bandwidth-accounting namespace="process_bandwidth_accounting"
-      :column-label="$i18n.t('Process Bandwidth Accounting')"
-      :text="$i18n.t('Enables processing of bandwidth accounting. Requires a restart of pfacct to be effective')"
+                                             :column-label="$i18n.t('Process Bandwidth Accounting')"
+                                             :text="$i18n.t('Enables processing of bandwidth accounting. Requires a restart of pfacct to be effective')"
+                                             enabled-value="enabled"
+                                             disabled-value="disabled"
     />
 
     <form-group-pfacct-workers namespace="pfacct_workers"
-      :column-label="$i18n.t('Pfacct workers')"
-      :text="$i18n.t('The number of processing accounting packets. Requires a restart of pfacct to be effective')"
+                               :column-label="$i18n.t('Pfacct workers')"
+                               :text="$i18n.t('The number of processing accounting packets. Requires a restart of pfacct to be effective')"
     />
 
     <form-group-pfacct-work-queue-size namespace="pfacct_work_queue_size"
-      :column-label="$i18n.t('Pfacct Work Queue Size')"
-      :text="$i18n.t('The size of the queue for each worker. Requires a restart of pfacct to be effective')"
+                                       :column-label="$i18n.t('Pfacct Work Queue Size')"
+                                       :text="$i18n.t('The size of the queue for each worker. Requires a restart of pfacct to be effective')"
     />
 
     <form-group-radius-attributes namespace="radius_attributes"
-      :column-label="$i18n.t('RADIUS attributes')"
-      :text="$i18n.t('List of RADIUS attributes that can be used in the sources configuration.')"
+                                  :column-label="$i18n.t('RADIUS attributes')"
+                                  :text="$i18n.t('List of RADIUS attributes that can be used in the sources configuration.')"
     />
     <b-row v-if="impliedRadiusAtttributes.length">
       <b-col cols="3"></b-col>
@@ -87,53 +114,58 @@
         <div class="alert alert-info mr-3">
           <p><strong>{{ $i18n.t('Built-in RADIUS Attributes:') }}</strong></p>
           <span v-for="radiusAttribute in impliedRadiusAtttributes" :key="radiusAttribute"
-            class="badge badge-info mr-1">{{ radiusAttribute }}</span>
+                class="badge badge-info mr-1">{{ radiusAttribute }}</span>
         </div>
       </b-col>
     </b-row>
 
-    <form-group-normalize-radius-machine-auth-username namespace="normalize_radius_machine_auth_username"
+    <form-group-normalize-radius-machine-auth-username
+      namespace="normalize_radius_machine_auth_username"
       :column-label="$i18n.t('RADIUS machine auth with username')"
       :text="$i18n.t('Use the RADIUS username instead of the TLS certificate common name when doing machine authentication.')"
+      enabled-value="enabled"
+      disabled-value="disabled"
     />
 
     <form-group-username-attributes namespace="username_attributes"
-      :column-label="$i18n.t('Username attributes')"
-      :text="$i18n.t('Which attributes to use to get the username from a RADIUS request. The order of the attributes are listed in this configuration parameter is followed while performing the lookup.')"
+                                    :column-label="$i18n.t('Username attributes')"
+                                    :text="$i18n.t('Which attributes to use to get the username from a RADIUS request. The order of the attributes are listed in this configuration parameter is followed while performing the lookup.')"
     />
-    
+
     <form-group-local-auth namespace="local_auth"
-      :column-label="$i18n.t('Authenticate against local users database')"
-      :text="$i18n.t('Use the local accounts in the password table to authenticate 802.1x users. Requires to have the passwords in clear text or NTLM.')"
+                           :column-label="$i18n.t('Authenticate against local users database')"
+                           :text="$i18n.t('Use the local accounts in the password table to authenticate 802.1x users. Requires to have the passwords in clear text or NTLM.')"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import {
-  BaseForm
-} from '@/components/new/'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
-  FormGroupRecordAccountingInSql,
+  FormGroupFilterInEduroamAuthorize,
+  FormGroupFilterInEduroamPostProxy,
+  FormGroupFilterInEduroamPreacct,
+  FormGroupFilterInEduroamPreProxy,
+  FormGroupFilterInPacketfenceAccounting,
   FormGroupFilterInPacketfenceAuthorize,
-  FormGroupFilterInPacketfencePreProxy,
   FormGroupFilterInPacketfencePostProxy,
   FormGroupFilterInPacketfencePreacct,
-  FormGroupFilterInPacketfenceAccounting,
+  FormGroupFilterInPacketfencePreProxy,
   FormGroupFilterInPacketfenceTunnelAuthorize,
-  FormGroupFilterInEduroamAuthorize,
-  FormGroupFilterInEduroamPreProxy,
-  FormGroupFilterInEduroamPostProxy,
-  FormGroupFilterInEduroamPreacct,
   FormGroupLocalAuth,
-  FormGroupNtlmRedisCache,
-  FormGroupRadiusAttributes,
   FormGroupNormalizeRadiusMachineAuthUsername,
-  FormGroupProcessBandwidthAccounting,
-  FormGroupUsernameAttributes,
+  FormGroupNtlmRedisCache,
   FormGroupPfacctWorkers,
-  FormGroupPfacctWorkQueueSize
+  FormGroupPfacctWorkQueueSize,
+  FormGroupProcessBandwidthAccounting,
+  FormGroupRadiusAttributes,
+  FormGroupRecordAccountingInSql,
+  FormGroupUsernameAttributes
 } from './'
+import {computed, toRefs} from '@vue/composition-api'
+import {useNamespaceMetaImplied} from '@/composables/useMeta'
 
 const components = {
   BaseForm,
@@ -172,9 +204,6 @@ export const props = {
   }
 }
 
-import { computed, toRefs } from '@vue/composition-api'
-import { useNamespaceMetaImplied } from '@/composables/useMeta'
-
 export const setup = (props) => {
 
   const {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_components/index.js b/html/pfappserver/root/src/views/Configuration/radius/general/_components/index.js
index 0dbf5a2443e5..0385bfb413d4 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_components/index.js
@@ -1,37 +1,37 @@
 import {
   BaseFormButtonBar,
-  BaseFormGroupTextarea,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupInputNumber
+  BaseFormGroupInputNumber,
+  BaseFormGroupSwitch,
+  BaseFormGroupTextarea
 } from '@/components/new/'
-import { BaseViewResource } from '../../../_components/new/'
+import {BaseViewResource} from '../../../_components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseFormButtonBar                   as FormButtonBar,
+  BaseFormButtonBar as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRecordAccountingInSql,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfenceAuthorize,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfencePreProxy,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfencePostProxy,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfencePreacct,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfenceAccounting,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInPacketfenceTunnelAuthorize,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInEduroamAuthorize,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInEduroamPreProxy,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInEduroamPostProxy,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupFilterInEduroamPreacct,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupLocalAuth,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNtlmRedisCache,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupProcessBandwidthAccounting,
-  BaseFormGroupTextarea               as FormGroupRadiusAttributes,
-  BaseFormGroupToggleDisabledEnabled  as FormGroupNormalizeRadiusMachineAuthUsername,
-  BaseFormGroupTextarea               as FormGroupUsernameAttributes,
-  BaseFormGroupInputNumber            as FormGroupPfacctWorkers,
-  BaseFormGroupInputNumber            as FormGroupPfacctWorkQueueSize,
+  BaseFormGroupSwitch as FormGroupRecordAccountingInSql,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfenceAuthorize,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfencePreProxy,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfencePostProxy,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfencePreacct,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfenceAccounting,
+  BaseFormGroupSwitch as FormGroupFilterInPacketfenceTunnelAuthorize,
+  BaseFormGroupSwitch as FormGroupFilterInEduroamAuthorize,
+  BaseFormGroupSwitch as FormGroupFilterInEduroamPreProxy,
+  BaseFormGroupSwitch as FormGroupFilterInEduroamPostProxy,
+  BaseFormGroupSwitch as FormGroupFilterInEduroamPreacct,
+  BaseFormGroupSwitch as FormGroupLocalAuth,
+  BaseFormGroupSwitch as FormGroupNtlmRedisCache,
+  BaseFormGroupSwitch as FormGroupProcessBandwidthAccounting,
+  BaseFormGroupTextarea as FormGroupRadiusAttributes,
+  BaseFormGroupSwitch as FormGroupNormalizeRadiusMachineAuthUsername,
+  BaseFormGroupTextarea as FormGroupUsernameAttributes,
+  BaseFormGroupInputNumber as FormGroupPfacctWorkers,
+  BaseFormGroupInputNumber as FormGroupPfacctWorkQueueSize,
 
-  BaseViewResource                    as BaseView,
+  BaseViewResource as BaseView,
   TheForm,
   TheView
 }

From 162826ef016b3bee804da476a3b0b498ada2e34d Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:44:50 +0300
Subject: [PATCH 42/51] Change dns configuration form to use switch UI
 component

---
 .../Configuration/dns/_components/TheForm.vue    | 16 +++++++---------
 .../views/Configuration/dns/_components/index.js |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
index 94a41854a670..92e51cd2cf68 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
@@ -6,20 +6,18 @@
     :isLoading="isLoading"
   >
     <form-group-record-dns-in-sql namespace="record_dns_in_sql"
-      :column-label="$i18n.t('Record DNS')"
-      :text="$i18n.t('Record DNS requests and replies in the SQL tables.')"
+                                  :column-label="$i18n.t('Record DNS')"
+                                  :text="$i18n.t('Record DNS requests and replies in the SQL tables.')"
+                                  enabled-value="enabled"
+                                  disabled-value="disabled"
     />
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
-import {
-  FormGroupRecordDnsInSql
-} from './'
+import {FormGroupRecordDnsInSql} from './'
 
 const components = {
   BaseForm,
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_components/index.js b/html/pfappserver/root/src/views/Configuration/dns/_components/index.js
index 160d221ccff4..85dff6eee39d 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/dns/_components/index.js
@@ -1,7 +1,7 @@
 import { BaseViewResource } from '../../_components/new/'
 import {
   BaseFormButtonBar,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -9,7 +9,7 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled  as FormGroupRecordDnsInSql,
+  BaseFormGroupSwitch                 as FormGroupRecordDnsInSql,
 
   BaseViewResource                    as BaseView,
   TheForm,

From f66845b5c2638c37608cc2c25cff96eabf56778a Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 11:58:00 +0300
Subject: [PATCH 43/51] Change admin login form to use switch UI component

---
 .../adminLogin/_components/TheForm.vue        | 34 ++++++++++---------
 .../adminLogin/_components/index.js           |  6 ++--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminLogin/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/adminLogin/_components/TheForm.vue
index 38420a5a23af..286661495726 100644
--- a/html/pfappserver/root/src/views/Configuration/adminLogin/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminLogin/_components/TheForm.vue
@@ -6,42 +6,44 @@
     :isLoading="isLoading"
   >
     <form-group-sso-status namespace="sso_status"
-      :column-label="$i18n.t('SSO Status')"
-      :text="$i18n.t('Whether or not SSO should be enabled for the admin interface login. Changing this requires to restart the api-frontend service.')"
+                           :column-label="$i18n.t('SSO Status')"
+                           :text="$i18n.t('Whether or not SSO should be enabled for the admin interface login. Changing this requires to restart the api-frontend service.')"
+                           enabled-value="enabled"
+                           disabled-value="disabled"
     />
 
     <form-group-sso-base-url namespace="sso_base_url"
-      :column-label="$i18n.t('SSO Base URL')"
-      :text="$i18n.t('The base URL of the SSO server. If left empty, it will default to the hostname and domain (`hostname.domain`) defined in the general settings. Change this if your portal is bound to another domain name.')"
+                             :column-label="$i18n.t('SSO Base URL')"
+                             :text="$i18n.t('The base URL of the SSO server. If left empty, it will default to the hostname and domain (`hostname.domain`) defined in the general settings. Change this if your portal is bound to another domain name.')"
     />
 
     <form-group-sso-login-path namespace="sso_login_path"
-      :column-label="$i18n.t('SSO Login Path')"
-      :text="$i18n.t('The path to redirect the user to in order to perform the SSO login.')"
+                               :column-label="$i18n.t('SSO Login Path')"
+                               :text="$i18n.t('The path to redirect the user to in order to perform the SSO login.')"
     />
 
     <form-group-sso-login-text namespace="sso_login_text"
-      :column-label="$i18n.t('SSO Login Button Text')"
-      :text="$i18n.t('The text to display in the SSO login button in the admin interface.')"
+                               :column-label="$i18n.t('SSO Login Button Text')"
+                               :text="$i18n.t('The text to display in the SSO login button in the admin interface.')"
     />
 
     <form-group-sso-authorize-path namespace="sso_authorize_path"
-      :column-label="$i18n.t('SSO Authorize Path')"
-      :text="$i18n.t('The path to obtain the authorization data after the SSO.')"
+                                   :column-label="$i18n.t('SSO Authorize Path')"
+                                   :text="$i18n.t('The path to obtain the authorization data after the SSO.')"
     />
 
     <form-group-allow-username-password namespace="allow_username_password"
-      :column-label="$i18n.t('Allow SSO username and password')"
-      :text="$i18n.t('Whether or not username/password authentication is allowed for the admin interface login. Disabling this will force users to use SSO. Changing this requires to restart the api-frontend service.')"
+                                        :column-label="$i18n.t('Allow SSO username and password')"
+                                        :text="$i18n.t('Whether or not username/password authentication is allowed for the admin interface login. Disabling this will force users to use SSO. Changing this requires to restart the api-frontend service.')"
+                                        enabled-value="enabled"
+                                        disabled-value="disabled"
     />
 
   </base-form>
 </template>
 <script>
-import { computed } from '@vue/composition-api'
-import {
-  BaseForm
-} from '@/components/new/'
+import {computed} from '@vue/composition-api'
+import {BaseForm} from '@/components/new/'
 import schemaFn from '../schema'
 import {
   FormGroupAllowUsernamePassword,
diff --git a/html/pfappserver/root/src/views/Configuration/adminLogin/_components/index.js b/html/pfappserver/root/src/views/Configuration/adminLogin/_components/index.js
index 1709770499ca..3b41ac26b3aa 100644
--- a/html/pfappserver/root/src/views/Configuration/adminLogin/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/adminLogin/_components/index.js
@@ -2,7 +2,7 @@ import { BaseViewResource } from '../../_components/new/'
 import {
   BaseFormButtonBar,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheForm from './TheForm'
 import TheView from './TheView'
@@ -10,12 +10,12 @@ import TheView from './TheView'
 export {
   BaseFormButtonBar                  as FormButtonBar,
 
-  BaseFormGroupToggleDisabledEnabled as FormGroupAllowUsernamePassword,
+  BaseFormGroupSwitch                as FormGroupAllowUsernamePassword,
   BaseFormGroupInput                 as FormGroupSsoAuthorizePath,
   BaseFormGroupInput                 as FormGroupSsoBaseUrl,
   BaseFormGroupInput                 as FormGroupSsoLoginPath,
   BaseFormGroupInput                 as FormGroupSsoLoginText,
-  BaseFormGroupToggleDisabledEnabled as FormGroupSsoStatus,
+  BaseFormGroupSwitch                as FormGroupSsoStatus,
 
   BaseViewResource                   as BaseView,
   TheForm,

From ba2f25560a101f15ddfc2620b0d83cc7f5703833 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Tue, 18 Jul 2023 12:09:46 +0300
Subject: [PATCH 44/51] Change ssl certificate form to use switch UI component

---
 .../sslCertificates/_components/TheForm.vue   | 141 +++++++++++-------
 .../sslCertificates/_components/index.js      |  13 +-
 2 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
index 535eb16af2d5..cc31a6667358 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
@@ -8,57 +8,74 @@
       <b-tab :title="$t('View {title} Certificates', { title })" class="p-0">
         <b-card no-body class="m-3">
           <b-card-header>
-            <h5 class="mb-0 d-inline">{{ title.value }} {{ $i18n.t('{name} Server Certificate', { name }) }}</h5>
-            <b-button v-t="'Generate Signing Request (CSR)'" class="float-right" size="sm" variant="outline-secondary" @click="doShowCsr"/>
+            <h5 class="mb-0 d-inline">{{ title.value }}
+              {{ $i18n.t('{name} Server Certificate', {name}) }}</h5>
+            <b-button v-t="'Generate Signing Request (CSR)'" class="float-right" size="sm"
+                      variant="outline-secondary" @click="doShowCsr"/>
             <base-services :value="isModified"
-              v-bind="services" class="mt-3 mb-0" variant="info" />
+                           v-bind="services" class="mt-3 mb-0" variant="info"/>
           </b-card-header>
           <base-container-loading v-if="isLoading"
-            :title="$i18n.t('Loading Certificate')"
-            spin
+                                  :title="$i18n.t('Loading Certificate')"
+                                  spin
           />
           <b-container fluid v-else>
             <b-row align-v="center" v-if="isLetsEncrypt">
-              <b-col sm="3" class="col-form-label"><icon name="check"/></b-col>
+              <b-col sm="3" class="col-form-label">
+                <icon name="check"/>
+              </b-col>
               <b-col sm="9">{{ $t(`Use Let's Encrypt`) }}</b-col>
             </b-row>
             <b-row align-v="center" v-if="isCertKeyMatch">
-              <b-col sm="3" class="col-form-label"><icon class="text-success" name="circle"/></b-col>
+              <b-col sm="3" class="col-form-label">
+                <icon class="text-success" name="circle"/>
+              </b-col>
               <b-col sm="9">{{ $t('Certificate/Key match') }}</b-col>
             </b-row>
             <b-row align-v="center" v-else>
-              <b-col sm="3" class="col-form-label"><icon class="text-danger fa-overlap" name="circle"/></b-col>
+              <b-col sm="3" class="col-form-label">
+                <icon class="text-danger fa-overlap" name="circle"/>
+              </b-col>
               <b-col sm="9">{{ $t(`Certificate/Key don't match`) }}</b-col>
             </b-row>
             <b-row align-v="center" v-if="isChainValid">
-              <b-col sm="3" class="col-form-label"><icon class="text-success" name="circle"/></b-col>
+              <b-col sm="3" class="col-form-label">
+                <icon class="text-success" name="circle"/>
+              </b-col>
               <b-col sm="9">{{ $t('Chain is valid') }}</b-col>
             </b-row>
             <b-row align-v="center" v-else>
-              <b-col sm="3" class="col-form-label"><icon class="text-danger fa-overlap" name="circle"/></b-col>
+              <b-col sm="3" class="col-form-label">
+                <icon class="text-danger fa-overlap" name="circle"/>
+              </b-col>
               <b-col sm="9">{{ $t('Chain is invalid') }}</b-col>
             </b-row>
             <b-row align-v="baseline" v-for="(value, key) in certificateLocale" :key="key">
               <b-col sm="3" class="col-form-label">{{ key }}</b-col>
-                <b-col sm="9" v-if="Array.isArray(value)">
-                  <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1" variant="secondary">{{ v }}</b-badge>
-                </b-col>
+              <b-col sm="9" v-if="Array.isArray(value)">
+                <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1"
+                         variant="secondary">{{ v }}
+                </b-badge>
+              </b-col>
               <b-col sm="9" v-else>{{ value }}</b-col>
             </b-row>
           </b-container>
         </b-card>
         <template v-if="form.info">
-          <b-card v-for="(intermediate_ca, index) in intermediateCertificatesLocale" :key="intermediate_ca.serial"
-            no-body class="m-3">
+          <b-card v-for="(intermediate_ca, index) in intermediateCertificatesLocale"
+                  :key="intermediate_ca.serial"
+                  no-body class="m-3">
             <b-card-header>
               <h4 class="mb-0 d-inline">{{ title }} {{ $t('Intermediate CA certificate') }}</h4>
               <b-badge variant="secondary" class="ml-1">{{ index + 1 }}</b-badge>
             </b-card-header>
             <b-row align-v="center" v-for="(value, key) in intermediate_ca" :key="key">
-                <b-col sm="3" class="col-form-label">{{ key }}</b-col>
-                <b-col sm="9" v-if="Array.isArray(value)">
-                  <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1" variant="secondary">{{ v }}</b-badge>
-                </b-col>
+              <b-col sm="3" class="col-form-label">{{ key }}</b-col>
+              <b-col sm="9" v-if="Array.isArray(value)">
+                <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1"
+                         variant="secondary">{{ v }}
+                </b-badge>
+              </b-col>
               <b-col sm="9" v-else>{{ value }}</b-col>
             </b-row>
           </b-card>
@@ -68,18 +85,20 @@
             <h4 class="mb-0">{{ title }} {{ $t('Certification Authority Certificate(s)') }}</h4>
           </b-card-header>
           <base-container-loading v-if="isLoading"
-            :title="$i18n.t('Loading Certification Authority Certificates')"
-            spin
+                                  :title="$i18n.t('Loading Certification Authority Certificates')"
+                                  spin
           />
           <template v-else>
             <b-container v-for="(ca, index) in certificationAuthorityLocale" :key="index"
-              class="mb-3" :class="{ 'border-top': index }" fluid>
+                         class="mb-3" :class="{ 'border-top': index }" fluid>
               <b-row align-v="center" v-for="(value, key) in ca" :key="key">
                 <b-col sm="3" class="col-form-label">{{ key }}</b-col>
                 <b-col sm="9" v-if="Array.isArray(value)">
-                  <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1" variant="secondary">{{ v }}</b-badge>
+                  <b-badge v-for="(v, k) in value" :key="`${key}-${k}`" class="mr-1"
+                           variant="secondary">{{ v }}
+                  </b-badge>
                 </b-col>
-              <b-col sm="9" v-else>{{ value }}</b-col>
+                <b-col sm="9" v-else>{{ value }}</b-col>
               </b-row>
             </b-container>
           </template>
@@ -100,8 +119,10 @@
             :isLoading="isLoading"
           >
             <form-group-lets-encrypt namespace="lets_encrypt"
-              class="no-saas"
-              :column-label="$i18n.t(`Use Let's Encrypt`)"
+                                     class="no-saas"
+                                     :column-label="$i18n.t(`Use Let's Encrypt`)"
+                                     :enabled-value="true"
+                                     :disabled-value="false"
             />
 
             <!--
@@ -109,13 +130,13 @@
             -->
             <template v-if="form.certificate && form.certificate.lets_encrypt">
               <form-group-lets-encrypt-common-name namespace="common_name"
-                :column-label="$i18n.t('Common Name')"
+                                                   :column-label="$i18n.t('Common Name')"
               />
 
               <form-group-ca v-if="id === 'radius'"
-                namespace="ca"
-                :column-label="$i18n.t('Certification Authority certificate(s)')"
-                rows="6" auto-fit
+                             namespace="ca"
+                             :column-label="$i18n.t('Certification Authority certificate(s)')"
+                             rows="6" auto-fit
               />
             </template>
 
@@ -124,33 +145,35 @@
             -->
             <template v-else>
               <form-group-certificate namespace="certificate"
-                :column-label="$i18n.t('{name} Server Certificate', { name })"
-                rows="6" auto-fit
+                                      :column-label="$i18n.t('{name} Server Certificate', { name })"
+                                      rows="6" auto-fit
               />
 
               <form-group-find-intermediate-cas v-model="isFindIntermediateCas"
-                :column-label="$i18n.t('Find {name} Server intermediate CA(s) automatically', { name })"
+                                                :column-label="$i18n.t('Find {name} Server intermediate CA(s) automatically', { name })"
               />
 
               <form-group-intermediate-certification-authorities v-if="!isFindIntermediateCas"
-                namespace="intermediate_cas"
-                :column-label="$i18n.t('Intermediate CA certificate(s)')"
+                                                                 namespace="intermediate_cas"
+                                                                 :column-label="$i18n.t('Intermediate CA certificate(s)')"
               />
 
               <form-group-check-chain namespace="check_chain"
-                :column-label="$i18n.t('Validate certificate chain')"
+                                      :column-label="$i18n.t('Validate certificate chain')"
+                                      enabled-value="enabled"
+                                      disabled-value="disabled"
               />
 
               <form-group-private-key namespace="private_key"
-                :column-label="$i18n.t('{name} Server Private Key', { name })"
-                rows="6" auto-fit
+                                      :column-label="$i18n.t('{name} Server Private Key', { name })"
+                                      rows="6" auto-fit
               />
 
               <form-group-ca v-if="id === 'radius'"
-                namespace="ca"
-                :column-label="$i18n.t('Certification Authority certificate(s)')"
-                :text="$i18n.t('Trusted client authority certificates including root or intermediate certificates used for EAP-TLS must be added here.')"
-                rows="6" auto-fit
+                             namespace="ca"
+                             :column-label="$i18n.t('Certification Authority certificate(s)')"
+                             :text="$i18n.t('Trusted client authority certificates including root or intermediate certificates used for EAP-TLS must be added here.')"
+                             rows="6" auto-fit
               />
 
             </template>
@@ -167,7 +190,7 @@
             @save="onSaveWrapper"
           />
           <base-services :value="isModified"
-            v-bind="services" :title="$i18n.t('Warning')" class="mt-3 mb-0" />
+                         v-bind="services" :title="$i18n.t('Warning')" class="mt-3 mb-0"/>
         </b-card-footer>
       </b-tab>
 
@@ -200,6 +223,13 @@ import {
   FormGroupPrivateKey,
   TheCsr
 } from './'
+import {computed, ref, toRefs} from '@vue/composition-api'
+import {useForm, useFormProps} from '../_composables/useForm'
+import {
+  useViewCollectionItemFixed,
+  useViewCollectionItemFixedProps
+} from '../../_composables/useViewCollectionItemFixed'
+import * as collection from '../_composables/useCollection'
 
 const components = {
   BaseContainerLoading,
@@ -218,11 +248,6 @@ const components = {
   TheCsr
 }
 
-import { computed, ref, toRefs } from '@vue/composition-api'
-import { useForm, useFormProps } from '../_composables/useForm'
-import { useViewCollectionItemFixed, useViewCollectionItemFixedProps } from '../../_composables/useViewCollectionItemFixed'
-import * as collection from '../_composables/useCollection'
-
 const props = {
   ...useFormProps,
   ...useViewCollectionItemFixedProps,
@@ -234,10 +259,10 @@ const setup = (props, context) => {
     id
   } = toRefs(props)
   const name = computed(() => {
-    switch(id.value.toLowerCase()) {
+    switch (id.value.toLowerCase()) {
       case 'http':
         return 'HTTPs'
-        //break
+      //break
       default:
         return id.value.toUpperCase()
     }
@@ -273,18 +298,18 @@ const setup = (props, context) => {
     isFindIntermediateCas
   } = useForm(form, props, context)
 
-  const { root: { $store } = {} } = context
+  const {root: {$store} = {}} = context
 
   const onSaveWrapper = () => {
     onSave()
       .then(() => {
-          const { useStore } = collection
-          const { getItem } = useStore($store)
-          getItem(form.value.certificate)
-            .then(item => form.value = item)
-            .finally(() => {
-              tabIndex.value = 0
-            })
+        const {useStore} = collection
+        const {getItem} = useStore($store)
+        getItem(form.value.certificate)
+          .then(item => form.value = item)
+          .finally(() => {
+            tabIndex.value = 0
+          })
       })
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/index.js b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/index.js
index edf024125d44..5d5ba42b2a51 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/index.js
@@ -1,30 +1,27 @@
 import {
-  BaseButtonService,
   BaseFormButtonBar,
-
   BaseFormGroupChosenCountry,
   BaseFormGroupInput,
-  BaseFormGroupToggleDisabledEnabled,
-  BaseFormGroupToggleFalseTrue
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupCertificate from './BaseFormGroupCertificate'
 import BaseFormGroupPrivateKey from './BaseFormGroupPrivateKey'
 import BaseFormGroupLetsEncryptCommonName from './BaseFormGroupLetsEncryptCommonName'
-import BaseFormGroupIntermediateCertificateAuthorities from './BaseFormGroupIntermediateCertificateAuthorities'
+import BaseFormGroupIntermediateCertificateAuthorities
+  from './BaseFormGroupIntermediateCertificateAuthorities'
 import TheCsr from './TheCsr'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
 export {
-  BaseButtonService                               as ButtonService,
   BaseFormButtonBar                               as FormButtonBar,
 
-  BaseFormGroupToggleFalseTrue                    as FormGroupLetsEncrypt,
+  BaseFormGroupSwitch                             as FormGroupLetsEncrypt,
   BaseFormGroupLetsEncryptCommonName              as FormGroupLetsEncryptCommonName,
   BaseFormGroupCertificate                        as FormGroupCa,
   BaseFormGroupCertificate                        as FormGroupCertificate,
   BaseFormGroupPrivateKey                         as FormGroupPrivateKey,
-  BaseFormGroupToggleDisabledEnabled              as FormGroupCheckChain,
+  BaseFormGroupSwitch                             as FormGroupCheckChain,
   BaseFormGroupIntermediateCertificateAuthorities as FormGroupIntermediateCertificationAuthorities,
   BaseFormGroupChosenCountry                      as FormGroupCsrCountry,
   BaseFormGroupInput                              as FormGroupCsrState,

From 3ffdcf952dfa3f882961881d3316a6ed355a6307 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 19 Jul 2023 15:27:03 +0300
Subject: [PATCH 45/51] Add switch form group that doesn't use namespace

---
 .../new/OnChangeFormGroupSwitch.vue           | 95 +++++++++++++++++++
 .../root/src/components/new/index.js          |  2 +
 2 files changed, 97 insertions(+)
 create mode 100644 html/pfappserver/root/src/components/new/OnChangeFormGroupSwitch.vue

diff --git a/html/pfappserver/root/src/components/new/OnChangeFormGroupSwitch.vue b/html/pfappserver/root/src/components/new/OnChangeFormGroupSwitch.vue
new file mode 100644
index 000000000000..c6f520020336
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/OnChangeFormGroupSwitch.vue
@@ -0,0 +1,95 @@
+<template>
+  <base-form-group
+    class="form-group base-form-group-switch"
+    :column-label="columnLabel"
+    :content-cols="contentCols"
+    :content-cols-sm="contentColsSm"
+    :content-cols-md="contentColsMd"
+    :content-cols-lg="contentColsLg"
+    :content-cols-xl="contentColsXl"
+    :label-class="labelClass"
+    :label-cols="labelCols"
+    :label-cols-sm="labelColsSm"
+    :label-cols-md="labelColsMd"
+    :label-cols-lg="labelColsLg"
+    :label-cols-xl="labelColsXl"
+    :text="text"
+  >
+    <base-input-switch :disabled="isLocked"
+                       :size="size"
+                       :onChange="onChange"
+                       :value="switchValue"
+    />
+    <template v-slot:prepend v-if="$slots.prepend">
+      <slot name="prepend"></slot>
+    </template>
+    <template v-slot:append v-if="$slots.append">
+      <slot name="append"></slot>
+    </template>
+  </base-form-group>
+</template>
+<script>
+import {useFormGroupProps} from '@/composables/useFormGroup'
+import {useInput, useInputProps} from '@/composables/useInput'
+import {useInputMeta, useInputMetaProps} from '@/composables/useMeta'
+import {useInputValidator, useInputValidatorProps} from '@/composables/useInputValidator'
+import {
+  getFormNamespace,
+  setFormNamespace,
+  useInputValue,
+  useInputValueProps
+} from '@/composables/useInputValue'
+import BaseFormGroup from './BaseFormGroup'
+import BaseInputSwitch from './BaseInputSwitch.vue'
+import {computed, inject, unref} from '@vue/composition-api';
+
+const components = {
+  BaseFormGroup,
+  BaseInputSwitch
+}
+
+export const props = {
+  onChange: {
+    type: Function,
+    default: () => {
+    }
+  },
+  switchValue: {
+    type: Boolean,
+  },
+  isLocked: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  isFocus: {
+    default: false,
+    type: Boolean
+  },
+  ...useFormGroupProps,
+  ...useInputProps,
+  ...useInputMetaProps,
+  ...useInputValidatorProps,
+  ...useInputValueProps,
+}
+
+
+// @vue/component
+export default {
+  name: 'on-change-form-group-switch',
+  inheritAttrs: false,
+  components,
+  props
+}
+</script>
+<style lang="scss">
+.base-form-group-switch {
+  .input-group {
+    padding-bottom: 0px !important;
+  }
+}
+</style>
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index c7969140583b..82e8aa8df19f 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -80,6 +80,7 @@ import BaseUpload from './BaseUpload'
 import BaseView from './BaseView'
 import BaseFormGroupSwitch from './BaseFormGroupSwitch.vue';
 import BaseLabel from './BaseLabel.vue';
+import OnChangeFormGroupSwitch from '@/components/new/OnChangeFormGroupSwitch.vue';
 
 import { mergeProps, renderHOCWithScopedSlots } from './utils'
 
@@ -123,6 +124,7 @@ export {
   BaseFormGroupToggleNY,
   BaseFormGroupToggleOffOn,
   BaseFormGroupSwitch,
+  OnChangeFormGroupSwitch,
 
   // icons
   BaseIconPreference,

From 5dbff7138c9a12c33a1e9b6e729c7bc607402730 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 19 Jul 2023 15:28:40 +0300
Subject: [PATCH 46/51] Use onChange switch component in ssl certificate form

---
 .../sslCertificates/_components/TheForm.vue            | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
index cc31a6667358..dec01ab1cdee 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
@@ -149,7 +149,8 @@
                                       rows="6" auto-fit
               />
 
-              <form-group-find-intermediate-cas v-model="isFindIntermediateCas"
+              <form-group-find-intermediate-cas :switch-value="isFindIntermediateCas"
+                                                :on-change="findIntermediateCasOnChange"
                                                 :column-label="$i18n.t('Find {name} Server intermediate CA(s) automatically', { name })"
               />
 
@@ -210,7 +211,7 @@ import {
   BaseContainerLoading,
   BaseForm,
   BaseFormButtonBar,
-  BaseFormGroupToggleFalseTrue as FormGroupFindIntermediateCas,
+  OnChangeFormGroupSwitch as FormGroupFindIntermediateCas,
   BaseServices,
 } from '@/components/new/'
 import {
@@ -313,6 +314,10 @@ const setup = (props, context) => {
       })
   }
 
+  const findIntermediateCasOnChange = (value) => {
+    isFindIntermediateCas.value = value
+  }
+
   const tabIndex = ref(0)
 
   return {
@@ -342,6 +347,7 @@ const setup = (props, context) => {
     isChainValid,
     isLetsEncrypt,
     isFindIntermediateCas,
+    findIntermediateCasOnChange,
 
     // custom
     onSaveWrapper,

From 73d812c33c12931f88073926f090316653cbf429 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 19 Jul 2023 16:27:19 +0300
Subject: [PATCH 47/51] Change node edit form to use switch UI component

---
 .../views/Nodes/_components/TheFormUpdate.vue | 90 ++++++++++---------
 .../root/src/views/Nodes/_components/index.js |  8 +-
 2 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
index 78c7e8c8444d..3832b90cea6e 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
@@ -7,40 +7,43 @@
       class="pt-0"
     >
       <form-group-pid namespace="pid"
-        :column-label="$i18n.t('Owner')"
-        placeholder="default"
+                      :column-label="$i18n.t('Owner')"
+                      placeholder="default"
       />
       <form-group-status namespace="status"
-        :column-label="$i18n.t('Status')"
+                         :column-label="$i18n.t('Status')"
       />
       <form-group-role namespace="category_id"
-        :column-label="$i18n.t('Role')"
+                       :column-label="$i18n.t('Role')"
       />
       <form-group-unregdate namespace="unregdate"
-        :column-label="$i18n.t('Unregistration')"
+                            :column-label="$i18n.t('Unregistration')"
       />
       <form-group-time-balance namespace="time_balance"
-        :column-label="$i18n.t('Access Time Balance')"
-        :text="$i18n.t('Seconds')"
+                               :column-label="$i18n.t('Access Time Balance')"
+                               :text="$i18n.t('Seconds')"
       />
       <form-group-bandwidth-balance namespace="bandwidth_balance"
-        :column-label="$i18n.t('Bandwidth Balance')"
-        :max="MysqlLimits.ubigint.max"
+                                    :column-label="$i18n.t('Bandwidth Balance')"
+                                    :max="MysqlLimits.ubigint.max"
       />
       <form-group-voip namespace="voip"
-        :column-label="$i18n.t('Voice Over IP')"
+                       :column-label="$i18n.t('Voice Over IP')"
+                       enabled-value="yes"
+                       disabled-value="no"
+
       />
       <form-group-bypass-vlan namespace="bypass_vlan"
-        :column-label="$i18n.t('Bypass VLAN')"
+                              :column-label="$i18n.t('Bypass VLAN')"
       />
       <form-group-bypass-role namespace="bypass_role_id"
-        :column-label="$i18n.t('Bypass Role')"
+                              :column-label="$i18n.t('Bypass Role')"
       />
       <form-group-bypass-acls namespace="bypass_acls"
-        :column-label="$i18n.t('Bypass ACLS')"
+                              :column-label="$i18n.t('Bypass ACLS')"
       />
       <form-group-notes namespace="notes"
-        :column-label="$i18n.t('Notes')"
+                        :column-label="$i18n.t('Notes')"
       />
 
       <div class="mt-3">
@@ -59,11 +62,14 @@
             @save="onSave"
           >
             <template v-if="canReevaluateAccess">
-              <b-button class="mr-1" size="sm" variant="outline-secondary" :disabled="isLoading" @click="reevaluateAccess">{{ $i18n.t('Reevaluate Access') }}</b-button>
+              <b-button class="mr-1" size="sm" variant="outline-secondary" :disabled="isLoading"
+                        @click="reevaluateAccess">{{ $i18n.t('Reevaluate Access') }}
+              </b-button>
             </template>
             <template v-else>
               <span v-b-tooltip.hover.top.d300 :title="$i18n.t('Node has no locations.')">
-                <b-button class="mr-1" size="sm" variant="outline-secondary" :disabled="true">{{ $i18n.t('Reevaluate Access') }}</b-button>
+                <b-button class="mr-1" size="sm" variant="outline-secondary"
+                          :disabled="true">{{ $i18n.t('Reevaluate Access') }}</b-button>
               </span>
             </template>
           </form-button-bar>
@@ -74,24 +80,29 @@
 </template>
 
 <script>
-import {
-  BaseForm,
-  BaseFormGroupInput
-} from '@/components/new/'
+import {BaseForm, BaseFormGroupInput} from '@/components/new/'
 import {
   FormButtonBar,
-  FormGroupPid,
-  FormGroupStatus,
-  FormGroupRole,
-  FormGroupUnregdate,
-  FormGroupTimeBalance,
   FormGroupBandwidthBalance,
-  FormGroupVoip,
-  FormGroupBypassVlan,
   FormGroupBypassAcls,
   FormGroupBypassRole,
-  FormGroupNotes
+  FormGroupBypassVlan,
+  FormGroupNotes,
+  FormGroupPid,
+  FormGroupRole,
+  FormGroupStatus,
+  FormGroupTimeBalance,
+  FormGroupUnregdate,
+  FormGroupVoip
 } from './'
+import {computed, ref, toRefs, watch} from '@vue/composition-api'
+import {useDebouncedWatchHandler} from '@/composables/useDebounce'
+import useEventActionKey from '@/composables/useEventActionKey'
+import useEventJail from '@/composables/useEventJail'
+import {usePropsWrapper} from '@/composables/useProps'
+import {MysqlLimits} from '@/globals/mysql'
+import {updateSchema as schemaFn} from '../schema'
+import {useRouter, useStore} from '../_composables/useCollection'
 
 const components = {
   BaseForm,
@@ -117,15 +128,6 @@ const props = {
   }
 }
 
-import { computed, ref, toRefs, watch } from '@vue/composition-api'
-import { useDebouncedWatchHandler } from '@/composables/useDebounce'
-import useEventActionKey from '@/composables/useEventActionKey'
-import useEventJail from '@/composables/useEventJail'
-import { usePropsWrapper } from '@/composables/useProps'
-import { MysqlLimits } from '@/globals/mysql'
-import { updateSchema as schemaFn } from '../schema'
-import { useRouter, useStore } from '../_composables/useCollection'
-
 const setup = (props, context) => {
 
   const {
@@ -150,7 +152,7 @@ const setup = (props, context) => {
     )
   )
 
-  const { root: { $router, $store } = {} } = context
+  const {root: {$router, $store} = {}} = context
 
   // merge props w/ params in useStore methods
   const _useStore = $store => usePropsWrapper(useStore($store), props)
@@ -164,7 +166,7 @@ const setup = (props, context) => {
   } = _useStore($store)
 
   const canReevaluateAccess = computed(() => {
-    const { locations = [] } = $store.state.$_nodes.nodes[id.value] || {}
+    const {locations = []} = $store.state.$_nodes.nodes[id.value] || {}
     return locations.length > 0
   })
 
@@ -174,7 +176,7 @@ const setup = (props, context) => {
   } = useRouter($router)
 
   const isDeletable = computed(() => {
-    const { not_deletable: notDeletable = false } = form.value || {}
+    const {not_deletable: notDeletable = false} = form.value || {}
     if (notDeletable)
       return false
     return true
@@ -183,7 +185,7 @@ const setup = (props, context) => {
   const init = () => {
     return new Promise((resolve, reject) => {
       getItem().then(item => {
-        form.value = { ...item }
+        form.value = {...item}
         resolve()
       }).catch(e => {
         form.value = {}
@@ -208,15 +210,15 @@ const setup = (props, context) => {
     const closeAfter = actionKey.value
     save().then(response => {
       if (closeAfter) // [CTRL] key pressed
-        goToCollection({ actionKey: true })
+        goToCollection({actionKey: true})
       else {
-        form.value = { ...form.value, ...response } // merge form w/ newly inserted IDs
+        form.value = {...form.value, ...response} // merge form w/ newly inserted IDs
         goToItem(form.value).then(() => init()) // re-init
       }
     })
   }
 
-  watch(props, () => init(), { deep: true, immediate: true })
+  watch(props, () => init(), {deep: true, immediate: true})
 
   return {
     MysqlLimits,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/index.js b/html/pfappserver/root/src/views/Nodes/_components/index.js
index 06dfd595c0fa..475a7f28b008 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/index.js
+++ b/html/pfappserver/root/src/views/Nodes/_components/index.js
@@ -6,7 +6,7 @@ import {
   BaseFormGroupInputMultiplier,
   BaseFormGroupInputNumber,
   BaseFormGroupTextarea,
-  BaseFormGroupToggleNoYes
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseFormGroupRolesOptional from './BaseFormGroupRolesOptional'
 import BaseFormGroupStatus from './BaseFormGroupStatus'
@@ -22,12 +22,12 @@ export {
   BaseFormGroupInputDateTime    as FormGroupUnregdate,
   BaseFormGroupInputNumber      as FormGroupTimeBalance,
   BaseFormGroupInputMultiplier  as FormGroupBandwidthBalance,
-  BaseFormGroupToggleNoYes      as FormGroupVoip,
+  BaseFormGroupSwitch           as FormGroupVoip,
   BaseFormGroupInput            as FormGroupBypassVlan,
   BaseFormGroupRolesOptional    as FormGroupBypassRole,
   BaseFormGroupTextarea         as FormGroupNotes,
   BaseFormGroupTextarea         as FormGroupBypassAcls,
-  
+
   BaseFormGroupInput            as FormGroupMac,
-  
+
 }

From 3111d08ef96e43d9aefe9305eaf4c7e42592cbfc Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 19 Jul 2023 17:18:16 +0300
Subject: [PATCH 48/51] Change user creation form to use switch UI component

---
 .../_components/TheFormCreateMultiple.vue     | 102 ++++++-----
 .../Users/_components/TheFormCreateSingle.vue | 158 +++++++++---------
 .../root/src/views/Users/_components/index.js |   6 +-
 3 files changed, 130 insertions(+), 136 deletions(-)

diff --git a/html/pfappserver/root/src/views/Users/_components/TheFormCreateMultiple.vue b/html/pfappserver/root/src/views/Users/_components/TheFormCreateMultiple.vue
index a47a5f939dae..abf7aaf20401 100644
--- a/html/pfappserver/root/src/views/Users/_components/TheFormCreateMultiple.vue
+++ b/html/pfappserver/root/src/views/Users/_components/TheFormCreateMultiple.vue
@@ -6,60 +6,65 @@
       :isLoading="isLoading"
       class="pt-0"
     >
-      <b-alert show variant="info" v-html="$t('The usernames are constructed from the <b>prefix</b> and the <b>quantity</b>. For example, setting the prefix to <i>guest</i> and the quantity to <i>3</i> creates usernames <i>guest1</i>, <i>guest2</i> and <i>guest3</i>. Random passwords will be created.')"></b-alert>
+      <b-alert show variant="info"
+               v-html="$t('The usernames are constructed from the <b>prefix</b> and the <b>quantity</b>. For example, setting the prefix to <i>guest</i> and the quantity to <i>3</i> creates usernames <i>guest1</i>, <i>guest2</i> and <i>guest3</i>. Random passwords will be created.')"></b-alert>
 
       <form-group-pid-overwrite namespace="pid_overwrite"
-        :column-label="$t('Username (PID) overwrite')"
-        :text="$t('Overwrite the username (PID) if it already exists.')"
+                                :column-label="$t('Username (PID) overwrite')"
+                                :text="$t('Overwrite the username (PID) if it already exists.')"
+                                :enabled-value="1"
+                                :disabled-value="0"
       />
 
       <form-group-prefix namespace="prefix"
-        :column-label="$t('Username Prefix')"
+                         :column-label="$t('Username Prefix')"
       />
 
       <form-group-quantity namespace="quantity"
-        :column-label="$t('Quantity')"
+                           :column-label="$t('Quantity')"
       />
 
       <form-group-password-options v-model="passwordOptions"
-        min="6" max="64"
-        :column-label="$i18n.t('Password')"
-        :text="$i18n.t('Random passwords will be created.')"
+                                   min="6" max="64"
+                                   :column-label="$i18n.t('Password')"
+                                   :text="$i18n.t('Random passwords will be created.')"
       />
 
       <form-group-login-remaining namespace="login_remaining"
-        :column-label="$t('Login remaining')"
-        :text="$t('Leave empty to allow unlimited logins.')"
+                                  :column-label="$t('Login remaining')"
+                                  :text="$t('Leave empty to allow unlimited logins.')"
       />
 
       <form-group-firstname namespace="firstname"
-        :column-label="$t('Firstname')"
+                            :column-label="$t('Firstname')"
       />
 
       <form-group-lastname namespace="lastname"
-        :column-label="$t('Lastname')"
+                           :column-label="$t('Lastname')"
       />
 
       <form-group-company namespace="company"
-        :column-label="$t('Company')"
+                          :column-label="$t('Company')"
       />
 
       <form-group-notes namespace="notes"
-        :column-label="$t('Notes')"
+                        :column-label="$t('Notes')"
       />
 
       <base-form-group
         :column-label="$t('Registration Window')"
       >
         <input-group-valid-from namespace="valid_from"
-          class="flex-grow-1" />
-        <b-button variant="link" disabled><icon name="long-arrow-alt-right"></icon></b-button>
+                                class="flex-grow-1"/>
+        <b-button variant="link" disabled>
+          <icon name="long-arrow-alt-right"></icon>
+        </b-button>
         <input-group-expiration namespace="expiration"
-          class="flex-grow-1" />
+                                class="flex-grow-1"/>
       </base-form-group>
 
       <form-group-actions namespace="actions"
-        :column-label="$t('Actions')"
+                          :column-label="$t('Actions')"
       />
 
       <div class="mt-3">
@@ -77,31 +82,32 @@
         </div>
       </div>
     </base-form>
-    <the-preview-modal v-model="showPreviewModal" :quantity="form.quantity" :completed="completed" />
+    <the-preview-modal v-model="showPreviewModal" :quantity="form.quantity" :completed="completed"/>
   </b-form>
 </template>
 <script>
+import {BaseForm, BaseFormButtonBar, BaseFormGroup} from '@/components/new/'
 import {
-  BaseForm,
-  BaseFormButtonBar,
-  BaseFormGroup
-} from '@/components/new/'
-import {
-  FormGroupPidOverwrite,
-  FormGroupPrefix,
-  FormGroupQuantity,
-  FormGroupLoginRemaining,
+  FormGroupActions,
+  FormGroupCompany,
   FormGroupFirstname,
   FormGroupLastname,
-  FormGroupCompany,
+  FormGroupLoginRemaining,
   FormGroupNotes,
   FormGroupPasswordOptions,
-
-  InputGroupValidFrom,
+  FormGroupPidOverwrite,
+  FormGroupPrefix,
+  FormGroupQuantity,
   InputGroupExpiration,
-  FormGroupActions
+  InputGroupValidFrom
 } from './'
 import ThePreviewModal from './ThePreviewModal'
+import {computed, ref} from '@vue/composition-api'
+import {useDebouncedWatchHandler} from '@/composables/useDebounce'
+import {multiple as schemaFn} from '../schema'
+import i18n from '@/utils/locale'
+import password from '@/utils/password'
+import {createMultipleForm as defaults, passwordOptions as _passwordOptions} from '../_config/'
 
 const components = {
   BaseForm,
@@ -124,22 +130,12 @@ const components = {
   ThePreviewModal
 }
 
-import { computed, ref } from '@vue/composition-api'
-import { useDebouncedWatchHandler } from '@/composables/useDebounce'
-import { multiple as schemaFn } from '../schema'
-import i18n from '@/utils/locale'
-import password from '@/utils/password'
-import {
-  createMultipleForm as defaults,
-  passwordOptions as _passwordOptions
-} from '../_config/'
-
 const setup = (props, context) => {
 
-  const { root: { $router, $store } = {} } = context
+  const {root: {$router, $store} = {}} = context
 
   const rootRef = ref(null)
-  const form = ref({ ...defaults }) // dereferenced
+  const form = ref({...defaults}) // dereferenced
   const schema = computed(() => schemaFn(props, form.value))
   const isLoading = computed(() => $store.getters['$_users/isLoading'])
 
@@ -154,7 +150,7 @@ const setup = (props, context) => {
   )
 
   const onClose = () => {
-    $router.push({ name: 'users' })
+    $router.push({name: 'users'})
   }
 
   const showPreviewModal = ref(false)
@@ -179,22 +175,22 @@ const setup = (props, context) => {
       }
       promises.push($store.dispatch('$_users/exists', _form.pid).then(() => {
         // user exists
-        completed.value += 1/3
+        completed.value += 1 / 3
         return $store.dispatch('$_users/updateUser', _form).then(() => {
-          completed.value += 1/3
+          completed.value += 1 / 3
           return $store.dispatch('$_users/updatePassword', _form).then(() => {
-            completed.value += 1/3
+            completed.value += 1 / 3
             createdUsers.value.push(_form)
             $store.commit('$_users/CREATED_USERS_REPLACED', createdUsers.value)
           })
         })
       }).catch(() => {
         // user not exist
-        completed.value += 1/3
+        completed.value += 1 / 3
         return $store.dispatch('$_users/createUser', _form).then(() => {
-          completed.value += 1/3
+          completed.value += 1 / 3
           return $store.dispatch('$_users/createPassword', _form).then(() => {
-            completed.value += 1/3
+            completed.value += 1 / 3
             createdUsers.value.push(_form)
             $store.commit('$_users/CREATED_USERS_REPLACED', createdUsers.value)
           })
@@ -204,7 +200,7 @@ const setup = (props, context) => {
     showPreviewModal.value = true
     Promise.all(promises).then(values => {
       $store.dispatch('notification/info', {
-        message: i18n.t('{quantity} users created', { quantity: values.length }),
+        message: i18n.t('{quantity} users created', {quantity: values.length}),
         success: null,
         skipped: null,
         failed: null
@@ -213,7 +209,7 @@ const setup = (props, context) => {
   }
 
   const onReset = () => {
-    form.value = { ...defaults } // dereferenced
+    form.value = {...defaults} // dereferenced
   }
 
   const passwordOptions = ref(_passwordOptions)
diff --git a/html/pfappserver/root/src/views/Users/_components/TheFormCreateSingle.vue b/html/pfappserver/root/src/views/Users/_components/TheFormCreateSingle.vue
index 9a1520c62d97..87a5294a1c4e 100644
--- a/html/pfappserver/root/src/views/Users/_components/TheFormCreateSingle.vue
+++ b/html/pfappserver/root/src/views/Users/_components/TheFormCreateSingle.vue
@@ -7,8 +7,10 @@
       class="pt-0"
     >
       <form-group-pid-overwrite namespace="pid_overwrite"
-        :column-label="$t('Username (PID) overwrite')"
-        :text="$t('Overwrite the username (PID) if it already exists.')"
+                                :column-label="$t('Username (PID) overwrite')"
+                                :text="$t('Overwrite the username (PID) if it already exists.')"
+                                :enabled-value="1"
+                                :disabled-value="0"
       />
 
       <form-group-pid
@@ -18,116 +20,118 @@
       />
 
       <form-group-password namespace="password"
-        :column-label="$t('Password')"
+                           :column-label="$t('Password')"
       />
 
       <form-group-login-remaining namespace="login_remaining"
-        :column-label="$t('Login remaining')"
-        :text="$t('Leave empty to allow unlimited logins.')"
+                                  :column-label="$t('Login remaining')"
+                                  :text="$t('Leave empty to allow unlimited logins.')"
       />
 
       <form-group-email namespace="email"
-        :column-label="$t('Email')"
+                        :column-label="$t('Email')"
       />
 
       <form-group-sponsor namespace="sponsor"
-        :column-label="$t('Sponsor')"
-        :text="$t('If no sponsor is defined the current user will be used.')"
-        :placeholder="$store.state['session'].username"
+                          :column-label="$t('Sponsor')"
+                          :text="$t('If no sponsor is defined the current user will be used.')"
+                          :placeholder="$store.state['session'].username"
       />
 
       <form-group-language namespace="lang"
-        :column-label="$t('Language')" />
+                           :column-label="$t('Language')"/>
 
       <form-group-gender namespace="gender"
-        :column-label="$t('Gender')" />
+                         :column-label="$t('Gender')"/>
 
       <form-group-title namespace="title"
-        :column-label="$t('Title')" />
+                        :column-label="$t('Title')"/>
 
       <form-group-firstname namespace="firstname"
-        :column-label="$t('Firstname')" />
+                            :column-label="$t('Firstname')"/>
 
       <form-group-lastname namespace="lastname"
-        :column-label="$t('Lastname')" />
+                           :column-label="$t('Lastname')"/>
 
       <form-group-nickname namespace="nickname"
-        :column-label="$t('Nickname')" />
+                           :column-label="$t('Nickname')"/>
 
       <form-group-company namespace="company"
-        :column-label="$t('Company')" />
+                          :column-label="$t('Company')"/>
 
       <form-group-telephone namespace="telephone"
-        :column-label="$t('Telephone number')" />
+                            :column-label="$t('Telephone number')"/>
 
       <form-group-cell-phone namespace="cell_phone"
-        :column-label="$t('Cellphone number')" />
+                             :column-label="$t('Cellphone number')"/>
 
       <form-group-work-phone namespace="work_phone"
-        :column-label="$t('Workphone number')" />
+                             :column-label="$t('Workphone number')"/>
 
       <form-group-apartment-number namespace="apartment_number"
-        :column-label="$t('Apartment number')" />
+                                   :column-label="$t('Apartment number')"/>
 
       <form-group-building-number namespace="building_number"
-        :column-label="$t('Building Number')" />
+                                  :column-label="$t('Building Number')"/>
 
       <form-group-room-number namespace="room_number"
-        :column-label="$t('Room Number')" />
+                              :column-label="$t('Room Number')"/>
 
       <form-group-address namespace="address"
-        :column-label="$t('Address')" />
+                          :column-label="$t('Address')"/>
 
       <form-group-anniversary namespace="anniversary"
-        :column-label="$t('Anniversary')" />
+                              :column-label="$t('Anniversary')"/>
 
       <form-group-birthday namespace="birthday"
-        :column-label="$t('Birthday')" />
+                           :column-label="$t('Birthday')"/>
 
       <form-group-psk namespace="psk"
-        :column-label="$t('Psk')" />
+                      :column-label="$t('Psk')"/>
 
       <form-group-notes namespace="notes"
-        :column-label="$t('Notes')" />
+                        :column-label="$t('Notes')"/>
 
       <form-group-custom-field-1 namespace="custom_field_1"
-        :column-label="$t('Custom Field 1')" />
+                                 :column-label="$t('Custom Field 1')"/>
 
       <form-group-custom-field-2 namespace="custom_field_2"
-        :column-label="$t('Custom Field 2')" />
+                                 :column-label="$t('Custom Field 2')"/>
 
       <form-group-custom-field-3 namespace="custom_field_3"
-        :column-label="$t('Custom Field 3')" />
+                                 :column-label="$t('Custom Field 3')"/>
 
       <form-group-custom-field-4 namespace="custom_field_4"
-        :column-label="$t('Custom Field 4')"  />
+                                 :column-label="$t('Custom Field 4')"/>
 
       <form-group-custom-field-5 namespace="custom_field_5"
-        :column-label="$t('Custom Field 5')" />
+                                 :column-label="$t('Custom Field 5')"/>
 
       <form-group-custom-field-6 namespace="custom_field_6"
-        :column-label="$t('Custom Field 6')" />
+                                 :column-label="$t('Custom Field 6')"/>
 
       <form-group-custom-field-7 namespace="custom_field_7"
-        :column-label="$t('Custom Field 7')" />
+                                 :column-label="$t('Custom Field 7')"/>
 
       <form-group-custom-field-8 namespace="custom_field_8"
-        :column-label="$t('Custom Field 8')" />
+                                 :column-label="$t('Custom Field 8')"/>
 
       <form-group-custom-field-9 namespace="custom_field_9"
-        :column-label="$t('Custom Field 9')" />
+                                 :column-label="$t('Custom Field 9')"/>
 
       <base-form-group
         :column-label="$t('Registration Window')">
         <input-group-valid-from namespace="valid_from"
-          class="flex-grow-1" />
-        <b-button variant="link" disabled><icon name="long-arrow-alt-right"></icon></b-button>
+                                class="flex-grow-1"/>
+        <b-button variant="link" disabled>
+          <icon name="long-arrow-alt-right"></icon>
+        </b-button>
         <input-group-expiration namespace="expiration"
-          class="flex-grow-1" />
+                                class="flex-grow-1"/>
       </base-form-group>
 
       <form-group-actions namespace="actions"
-        :column-label="$t('Actions')" />
+                          :column-label="$t('Actions')"/>
 
       <div class="mt-3">
         <div class="border-top pt-3">
@@ -144,40 +148,20 @@
         </div>
       </div>
     </base-form>
-    <the-preview-modal v-model="showPreviewModal" />
+    <the-preview-modal v-model="showPreviewModal"/>
   </b-form>
 </template>
 <script>
+import {BaseForm, BaseFormButtonBar, BaseFormGroup} from '@/components/new/'
 import {
-  BaseForm,
-  BaseFormButtonBar,
-  BaseFormGroup
-} from '@/components/new/'
-import {
-  FormGroupPidOverwrite,
-  FormGroupPid,
-  FormGroupPassword,
-  FormGroupLoginRemaining,
-  FormGroupEmail,
-  FormGroupSponsor,
-  FormGroupLanguage,
-  FormGroupGender,
-  FormGroupTitle,
-  FormGroupFirstname,
-  FormGroupLastname,
-  FormGroupNickname,
-  FormGroupCompany,
-  FormGroupTelephone,
-  FormGroupCellPhone,
-  FormGroupWorkPhone,
-  FormGroupApartmentNumber,
-  FormGroupBuildingNumber,
-  FormGroupRoomNumber,
+  FormGroupActions,
   FormGroupAddress,
   FormGroupAnniversary,
+  FormGroupApartmentNumber,
   FormGroupBirthday,
-  FormGroupPsk,
-  FormGroupNotes,
+  FormGroupBuildingNumber,
+  FormGroupCellPhone,
+  FormGroupCompany,
   FormGroupCustomField1,
   FormGroupCustomField2,
   FormGroupCustomField3,
@@ -187,12 +171,31 @@ import {
   FormGroupCustomField7,
   FormGroupCustomField8,
   FormGroupCustomField9,
-
-  InputGroupValidFrom,
+  FormGroupEmail,
+  FormGroupFirstname,
+  FormGroupGender,
+  FormGroupLanguage,
+  FormGroupLastname,
+  FormGroupLoginRemaining,
+  FormGroupNickname,
+  FormGroupNotes,
+  FormGroupPassword,
+  FormGroupPid,
+  FormGroupPidOverwrite,
+  FormGroupPsk,
+  FormGroupRoomNumber,
+  FormGroupSponsor,
+  FormGroupTelephone,
+  FormGroupTitle,
+  FormGroupWorkPhone,
   InputGroupExpiration,
-  FormGroupActions
+  InputGroupValidFrom
 } from './'
 import ThePreviewModal from './ThePreviewModal'
+import {computed, ref} from '@vue/composition-api'
+import {useDebouncedWatchHandler} from '@/composables/useDebounce'
+import {single as schemaFn} from '../schema'
+import {createSingleForm as defaults} from '../_config/'
 
 const components = {
   BaseForm,
@@ -239,17 +242,12 @@ const components = {
   ThePreviewModal
 }
 
-import { computed, ref } from '@vue/composition-api'
-import { useDebouncedWatchHandler } from '@/composables/useDebounce'
-import { single as schemaFn } from '../schema'
-import { createSingleForm as defaults } from '../_config/'
-
 const setup = (props, context) => {
 
-  const { root: { $router, $store } = {} } = context
+  const {root: {$router, $store} = {}} = context
 
   const rootRef = ref(null)
-  const form = ref({ ...defaults }) // dereferenced
+  const form = ref({...defaults}) // dereferenced
   const schema = computed(() => schemaFn(props, form.value))
   const isLoading = computed(() => $store.getters['$_users/isLoading'])
 
@@ -264,7 +262,7 @@ const setup = (props, context) => {
   )
 
   const onClose = () => {
-    $router.push({ name: 'users' })
+    $router.push({name: 'users'})
   }
 
   const showPreviewModal = ref(false)
@@ -274,7 +272,7 @@ const setup = (props, context) => {
     showPreviewModal.value = false
     const _form = form.value
     $store.dispatch('$_users/createUser', _form).then(() => {
-      $store.dispatch('$_users/createPassword', Object.assign({ quiet: true }, _form)).then(() => {
+      $store.dispatch('$_users/createPassword', Object.assign({quiet: true}, _form)).then(() => {
         $store.commit('$_users/CREATED_USERS_REPLACED', [_form])
         showPreviewModal.value = true
       })
@@ -282,7 +280,7 @@ const setup = (props, context) => {
   }
 
   const onReset = () => {
-    form.value = { ...defaults } // dereferenced
+    form.value = {...defaults} // dereferenced
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Users/_components/index.js b/html/pfappserver/root/src/views/Users/_components/index.js
index 3963c1292428..6483c0055c05 100644
--- a/html/pfappserver/root/src/views/Users/_components/index.js
+++ b/html/pfappserver/root/src/views/Users/_components/index.js
@@ -5,17 +5,17 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupInputPasswordGenerator,
   BaseFormGroupTextarea,
-  BaseInputGroupDateTime
+  BaseInputGroupDateTime,
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import BaseRuleFormGroupActions from '@/views/Configuration/sources/_components/BaseRuleFormGroupActions'
 import BaseFormGroupGender from './BaseFormGroupGender'
-import BaseFormGroupPidOverwrite from './BaseFormGroupPidOverwrite'
 import BaseFormGroupPasswordOptions from './BaseFormGroupPasswordOptions'
 
 export {
   BaseFormButtonBar                   as FormButtonBar,
 
-  BaseFormGroupPidOverwrite           as FormGroupPidOverwrite,
+  BaseFormGroupSwitch                 as FormGroupPidOverwrite,
   BaseFormGroupInput                  as FormGroupPid,
   BaseFormGroupInputPasswordGenerator as FormGroupPassword,
   BaseFormGroupInputNumber            as FormGroupLoginRemaining,

From f23611bd548d297eebeeb97e11f5e93fa5f31dd2 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Wed, 19 Jul 2023 19:07:50 +0300
Subject: [PATCH 49/51] Change data flow view to use switch UI component

---
 .../_components/BaseDataFlows.vue             | 71 +++++++++++--------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/html/pfappserver/root/src/views/Status/network_communication/_components/BaseDataFlows.vue b/html/pfappserver/root/src/views/Status/network_communication/_components/BaseDataFlows.vue
index 98f7e1fddf7f..f6b29433fdb1 100644
--- a/html/pfappserver/root/src/views/Status/network_communication/_components/BaseDataFlows.vue
+++ b/html/pfappserver/root/src/views/Status/network_communication/_components/BaseDataFlows.vue
@@ -5,14 +5,12 @@
         <b-col cols="auto">
           <h5 class="mb-0 d-inline">{{ $i18n.t('Flows') }}</h5>
         </b-col>
-        <b-col cols="auto" class="ml-auto">
-          <base-input-toggle-false-true v-model="animate"
-            :column-label="$i18n.t('Animate')"
-            label-left :label-right="false"
-            :options="[
-            { value: false, label: $i18n.t('Animate') },
-            { value: true, label: $i18n.t('Animate'), color: 'var(--primary)' }
-          ]"/>
+        <b-col cols="auto" class="ml-auto animate-switch">
+          <base-label>{{ $i18n.t('Animate') }}</base-label>
+          <base-input-switch :value="animate"
+                             :onChange="animateOnChange"
+
+          />
         </b-col>
       </b-row>
     </b-card-header>
@@ -23,28 +21,34 @@
         </template>
       </b-tab>
       <b-tab v-for="(devices, i) in collections" :key="`tab-${i}`"
-        lazy>
+             lazy>
         <template #title>
           <span v-for="device of devices" :key="device.mac">
-            {{ device.mac }} <b-badge pill variant="primary" class="ml-1">{{ device.count }}</b-badge>
+            {{ device.mac }} <b-badge pill variant="primary" class="ml-1">{{
+              device.count
+            }}</b-badge>
           </span>
         </template>
       </b-tab>
       <base-data-flow
         :animate="animate"
         :devices="devices"
-        @device="toggleDevice" />
+        @device="toggleDevice"/>
     </b-tabs>
   </b-card>
 </template>
 <script>
 import BaseDataFlow from './BaseDataFlow'
-import {
-  BaseInputToggleFalseTrue
-} from '@/components/new/'
+import {OnChangeFormGroupSwitch, BaseLabel} from '@/components/new/'
+import BaseInputSwitch from '@/components/new/BaseInputSwitch.vue'
+import {computed, ref, toRefs, watch} from '@vue/composition-api'
+import usePreference from '@/composables/usePreference'
+
 const components = {
   BaseDataFlow,
-  BaseInputToggleFalseTrue
+  OnChangeFormGroupSwitch,
+  BaseInputSwitch,
+  BaseLabel
 }
 
 const props = {
@@ -53,38 +57,35 @@ const props = {
   }
 }
 
-import { computed, ref, toRefs, watch } from '@vue/composition-api'
-import usePreference from '@/composables/usePreference'
-
 const setup = (props, context) => {
 
   const {
     device
   } = toRefs(props)
 
-  const { root: { $store } = {} } = context
+  const {root: {$store} = {}} = context
 
   const byDevice = computed(() => $store.getters['$_fingerbank_communication/byDevice'])
 
   const collections = ref([])
   watch(byDevice, () => {
     collections.value = Object.entries(byDevice.value)
-      .map(([mac, data]) => ({ mac, ...data }))
+      .map(([mac, data]) => ({mac, ...data}))
       .sort((a, b) => a.mac.localeCompare(b.mac))
-      .map(item => ([ item ]))
-  }, { immediate: true })
+      .map(item => ([item]))
+  }, {immediate: true})
 
   const tabIndex = ref(0)
 
   const devices = computed(() => {
     // idx 0: All
-    switch(tabIndex.value) {
+    switch (tabIndex.value) {
       case 0:
-        return Object.keys(byDevice.value).map(mac => ({ mac })) // all
-        // break
+        return Object.keys(byDevice.value).map(mac => ({mac})) // all
+      // break
       default:
         return collections.value[tabIndex.value - 1]
-        // break
+      // break
     }
   })
 
@@ -92,23 +93,26 @@ const setup = (props, context) => {
     if (tabIndex.value === 0) {
       // view specific device
       tabIndex.value = collections.value.findIndex(devices => devices.map(device => device.mac).indexOf(mac) > -1) + 1
-    }
-    else {
+    } else {
       // view all
       tabIndex.value = 0
     }
   }
 
-  watch(device, () => toggleDevice(device.value), { immediate: true })
+  watch(device, () => toggleDevice(device.value), {immediate: true})
 
   const animate = usePreference('vizsec::settings', 'animate', false)
+  const animateOnChange = (toggleValue) => {
+    animate.value = toggleValue
+  }
 
   return {
     collections,
     tabIndex,
     devices,
     toggleDevice,
-    animate
+    animate,
+    animateOnChange,
   }
 }
 
@@ -119,4 +123,9 @@ export default {
   props,
   setup
 }
-</script>
\ No newline at end of file
+</script>
+<style>
+  .animate-switch {
+    display: flex;
+  }
+</style>

From ce3d612c35fd0bcc83efdfb14a320d7a5a6f457e Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Thu, 20 Jul 2023 09:26:04 +0300
Subject: [PATCH 50/51] Change live logs view to use switch UI component

---
 .../Auditing/liveLogs/_components/TheForm.vue | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/html/pfappserver/root/src/views/Auditing/liveLogs/_components/TheForm.vue b/html/pfappserver/root/src/views/Auditing/liveLogs/_components/TheForm.vue
index d5034f748d61..2a23127e459a 100644
--- a/html/pfappserver/root/src/views/Auditing/liveLogs/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Auditing/liveLogs/_components/TheForm.vue
@@ -1,9 +1,9 @@
 <template>
   <b-card no-body>
     <b-card-header>
-      <h4 v-t="'Live Logs'" class="mb-0" />
+      <h4 v-t="'Live Logs'" class="mb-0"/>
     </b-card-header>
-    <the-tabs />
+    <the-tabs/>
     <b-card-body>
       <b-form @submit.prevent="onCreate" ref="formRef">
         <base-form
@@ -14,13 +14,16 @@
           <b-form-row align-v="center">
             <b-col sm="12">
               <base-form-group-chosen-multiple namespace="files"
-                :column-label="$t('Log Files')"
-                :placeholder="$t('Choose log file(s)')"
-                :options="files" />
+                                               :column-label="$t('Log Files')"
+                                               :placeholder="$t('Choose log file(s)')"
+                                               :options="files"/>
               <base-form-group-input namespace="filter"
-                :column-label="$t('Filter')" />
-              <base-form-group-toggle-false-true namespace="filter_is_regexp"
-                :column-label="$t('Regular Expression')" />
+                                     :column-label="$t('Filter')"/>
+              <base-form-group-switch
+                namespace="filter_is_regexp"
+                :column-label="$t('Regular Expression')"
+                :enabled-value="true"
+                :disabled-value="false"/>
             </b-col>
           </b-form-row>
         </base-form>
@@ -28,7 +31,8 @@
     </b-card-body>
     <b-card-footer>
       <b-button variant="primary" :disabled="isLoading || !isValid" @click="onCreate">
-        <icon name="circle-notch" spin v-show="isLoading" /> {{ $t('Start Session') }}
+        <icon name="circle-notch" spin v-show="isLoading"/>
+        {{ $t('Start Session') }}
       </b-button>
     </b-card-footer>
   </b-card>
@@ -39,23 +43,22 @@ import {
   BaseForm,
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
-  BaseFormGroupToggleFalseTrue
+  BaseFormGroupSwitch,
 } from '@/components/new/'
 import TheTabs from './TheTabs'
+import {computed, ref} from '@vue/composition-api'
+import {useDebouncedWatchHandler} from '@/composables/useDebounce'
+import i18n from '@/utils/locale'
+import yup from '@/utils/yup'
 
 const components = {
   BaseForm,
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput,
-  BaseFormGroupToggleFalseTrue,
+  BaseFormGroupSwitch,
   TheTabs
 }
 
-import { computed, ref } from '@vue/composition-api'
-import { useDebouncedWatchHandler } from '@/composables/useDebounce'
-import i18n from '@/utils/locale'
-import yup from '@/utils/yup'
-
 const schema = yup.object({
   files: yup.array().ensure()
     .required(i18n.t('Log file(s) required.'))
@@ -64,9 +67,9 @@ const schema = yup.object({
 
 const setup = (props, context) => {
 
-  const { root: { $router, $store } = {} } = context
+  const {root: {$router, $store} = {}} = context
 
-  const form = ref ({
+  const form = ref({
     name: i18n.t('New Session'),
     files: [],
     filter: null,
@@ -80,12 +83,12 @@ const setup = (props, context) => {
 
   // immediate
   $store.dispatch(`$_live_logs/optionsSession`).then(response => {
-    const { meta: { files: { item: { allowed = [] } = {} } = {} } = {} } = response
+    const {meta: {files: {item: {allowed = []} = {}} = {}} = {}} = response
     if (allowed) {
       files.value = allowed
         .map(item => {
-          const { text, value } = item
-          return { text: `${value} - ${text}`, value }
+          const {text, value} = item
+          return {text: `${value} - ${text}`, value}
         })
         .sort((a, b) => {
           return a.value.localeCompare(b.value)
@@ -95,9 +98,9 @@ const setup = (props, context) => {
 
   const onCreate = () => {
     $store.dispatch(`$_live_logs/createSession`, form.value).then(response => {
-      const { session_id } = response
+      const {session_id} = response
       if (session_id)
-        $router.push({ name: 'live_log', params: { id: session_id } })
+        $router.push({name: 'live_log', params: {id: session_id}})
     })
   }
 

From e7712217576cb668d10e5c98deff2a5ef3822201 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 24 Jul 2023 13:06:22 +0300
Subject: [PATCH 51/51] Experimental changes that attempt to separate UI and
 backend form data

---
 .../root/src/components/new/index.js          |   8 +-
 .../Configuration/dns/_components/TheForm.vue |  32 ++-
 .../dns/_components/vModelSwitch.vue          | 244 ++++++++++++++++++
 3 files changed, 273 insertions(+), 11 deletions(-)
 create mode 100644 html/pfappserver/root/src/views/Configuration/dns/_components/vModelSwitch.vue

diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index 82e8aa8df19f..876005cfdf24 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -78,9 +78,10 @@ import BaseTableEmpty from './BaseTableEmpty'
 import BaseTableSortable from './BaseTableSortable'
 import BaseUpload from './BaseUpload'
 import BaseView from './BaseView'
-import BaseFormGroupSwitch from './BaseFormGroupSwitch.vue';
-import BaseLabel from './BaseLabel.vue';
-import OnChangeFormGroupSwitch from '@/components/new/OnChangeFormGroupSwitch.vue';
+import BaseFormGroupSwitch from './BaseFormGroupSwitch.vue'
+import BaseLabel from './BaseLabel.vue'
+import BaseInputSwitch from './BaseInputSwitch.vue'
+import OnChangeFormGroupSwitch from '@/components/new/OnChangeFormGroupSwitch.vue'
 
 import { mergeProps, renderHOCWithScopedSlots } from './utils'
 
@@ -140,6 +141,7 @@ export {
   BaseInputPassword,
   BaseInputRange,
   BaseInputToggle, BaseInputToggleProps,
+  BaseInputSwitch,
   BaseInputToggleAdvancedMode,
   BaseInputToggleFalseTrue,
   BaseLabel,
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
index 92e51cd2cf68..811a8df0908e 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/dns/_components/TheForm.vue
@@ -5,23 +5,26 @@
     :schema="schema"
     :isLoading="isLoading"
   >
-    <form-group-record-dns-in-sql namespace="record_dns_in_sql"
-                                  :column-label="$i18n.t('Record DNS')"
-                                  :text="$i18n.t('Record DNS requests and replies in the SQL tables.')"
-                                  enabled-value="enabled"
-                                  disabled-value="disabled"
+    <v-model-switch v-model="uiForm['record_dns_in_sql']"
+                    :column-label="$i18n.t('Record DNS')"
+                    :text="$i18n.t('Record DNS requests and replies in the SQL tables.')"
     />
   </base-form>
 </template>
 <script>
-import {computed} from '@vue/composition-api'
+import {computed, ref, toRefs, watch} from '@vue/composition-api'
 import {BaseForm} from '@/components/new/'
+import vModelSwitch from './vModelSwitch.vue'
 import schemaFn from '../schema'
 import {FormGroupRecordDnsInSql} from './'
+import _ from 'lodash'
+import {
+  useParseBoolean
+} from '@/views/Configuration/dns/_composables/_api_parsing_layer/parseBoolean';
 
 const components = {
   BaseForm,
-
+  vModelSwitch,
   FormGroupRecordDnsInSql
 }
 
@@ -42,8 +45,21 @@ export const setup = (props) => {
 
   const schema = computed(() => schemaFn(props))
 
+  // props.form come in undefined.
+  // Adding a watcher to trigger when it gets a value fail.
+  // I don't know how to work around it, so this form doesn't work
+
+  // The idea is to clone the form and link it to the UI form.
+  // UI form would use whatever UI components need and backend form would get computed.
+  const uiForm = _.cloneDeep(props.form)
+  uiForm.value['record_dns_in_sql'] = (props.form['record_dns_in_sql'] === "enabled")
+  props.form['record_dns_in_sql'] = computed(() => {
+    return uiForm['record_dns_in_sql'] ? "enabled" : "disabled"
+  })
+
   return {
-    schema
+    schema,
+    uiForm,
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_components/vModelSwitch.vue b/html/pfappserver/root/src/views/Configuration/dns/_components/vModelSwitch.vue
new file mode 100644
index 000000000000..b8c622a9ab2e
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/dns/_components/vModelSwitch.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="base-input-switch-wrapper">
+    <div
+      class="base-input-switch"
+      :class="{
+        'is-focus': focus,
+        'is-disabled': isLocked,
+        'size-sm': size === 'sm',
+        'size-md': size === 'md',
+        'size-lg': size === 'lg',
+        'switch-enabled' : rangeValue === 1,
+      }"
+      :index="value"
+      @click.stop
+    >
+      <div style="pointer-events: none;">
+        <span :class="[
+          'handle',
+          rangeValue === 1 ? 'handle-on' : 'handle-off'
+        ]">
+          <icon v-if="isLocked" name="lock"/>
+          <icon v-else-if="icon" :name="icon"/>
+          <slot v-else/> <!-- Icon slot -->
+        </span>
+      </div>
+      <input type="range" ref="input"
+             :tabIndex="tabIndex"
+             :value="rangeValue"
+             :step="1"
+             :max="1"
+             :min="0"
+             :disabled="isLocked"
+             @focus="() => setFocus(true)"
+             @focusout="() => setFocus(false)"
+             @mouseup="onClick"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {useInputProps} from '@/composables/useInput'
+import {useInputValidatorProps} from '@/composables/useInputValidator'
+import {computed, ref, unref} from '@vue/composition-api';
+
+export const useSwitchProps = {
+  onChange: {
+    type: Function
+  },
+  input: {
+    type: Function,
+  },
+  value: {
+    type: Boolean,
+  },
+  isLocked: {
+    default: false,
+    type: Boolean
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  icon: {
+    type: String
+  },
+}
+
+export const props = {
+  ...useInputProps,
+  ...useInputValidatorProps,
+  ...useSwitchProps,
+}
+
+export const setup = (props, {emit}) => {
+  const rangeValue = computed(() => {
+    return props.value ? 1 : 0
+  })
+
+  const focus = ref(false)
+  const setFocus = (focusVal) => {
+    focus.value = focusVal
+  }
+
+  const toggle = () => {
+    emit('input', unref(rangeValue) !== 1)
+  }
+
+  return {
+    rangeValue,
+    onClick: toggle,
+    focus,
+    setFocus,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'v-model-switch',
+  inheritAttrs: false,
+  props,
+  setup
+}
+</script>
+
+<style lang="scss">
+
+:root {
+  --range-length: 2;
+  --range-height: 22px;
+  --range-background-color: #{$input-placeholder-color};
+  --range-transition-delay: 0.3s;
+  --handle-height: 16px;
+  --handle-background-color: var(--white);
+  --handle-transition-delay: 0.3s;
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, #adb5bd);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out, box-shadow var(--range-transition-delay) ease-out, outline var(--range-transition-delay) ease-out;
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+}
+
+div.base-input-switch-wrapper {
+  display: flex;
+  border: none;
+}
+
+.base-input-switch .handle-on {
+  left: 100%;
+}
+
+.base-input-switch .handle-off {
+  left: 0;
+}
+
+div.base-input-switch.switch-enabled {
+  background-color: var(--primary);
+}
+
+.base-input-switch {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--range-height);
+  margin: 0px;
+  box-shadow: 0 0 0 1px transparent;
+  margin: 0px 1px;
+  border-radius: calc(var(--range-height) / 2);
+  background-color: var(--range-background-color, $input-placeholder-color);
+  text-align: left;
+  transition: background-color var(--range-transition-delay) ease-out,
+  box-shadow var(--range-transition-delay) ease-out,
+  outline var(--range-transition-delay) ease-out;
+
+  &.size-sm {
+    --handle-height: 8px;
+    --range-height: 12px;
+    width: calc(var(--range-length) * 10px);
+  }
+
+  --handle-height: 16px;
+  --range-height: 22px;
+  width: calc(var(--range-length) * 20px);
+
+  &.size-lg {
+    --handle-height: 32px;
+    --range-height: 44px;
+    width: calc(var(--range-length) * 40px);
+  }
+
+  &.is-focus {
+    box-shadow: 0 0 0 1px $input-focus-border-color;
+
+    .handle {
+      box-sizing: border-box;
+      border: 2px solid #fff;
+      background-color: rgba(0, 0, 0, 1);
+      animation: animateCursor 2s infinite;
+    }
+  }
+
+  &.is-invalid {
+    box-shadow: 0 0 0 1px $form-feedback-invalid-color;
+  }
+
+  &.is-disabled {
+    background-color: var(--range-background-color, $input-disabled-bg);
+    opacity: 0.6;
+
+    > .handle svg {
+      color: var(--range-background-color, $input-disabled-bg);
+    }
+  }
+
+  > div {
+    position: absolute;
+    right: calc(var(--range-height) / 2);
+    left: calc(var(--range-height) / 2);
+    height: var(--range-height);
+
+    > .handle {
+      position: absolute;
+      top: calc((var(--range-height) - var(--handle-height)) / 2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: var(--handle-height);
+      height: var(--handle-height);
+      margin-left: calc(var(--handle-height) / -2);
+      border-radius: 50%;
+      outline: none;
+      background-color: var(--handle-background-color);
+      color: var(--range-background-color, $input-placeholder-color); /* SVG icon */
+      font-size: 10px;
+      text-align: left;
+      transition: left var(--handle-transition-delay, 0s) ease-in-out,
+      background-color var(--range-transition-delay) ease-out,
+      color var(--range-transition-delay) ease-out;
+    }
+  }
+
+  > input[type=range] {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+    -webkit-appearance: none;
+    opacity: 0;
+  }
+}
+</style>