From 2e6d62f274d12053dcbb95cf69dc0490adb4d35e Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Thu, 8 Aug 2024 09:44:31 +0200
Subject: [PATCH] WIP on
 monterail_vue3_migration_frontend--vee-validate-refactor

---
 frontend/components.d.ts                      | 156 +++++++++++++
 frontend/src/components/Inputs/InputHour.vue  |   2 +
 .../Inputs/InputPasswordConfirmation.vue      |  69 +++---
 .../src/components/Inputs/InputUsername.vue   | 120 +++++-----
 .../src/components/UserSettings/UserName.vue  | 194 ++++++++--------
 .../UserSettings/UserNamingFormat.vue         | 143 ++++++------
 .../UserSettings/UserNewsletter.vue           |  62 ++---
 .../components/UserSettings/UserPassword.vue  | 177 +++++++--------
 .../UserSettings/UserSettingsSwitch.vue       |  97 ++++----
 frontend/src/pages/Settings.vue               | 214 ++++++++----------
 10 files changed, 670 insertions(+), 564 deletions(-)
 create mode 100644 frontend/components.d.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
new file mode 100644
index 000000000..47afcd874
--- /dev/null
+++ b/frontend/components.d.ts
@@ -0,0 +1,156 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AmountAndNameRow: typeof import('./src/components/TransactionRows/AmountAndNameRow.vue')['default']
+    AuthCarousel: typeof import('./src/components/Auth/AuthCarousel.vue')['default']
+    AuthFooter: typeof import('./src/components/Auth/AuthFooter.vue')['default']
+    AuthNavbar: typeof import('./src/components/Auth/AuthNavbar.vue')['default']
+    AuthNavbarSmall: typeof import('./src/components/Auth/AuthNavbarSmall.vue')['default']
+    BAvatar: typeof import('bootstrap-vue-next')['BAvatar']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
+    BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
+    BCarousel: typeof import('bootstrap-vue-next')['BCarousel']
+    BCarouselSlide: typeof import('bootstrap-vue-next')['BCarouselSlide']
+    BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
+    BContainer: typeof import('bootstrap-vue-next')['BContainer']
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
+    BForm: typeof import('bootstrap-vue-next')['BForm']
+    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormInvalidFeedback: typeof import('bootstrap-vue-next')['BFormInvalidFeedback']
+    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BImg: typeof import('bootstrap-vue-next')['BImg']
+    BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BLink: typeof import('bootstrap-vue-next')['BLink']
+    BModal: typeof import('bootstrap-vue-next')['BModal']
+    BNav: typeof import('bootstrap-vue-next')['BNav']
+    BNavbar: typeof import('bootstrap-vue-next')['BNavbar']
+    BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
+    BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
+    BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
+    BPopover: typeof import('bootstrap-vue-next')['BPopover']
+    Breadcrumb: typeof import('./src/components/Breadcrumb/breadcrumb.vue')['default']
+    BRow: typeof import('bootstrap-vue-next')['BRow']
+    BTab: typeof import('bootstrap-vue-next')['BTab']
+    BTabs: typeof import('bootstrap-vue-next')['BTabs']
+    BToastOrchestrator: typeof import('bootstrap-vue-next')['BToastOrchestrator']
+    ClipboardCopy: typeof import('./src/components/ClipboardCopy.vue')['default']
+    CollapseIcon: typeof import('./src/components/TransactionRows/CollapseIcon.vue')['default']
+    CollapseLinksList: typeof import('./src/components/DecayInformations/CollapseLinksList.vue')['default']
+    CommunityMember: typeof import('./src/components/Template/ContentHeader/CommunityMember.vue')['default']
+    CommunityNews: typeof import('./src/components/Overview/CommunityNews.vue')['default']
+    CommunitySwitch: typeof import('./src/components/CommunitySwitch.vue')['default']
+    ContentFooter: typeof import('./src/components/ContentFooter.vue')['default']
+    ContributionForm: typeof import('./src/components/Contributions/ContributionForm.vue')['default']
+    ContributionInfo: typeof import('./src/components/Template/RightSide/ContributionInfo.vue')['default']
+    ContributionList: typeof import('./src/components/Contributions/ContributionList.vue')['default']
+    ContributionListItem: typeof import('./src/components/Contributions/ContributionListItem.vue')['default']
+    ContributionMessagesFormular: typeof import('./src/components/ContributionMessages/ContributionMessagesFormular.vue')['default']
+    ContributionMessagesList: typeof import('./src/components/ContributionMessages/ContributionMessagesList.vue')['default']
+    ContributionMessagesListItem: typeof import('./src/components/ContributionMessages/ContributionMessagesListItem.vue')['default']
+    DateRow: typeof import('./src/components/TransactionRows/DateRow.vue')['default']
+    DecayInformation: typeof import('./src/components/DecayInformations/DecayInformation.vue')['default']
+    DecayInformationBeforeStartblock: typeof import('./src/components/DecayInformations/DecayInformation-BeforeStartblock.vue')['default']
+    DecayInformationDecay: typeof import('./src/components/DecayInformations/DecayInformation-Decay.vue')['default']
+    DecayInformationDecayStartblock: typeof import('./src/components/DecayInformations/DecayInformation-DecayStartblock.vue')['default']
+    DecayInformationLong: typeof import('./src/components/DecayInformations/DecayInformation-Long.vue')['default']
+    DecayInformationShort: typeof import('./src/components/DecayInformations/DecayInformation-Short.vue')['default']
+    DecayRow: typeof import('./src/components/TransactionRows/DecayRow.vue')['default']
+    DurationRow: typeof import('./src/components/TransactionRows/DurationRow.vue')['default']
+    FigureQrCode: typeof import('./src/components/QrCode/FigureQrCode.vue')['default']
+    FirstName: typeof import('./src/components/Inputs/FirstName.vue')['default']
+    GddAmount: typeof import('./src/components/Template/ContentHeader/GddAmount.vue')['default']
+    GddSend: typeof import('./src/components/GddSend.vue')['default']
+    GddTransactionList: typeof import('./src/components/GddTransactionList.vue')['default']
+    GddTransactionListFooter: typeof import('./src/components/GddTransactionListFooter.vue')['default']
+    GdtAmount: typeof import('./src/components/Template/ContentHeader/GdtAmount.vue')['default']
+    GdtTransactionList: typeof import('./src/components/GdtTransactionList.vue')['default']
+    IBiBellFill: typeof import('~icons/bi/bell-fill')['default']
+    IBiCaretDownFill: typeof import('~icons/bi/caret-down-fill')['default']
+    IBiCheck: typeof import('~icons/bi/check')['default']
+    IBiEye: typeof import('~icons/bi/eye')['default']
+    IBiEyeSlash: typeof import('~icons/bi/eye-slash')['default']
+    IBiLayers: typeof import('~icons/bi/layers')['default']
+    IBiPeople: typeof import('~icons/bi/people')['default']
+    IBiQuestion: typeof import('~icons/bi/question')['default']
+    IBiTrash: typeof import('~icons/bi/trash')['default']
+    IBiXCircle: typeof import('~icons/bi/x-circle')['default']
+    InputAmount: typeof import('./src/components/Inputs/InputAmount.vue')['default']
+    InputEmail: typeof import('./src/components/Inputs/InputEmail.vue')['default']
+    InputHour: typeof import('./src/components/Inputs/InputHour.vue')['default']
+    InputIdentifier: typeof import('./src/components/Inputs/InputIdentifier.vue')['default']
+    InputPassword: typeof import('./src/components/Inputs/InputPassword.vue')['default']
+    InputPasswordConfirmation: typeof import('./src/components/Inputs/InputPasswordConfirmation.vue')['default']
+    InputTextarea: typeof import('./src/components/Inputs/InputTextarea.vue')['default']
+    InputUsername: typeof import('./src/components/Inputs/InputUsername.vue')['default']
+    LanguageSwitch: typeof import('./src/components/LanguageSwitch.vue')['default']
+    LanguageSwitch2: typeof import('./src/components/LanguageSwitch2.vue')['default']
+    LanguageSwitchSelect: typeof import('./src/components/LanguageSwitchSelect.vue')['default']
+    LastContributions: typeof import('./src/components/Template/RightSide/LastContributions.vue')['default']
+    LastName: typeof import('./src/components/Inputs/LastName.vue')['default']
+    LastTransactions: typeof import('./src/components/Template/RightSide/LastTransactions.vue')['default']
+    LinkCountRow: typeof import('./src/components/TransactionRows/LinkCountRow.vue')['default']
+    MemoRow: typeof import('./src/components/TransactionRows/MemoRow.vue')['default']
+    Message: typeof import('./src/components/Message/Message.vue')['default']
+    MobileSidebar: typeof import('./src/components/MobileSidebar/MobileSidebar.vue')['default']
+    Name: typeof import('./src/components/TransactionRows/Name.vue')['default']
+    Navbar: typeof import('./src/components/Menu/Navbar.vue')['default']
+    NavCommunity: typeof import('./src/components/Template/ContentHeader/NavCommunity.vue')['default']
+    OpenCreationsAmount: typeof import('./src/components/Contributions/OpenCreationsAmount.vue')['default']
+    Overview: typeof import('./src/components/skeleton/Overview.vue')['default']
+    ParseMessage: typeof import('./src/components/ContributionMessages/ParseMessage.vue')['default']
+    RedeemedTextBox: typeof import('./src/components/LinkInformations/RedeemedTextBox.vue')['default']
+    RedeemInformation: typeof import('./src/components/LinkInformations/RedeemInformation.vue')['default']
+    RedeemLoggedOut: typeof import('./src/components/LinkInformations/RedeemLoggedOut.vue')['default']
+    RedeemSelfCreator: typeof import('./src/components/LinkInformations/RedeemSelfCreator.vue')['default']
+    RedeemValid: typeof import('./src/components/LinkInformations/RedeemValid.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SessionLogoutTimeout: typeof import('./src/components/SessionLogoutTimeout.vue')['default']
+    Sidebar: typeof import('./src/components/Menu/Sidebar.vue')['default']
+    Status: typeof import('./src/components/Status.vue')['default']
+    Transaction: typeof import('./src/components/Transaction.vue')['default']
+    TransactionCollapse: typeof import('./src/components/TransactionCollapse.vue')['default']
+    TransactionConfirmationLink: typeof import('./src/components/GddSend/TransactionConfirmationLink.vue')['default']
+    TransactionConfirmationSend: typeof import('./src/components/GddSend/TransactionConfirmationSend.vue')['default']
+    TransactionCreation: typeof import('./src/components/Transactions/TransactionCreation.vue')['default']
+    TransactionDecay: typeof import('./src/components/Transactions/TransactionDecay.vue')['default']
+    TransactionForm: typeof import('./src/components/GddSend/TransactionForm.vue')['default']
+    TransactionLink: typeof import('./src/components/TransactionLinks/TransactionLink.vue')['default']
+    TransactionLinkItem: typeof import('./src/components/TransactionLinkItem.vue')['default']
+    TransactionLinkSummary: typeof import('./src/components/Transactions/TransactionLinkSummary.vue')['default']
+    TransactionListItem: typeof import('./src/components/TransactionListItem.vue')['default']
+    TransactionReceive: typeof import('./src/components/Transactions/TransactionReceive.vue')['default']
+    TransactionResultLink: typeof import('./src/components/GddSend/TransactionResultLink.vue')['default']
+    TransactionResultSendError: typeof import('./src/components/GddSend/TransactionResultSendError.vue')['default']
+    TransactionResultSendSuccess: typeof import('./src/components/GddSend/TransactionResultSendSuccess.vue')['default']
+    TransactionSend: typeof import('./src/components/Transactions/TransactionSend.vue')['default']
+    TypeIcon: typeof import('./src/components/TransactionRows/TypeIcon.vue')['default']
+    UserCard: typeof import('./src/components/UserSettings/UserCard.vue')['default']
+    UserData: typeof import('./src/components/UserSettings/UserData.vue')['default']
+    UserGMSLocation: typeof import('./src/components/UserSettings/UserGMSLocation.vue')['default']
+    UserGMSLocationFormat: typeof import('./src/components/UserSettings/UserGMSLocationFormat.vue')['default']
+    UserLanguage: typeof import('./src/components/UserSettings/UserLanguage.vue')['default']
+    UserName: typeof import('./src/components/UserSettings/UserName.vue')['default']
+    UserNamingFormat: typeof import('./src/components/UserSettings/UserNamingFormat.vue')['default']
+    UserNewsletter: typeof import('./src/components/UserSettings/UserNewsletter.vue')['default']
+    UserPassword: typeof import('./src/components/UserSettings/UserPassword.vue')['default']
+    UserSettingsSwitch: typeof import('./src/components/UserSettings/UserSettingsSwitch.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
+  }
+}
diff --git a/frontend/src/components/Inputs/InputHour.vue b/frontend/src/components/Inputs/InputHour.vue
index 760c3b7e5..ef8f93c0c 100644
--- a/frontend/src/components/Inputs/InputHour.vue
+++ b/frontend/src/components/Inputs/InputHour.vue
@@ -27,6 +27,8 @@
     <BFormGroup :label="label" :label-for="labelFor">
       <BFormInput
         v-bind="ariaInput"
