fix(NcAvatar): redirect to guest avatar if avatar doesnt exist

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

src/utils/getAvatarUrl.ts

@@ -33,7 +33,7 @@ interface AvatarUrlOptions {
  */
 export function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {
 	// backend only supports 64 and 512px
-	// so we only requrest the needed size for better caching of the request.
+	// so we only request the needed size for better caching of the request.
 	const size = (options?.size || 64) <= 64
 		? 64
 		: 512
@@ -45,7 +45,7 @@ export function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {
 		? '/dark'
 		: ''
 
-	return generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}`, {
+	return generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {
 		user,
 		size,
 	})

tests/unit/components/NcAvatar/NcAvatar.spec.ts

@@ -150,7 +150,7 @@ describe('NcAvatar.vue', () => {
 			await nextTick()
 
 			expect(wrapper.find('img').exists()).toBeTruthy()
-			expect(wrapper.find('img').attributes('src')).toMatch(/avatar\/user1\/64$/)
+			expect(wrapper.find('img').attributes('src')).toMatch(/avatar\/user1\/64\?guestFallback=true$/)
 		})
 
 		it('should render image with avatar url pointing to a user', async () => {

tests/unit/utils/getAvatarUrl.spec.ts

@@ -11,56 +11,56 @@ describe('getAvatarUrl', () => {
 	})
 
 	it('should return correct relative URL for user avatar', () => {
-		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64')
-		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64')
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64?guestFallback=true')
 	})
 
 	it('should return correct relative URL with fixed sizes', () => {
 		/// @ts-expect-error testing invalid value
-		expect(getAvatarUrl('alice', { size: 0 })).toBe('//index.php/avatar/alice/64')
+		expect(getAvatarUrl('alice', { size: 0 })).toBe('//index.php/avatar/alice/64?guestFallback=true')
 		/// @ts-expect-error testing invalid value
-		expect(getAvatarUrl('alice', { size: -1 })).toBe('//index.php/avatar/alice/64')
-		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64')
+		expect(getAvatarUrl('alice', { size: -1 })).toBe('//index.php/avatar/alice/64?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64?guestFallback=true')
 		/// @ts-expect-error testing invalid value
-		expect(getAvatarUrl('john', { size: 65 })).toBe('//index.php/avatar/john/512')
-		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512')
+		expect(getAvatarUrl('john', { size: 65 })).toBe('//index.php/avatar/john/512?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512?guestFallback=true')
 	})
 
 	it('should return correct relative URL for user avatar in dark mode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark')
-		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512/dark')
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512/dark?guestFallback=true')
 	})
 
 	it('should return correct relative URL for user avatar in dark mode if enforced', () => {
-		expect(getAvatarUrl('alice', { isDarkTheme: true })).toBe('//index.php/avatar/alice/64/dark')
-		expect(getAvatarUrl('john', { isDarkTheme: true, size: 512 })).toBe('//index.php/avatar/john/512/dark')
+		expect(getAvatarUrl('alice', { isDarkTheme: true })).toBe('//index.php/avatar/alice/64/dark?guestFallback=true')
+		expect(getAvatarUrl('john', { isDarkTheme: true, size: 512 })).toBe('//index.php/avatar/john/512/dark?guestFallback=true')
 	})
 
 	it('should return correct relative URL for user avatar in bright mode if enforced but body is darkmode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('alice', { isDarkTheme: false })).toBe('//index.php/avatar/alice/64')
-		expect(getAvatarUrl('john', { isDarkTheme: false, size: 512 })).toBe('//index.php/avatar/john/512')
+		expect(getAvatarUrl('alice', { isDarkTheme: false })).toBe('//index.php/avatar/alice/64?guestFallback=true')
+		expect(getAvatarUrl('john', { isDarkTheme: false, size: 512 })).toBe('//index.php/avatar/john/512?guestFallback=true')
 	})
 
 	it('should return correct relative URL for user avatar in dark mode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark')
-		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64/dark')
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64/dark?guestFallback=true')
 	})
 
 	it('should return correct relative URL for guest avatar', () => {
-		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64')
-		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64')
+		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64?guestFallback=true')
 	})
 
 	it('should return correct relative URL for guest avatar in dark mode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64/dark')
-		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64/dark')
+		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64/dark?guestFallback=true')
+		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64/dark?guestFallback=true')
 	})
 })