From b23f479b1f2b16409804cca81f791cb4bfe8d636 Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Thu, 8 Aug 2024 14:16:03 +0200
Subject: [PATCH] WIP

---
 .../Inputs/InputPasswordConfirmation.vue      |  24 +++--
 .../src/components/Inputs/InputUsername.vue   |   4 +-
 .../UserSettings/UserGMSLocation.vue          |   8 +-
 .../UserSettings/UserGMSLocationFormat.vue    | 100 +++++++++---------
 .../UserSettings/UserNewsletter.vue           |  11 +-
 .../components/UserSettings/UserPassword.vue  |  17 ++-
 .../UserSettings/UserSettingsSwitch.vue       |  33 +++---
 frontend/src/pages/Settings.vue               |  28 ++---
 8 files changed, 121 insertions(+), 104 deletions(-)

diff --git a/frontend/src/components/Inputs/InputPasswordConfirmation.vue b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
index aa54c4b28..f76ea6aad 100644
--- a/frontend/src/components/Inputs/InputPasswordConfirmation.vue
+++ b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
@@ -4,7 +4,7 @@
       <BCol>
         <input-password
           id="new-password-input-field"
-          v-model="password"
+          :model-value="password"
           :rules="{
             required: true,
             containsLowercaseCharacter: true,
@@ -19,7 +19,7 @@
           :immediate="true"
           :name="createId(register ? $t('form.password') : $t('form.password_new'))"
           :placeholder="register ? $t('form.password') : $t('form.password_new')"
-          v-model="password"
+          @update:modelValue="password = $event"
         />
       </BCol>
     </BRow>
@@ -27,16 +27,16 @@
       <BCol>
         <input-password
           id="repeat-new-password-input-field"
-          v-model="passwordRepeat"
+          :model-value="passwordRepeat"
           :rules="{
             required: true,
-            samePassword: value.password,
+            samePassword: password,
           }"
           :label="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
           :immediate="true"
           :name="createId(register ? $t('form.passwordRepeat') : $t('form.password_new_repeat'))"
           :placeholder="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
-          v-model="passwordRepeat"
+          @update:modelValue="passwordRepeat = $event"
         />
       </BCol>
     </BRow>