+        :modelValue="currentValue"
+        @update:modelValue="currentValue"
         :id="labelFor"
         :model-value="currentValue"
         :name="name"
diff --git a/frontend/src/components/Inputs/InputPasswordConfirmation.vue b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
index 834abf24b..aa54c4b28 100644
--- a/frontend/src/components/Inputs/InputPasswordConfirmation.vue
+++ b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
@@ -19,7 +19,8 @@
           :immediate="true"
           :name="createId(register ? $t('form.password') : $t('form.password_new'))"
           :placeholder="register ? $t('form.password') : $t('form.password_new')"
-        ></input-password>
+          v-model="password"
+        />
       </BCol>
     </BRow>
     <BRow class="mb-2">
@@ -35,52 +36,40 @@
           :immediate="true"
           :name="createId(register ? $t('form.passwordRepeat') : $t('form.password_new_repeat'))"
           :placeholder="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
-        ></input-password>
+          v-model="passwordRepeat"
+        />
       </BCol>
     </BRow>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, ref, watch } from 'vue'
 import InputPassword from './InputPassword'
+import { BCol, BRow } from 'bootstrap-vue-next'
 
-export default {
-  name: 'InputPasswordConfirm',
-  components: {
-    InputPassword,
+const password = ref('')
+const passwordRepeat = ref('')
+
+defineProps({
+  value: {
+    type: Object,
+    required: true,
   },
-  props: {
-    value: {
-      type: Object,
-      required: true,
-    },
-    register: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      password: '',
-      passwordRepeat: '',
-    }
-  },
-  computed: {
-    passwordObject() {
-      return { password: this.password, passwordRepeat: this.passwordRepeat }
-    },
-  },
-  watch: {
-    password() {
-      this.$emit('input', this.passwordObject)
-    },
-    passwordRepeat() {
-      this.$emit('input', this.passwordObject)
-    },
-  },
-  methods: {
-    createId(text) {
-      return text.replace(/ +/g, '-')
-    },
+  register: {
+    type: Boolean,
+    required: false,
   },
+})
+
+const createId = (text) => {
+  return text.replace(/ +/g, '-')
 }
+
+const passwordObject = computed(() => {
+  return { password: password.value, passwordRepeat: passwordRepeat.value }
+})
+
+watch([password, passwordRepeat], () => {
+  emit('input', passwordObject.value)
+})
 </script>
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index 486a4e676..96e893698 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -1,18 +1,11 @@
 <template>
   <div class="input-username">
-    <validation-provider
-      v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
-      tag="div"
-      :rules="rules"
-      :name="name"
-      :bails="!showAllErrors"
-      :immediate="immediate"
-      vid="username"
-    >
-      <b-form-group :label="$t('form.username')" :description="$t('settings.usernameInfo')">
-        <b-input-group>
-          <b-form-input
+    <div>
+      <BFormGroup :label="$t('form.username')" :description="$t('settings.usernameInfo')">
+        <BInputGroup>
+          <BFormInput
             v-bind="ariaInput"
+            v-model="currentValue"
             :id="labelFor"
             v-model="currentValue"
             :name="name"
@@ -21,20 +14,12 @@
             :state="validated ? valid : false"
             autocomplete="off"
             data-test="username"
-          ></b-form-input>
-          <b-input-group-append>
-            <b-button
-              size="lg"
-              text="Button"
-              variant="secondary"
-              icon="x-lg"
-              @click="$emit('set-is-edit', false)"
-            >
-              <b-icon-x-circle></b-icon-x-circle>
-            </b-button>
-          </b-input-group-append>
-        </b-input-group>
-        <b-form-invalid-feedback v-bind="ariaMsg">
+          />
+          <BButton size="lg" text="Button" variant="secondary" @click="emitSetIsEdit" append>
+            <IBiXCircle style="height: 17px; width: 17px" />
+          </BButton>
+        </BInputGroup>
+        <BFormInvalidFeedback v-bind="ariaMsg">
           <div v-if="showAllErrors">
             <span v-for="error in errors" :key="error">
               {{ error }}
@@ -42,48 +27,51 @@
             </span>
           </div>
           <div v-else>
-            {{ errors[0] }}
+            <!-- {{ errors?.[0] }} -->
           </div>
-        </b-form-invalid-feedback>
-      </b-form-group>
-    </validation-provider>
+        </BFormInvalidFeedback>
+      </BFormGroup>
+    </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'InputUsername',
-  props: {
-    isEdit: { type: Boolean, default: false },
-    rules: {
-      default: () => {
-        return {
-          required: true,
-        }
-      },
-      type: () => {},
-    },
-    name: { type: String, default: 'username' },
-    label: { type: String, default: 'Username' },
-    placeholder: { type: String, default: 'Username' },
-    value: { required: true, type: String },
-    showAllErrors: { type: Boolean, default: false },
-    immediate: { type: Boolean, default: false },
-    unique: { type: Boolean, required: true },
-  },
-  data() {
-    return {
-      currentValue: this.value,
-    }
-  },
-  computed: {
-    labelFor() {
-      return this.name + '-input-field'
-    },
-  },
-  watch: {
-    currentValue() {
-      this.$emit('input', this.currentValue)
-    },
-  },
+<script setup>
+import {
+  BFormGroup,
+  BInputGroup,
+  BFormInput,
+  BButton,
+  BFormInvalidFeedback,
+} from 'bootstrap-vue-next'
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
+import { useForm } from 'vee-validate'
+
+const props = defineProps({
+  isEdit: { type: Boolean, default: false },
+  rules: { type: Object, default: () => ({ required: true }) },
+  name: { type: String, default: 'username' },
+  label: { type: String, default: 'Username' },
+  placeholder: { type: String, default: 'Username' },
+  value: { type: String, required: true },
+  showAllErrors: { type: Boolean, default: false },
+  immediate: { type: Boolean, default: false },
+  unique: { type: Boolean, required: true },
+})
+
+const currentValue = ref(props?.value)
+
+const { errors, valid, validated, ariaInput, ariaMsg } = useForm({
+  initialValues: currentValue.value,
+})
+
+const emit = defineEmits(['input', 'set-is-edit'])
+
+const labelFor = computed(() => `${props.name}-input-field`)
+
+const emitSetIsEdit = (bool) => {
+  emit('set-is-edit', bool)
 }
+
+watch(currentValue, (newValue) => {
+  emit('input', newValue)
+})
 </script>
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index e44a2ecd3..57b488f67 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -1,117 +1,113 @@
 <template>
   <div id="username_form">
-    <div v-if="$store.state.username">
+    <div v-if="store.state.username">
       <label>{{ $t('form.username') }}</label>
-      <b-form-group
+      <BFormGroup
         class="mb-3"
         data-test="username-input-group"
         :description="$t('settings.emailInfo')"
       >
-        <b-form-input
-          v-model="username"
-          readonly
-          data-test="username-input-readonly"
-        ></b-form-input>
-      </b-form-group>
+        <BFormInput v-model="username" readonly data-test="username-input-readonly" />
+      </BFormGroup>
     </div>
     <div v-else>
-      <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">
-        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-          <BRow class="mb-3">
-            <BCol class="col-12">
-              <input-username
-                v-model="username"
-                :name="$t('form.username')"
-                :placeholder="$t('form.username-placeholder')"
-                :show-all-errors="true"
-                :unique="true"
-                :rules="rules"
-                :is-edit="isEdit"
-                data-test="component-input-username"
-                @set-is-edit="setIsEdit"
-              />
-            </BCol>
-            <BCol class="col-12">
-              <div v-if="!username" class="alert" data-test="username-alert">
-                {{ $t('settings.username.no-username') }}
-              </div>
-            </BCol>
-          </BRow>
-          <BRow v-if="newUsername" class="text-right">
-            <BCol>
-              <div ref="submitButton" class="text-right">
-                <b-button
-                  :variant="disabled(invalid) ? 'light' : 'success'"
-                  type="submit"
-                  :disabled="disabled(invalid)"
-                  data-test="submit-username-button"
-                >
-                  {{ $t('form.save') }}
-                </b-button>
-              </div>
-            </BCol>
-          </BRow>
-        </b-form>
-      </validation-observer>
+      <!-- <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">-->
+      <div>
+        <!-- <BForm @submit.stop.prevent="handleSubmit(onSubmit)"> -->
+        <BRow class="mb-3">
+          <BCol class="col-12">
+            <input-username
+              v-model="username"
+              :name="$t('form.username')"
+              :placeholder="$t('form.username-placeholder')"
+              :showAllErrors="true"
+              :unique="true"
+              :rules="rules"
+              :isEdit="isEdit"
+              @set-is-edit="setIsEdit"
+              data-test="component-input-username"
+            />
+          </BCol>
+          <BCol class="col-12">
+            <div v-if="!username" class="alert" data-test="username-alert">
+              {{ $t('settings.username.no-username') }}
+            </div>
+          </BCol>
+        </BRow>
+        <BRow class="text-right" v-if="newUsername">
+          <BCol>
+            <div class="text-right" ref="submitButton">
+              <BButton
+                :variant="disabled(invalid) ? 'light' : 'success'"
+                type="submit"
+                :disabled="disabled(invalid)"
+                data-test="submit-username-button"
+              >
+                {{ $t('form.save') }}
+              </BButton>
+            </div>
+          </BCol>
+        </BRow>
+        <!-- </BForm> -->
+      </div>
+      <!-- </validation-observer> -->
     </div>
   </div>
 </template>
-<script>
-import { updateUserInfos } from '@/graphql/mutations'
-import InputUsername from '@/components/Inputs/InputUsername'
 
-export default {
-  name: 'UserName',
-  components: {
-    InputUsername,
-  },
-  data() {
-    return {
-      isEdit: false,
-      username: this.$store.state.username || '',
-      usernameUnique: false,
-      rules: {
-        required: true,
-        min: 3,
-        max: 20,
-        usernameAllowedChars: true,
-        usernameHyphens: true,
-        usernameUnique: true,
-      },
-    }
-  },
-  computed: {
-    newUsername() {
-      return this.username !== this.$store.state.username
-    },
-  },
-  methods: {
-    async onSubmit(event) {
-      this.$apollo
-        .mutate({
-          mutation: updateUserInfos,
-          variables: {
-            alias: this.username,
-          },
-        })
-        .then(() => {
-          this.$store.commit('username', this.username)
-          this.toastSuccess(this.$t('settings.username.change-success'))
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    disabled(invalid) {
-      return !this.newUsername || invalid
-    },
-    setIsEdit(bool) {
-      this.username = this.$store.state.username
-      this.isEdit = bool
-    },
-  },
+<script setup>
+import { ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import { useMutation } from '@vue/apollo-composable'
+import { BRow, BCol, BFormInput, BFormGroup, BForm, BButton } from 'bootstrap-vue-next'
+import InputUsername from '@/components/Inputs/InputUsername'
+import { updateUserInfos } from '@/graphql/mutations'
+import { useAppToast } from '@/composables/useToast'
+import { useForm } from 'vee-validate'
+
+const store = useStore()
+const { toastError, toastSuccess } = useAppToast()
+
+const isEdit = ref(false)
+const username = ref(store.state.username || '')
+const usernameUnique = ref(false)
+const rules = {
+  required: true,
+  min: 3,
+  max: 20,
+  usernameAllowedChars: true,
+  usernameHyphens: true,
+  usernameUnique: true,
 }
+
+const { handleSubmit, invalid } = useForm({
+  initialValues: username.value,
+})
+
+const { mutate: updateUserInfo } = useMutation(updateUserInfos)
+
+const onSubmit = async () => {
+  try {
+    await updateUserInfo({ alias: username.value })
+    store.commit('username', username.value)
+    toastSuccess(t('settings.username.change-success'))
+  } catch (error) {
+    toastError(error.message)
+  }
+}
+
+const disabled = (invalid) => {
+  return !newUsername.value || invalid
+}
+
+const setIsEdit = (bool) => {
+  username.value = store.state.username
+  isEdit.value = bool
+}
+
+const newUsername = computed(() => username.value !== store.state.username)
 </script>
+
 <style>
 .cursor-pointer {
   cursor: pointer;
diff --git a/frontend/src/components/UserSettings/UserNamingFormat.vue b/frontend/src/components/UserSettings/UserNamingFormat.vue
index e0ee25b1b..06679f5c6 100644
--- a/frontend/src/components/UserSettings/UserNamingFormat.vue
+++ b/frontend/src/components/UserSettings/UserNamingFormat.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="user-naming-format">
-    <b-dropdown v-model="selectedOption">
+    <BDropdown v-model="selectedOption">
       <template #button-content>{{ selectedOptionLabel }}</template>
-      <b-dropdown-item
+      <BDropdownItem
         v-for="option in dropdownOptions"
         :key="option.value"
         :value="option.value"
@@ -10,82 +10,83 @@
         @click.prevent="update(option)"
       >
         {{ option.label }}
-      </b-dropdown-item>
-    </b-dropdown>
+      </BDropdownItem>
+    </BDropdown>
   </div>
 </template>
-<script>
-import { updateUserInfos } from '@/graphql/mutations'
 
-export default {
-  name: 'UserNamingFormat',
-  props: {
-    initialValue: { type: String, default: 'PUBLISH_NAME_ALIAS_OR_INITALS' },
-    attrName: { type: String },
-    successMessage: { type: String },
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import { useMutation } from '@vue/apollo-composable'
+import { updateUserInfos } from '@/graphql/mutations'
+import { BDropdownItem, BDropdown } from 'bootstrap-vue-next'
+import { useAppToast } from '@/composables/useToast'
+
+const { t } = useI18n()
+const store = useStore()
+const { toastError } = useAppToast()
+
+const props = defineProps({
+  initialValue: { type: String, default: 'PUBLISH_NAME_ALIAS_OR_INITALS' },
+  attrName: { type: String },
+  successMessage: { type: String },
+})
+
+const emit = defineEmits(['valueChanged'])
+
+const selectedOption = ref(props.initialValue)
+const dropdownOptions = [
+  {
+    label: t('settings.publish-name.alias-or-initials'),
+    title: t('settings.publish-name.alias-or-initials-tooltip'),
+    value: 'PUBLISH_NAME_ALIAS_OR_INITALS',
   },
-  data() {
-    return {
-      selectedOption: this.initialValue,
-      dropdownOptions: [
-        {
-          label: this.$t('settings.publish-name.alias-or-initials'),
-          title: this.$t('settings.publish-name.alias-or-initials-tooltip'),
-          value: 'PUBLISH_NAME_ALIAS_OR_INITALS',
-        },
-        {
-          label: this.$t('settings.publish-name.initials'),
-          title: this.$t('settings.publish-name.initials-tooltip'),
-          value: 'PUBLISH_NAME_INITIALS',
-        },
-        {
-          label: this.$t('settings.publish-name.first'),
-          title: this.$t('settings.publish-name.first-tooltip'),
-          value: 'PUBLISH_NAME_FIRST',
-        },
-        {
-          label: this.$t('settings.publish-name.first-initial'),
-          title: this.$t('settings.publish-name.first-initial-tooltip'),
-          value: 'PUBLISH_NAME_FIRST_INITIAL',
-        },
-        {
-          label: this.$t('settings.publish-name.name-full'),
-          title: this.$t('settings.publish-name.name-full-tooltip'),
-          value: 'PUBLISH_NAME_FULL',
-        },
-      ],
-    }
+  {
+    label: t('settings.publish-name.initials'),
+    title: t('settings.publish-name.initials-tooltip'),
+    value: 'PUBLISH_NAME_INITIALS',
   },
-  computed: {
-    selectedOptionLabel() {
-      const selected = this.dropdownOptions.find(
-        (option) => option.value === this.selectedOption,
-      ).label
-      return selected || this.$t('settings.publish-name.alias-or-initials')
-      // return this.dropdownOptions.find((option) => option.value === this.selectedOption).label
-    },
+  {
+    label: t('settings.publish-name.first'),
+    title: t('settings.publish-name.first-tooltip'),
+    value: 'PUBLISH_NAME_FIRST',
   },
-  methods: {
-    async update(option) {
-      if (option.value === this.selectedOption) {
-        return
-      }
-      try {
-        const variables = []
-        variables[this.attrName] = option.value
-        await this.$apollo.mutate({
-          mutation: updateUserInfos,
-          variables,
-        })
-        this.toastSuccess(this.successMessage)
-        this.selectedOption = option.value
-        this.$store.commit(this.attrName, option.value)
-        this.$emit('valueChanged', option.value)
-      } catch (error) {
-        this.toastError(error.message)
-      }
-    },
+  {
+    label: t('settings.publish-name.first-initial'),
+    title: t('settings.publish-name.first-initial-tooltip'),
+    value: 'PUBLISH_NAME_FIRST_INITIAL',
   },
+  {
+    label: t('settings.publish-name.name-full'),
+    title: t('settings.publish-name.name-full-tooltip'),
+    value: 'PUBLISH_NAME_FULL',
+  },
+]
+
+const selectedOptionLabel = computed(() => {
+  const selected = dropdownOptions.find((option) => option.value === selectedOption.value)?.label
+  return selected || t('settings.publish-name.alias-or-initials')
+})
+
+const { mutate: updateUserData } = useMutation(updateUserInfos)
+
+const update = async (option) => {
+  if (option.value === selectedOption.value) {
+    return
+  }
+  try {
+    const variables = {}
+    variables[props.attrName] = option.value
+    await updateUserData({ variables })
+    toastSuccess(props.successMessage)
+    selectedOption.value = option.value
+    store.commit(props.attrName, option.value)
+    emit('valueChanged', option.value)
+  } catch (error) {
+    toastError(error.message)
+  }
 }
 </script>
 <style>
diff --git a/frontend/src/components/UserSettings/UserNewsletter.vue b/frontend/src/components/UserSettings/UserNewsletter.vue
index 3f124ebac..2d027c293 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.vue
+++ b/frontend/src/components/UserSettings/UserNewsletter.vue
@@ -1,43 +1,45 @@
 <template>
   <div class="formusernewsletter">
-    <b-form-checkbox
+    <BFormCheckbox
+      test="BFormCheckbox"
       v-model="newsletterState"
       test="BFormCheckbox"
       name="check-button"
       switch
       @change="onSubmit"
-    ></b-form-checkbox>
+    />
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
+import { useStore } from 'vuex'
 import { subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
+import { useMutation } from '@vue/apollo-composable'
+import { BFormCheckbox } from 'bootstrap-vue-next'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'UserNewsletter',
-  data() {
-    return {
-      newsletterState: this.$store.state.newsletterState,
-    }
-  },
-  methods: {
-    async onSubmit() {
-      this.$apollo
-        .mutate({
-          mutation: this.newsletterState ? subscribeNewsletter : unsubscribeNewsletter,
-        })
-        .then(() => {
-          this.$store.commit('newsletterState', this.newsletterState)
-          this.toastSuccess(
-            this.newsletterState
-              ? this.$t('settings.newsletter.newsletterTrue')
-              : this.$t('settings.newsletter.newsletterFalse'),
-          )
-        })
-        .catch((error) => {
-          this.newsletterState = this.$store.state.newsletterState
-          this.toastError(error.message)
-        })
-    },
-  },
+const { toastSuccess, toastError } = useAppToast()
+const store = useStore()
+const state = store.state
+
+const newsletterState = ref(state.newsletterState)
+
+const { mutate: newsletterSubscribe } = useMutation(subscribeNewsletter)
+const { mutate: newsletterUnsubscribe } = useMutation(unsubscribeNewsletter)
+
+const onSubmit = async () => {
+  try {
+    newsletterState.value ? newsletterSubscribe() : newsletterUnsubscribe()
+
+    store.commit('newsletterState', newsletterState.value)
+    toastSuccess(
+      newsletterState.value
+        ? $t('settings.newsletter.newsletterTrue')
+        : $t('settings.newsletter.newsletterFalse'),
+    )
+  } catch (error) {
+    newsletterState.value = state.newsletterState
+    toastError(error.message)
+  }
 }
 </script>
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 4add35191..5492a9e47 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -1,113 +1,102 @@
 <template>
-  <b-card id="change_pwd" class="card-border-radius card-background-gray">
+  <BCard id="change_pwd" class="card-border-radius card-background-gray">
     <div>
       <BRow class="mb-4 text-right">
         <BCol class="text-right">
-          <a
-            class="cursor-pointer"
-            data-test="open-password-change-form"
-            @click="showPassword ? (showPassword = !showPassword) : cancelEdit()"
-          >
+          <button @click="toggleShowPassword" data-test="open-password-change-form">
             <span class="pointer mr-3">{{ $t('settings.password.change-password') }}</span>
-            <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
-            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
-          </a>
+            <!-- <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon> -->
+          </button>
         </BCol>
       </BRow>
     </div>
 
     <div v-if="!showPassword">
-      <validation-observer ref="observer" v-slot="{ handleSubmit, invalid }">
-        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-          <BRow class="mb-2">
-            <BCol>
-              <input-password
-                v-model="form.password"
-                :label="$t('form.password_old')"
-                :placeholder="$t('form.password_old')"
-              ></input-password>
-            </BCol>
-          </BRow>
-          <input-password-confirmation v-model="form.newPassword" :register="register" />
-          <BRow class="text-right">
-            <BCol>
-              <div class="text-right">
-                <b-button
-                  type="submit"
-                  :variant="invalid ? 'light' : 'success'"
-                  class="mt-4"
-                  :disabled="invalid && disabled"
-                  data-test="submit-new-password-btn"
-                >
-                  {{ $t('form.save') }}
-                </b-button>
-              </div>
-            </BCol>
-          </BRow>
-        </b-form>
-      </validation-observer>
+      <BForm @submit.prevent="onSubmit">
+        <BRow class="mb-2">
+          <BCol>
+            <input-password
+              :label="$t('form.password_old')"
+              :placeholder="$t('form.password_old')"
+              v-model="form.password"
+            />
+          </BCol>
+        </BRow>
+        <input-password-confirmation v-model="form.newPassword" :register="register" />
+        <BRow class="text-right">
+          <BCol>
+            <div class="text-right">
+              <BButton
+                type="submit"
+                :variant="invalid ? 'light' : 'success'"
+                class="mt-4"
+                :disabled="invalid && disabled"
+                data-test="submit-new-password-btn"
+              >
+                {{ $t('form.save') }}
+              </BButton>
+            </div>
+          </BCol>
+        </BRow>
+      </BForm>
     </div>
-  </b-card>
+  </BCard>
 </template>
-<script>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { BRow, BCol, BForm, BButton } from 'bootstrap-vue-next'
 import InputPassword from '@/components/Inputs/InputPassword'
 import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
 import { updateUserInfos } from '@/graphql/mutations'
+import { useForm } from 'vee-validate'
+import { useMutation } from '@vue/apollo-composable'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'UserPassword',
-  components: {
-    InputPassword,
-    InputPasswordConfirmation,
-  },
-  data() {
-    return {
-      showPassword: true,
-      email: null,
-      form: {
-        password: '',
-        newPassword: {
-          password: '',
-          passwordRepeat: '',
-        },
-      },
-      register: false,
-    }
-  },
-  computed: {
-    disabled() {
-      return this.form.newPassword.password !== this.form.newPassword.passwordRepeat
-    },
-  },
-  methods: {
-    cancelEdit() {
-      this.showPassword = true
-      this.form.password = ''
-      this.form.passwordNew = ''
-      this.form.passwordNewRepeat = ''
-    },
-    async onSubmit() {
-      this.$apollo
-        .mutate({
-          mutation: updateUserInfos,
-          variables: {
-            password: this.form.password,
-            passwordNew: this.form.newPassword.password,
-          },
-        })
-        .then(() => {
-          this.toastSuccess(this.$t('message.reset'))
-          this.cancelEdit()
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
+const showPassword = ref(true)
+const email = ref(null)
+const register = ref(false)
+const form = ref({
+  password: '',
+  newPassword: {
+    password: '',
+    passwordRepeat: '',
   },
+})
+
+const { toastError, toastSuccess } = useAppToast()
+const { handleSubmit, invalid } = useForm({
+  initialValues: form.value,
+})
+
+const disabled = computed(() => {
+  return form.value.newPassword.password !== form.value.newPassword.passwordRepeat
+})
+
+const cancelEdit = () => {
+  showPassword.value = true
+  form.value.password = ''
+  form.value.passwordNew = ''
+  form.value.passwordNewRepeat = ''
 }
+
+const toggleShowPassword = () => {
+  showPassword.value ? (showPassword.value = !showPassword.value) : cancelEdit()
+}
+
+const { mutate: updateUserInfo } = useMutation(updateUserInfos)
+
+const onSubmit = handleSubmit(async () => {
+  try {
+    await updateUserInfo({
+      password: form.value.password,
+      passwordNew: form.value.newPassword.password,
+    })
+    toastSuccess($t('message.reset'))
+    cancelEdit()
+  } catch (error) {
+    toastError(error.message)
+  }
+})
 </script>
-<style>
-.cursor-pointer {
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/components/UserSettings/UserSettingsSwitch.vue b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
index 56649fd2b..4b6f96bd1 100644
--- a/frontend/src/components/UserSettings/UserSettingsSwitch.vue
+++ b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
@@ -1,59 +1,64 @@
 <template>
   <div class="form-user-switch" @click="onClick">
-    <b-form-checkbox
-      v-model="value"
+    <!-- <BFormCheckbox
       test="BFormCheckbox"
       name="check-button"
       :disabled="disabled"
       switch
       @change="onChange"
-    ></b-form-checkbox>
+    /> -->
+    hello
   </div>
 </template>
-<script>
+<script setup>
+import { useStore } from 'vuex'
+import { ref } from 'vue'
 import { updateUserInfos } from '@/graphql/mutations'
+import { useMutation } from '@vue/apollo-composable'
+import { BFormCheckbox } from 'bootstrap-vue-next'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'UserSettingsSwitch',
-  props: {
-    initialValue: { type: Boolean, default: false },
-    attrName: { type: String },
-    enabledText: { type: String },
-    disabledText: { type: String },
-    disabled: { type: Boolean, default: false },
-    notAllowedText: { type: String, default: undefined },
-  },
-  emits: ['value-changed'],
-  data() {
-    return {
-      value: this.initialValue,
-    }
-  },
-  methods: {
-    async onChange() {
-      if (this.isDisabled) return
-      const variables = []
-      variables[this.attrName] = this.value
-      this.$apollo
-        .mutate({
-          mutation: updateUserInfos,
-          variables,
-        })
-        .then(() => {
-          this.$store.commit(this.attrName, this.value)
-          this.$emit('value-changed', this.value)
-          this.toastSuccess(this.value ? this.enabledText : this.disabledText)
-        })
-        .catch((error) => {
-          this.value = this.initialValue
-          this.toastError(error.message)
-        })
-    },
-    onClick() {
-      if (this.notAllowedText && this.disabled) {
-        this.toastError(this.notAllowedText)
-      }
-    },
-  },
+const store = useStore()
+const { toastError } = useAppToast()
+
+defineProps({
+  initialValue: { type: Boolean, default: false },
+  attrName: { type: String },
+  enabledText: { type: String },
+  disabledText: { type: String },
+  disabled: { type: Boolean, default: false },
+  notAllowedText: { type: String, default: undefined },
+})
+
+const value = ref(props.initialValue)
+
+const isDisabled = computed(() => {
+  return props.disabled
+})
+
+const { mutate: updateUserData } = useMutation(updateUserInfos)
+
+// const onChange = async () => {
+//   if (isDisabled.value) return
+//   const variables = []
+//   variables[props.attrName] = value.value
+
+//   try {
+//     await updateUserData({ variables })
+//     store.commit(props.attrName, value.value)
+//     emit('valueChanged', value.value)
+//     toastSuccess(value.value ? props.enabledText : props.disabledText)
+//   } catch (error) {
+//     value.value = props.initialValue
+//     toastError(error.message)
+//   }
+// }
+
+const onClick = () => {
+  if (props.notAllowedText && props.disabled) {
+    toastError(props.notAllowedText)
+  }
 }
+
+const emit = defineEmits(['valueChanged'])
 </script>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 596a3589f..fc9cf32c3 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="card bg-white gradido-border-radius app-box-shadow p-4 mt--3">
-    <b-tabs v-model="tabIndex" content-class="mt-3">
-      <b-tab :title="$t('PersonalDetails')">
+  <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
+    <BTabs v-model="tabIndex" content-class="mt-3">
+      <BTab :title="$t('PersonalDetails')">
         <div class="h2">{{ $t('PersonalDetails') }}</div>
         <div class="my-4 text-small">
           {{ $t('settings.info') }}
@@ -12,45 +12,45 @@
             <user-name />
           </BCol>
           <BCol cols="12" md="6" lg="6">
-            <b-form-group :label="$t('form.email')" :description="$t('settings.emailInfo')">
-              <b-form-input v-model="email" readonly></b-form-input>
-            </b-form-group>
+            <BFormGroup :label="$t('form.email')" :description="$t('settings.emailInfo')">
+              <BFormInput v-model="email" readonly></BFormInput>
+            </BFormGroup>
           </BCol>
         </BRow>
 
         <hr />
-        <b-form>
+        <BForm>
           <BRow class="mt-3">
             <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.firstname') }}</label>
-              <b-form-input
+              <BFormInput
                 v-model="firstName"
                 :placeholder="$t('settings.name.enterFirstname')"
                 data-test="firstname"
                 trim
-              ></b-form-input>
+              />
             </BCol>
             <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.lastname') }}</label>
-              <b-form-input
+              <BFormInput
                 v-model="lastName"
                 :placeholder="$t('settings.name.enterLastname')"
                 data-test="lastname"
                 trim
-              ></b-form-input>
+              />
             </BCol>
           </BRow>
           <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
-            <b-button
+            <BButton
               type="submit"
               variant="primary"
               data-test="submit-userdata"
               @click.prevent="onSubmit"
             >
               {{ $t('form.save') }}
-            </b-button>
+            </BButton>
           </div>
-        </b-form>
+        </BForm>
         <hr />
         <BRow>
           <BCol cols="12" md="6" lg="6">{{ $t('language') }}</BCol>
@@ -78,9 +78,9 @@
             <user-newsletter />
           </BCol>
         </BRow>
-      </b-tab>
+      </BTab>
       <div v-if="isCommunityService">
-        <b-tab class="community-service-tabs" :title="$t('settings.community')">
+        <BTab class="community-service-tabs" :title="$t('settings.community')">
           <div class="h2">{{ $t('settings.allow-community-services') }}</div>
           <div v-if="isHumhub" class="mt-3">
             <BRow>
@@ -147,7 +147,7 @@
                   {{ $t('settings.GMS.location-format') }}
                 </BCol>
                 <BCol cols="12" md="6" lg="6">
-                  <user-g-m-s-location-format />
+                  <!-- <user-g-m-s-location-format /> -->
                 </BCol>
               </BRow>
               <BRow class="mb-5">
@@ -155,7 +155,7 @@
                   {{ $t('settings.GMS.location.label') }}
                 </BCol>
                 <BCol cols="12" md="6" lg="6">
-                  <user-g-m-s-location />
+                  <!-- <user-g-m-s-location /> -->
                 </BCol>
               </BRow>
             </div>
@@ -171,123 +171,101 @@
             </BRow>
             <div class="h4 mt-3 text-muted">{{ $t('GMS.desc') }}</div>
           </div>
-        </b-tab>
+        </BTab>
       </div>
-    </b-tabs>
+    </BTabs>
 
     <!-- TODO<BRow>
       <BCol cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</BCol>
       <BCol cols="12" md="6" lg="6" class="text-right">
-        <b-form-checkbox v-model="darkMode" name="dark-mode" switch aligne></b-form-checkbox>
+        <BForm-checkbox v-model="darkMode" name="dark-mode" switch aligne></BForm-checkbox>
       </BCol>
     </BRow> -->
   </div>
 </template>
-<script>
-import UserNamingFormat from '@/components/UserSettings/UserNamingFormat'
-import UserGMSLocationFormat from '@/components/UserSettings/UserGMSLocationFormat'
-import UserGMSLocation from '@/components/UserSettings/UserGMSLocation'
-import UserName from '@/components/UserSettings/UserName.vue'
-import UserPassword from '@/components/UserSettings/UserPassword'
-import UserLanguage from '@/components/LanguageSwitch2.vue'
-import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
-import UserSettingsSwitch from '../components/UserSettings/UserSettingsSwitch.vue'
+<script setup>
+import { useStore } from 'vuex'
 import { updateUserInfos } from '@/graphql/mutations'
 import CONFIG from '../config'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
+import UserName from '@/components/UserSettings/UserName.vue'
+import UserLanguage from '@/components/LanguageSwitch2.vue'
+import UserPassword from '@/components/UserSettings/UserPassword'
+import UserSettingsSwitch from '../components/UserSettings/UserSettingsSwitch.vue'
+import UserNamingFormat from '@/components/UserSettings/UserNamingFormat'
+// import UserGMSLocationFormat from '@/components/UserSettings/UserGMSLocationFormat'
+// import UserGMSLocation from '@/components/UserSettings/UserGMSLocation'
+import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
+import { BTabs, BTab, BRow, BCol, BFormInput, BFormGroup, BForm, BButton } from 'bootstrap-vue-next'
 
-export default {
-  name: 'Profile',
-  components: {
-    UserNamingFormat,
-    UserGMSLocationFormat,
-    UserGMSLocation,
-    UserName,
-    UserPassword,
-    UserLanguage,
-    UserNewsletter,
-    UserSettingsSwitch,
-  },
-  props: {
-    balance: { type: Number, default: 0 },
-    transactionCount: { type: Number, default: 0 },
-  },
+const props = defineProps({
+  balance: { type: Number, default: 0 },
+  transactionCount: { type: Number, default: 0 },
+})
 
-  data() {
-    const { state } = this.$store
-    const { darkMode, firstName, lastName, email, newsletterState, gmsAllowed, humhubAllowed } =
-      state
+const store = useStore()
+const state = store.state
 
-    const username = this.$store.state.username || ''
-    let tabIndex = 0
-    if (this.$route.params.tabAlias === 'extern') {
-      tabIndex = 1
-    }
+const route = useRoute()
 
-    return {
-      darkMode,
-      username,
-      firstName,
-      lastName,
-      email,
-      newsletterState,
-      gmsAllowed,
-      humhubAllowed,
-      mutation: '',
-      variables: {},
-      tabIndex,
-    }
-  },
+const darkMode = computed(() => state.darkMode)
+const firstName = computed(() => state.firstName)
+const email = computed(() => state.email)
+const newsletterState = computed(() => state.newsletterState)
+const gmsAllowed = computed(() => state.gmsAllowed)
+const humhubAllowed = computed(() => state.humhubAllowed)
+const username = computed(() => state.username || '')
+const lastName = computed(() => state.lastName)
 
-  computed: {
-    isDisabled() {
-      const { firstName, lastName } = this.$store.state
-      return firstName === this.firstName && lastName === this.lastName
-    },
-    isHumhubActivated() {
-      return this.humhubAllowed === true
-    },
-    isCommunityService() {
-      return this.isGMS || this.isHumhub
-    },
-    isGMS() {
-      return CONFIG.GMS_ACTIVE === 'true'
-    },
-    isHumhub() {
-      return CONFIG.HUMHUB_ACTIVE === 'true'
-    },
-  },
-  // TODO: watch: {
-  //   darkMode(val) {
-  //     this.$store.commit('setDarkMode', this.darkMode)
-  //     this.toastSuccess(
-  //       this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight'),
-  //     )
-  //   },
-  // },
-  methods: {
-    async onSubmit(key) {
-      try {
-        await this.$apollo.mutate({
-          mutation: updateUserInfos,
-          variables: {
-            firstName: this.firstName,
-            lastName: this.lastName,
-          },
-        })
-        this.$store.commit('firstName', this.firstName)
-        this.$store.commit('lastName', this.lastName)
-        this.showUserData = true
-        this.toastSuccess(this.$t('settings.name.change-success'))
-      } catch (error) {}
-    },
-    gmsStateSwitch(eventData) {
-      this.gmsAllowed = eventData
-    },
-    humhubStateSwitch(eventData) {
-      this.humhubAllowed = eventData
-    },
-  },
+let tabIndex = 0
+if (route.params.tabAlias === 'extern') {
+  tabIndex = 1
 }
+
+const isDisabled = computed(() => {
+  return firstName.value === state.firstName && lastName.value === state.lastName
+})
+
+const isHumhubActivated = computed(() => {
+  return humhubAllowed.value === true
+})
+
+const isGMS = computed(() => {
+  return CONFIG.GMS_ACTIVE === 'true'
+})
+
+const isHumhub = computed(() => {
+  return CONFIG.HUMHUB_ACTIVE === 'true'
+})
+
+const isCommunityService = computed(() => {
+  return isGMS.value || isHumhub.value
+})
+
+const { mutate: updateUserData } = useMutation(updateUserInfos)
+
+const onSubmit = async (key) => {
+  try {
+    await updateUserData({
+      firstName: firstName.value,
+      lastName: lastName.value,
+    }),
+      store.commit('firstName', firstName.value)
+    store.commit('lastName', lastName.value)
+    showUserData.value = true
+    toastSuccess($t('settings.name.change-success'))
+  } catch (error) {}
+}
+
+// const gmsStateSwitch = (eventData) => {
+//   gmsAllowed.value = eventData
+// }
+
+// const humhubStateSwitch = (eventData) => {
+//   humhubAllowed.value = eventData
+// }
 </script>
 <style>
 .community-service-tabs {