added some changes, mkey

app/(tabs)/index.tsx

@@ -13,8 +13,10 @@ export default function HomeScreen() {
     const {theme} = useTheme();
 
     useEffect(() => {
-        setIdle(authenticatedUser!.lastState?.global.mode === "idle")
-    }, [])
+        if (authenticatedUser) {
+            setIdle(authenticatedUser.lastState?.global.mode === "idle")
+        }
+    }, [authenticatedUser]);
 
     return (
         <ThemedBackground>

app/(tabs)/modes/text.tsx

@@ -9,8 +9,9 @@ import {View} from "react-native";
 
 export default function TextScreen() {
     const {authenticatedUser} = useAuth();
-    const [textProps, setTextProps] = useState(authenticatedUser!.lastState?.text);
-
+    const [textProps, setTextProps] = useState(
+        authenticatedUser?.lastState?.text! || { text: '', color: [255, 255, 255] }
+    );
     return (
         <ThemedBackground>
             <View style={{ padding: 20, gap: 10 }}>
@@ -20,7 +21,7 @@ export default function TextScreen() {
                     value={textProps?.text}
                     onChangeText={(value: string) => {
                         setTextProps(prev => ({
-                            ...prev!,
+                            ...prev,
                             text: value
                         }));
                     }}
@@ -29,7 +30,7 @@ export default function TextScreen() {
 
                 <CustomColorPicker
                     onSelect={rgb => setTextProps(prev => ({ ...prev!, color: rgb }))}
-                    defaultColor={textProps?.color}
+                    defaultColor={textProps.color}
                 />
             </View>
 

app/(tabs)/settings.tsx

@@ -14,6 +14,7 @@ import {useRouter} from "expo-router";
 export default function SettingsScreen() {
     const {token: jwtToken, authenticatedUser, logout, refreshUser} = useAuth();
     const router = useRouter();
+    console.log("Mashallah", jwtToken);
 
     const handleAuthSuccess = (token: Token) => {
         const spotifyConfig = {
@@ -39,7 +40,7 @@ export default function SettingsScreen() {
                 <ThemeToggleButton/>
                     <SpotifyAuthButton
                         onAuthSuccess={handleAuthSuccess}
-                    jwtToken={jwtToken!}
+                        jwtToken={jwtToken}
                         disabled={!!authenticatedUser?.spotifyConfig}
                     />
                 {!!authenticatedUser?.spotifyConfig && ( <ThemedButton mode={"outlined"} title={"Remove Spotify"} onPress={() => {

app/login.tsx

@@ -13,7 +13,6 @@ import {useRouter} from "expo-router";
 import ThemeToggleButton from "@/src/components/ThemeToggleButton";
 import PasswordInput from "@/src/components/PasswordInput";
 
-
 export default function LoginScreen() {
     const {isAuthenticated, login, logout, error} = useAuth();
     const router = useRouter();
@@ -55,8 +54,8 @@ export default function LoginScreen() {
                 returnKeyType="next"
                 value={username}
                 onChangeText={setUsername}
-                error={!!error && error?.toLowerCase().includes("user") }
-                errorText={error!}
+                error={!!error && error?.field === "username" }
+                errorText={error?.message}
                 autoCapitalize="none"
             />
 
@@ -65,8 +64,8 @@ export default function LoginScreen() {
                 returnKeyType="done"
                 value={password}
                 onChangeText={setPassword}
-                error={!!error && error?.toLowerCase().includes("pass") }
-                errorText={error!}
+                error={!!error && error?.field === "password" }
+                errorText={error?.message}
                 autoComplete="password"
             />
             <ThemedButton mode="outlined" onPress={onLoginPressed} title={"Login"} />

src/components/ImagePicker.tsx

@@ -15,25 +15,29 @@ export default function CustomImagePicker({onSuccess, onFailure, onCanceled}: Pr
     const [image, setImage] = useState<string | null>(null);
 
     const pickImage = async () => {
-        // No permissions request is necessary for launching the image library
-        let result = ImagePicker.launchImageLibraryAsync({
+        try {
+            const result = await ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ['images', 'videos'],
                 allowsEditing: true,
                 aspect: [4, 3],
                 quality: 1,
                 base64: true,
-        }).then((result) => {
+            });
+
             if (result.canceled) {
                 onCanceled();
             } else {
                 setImage(result.assets[0].uri);
                 onSuccess(result);
             }
-        }).catch((error) => {
+        } catch (error) {
+            if (error instanceof Error) {
                 onFailure(error);
-        });
-        console.log(result);
+            } else {
+                onFailure(new Error('An unknown error occurred during image picking.'));
             }
+        }
+    };
 
     return (
         <View style={styles.container}>

src/components/SpotifyAuthButton.tsx

@@ -5,7 +5,7 @@ import ThemedButton from "@/src/components/themed/ThemedButton";
 
 interface SpotifyAuthButtonProps {
     onAuthSuccess: (token: Token) => void;
-    jwtToken: string;
+    jwtToken: string | null;
     disabled: boolean;
 }
 

src/context/AuthProvider.tsx

@@ -11,7 +11,7 @@ type AuthContextType = {
     login: (username: string, password: string) => Promise<void>;
     logout: () => Promise<void>;
     authenticatedUser: User | null;
-    error: string | null;
+    error: { field: string, message: string } | null;
     loading: boolean;
     refreshUser: () => Promise<void>;
 };
@@ -22,7 +22,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({children}
     const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
     const [authenticatedUser, setAuthenticatedUser] = useState<User | null>(null);
     const [token, setToken] = useState<string | null>(null);
-    const [error, setError] = useState<string | null>(null);
+    const [error, setError] = useState<{ field: string, message: string } | null>(null);
     const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
@@ -53,7 +53,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({children}
             setToken(null);
             setIsAuthenticated(false);
             setAuthenticatedUser(null);
-            setError("Token invalid");
+            setError({field: "general", message:"Token is invalid."});
             return null;
         }
         const user = response.data;
@@ -71,8 +71,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({children}
 
         const response = await new RestService(null).login(username, password);
         if (!response.ok) {
-            console.error("Login failed:", response.data.message);
-            setError(response.data.message!);
+            console.error("Login failed:", response.data);
+            const message = response.data.message!;
+            setError({field: response.data.details?.field!, message});
             setIsAuthenticated(false);
             setLoading(false);
             return;

src/hooks/useSpotifyAuth.ts

@@ -15,7 +15,7 @@ interface UseSpotifyAuthResult {
 
 export const useSpotifyAuth = (
     onAuthSuccess: (token: Token) => void,
-    jwtToken: string,
+    jwtToken: string | null,
 ): UseSpotifyAuthResult => {
     const [request, response, promptAsync] = useAuthRequest(
         {

src/services/RestService.ts

@@ -82,7 +82,9 @@ class RestService {
         return this.request<ApiResponse<User>>('GET', '/user/me');
     }
 
-    async changeSelfPassword(password: string, passwordConfirmation: string): Promise<ApiResponse<{ message: string }>> {
+    async changeSelfPassword(password: string, passwordConfirmation: string): Promise<ApiResponse<{
+        message: string
+    }>> {
         return this.request<ApiResponse<{ message: string }>>(
             'PUT',
             '/user/me/password',
@@ -123,8 +125,18 @@ class RestService {
         return this.request<ApiResponse<User>>('DELETE', '/user/me/spotify');
     }
 
-    async login(username: string, password: string): Promise<ApiResponse<{ message?: string, token?: string }>> {
-        return this.request<ApiResponse<{message?: string, token?: string}>>(
+    async login(username: string, password: string): Promise<ApiResponse<{
+        message?: string, token?: string, details?: {
+            field: string;
+            code: string;
+        }
+    }>> {
+        return this.request<ApiResponse<{
+            message?: string, token?: string, details?: {
+                field: string;
+                code: string;
+            }
+        }>>(
             "POST",
             '/auth/login',
             {username, password},