fixup! fix: show first letter for e-mail guests avatars

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Oct 28, 2024 · 71d3ece · 71d3ece
1 parent d2516d1
commit 71d3ece
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 33 deletions.
diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
@@ -95,7 +95,9 @@ describe('AvatarWrapper.vue', () => {
 		const testCases = [
 			[null, ATTENDEE.CHANGELOG_BOT_ID, 'Talk updates', ATTENDEE.ACTOR_TYPE.BOTS, 'icon-changelog'],
 			[null, 'federated_user/id', USER_NAME, ATTENDEE.ACTOR_TYPE.FEDERATED_USERS, 'icon-user'],
-			[null, 'guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.EMAILS, 'icon-mail'],
+			[null, 'guest/id', '', ATTENDEE.ACTOR_TYPE.GUESTS, 'icon-user'],
+			[null, 'guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.GUESTS, 'icon-user'],
+			[null, 'guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.EMAILS, 'icon-user'],
 			['new', 'guest/id', 'test@mail.com', ATTENDEE.ACTOR_TYPE.EMAILS, 'icon-mail'],
 			[null, 'sha-phone', '+12345...', ATTENDEE.ACTOR_TYPE.PHONES, 'icon-phone'],
 			[null, 'team/id', 'Team', ATTENDEE.ACTOR_TYPE.CIRCLES, 'icon-team'],
@@ -115,10 +117,9 @@ describe('AvatarWrapper.vue', () => {
 
 	describe('render specific symbols', () => {
 		const testCases = [
-			['guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.GUESTS, '?'],
 			['guest/id', USER_NAME, ATTENDEE.ACTOR_TYPE.GUESTS, USER_NAME.charAt(0)],
 			['guest/id', USER_NAME, ATTENDEE.ACTOR_TYPE.EMAILS, USER_NAME.charAt(0)],
-			['deleted_users', USER_NAME, 'deleted_users', 'X'],
+			['deleted_users', USER_NAME, ATTENDEE.ACTOR_TYPE.DELETED_USERS, 'X'],
 			['bot-id', USER_NAME, ATTENDEE.ACTOR_TYPE.BOTS, '>_'],
 		]
 

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -6,7 +6,7 @@
 <template>
 	<div class="avatar-wrapper" :class="avatarClass" :style="avatarStyle">
 		<div v-if="iconClass" class="avatar icon" :class="[iconClass]" />
-		<div v-else-if="isGuest || isEmailGuest || isDeletedUser" class="avatar guest">
+		<div v-else-if="isGuestOrDeletedUser" class="avatar guest">
 			{{ firstLetterOfGuestName }}
 		</div>
 		<div v-else-if="isBot" class="avatar bot">
@@ -144,26 +144,30 @@ export default {
 	computed: {
 		// Determines which icon is displayed
 		iconClass() {
-			if (!this.source || this.isUser || (this.isFederatedUser && this.token) || this.isBot || this.isGuest || this.isDeletedUser) {
+			if (!this.source) {
 				return ''
 			}
-			if (this.isFederatedUser) {
-				return 'icon-user'
-			}
-			if (this.source === ATTENDEE.ACTOR_TYPE.EMAILS) {
-				return (this.hasCustomName && this.token !== 'new') ? '' : 'icon-mail'
-			}
-			if (this.source === ATTENDEE.ACTOR_TYPE.PHONES) {
+			switch (this.source) {
+			case ATTENDEE.ACTOR_TYPE.USERS:
+			case ATTENDEE.ACTOR_TYPE.BRIDGED:
+			case ATTENDEE.ACTOR_TYPE.DELETED_USERS:
+				return ''
+			case ATTENDEE.ACTOR_TYPE.FEDERATED_USERS:
+				return this.token ? '' : 'icon-user'
+			case ATTENDEE.ACTOR_TYPE.EMAILS:
+				return this.token === 'new' ? 'icon-mail' : (this.hasCustomName ? '' : 'icon-user')
+			case ATTENDEE.ACTOR_TYPE.GUESTS:
+				return this.hasCustomName ? '' : 'icon-user'
+			case ATTENDEE.ACTOR_TYPE.PHONES:
 				return 'icon-phone'
-			}
-			if (this.source === ATTENDEE.ACTOR_TYPE.BOTS && this.id === ATTENDEE.CHANGELOG_BOT_ID) {
-				return 'icon-changelog'
-			}
-			if (this.source === ATTENDEE.ACTOR_TYPE.CIRCLES) {
+			case ATTENDEE.ACTOR_TYPE.BOTS:
+				return this.id === ATTENDEE.CHANGELOG_BOT_ID ? 'icon-changelog' : ''
+			case ATTENDEE.ACTOR_TYPE.CIRCLES:
 				return 'icon-team'
+			case ATTENDEE.ACTOR_TYPE.GROUPS:
+			default:
+				return 'icon-contacts'
 			}
-			// source: groups
-			return 'icon-contacts'
 		},
 		avatarClass() {
 			return {
@@ -179,33 +183,25 @@ export default {
 				'--condensed-overlap': this.condensedOverlap,
 			}
 		},
-		isUser() {
-			return this.source === ATTENDEE.ACTOR_TYPE.USERS || this.source === ATTENDEE.ACTOR_TYPE.BRIDGED
-		},
 		isFederatedUser() {
 			return this.source === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
 		},
 		isBot() {
 			return this.source === ATTENDEE.ACTOR_TYPE.BOTS && this.id !== ATTENDEE.CHANGELOG_BOT_ID
 		},
-		isGuest() {
-			return this.source === ATTENDEE.ACTOR_TYPE.GUESTS
-		},
-		isEmailGuest() {
-			return this.source === ATTENDEE.ACTOR_TYPE.EMAILS
-		},
-		isDeletedUser() {
-			return this.source === 'deleted_users'
+		isGuestOrDeletedUser() {
+			return [ATTENDEE.ACTOR_TYPE.GUESTS, ATTENDEE.ACTOR_TYPE.EMAILS, ATTENDEE.ACTOR_TYPE.DELETED_USERS]
+				.includes(this.source)
 		},
 		hasCustomName() {
 			return this.name?.trim() && this.name !== t('spreed', 'Guest')
 		},
 		firstLetterOfGuestName() {
-			if (this.isDeletedUser) {
+			if (this.source === ATTENDEE.ACTOR_TYPE.DELETED_USERS) {
 				return 'X'
+			} else {
+				return this.name.charAt(0)
 			}
-			const customName = this.hasCustomName ? this.name : '?'
-			return customName.charAt(0)
 		},
 		avatarUrl() {
 			return getUserProxyAvatarOcsUrl(this.token, this.id, this.isDarkTheme, this.size > AVATAR.SIZE.MEDIUM ? 512 : 64)

diff --git a/src/constants.js b/src/constants.js
@@ -119,6 +119,7 @@ export const ATTENDEE = {
 		BRIDGED: 'bridged',
 		FEDERATED_USERS: 'federated_users',
 		PHONES: 'phones',
+		DELETED_USERS: 'deleted_users',
 		/* @internal Only use with server APIs (like /core/autocomplete/get) and never with Talk APIs */
 		REMOTES: 'remotes',
 	},