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

137 lines
3.4 KiB
TypeScript

import { Controller, useForm } from "react-hook-form"
import { StyleSheet } from "react-native"
import { Button, HelperText, TextInput } from "react-native-paper"
import { SafeAreaView } from "react-native-safe-area-context"
import { useMemo } from "react"
import type { UserRegisterData } from "@/domain/entities/User"
import { useAuthentication } from "@/presentation/react/contexts/Authentication"
const RegisterPage: React.FC = () => {
const { register, authenticationPresenter } = useAuthentication()
const { control, handleSubmit } = useForm<UserRegisterData>({
defaultValues: {
displayName: "",
email: "",
password: "",
},
})
const onSubmit = async (data: unknown): Promise<void> => {
await authenticationPresenter.register(data)
}
const helperMessage = useMemo(() => {
if (register.state === "error") {
if (register.errors.fields.includes("displayName")) {
return "Display Name is required."
}
if (register.errors.fields.includes("email")) {
return "Invalid email."
}
if (register.errors.fields.includes("password")) {
return "Password must be at least 6 characters."
}
return "Invalid credentials."
}
// if (register.state === "success") {
// return "Success! Please verify your email."
// }
return ""
}, [register.errors.fields, register.state])
return (
<SafeAreaView style={[styles.container]}>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextInput
placeholder="Display Name"
onBlur={onBlur}
onChangeText={onChange}
value={value}
style={[styles.input]}
mode="outlined"
/>
)
}}
name="displayName"
/>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextInput
placeholder="Email"
onBlur={onBlur}
onChangeText={onChange}
value={value}
style={[styles.input]}
mode="outlined"
/>
)
}}
name="email"
/>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextInput
placeholder="Password"
onBlur={onBlur}
onChangeText={onChange}
value={value}
style={[styles.input]}
mode="outlined"
secureTextEntry
/>
)
}}
name="password"
/>
<HelperText
type={register.state === "error" ? "error" : "info"}
visible={register.state === "error" || register.state === "success"}
style={[styles.helperText]}
>
{helperMessage}
</HelperText>
<Button
mode="contained"
onPress={handleSubmit(onSubmit)}
loading={register.state === "loading"}
disabled={register.state === "loading"}
>
Register
</Button>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
input: {
width: "80%",
marginBottom: 10,
},
helperText: {
fontSize: 18,
marginVertical: 20,
},
})
export default RegisterPage