fix(guest): migrate localStorage nick to nextcloud/auth implementation

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/PublicShareAuthSidebar.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { getCurrentUser } from '@nextcloud/auth'
+import { getCurrentUser, getGuestNickname } from '@nextcloud/auth'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
@@ -118,12 +118,13 @@ export default {
 		t,
 
 		async joinConversation() {
-			const guestStoredName = localStorage.getItem('nick')
+			const currentUser = getCurrentUser()
+			const guestNickname = getGuestNickname()
 
-			if (getCurrentUser()) {
-				this.$store.dispatch('setCurrentUser', getCurrentUser())
-			} else if (guestStoredName) {
-				this.$store.dispatch('setDisplayName', guestStoredName)
+			if (currentUser) {
+				this.$store.dispatch('setCurrentUser', currentUser)
+			} else if (guestNickname) {
+				this.$store.dispatch('setDisplayName', guestNickname)
 			} else {
 				subscribe('talk:guest-name:added', this.showGuestMediaSettings)
 			}
@@ -131,8 +132,8 @@ export default {
 			await this.$store.dispatch('joinConversation', { token: this.token })
 
 			// Add guest name to the store, only possible after joining the conversation
-			if (guestStoredName) {
-				await setGuestUserName(this.token, guestStoredName)
+			if (guestNickname) {
+				await setGuestUserName(this.token, guestNickname)
 			}
 
 			// Fetching the conversation needs to be done once the user has
@@ -157,7 +158,7 @@ export default {
 				this.fetchCurrentConversationIntervalId = window.setInterval(this.fetchCurrentConversation, 30000)
 			}
 
-			if (getCurrentUser() || guestStoredName) {
+			if (currentUser || guestNickname) {
 				// Joining the call needs to be done once the participant identifier
 				// has been set, which is done once the conversation has been
 				// fetched. MediaSettings are called to set up audio and video devices

src/components/CallView/Grid/Grid.vue

@@ -132,7 +132,6 @@
 						<span>Dummies:</span><input v-model.number="dummies" type="number">
 						<span>Stripe mode:</span><input v-model="devStripe" type="checkbox">
 						<span>Screenshot mode:</span><input v-model="screenshotMode" type="checkbox">
-
 					</div>
 				</template>
 			</div>

src/components/SetGuestUsername.vue

@@ -43,6 +43,7 @@ import escapeHtml from 'escape-html'
 
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 
+import { getGuestNickname } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 
@@ -106,9 +107,7 @@ export default {
 	},
 
 	mounted() {
-		// FIXME use @nextcloud/browser-storage or OCP when decided
-		// https://github.com/nextcloud/nextcloud-browser-storage/issues/3
-		this.guestUserName = localStorage.getItem('nick') || ''
+		this.guestUserName = getGuestNickname() || ''
 		if (this.guestUserName && this.actorDisplayName !== this.guestUserName) {
 			// Browser storage has a name, so we use that.
 			if (this.actorId) {

src/stores/__tests__/guestName.spec.js

@@ -4,6 +4,7 @@
  */
 import { createPinia, setActivePinia } from 'pinia'
 
+import { setGuestNickname } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
 
 import { setGuestUserName } from '../../services/participantsService.js'
@@ -14,6 +15,10 @@ import { useGuestNameStore } from '../guestName.js'
 jest.mock('../../services/participantsService', () => ({
 	setGuestUserName: jest.fn(),
 }))
+jest.mock('@nextcloud/auth', () => ({
+	...jest.requireActual('@nextcloud/auth'),
+	setGuestNickname: jest.fn(),
+}))
 
 describe('guestNameStore', () => {
 	let store
@@ -160,7 +165,7 @@ describe('guestNameStore', () => {
 
 		// Assert
 		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
-		expect(localStorage.setItem).toHaveBeenCalledWith('nick', newName)
+		expect(setGuestNickname).toHaveBeenCalledWith(newName)
 		expect(store.getGuestName('token-1', 'actor-id1')).toBe('actor 1')
 		expect(vuexStore.getters.getDisplayName()).toBe('actor 1')
 	})
@@ -184,7 +189,7 @@ describe('guestNameStore', () => {
 
 		// Assert
 		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
-		expect(localStorage.removeItem).toHaveBeenCalledWith('nick')
+		expect(setGuestNickname).toHaveBeenCalledWith('Guest')
 	})
 
 	test('resets to previous display name if there is an error in setting the new one', async () => {

src/stores/guestName.js

@@ -5,6 +5,7 @@
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 
+import { setGuestNickname } from '@nextcloud/auth'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
@@ -92,13 +93,8 @@ export const useGuestNameStore = defineStore('guestName', {
 
 				await setGuestUserName(token, name)
 
-				if (name !== '') {
-					localStorage.setItem('nick', name)
-				} else {
-					localStorage.removeItem('nick')
-				}
+				setGuestNickname(name || t('spreed', 'Guest'))
 				emit('talk:guest-name:added')
-
 			} catch (error) {
 				store.dispatch('setDisplayName', previousName)
 				this.addGuestName({