add the LayoutParametersWebsiteActivationSwitch component

components/Layout/Parameters/Website/ActivationSwitch.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <v-switch
+      :model-value="modelValue"
+      :label="$t('activateOpentalentSiteWeb')"
+      inset
+      :color="color"
+      :base-color="color"
+      false-icon="fas fa-xmark"
+      true-icon="fas fa-check"
+      hide-details
+      @update:modelValue="onUpdate"
+    />
+
+    <LazyLayoutDialog :show="showWebsiteDeactivationDialog" theme="warning">
+      <template #dialogTitle>
+        {{ $t('please_confirm') }}
+      </template>
+      <template #dialogText>
+        <v-col>
+          <div>
+            {{
+              $t(
+                'yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved',
+              )
+            }}.
+          </div>
+          <span>{{ $t('doYouWantToContinue') }} ?</span>
+        </v-col>
+      </template>
+      <template #dialogBtn>
+        <v-btn
+          class="theme-neutral-soft mr-4"
+          @click="onDialogNoBtnClick"
+        >
+          {{ $t('cancel') }}
+        </v-btn>
+
+        <v-btn class="theme-primary" @click="onDialogYesBtnClick">
+          {{ $t('yes') }}
+        </v-btn>
+      </template>
+    </LazyLayoutDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {useTheme} from 'vuetify';
+import type {Ref} from 'vue';
+
+const theme = useTheme()
+
+const emit = defineEmits(['update:modelValue'])
+
+const i18n = useI18n()
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  }
+})
+
+const color = computed(() => props.modelValue ?
+  theme.current.value.colors['info'] :
+  theme.current.value.colors['danger']
+)
+
+const showWebsiteDeactivationDialog: Ref<boolean> = ref(false)
+
+const onUpdate = (value: boolean) => {
+  if (!value) {
+    showWebsiteDeactivationDialog.value = true
+  } else {
+    emit('update:modelValue', value)
+  }
+}
+
+const onDialogYesBtnClick = () => {
+  showWebsiteDeactivationDialog.value = false
+  emit('update:modelValue', false)
+}
+
+const onDialogNoBtnClick = () => {
+  showWebsiteDeactivationDialog.value = false
+  props.modelValue = true
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

i18n/lang/fr.json

@@ -190,6 +190,7 @@
   "superAdmin": "Compte super-admin",
   "username": "Nom d'utilisateur",
   "residenceArea": "Zones de résidence",
+  "activateOpentalentSiteWeb": "Activer le site opentalent",
   "deactivateOpentalentSiteWeb": "Désactiver le site opentalent",
   "reactivateOpentalentSiteWeb": "Réactiver le site Opentalent",
   "passwordSMS": "Mot de passe SMS",

pages/parameters/website.vue

@@ -24,6 +24,16 @@
           </div>
         </div>
 
+        <div
+          v-if="!organizationProfile.isCmf"
+          class="d-flex justify-center mt-6"
+        >
+          <LayoutParametersWebsiteActivationSwitch
+            :model-value="!parameters.desactivateOpentalentSiteWeb"
+            @update:modelValue="parameters.desactivateOpentalentSiteWeb = !parameters.desactivateOpentalentSiteWeb"
+          />
+        </div>
+
         <!-- les publicationDirectors sont des entités Access -->
         <UiInputAutocompleteAccesses
           v-if="!parameters.desactivateOpentalentSiteWeb"
@@ -34,52 +44,6 @@
           class="my-4"
         />
 
-        <div
-          v-if="!organizationProfile.isCmf"
-          class="d-flex justify-center mt-3 mb-12"
-        >
-          <v-btn
-            v-if="!parameters.desactivateOpentalentSiteWeb"
-            color="error"
-            @click="showWebsiteDeactivationDialog = true"
-          >
-            {{ $t('deactivateOpentalentSiteWeb') }}
-          </v-btn>
-          <v-btn v-else color="primary" @click="reactivateWebsite">
-            {{ $t('reactivateOpentalentSiteWeb') }}
-          </v-btn>
-
-          <LazyLayoutDialog :show="showWebsiteDeactivationDialog">
-            <template #dialogTitle>
-              {{ $t('please_confirm') }}
-            </template>
-            <template #dialogText>
-              <v-col>
-                <div>
-                  {{
-                    $t(
-                      'yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved',
-                    )
-                  }}.
-                </div>
-                <span>{{ $t('doYouWantToContinue') }} ?</span>
-              </v-col>
-            </template>
-            <template #dialogBtn>
-              <v-btn
-                class="theme-neutral-soft mr-4"
-                @click="showWebsiteDeactivationDialog = false"
-              >
-                {{ $t('cancel') }}
-              </v-btn>
-
-              <v-btn class="theme-primary" @click="onDialogYesBtnClick">
-                {{ $t('yes') }}
-              </v-btn>
-            </template>
-          </LazyLayoutDialog>
-        </div>
-
         <UiInputText
           v-model="parameters.otherWebsite"
           field="otherWebsite"
@@ -187,21 +151,6 @@ const onAddSubdomainClick = () => {
   }
   navigateTo('/parameters/subdomains/new')
 }
-
-const showWebsiteDeactivationDialog: Ref<boolean> = ref(false)
-
-const deactivateWebsite = () => {
-  parameters.value!.desactivateOpentalentSiteWeb = true
-}
-
-const reactivateWebsite = () => {
-  parameters.value!.desactivateOpentalentSiteWeb = false
-}
-
-const onDialogYesBtnClick = () => {
-  showWebsiteDeactivationDialog.value = false
-  deactivateWebsite()
-}
 </script>
 
 <style scoped lang="scss">