WIP

2026-02-06 09:56:05 +00:00 · 2024-08-08 14:16:03 +02:00 · 2024-08-08 14:16:03 +02:00 · b23f479b1f
commit b23f479b1f
parent 2e6d62f274
8 changed files with 121 additions and 104 deletions
--- 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>
--- 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" />
--- 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>
--- 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>
--- 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
--- 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)
--- 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) {
--- 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 {