add some additional feedback when logging in fails (#802)

* add some additional feedback when logging in fails

adds an additional row to the toast message that is displayed if an error is encountered during the sign in process

src/api/mutations/authentication/index.ts

@@ -1,11 +1,9 @@
-import { AxiosResponse } from 'axios'
 import { JellyfinCredentials } from '../../types/jellyfin-credentials'
 import { AuthenticationResult } from '@jellyfin/sdk/lib/generated-client'
 import { useMutation } from '@tanstack/react-query'
 import { JellifyUser } from '../../../types/JellifyUser'
-import { isUndefined } from 'lodash'
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api'
 import { useApi, useJellifyUser } from '../../../stores'
+import authenticateUserByName from './utils'
 
 interface AuthenticateUserByNameMutation {
 	onSuccess?: () => void
@@ -14,38 +12,24 @@ interface AuthenticateUserByNameMutation {
 
 const useAuthenticateUserByName = ({ onSuccess, onError }: AuthenticateUserByNameMutation) => {
 	const api = useApi()
-	const [user, setUser] = useJellifyUser()
+	const [, setUser] = useJellifyUser()
 
 	return useMutation({
-		mutationFn: async (credentials: JellyfinCredentials) => {
-			return await getUserApi(api!).authenticateUserByName({
-				authenticateUserByName: {
-					Username: credentials.username,
-					Pw: credentials.password,
-				},
-			})
+		mutationFn: (credentials: JellyfinCredentials) => {
+			return authenticateUserByName(api, credentials.username, credentials.password)
 		},
-		onSuccess: async (authResult: AxiosResponse<AuthenticationResult>) => {
-			if (isUndefined(authResult))
-				return Promise.reject(new Error('Authentication result was empty'))
-
-			if (authResult.status == 400 || isUndefined(authResult.data.AccessToken))
-				return Promise.reject(new Error('Invalid credentials'))
-
-			if (isUndefined(authResult.data.User))
-				return Promise.reject(new Error('Unable to login'))
-
+		onSuccess: (authResult: AuthenticationResult) => {
 			const user: JellifyUser = {
-				id: authResult.data.User!.Id!,
-				name: authResult.data.User!.Name!,
-				accessToken: authResult.data.AccessToken as string,
+				id: authResult.User!.Id!,
+				name: authResult.User!.Name!,
+				accessToken: authResult.AccessToken as string,
 			}
 
 			setUser(user)
 
 			if (onSuccess) onSuccess()
 		},
-		onError: async (error: Error) => {
+		onError: (error: Error) => {
 			console.error('An error occurred connecting to the Jellyfin instance', error)
 
 			if (onError) onError(error)

src/api/mutations/authentication/utils/index.ts

@@ -0,0 +1,33 @@
+import { Api } from '@jellyfin/sdk'
+import { AuthenticationResult } from '@jellyfin/sdk/lib/generated-client'
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api'
+import { isUndefined } from 'lodash'
+
+export default function authenticateUserByName(
+	api: Api | undefined,
+	username: string,
+	password: string | undefined,
+): Promise<AuthenticationResult> {
+	return new Promise((resolve, reject) => {
+		getUserApi(api!)
+			.authenticateUserByName({
+				authenticateUserByName: {
+					Username: username,
+					Pw: password,
+				},
+			})
+			.then(({ data, status }) => {
+				if (status === 401 || isUndefined(data.AccessToken))
+					return reject(new Error('Invalid credentials'))
+
+				if (isUndefined(data.User)) return reject(new Error('Invalid credentials'))
+
+				return resolve(data)
+			})
+			.catch((error: Error) => {
+				if (error.message.includes('401')) return reject(new Error('Invalid credentials'))
+
+				return reject(error)
+			})
+	})
+}

src/screens/Login/server-authentication.tsx

@@ -27,9 +27,10 @@ export default function ServerAuthentication({
 		onSuccess: () => {
 			navigation.navigate('LibrarySelection')
 		},
-		onError: () => {
+		onError: (error: Error) => {
 			Toast.show({
 				text1: `Unable to sign in to ${server!.name}`,
+				text2: error.message,
 				type: 'error',
 			})
 		},
@@ -63,6 +64,7 @@ export default function ServerAuthentication({
 					importantForAutofill='yes'
 					returnKeyType='next'
 					autoFocus
+					clearButtonMode='while-editing'
 				/>
 
 				<Spacer />
@@ -88,6 +90,7 @@ export default function ServerAuthentication({
 							authenticateUserByName({ username, password })
 						}
 					}}
+					clearButtonMode='while-editing'
 				/>
 
 				<Spacer />