@@ -51,7 +51,7 @@ const password = ref('')
 const passwordRepeat = ref('')
 
 defineProps({
-  value: {
+  modelValue: {
     type: Object,
     required: true,
   },
@@ -61,6 +61,8 @@ defineProps({
   },
 })
 
+const emit = defineEmits(['input'])
+
 const createId = (text) => {
   return text.replace(/ +/g, '-')
 }
@@ -69,7 +71,11 @@ const passwordObject = computed(() => {
   return { password: password.value, passwordRepeat: passwordRepeat.value }
 })
 
-watch([password, passwordRepeat], () => {
-  emit('input', passwordObject.value)
-})
+watch(
+  [password, passwordRepeat],
+  () => {
+    emit('input', passwordObject.value)
+  },
+  { deep: true },
+)
 </script>
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index 96e893698..f606c35cf 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -5,15 +5,15 @@
         <BInputGroup>
           <BFormInput
             v-bind="ariaInput"
-            v-model="currentValue"
             :id="labelFor"
-            v-model="currentValue"
+            :model-value="currentValue"
             :name="name"
             :placeholder="placeholder"
             type="text"
             :state="validated ? valid : false"
             autocomplete="off"
             data-test="username"
+            @update:modelValue="currentValue = $event"
           />
           <BButton size="lg" text="Button" variant="secondary" @click="emitSetIsEdit" append>
             <IBiXCircle style="height: 17px; width: 17px" />
diff --git a/frontend/src/components/UserSettings/UserGMSLocation.vue b/frontend/src/components/UserSettings/UserGMSLocation.vue
index 0d7fe9ab7..2b2d95520 100644
--- a/frontend/src/components/UserSettings/UserGMSLocation.vue
+++ b/frontend/src/components/UserSettings/UserGMSLocation.vue
@@ -1,8 +1,6 @@
 <template>
-  <b-button>{{ $t('settings.GMS.location.button') }}</b-button>
+  <BButton>{{ $t('settings.GMS.location.button') }}</BButton>
 </template>
-<script>
-export default {
-  name: 'UserGMSLocation',
-}
+<script setup>
+import { BButton } from 'bootstrap-vue-next'
 </script>
diff --git a/frontend/src/components/UserSettings/UserGMSLocationFormat.vue b/frontend/src/components/UserSettings/UserGMSLocationFormat.vue
index 7de8dc106..f3dab95aa 100644
--- a/frontend/src/components/UserSettings/UserGMSLocationFormat.vue
+++ b/frontend/src/components/UserSettings/UserGMSLocationFormat.vue
@@ -1,68 +1,70 @@
 <template>
   <div class="user-gms-location-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"
         @click.prevent="update(option)"
       >
         {{ option.label }}
-      </b-dropdown-item>
-    </b-dropdown>
+      </BDropdownItem>
+    </BDropdown>
   </div>
 </template>
-<script>
+<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 { BDropdown, BDropdownItem } from 'bootstrap-vue-next'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'UserGMSLocationFormat',
-  data() {
-    return {
-      selectedOption: this.$store.state.gmsPublishLocation ?? 'GMS_LOCATION_TYPE_RANDOM',
-      dropdownOptions: [
-        {
-          label: this.$t('settings.GMS.publish-location.exact'),
-          value: 'GMS_LOCATION_TYPE_EXACT',
-        },
-        {
-          label: this.$t('settings.GMS.publish-location.approximate'),
-          value: 'GMS_LOCATION_TYPE_APPROXIMATE',
-        },
-        {
-          label: this.$t('settings.GMS.publish-location.random'),
-          value: 'GMS_LOCATION_TYPE_RANDOM',
-        },
-      ],
-    }
+const { t } = useI18n()
+const store = useStore()
+const { toastError, toastSuccess } = useAppToast()
+
+const selectedOption = ref(store.state.gmsPublishLocation ?? 'GMS_LOCATION_TYPE_RANDOM')
+const dropdownOptions = [
+  {
+    label: t('settings.GMS.publish-location.exact'),
+    value: 'GMS_LOCATION_TYPE_EXACT',
   },
-  computed: {
-    selectedOptionLabel() {
-      return this.dropdownOptions.find((option) => option.value === this.selectedOption).label
-    },
+  {
+    label: t('settings.GMS.publish-location.approximate'),
+    value: 'GMS_LOCATION_TYPE_APPROXIMATE',
   },
-  methods: {
-    async update(option) {
-      if (option.value === this.selectedOption) {
-        return
-      }
-      try {
-        await this.$apollo.mutate({
-          mutation: updateUserInfos,
-          variables: {
-            gmsPublishLocation: option.value,
-          },
-        })
-        this.toastSuccess(this.$t('settings.GMS.publish-location.updated'))
-        this.selectedOption = option.value
-        this.$store.commit('gmsPublishLocation', option.value)
-        this.$emit('gmsPublishLocation', option.value)
-      } catch (error) {
-        this.toastError(error.message)
-      }
-    },
+  {
+    label: t('settings.GMS.publish-location.random'),
+    value: 'GMS_LOCATION_TYPE_RANDOM',
   },
+]
+
+const selectedOptionLabel = computed(() => {
+  return dropdownOptions.find((option) => option.value === selectedOption.value)?.label
+})
+
+const emit = defineEmits(['gmsPublishLocation'])
+
+const { mutate: updateUserData } = useMutation(updateUserInfos)
+
+const update = async (option) => {
+  if (option.value === selectedOption.value) {
+    return
+  }
+  try {
+    await updateUserData({
+      gmsPublishLocation: option.value,
+    })
+    toastSuccess(t('settings.GMS.publish-location.updated'))
+    selectedOption.value = option.value
+    store.commit('gmsPublishLocation', option.value)
+    emit('gmsPublishLocation', 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 2d027c293..e5207875a 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.vue
+++ b/frontend/src/components/UserSettings/UserNewsletter.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="formusernewsletter">
     <BFormCheckbox
-      test="BFormCheckbox"
-      v-model="newsletterState"
+      :model-value="newsletterState"
       test="BFormCheckbox"
       name="check-button"
       switch
       @change="onSubmit"
+      @update:modelValue="newsletterState = $event"
     />
   </div>
 </template>
@@ -17,11 +17,14 @@ import { subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
 import { useMutation } from '@vue/apollo-composable'
 import { BFormCheckbox } from 'bootstrap-vue-next'
 import { useAppToast } from '@/composables/useToast'
+import { useI18n } from 'vue-i18n'
 
 const { toastSuccess, toastError } = useAppToast()
 const store = useStore()
 const state = store.state
 
+const { t } = useI18n()
+
 const newsletterState = ref(state.newsletterState)
 
 const { mutate: newsletterSubscribe } = useMutation(subscribeNewsletter)
@@ -34,8 +37,8 @@ const onSubmit = async () => {
     store.commit('newsletterState', newsletterState.value)
     toastSuccess(
       newsletterState.value
-        ? $t('settings.newsletter.newsletterTrue')
-        : $t('settings.newsletter.newsletterFalse'),
+        ? t('settings.newsletter.newsletterTrue')
+        : t('settings.newsletter.newsletterFalse'),
     )
   } catch (error) {
     newsletterState.value = state.newsletterState
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 5492a9e47..a7abcf772 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -3,7 +3,7 @@
     <div>
       <BRow class="mb-4 text-right">
         <BCol class="text-right">
-          <button @click="toggleShowPassword" data-test="open-password-change-form">
+          <button data-test="open-password-change-form" @click="toggleShowPassword">
             <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> -->
@@ -17,13 +17,18 @@
         <BRow class="mb-2">
           <BCol>
             <input-password
+              :model-value="form.password"
               :label="$t('form.password_old')"
               :placeholder="$t('form.password_old')"
-              v-model="form.password"
+              @update:modelValue="form.password = $event"
             />
           </BCol>
         </BRow>
-        <input-password-confirmation v-model="form.newPassword" :register="register" />
+        <input-password-confirmation
+          :model-value="form.newPassword"
+          :register="register"
+          @update:modelValue="form.newPassword = $event"
+        />
         <BRow class="text-right">
           <BCol>
             <div class="text-right">
@@ -46,6 +51,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { BRow, BCol, BForm, BButton } from 'bootstrap-vue-next'
 import InputPassword from '@/components/Inputs/InputPassword'
 import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
@@ -54,8 +60,9 @@ import { useForm } from 'vee-validate'
 import { useMutation } from '@vue/apollo-composable'
 import { useAppToast } from '@/composables/useToast'
 
+const { t } = useI18n()
+
 const showPassword = ref(true)
-const email = ref(null)
 const register = ref(false)
 const form = ref({
   password: '',
@@ -93,7 +100,7 @@ const onSubmit = handleSubmit(async () => {
       password: form.value.password,
       passwordNew: form.value.newPassword.password,
     })
-    toastSuccess($t('message.reset'))
+    toastSuccess(t('message.reset'))
     cancelEdit()
   } catch (error) {
     toastError(error.message)
diff --git a/frontend/src/components/UserSettings/UserSettingsSwitch.vue b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
index 4b6f96bd1..3030cc427 100644
--- a/frontend/src/components/UserSettings/UserSettingsSwitch.vue
+++ b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="form-user-switch" @click="onClick">
-    <!-- <BFormCheckbox
+    <BFormCheckbox
       test="BFormCheckbox"
       name="check-button"
       :disabled="disabled"
       switch
       @change="onChange"
-    /> -->
-    hello
+    />
   </div>
 </template>
 <script setup>
@@ -38,21 +37,21 @@ const isDisabled = computed(() => {
 
 const { mutate: updateUserData } = useMutation(updateUserInfos)
 
-// const onChange = async () => {
-//   if (isDisabled.value) return
-//   const variables = []
-//   variables[props.attrName] = value.value
+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)
-//   }
-// }
+  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) {
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index fc9cf32c3..099369f37 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -13,7 +13,7 @@
           </BCol>
           <BCol cols="12" md="6" lg="6">
             <BFormGroup :label="$t('form.email')" :description="$t('settings.emailInfo')">
-              <BFormInput v-model="email" readonly></BFormInput>
+              <BFormInput :model-value="email" @update:modelValue="email = $event" readonly />
             </BFormGroup>
           </BCol>
         </BRow>
@@ -24,19 +24,21 @@
             <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.firstname') }}</label>
               <BFormInput
-                v-model="firstName"
+                :model-value="firstName"
                 :placeholder="$t('settings.name.enterFirstname')"
                 data-test="firstname"
                 trim
+                @update:modelValue="firstName = $event"
               />
             </BCol>
             <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.lastname') }}</label>
               <BFormInput
-                v-model="lastName"
+                :model-value="lastName"
                 :placeholder="$t('settings.name.enterLastname')"
                 data-test="lastname"
                 trim
+                @update:modelValue="lastName = $event"
               />
             </BCol>
           </BRow>
@@ -147,7 +149,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 +157,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>
@@ -195,8 +197,8 @@ 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 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'
 
@@ -259,13 +261,13 @@ const onSubmit = async (key) => {
   } catch (error) {}
 }
 
-// const gmsStateSwitch = (eventData) => {
-//   gmsAllowed.value = eventData
-// }
+const gmsStateSwitch = (eventData) => {
+  gmsAllowed.value = eventData
+}
 
-// const humhubStateSwitch = (eventData) => {
-//   humhubAllowed.value = eventData
-// }
+const humhubStateSwitch = (eventData) => {
+  humhubAllowed.value = eventData
+}
 </script>
 <style>
 .community-service-tabs {