StarAppeal
85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import React, {useEffect, useState} from "react";
|
|
|
|
import ThemedBackground from "../../src/components/themed/ThemedBackground";
|
|
import Logo from "../../src/components/Logo";
|
|
import ThemedHeader from "../../src/components/themed/ThemedHeader";
|
|
import ThemedButton from "../../src/components/themed/ThemedButton";
|
|
import ThemedTextInput from "../../src/components/themed/ThemedTextInput";
|
|
import BackButton from "../../src/components/BackButton";
|
|
|
|
import {useNavigation} from "@react-navigation/core";
|
|
import {useAuth} from "@/src/context/AuthProvider";
|
|
import {useTheme} from "@/src/context/ThemeProvider";
|
|
|
|
|
|
export default function LoginScreen() {
|
|
const {isAuthenticated, login, logout, error} = useAuth();
|
|
const navigation = useNavigation<any>();
|
|
const [username, setUsername] = useState({value: ""});
|
|
const [password, setPassword] = useState({value: ""});
|
|
const {toggleTheme} = useTheme();
|
|
|
|
|
|
useEffect(() => {
|
|
console.log(isAuthenticated);
|
|
|
|
if (isAuthenticated) {
|
|
console.log("User ist eingeloggt, weiterleiten...");
|
|
navigation.reset({
|
|
index: 0,
|
|
routes: [{name: "HomeScreen"}],
|
|
});
|
|
}
|
|
}, [isAuthenticated]);
|
|
|
|
const onLoginPressed = async () => {
|
|
console.log("Login wird ausgeführt...")
|
|
await login(username.value, password.value);
|
|
};
|
|
|
|
if (isAuthenticated) {
|
|
return (
|
|
<ThemedBackground>
|
|
<Logo/>
|
|
<ThemedHeader>Du bist bereits eingeloggt. Was machst'n hier?</ThemedHeader>
|
|
<ThemedButton mode="contained" onPress={logout}>
|
|
Logout
|
|
</ThemedButton>
|
|
<ThemedButton mode="outlined" onPress={() => navigation.navigate("HomeScreen")}>
|
|
Zurück
|
|
</ThemedButton>
|
|
</ThemedBackground>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ThemedBackground>
|
|
<BackButton goBack={navigation.goBack}/>
|
|
<Logo/>
|
|
<ThemedHeader>Hello.</ThemedHeader>
|
|
<ThemedTextInput
|
|
label="Username"
|
|
returnKeyType="next"
|
|
value={username.value}
|
|
onChangeText={(text: string) => setUsername({value: text})}
|
|
errorText={error?.id === "username" ? error?.message : ""}
|
|
autoCapitalize="none"
|
|
/>
|
|
<ThemedTextInput
|
|
label="Password"
|
|
returnKeyType="done"
|
|
value={password.value}
|
|
onChangeText={(text: string) => setPassword({value: text})}
|
|
errorText={error?.id === "password" ? error?.message : ""}
|
|
secureTextEntry
|
|
/>
|
|
<ThemedButton mode="outlined" onPress={onLoginPressed}>
|
|
Log in
|
|
</ThemedButton>
|
|
<ThemedButton mode={"outlined"} onPress={toggleTheme}>
|
|
Toggle Theme
|
|
</ThemedButton>
|
|
</ThemedBackground>
|
|
);
|
|
}
|