Commit f3f75917 authored by Mithunan Sivakumar's avatar Mithunan Sivakumar
Browse files

#3 Added signup panel

parent 032e7151
import React from "react";
import { Controller } from "react-hook-form";
import {View, Text, TextInput, StyleSheet} from "react-native";
interface CustomInputProps {
value: string,
error: boolean,
name: string,
setValue: (value: string) => void;
placeholder: string;
secureTextEntry?: boolean;
}
export default function CustomInput({error, name, value, setValue, placeholder, secureTextEntry}: CustomInputProps) {
return (
<View style={styles.container}>
<Controller
name={name}
control={control}
rules={{required: true, validate: (value) => true}}
render={({field: {onChange, onBlur, value }}) => (
<TextInput
secureTextEntry={secureTextEntry}
onChangeText={onChange}
onBlur={onBlur}
value={value}
placeholder={placeholder}
style={styles.input}/>
)}/>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
width: "100%",
minHeight: "30px",
borderColor: "#e8e8e8",
borderWidth: 1,
borderRadius: 5,
marginVertical: 5,
},
input: {
paddingHorizontal: 10,
alignItems: "center",
minHeight: "30px",
}
});
\ No newline at end of file
import React from "react";
import React, { useEffect, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import { signIn, signUp } from "../store/ducks/auth/actions";
import { ApplicationState } from "../store/interface";
import Logo from "../assets/images/cinema.png";
import { View, Text, Image, StyleSheet, useWindowDimensions, Button, Pressable } from "react-native";
import CustomInput from "./CustomInput";
type Inputs = {
example: string,
exampleRequired: string,
};
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
const {height} = useWindowDimensions();
const { control, register, handleSubmit, watch, formState: { errors } } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = (data: any) => console.log(data);
interface FormValues {
email: string;
password: string;
username?: string;
}
const [isLogin, setIsLogin] = useState(true);
const [userAdmin, setUserAdmin] = useState<FormValues>({
email: "",
password:"",
});
const dispatch = useDispatch();
const { loading, error, loggedIn } = useSelector(({ auth }: ApplicationState) => auth);
// Redirect to homepage if user is already logged in
useEffect(() => {
if (loggedIn) {
console.log("push");
}
}, [loggedIn, location]);
// Form completed
const onFinish = (values: FormValues) => {
if (isLogin) {
const { email, password } = userAdmin;
dispatch(signIn({ email, password }));
} else {
const { email, username, password } = userAdmin;
dispatch(signUp({ email, username: username as string, password }));
}
};
// If the redux state contains an error, display an error alert
useEffect(() => {
if (error) {
console.log("Show error");
}
}, [error]);
function updateState(data: Partial<FormValues>){
setUserAdmin((prevState: any) => ({
...prevState,
...data,
}))
}
const styles = StyleSheet.create({
root: {
alignItems: "center",
padding: 20,
},
logo: {
width: "70%",
maxWidth: 300,
maxHeight: 200,
},
container: {
width: "100%",
padding: 15,
marginVertical: 5,
alignItems: "center",
borderRadius: 5,
},
subText: {
color: '#2e78b7',
}
})
console.log(watch("example")) // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<View>
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
<Image source={Logo} style={[styles.logo, {height: height* 0.3}]} resizeMode="contain"/>
{isLogin ? null : <CustomInput placeholder="username" value={userAdmin.username || ""} setValue={(value) => updateState({username: value })} /> }
<CustomInput placeholder="email" value={userAdmin.email|| ""} setValue={(value) => updateState({email: value })} />
<CustomInput secureTextEntry={true} placeholder="password" value={userAdmin.password || ""} setValue={(value) => updateState({password: value })} />
<Button onPress={() => onFinish(userAdmin)} title={isLogin ? "Login" : "Register"}/>
<Pressable onPress={() => setIsLogin(!isLogin)} style={styles.container}>
<Text style={styles.subText}>
{!isLogin ? "Already have a user? Login." : "Need a new user? Register."}
</Text>
</Pressable>
</View>
);
}
\ No newline at end of file
......@@ -11,11 +11,10 @@ import { ApplicationState } from '../store/interface';
export default function Profile() {
const auth: AuthState = useSelector(({ auth }: ApplicationState) => auth);
if (!auth.user) {
if (auth.user) {
return (
<View style={styles.container}>
<Text style={styles.title}>Log in or sign up</Text>
<Login></Login>
<Login/>
</View>
);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment