Skip to content

Commit

Permalink
feat(mobile): add error notification to login
Browse files Browse the repository at this point in the history
  • Loading branch information
YavizGuldalf committed Nov 25, 2024
1 parent 23c2a2f commit 78b8e21
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
5 changes: 3 additions & 2 deletions mobile/bulingo/app/components/topNotification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ type NotificationProps = {
message: string;
duration?: number; // Duration in milliseconds (default: 3000ms)
onHide?: () => void; // Callback when notification hides
color?: string,
};

const Notification: React.FC<NotificationProps> = ({ message, duration = 3000, onHide }) => {
const Notification: React.FC<NotificationProps> = ({ message, duration = 3000, onHide, color }) => {
const [fadeAnim] = useState(new Animated.Value(0)); // Animation value

useEffect(() => {
Expand All @@ -33,7 +34,7 @@ const Notification: React.FC<NotificationProps> = ({ message, duration = 3000, o
}, [fadeAnim, duration, onHide]);

return (
<Animated.View style={[styles.notification, { opacity: fadeAnim }]}>
<Animated.View style={[styles.notification, { opacity: fadeAnim }, color && {backgroundColor: color}]}>
<Text style={styles.notificationText}>{message}</Text>
</Animated.View>
);
Expand Down
13 changes: 13 additions & 0 deletions mobile/bulingo/app/login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, {useState, createContext, useContext} from 'react';
import {Pressable, StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, ActivityIndicator} from 'react-native';
import {router} from 'expo-router'
import TokenManager from './TokenManager'; // Import the TokenManager
import Notification from './components/topNotification';



const LOGIN_URL = "http://54.93.52.38:8000/login/";
Expand All @@ -11,6 +13,8 @@ export default function Home() {
const [password, setPassword] = useState(''); // State for password
const [isLoading, setIsLoading] = useState(false);
const [isErrorVisible, setIsErrorVisible] = useState(false);
const [notification, setNotification] = useState<string | null>(null);


const handleRegister = () => {
router.navigate('/register')
Expand Down Expand Up @@ -38,6 +42,7 @@ export default function Home() {
TokenManager.setUsername(username);
router.replace('/?notification=login_success');
} else {
setNotification("Incorrect Login information.")
setIsErrorVisible(true);
};
} catch (error) {
Expand All @@ -57,6 +62,14 @@ export default function Home() {
</TouchableWithoutFeedback>
)}

{notification && (
<Notification
message={notification}
onHide={() => setNotification(null)} // Clear notification after hiding
color='red'
/>
)}

<View style={styles.page}>


Expand Down

0 comments on commit 78b8e21

Please sign in to comment.