diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue index 4ccdfd6678ea..1175ea864c46 100644 --- a/src/components/GuestWelcomeWindow.vue +++ b/src/components/GuestWelcomeWindow.vue @@ -67,6 +67,8 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' import ConversationIcon from './ConversationIcon.vue' +import { useGuestNameStore } from '../stores/guestName.js' + export default { name: 'GuestWelcomeWindow', @@ -85,6 +87,11 @@ export default { }, }, + setup() { + const guestNameStore = useGuestNameStore() + return { guestNameStore } + }, + data() { return { guestUserName: '', @@ -115,10 +122,7 @@ export default { methods: { handleChooseUserName() { - this.$store.dispatch('SubmitUserName', { - token: this.token, - name: this.guestUserName, - }) + this.guestNameStore.submitUserName(this.token, this.guestUserName) }, }, } diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue index ff21b31347f5..be6c03c2bca2 100644 --- a/src/components/SetGuestUsername.vue +++ b/src/components/SetGuestUsername.vue @@ -54,7 +54,6 @@ import Pencil from 'vue-material-design-icons/Pencil.vue' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' -import { setGuestUserName } from '../services/participantsService.js' import { useGuestNameStore } from '../stores/guestName.js' export default { @@ -128,31 +127,9 @@ export default { }, methods: { - async handleChooseUserName() { - const previousName = this.$store.getters.getDisplayName() - try { - this.$store.dispatch('setDisplayName', this.guestUserName) - this.guestNameStore.addGuestName({ - token: this.token, - actorId: this.$store.getters.getActorId(), - actorDisplayName: this.guestUserName, - }, { noUpdate: false }) - await setGuestUserName(this.token, this.guestUserName) - if (this.guestUserName !== '') { - localStorage.setItem('nick', this.guestUserName) - } else { - localStorage.removeItem('nick') - } - this.isEditingUsername = false - } catch (exception) { - this.$store.dispatch('setDisplayName', previousName) - this.guestNameStore.addGuestName({ - token: this.token, - actorId: this.$store.getters.getActorId(), - actorDisplayName: previousName, - }, { noUpdate: false }) - console.debug(exception) - } + handleChooseUserName() { + this.guestNameStore.submitUserName(this.token, this.guestUserName) + this.isEditingUsername = false }, handleEditUsername() { diff --git a/src/stores/guestName.js b/src/stores/guestName.js index 8c986136e3c2..f9778c20a014 100644 --- a/src/stores/guestName.js +++ b/src/stores/guestName.js @@ -23,6 +23,9 @@ import { defineStore } from 'pinia' import Vue from 'vue' +import { setGuestUserName } from '../services/participantsService.js' +import store from '../store/index.js' + export const useGuestNameStore = defineStore('guestName', { state: () => ({ guestNames: {}, @@ -83,5 +86,42 @@ export const useGuestNameStore = defineStore('guestName', { Vue.set(this.guestNames[token], actorId, actorDisplayName) } }, + + /** + * Add the submitted guest name to the store + * + * @param {string} token the token of the conversation + * @param {string} name the new guest name + */ + async submitUserName(token, name) { + const actorId = store.getters.getActorId() + const previousName = this.getGuestName(token, actorId) + + try { + store.dispatch('setDisplayName', name) + this.addGuestName({ + token, + actorId, + actorDisplayName: name, + }, { noUpdate: false }) + + await setGuestUserName(token, name) + + if (name !== '') { + localStorage.setItem('nick', name) + } else { + localStorage.removeItem('nick') + } + + } catch (error) { + store.dispatch('setDisplayName', previousName) + this.addGuestName({ + token, + actorId, + actorDisplayName: previousName, + }, { noUpdate: false }) + console.debug(error) + } + }, }, })