1
1
mirror of https://github.com/theoludwig/p61-project.git synced 2024-07-17 07:00:12 +02:00
p61-project/app/authentication/login.tsx

98 lines
2.3 KiB
TypeScript
Raw Permalink Normal View History

import { Controller, useForm } from "react-hook-form"
import { StyleSheet } from "react-native"
import { Button, HelperText, TextInput } from "react-native-paper"
2024-03-15 12:34:53 +01:00
import { SafeAreaView } from "react-native-safe-area-context"
import type { UserLoginData } from "@/domain/entities/User"
import { useAuthentication } from "@/presentation/react/contexts/Authentication"
2024-03-15 12:34:53 +01:00
const LoginPage: React.FC = () => {
const { login, authenticationPresenter } = useAuthentication()
2024-03-15 12:34:53 +01:00
const { control, handleSubmit } = useForm<UserLoginData>({
defaultValues: {
email: "",
password: "",
},
})
2024-03-15 12:34:53 +01:00
const onSubmit = async (data: unknown): Promise<void> => {
await authenticationPresenter.login(data)
}
2024-03-15 12:34:53 +01:00
return (
2024-03-24 23:41:23 +01:00
<SafeAreaView style={[styles.container]}>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextInput
placeholder="Email"
onBlur={onBlur}
onChangeText={onChange}
value={value}
2024-03-24 23:41:23 +01:00
style={[styles.input]}
mode="outlined"
/>
)
}}
name="email"
/>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => {
2024-03-15 12:34:53 +01:00
return (
<TextInput
placeholder="Password"
onBlur={onBlur}
onChangeText={onChange}
value={value}
2024-03-24 23:41:23 +01:00
style={[styles.input]}
mode="outlined"
secureTextEntry
2024-03-15 12:34:53 +01:00
/>
)
}}
name="password"
/>
<HelperText
type="error"
visible={login.state === "error"}
2024-03-24 23:41:23 +01:00
style={[styles.helperText]}
2024-03-15 12:34:53 +01:00
>
Invalid credentials.
2024-03-15 12:34:53 +01:00
</HelperText>
<Button
mode="contained"
2024-05-20 15:05:34 +02:00
labelStyle={{ fontSize: 18 }}
onPress={handleSubmit(onSubmit)}
loading={login.state === "loading"}
disabled={login.state === "loading"}
>
Login
</Button>
2024-03-15 12:34:53 +01:00
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
input: {
width: "80%",
marginBottom: 10,
},
helperText: {
fontSize: 18,
marginVertical: 20,
2024-03-15 12:34:53 +01:00
},
})
export default LoginPage