feat: Implemented log in, sign up and sign out

src/screens/Buckets.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {StyleSheet, View, Text, ScrollView} from 'react-native';
+
+const Buckets = () => {
+	return (
+		<Text>Signed in!!!</Text>
+	)
+}
+
+export default Buckets;

src/screens/Settings.js

@@ -0,0 +1,47 @@
+import React, {useCallback} from 'react';
+import {StyleSheet, View, Text, Button, TextInput} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import useLogout from '../hooks/useLogout';
+import {useNavigation} from '@react-navigation/native';
+
+const Settings = () => {
+	const logOut = useLogout();
+	const navigation = useNavigation();
+
+	const onLogout = useCallback(() => {
+		logOut().then(() => {
+			navigation.reset({index: 0, routes: [{name: 'SignIn'}]});
+		});
+	}, [logOut]);
+
+	return (
+		<KeyboardAwareScrollView style={styles.root}>
+			<View style={styles.button}>
+				<Button onPress={onLogout} title="Sign out" />
+			</View>
+		</KeyboardAwareScrollView>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		backgroundColor: '#FEFEFE',
+		padding: 10,
+	},
+	input: {
+		height: 40,
+		margin: 12,
+		borderWidth: 1,
+		padding: 10,
+		borderRadius: 3,
+		backgroundColor: '#DDDDDD',
+		color: '#000000',
+	},
+	button: {
+		margin: 12,
+		marginBottom: 32,
+	},
+});
+
+export default Settings;

src/screens/SignIn.js

@@ -1,19 +1,116 @@
-import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import React, {useState, useCallback} from 'react';
+import {
+	View,
+	Text,
+	TextInput,
+	Button,
+	Pressable,
+	ToastAndroid,
+	StyleSheet,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {useNavigation} from '@react-navigation/native';
+import useLogin from '../hooks/useLogin';
 
 const SignIn = () => {
+	const navigation = useNavigation();
+	const [email, setEmail] = useState('');
+	const [pass, setPass] = useState('');
+	const logIn = useLogin();
+
+	const onSubmit = useCallback(() => {
+		if (!email || !pass) {
+			ToastAndroid.show(
+				'Error! You need to provide both an email and a password',
+				ToastAndroid.SHORT,
+			);
+			return;
+		}
+
+		logIn(email, pass)
+			.then(() => {
+				console.log('asdasd');
+				navigation.reset({index: 0, routes: [{name: 'Buckets'}]});
+			})
+			.catch(() => {});
+	}, [email, pass, logIn, navigation]);
+
+	const onSignup = useCallback(() => {
+		navigation.navigate('SignUp');
+	}, []);
+
 	return (
-		<View style={styles.root}>
-			<Text>Hello!</Text>
-		</View>
-	)
-}
+		<KeyboardAwareScrollView style={styles.root}>
+			<Text style={styles.title}>BrowseS3</Text>
+			<Text style={styles.subtitle}>Made by: Fándly Gergő-Zoltán</Text>
+			<Text style={styles.welcome}>Welcome! Please sign in to continue!</Text>
+			<TextInput
+				style={styles.input}
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				autoComplete="email"
+			/>
+			<TextInput
+				style={styles.input}
+				placeholder="Password"
+				value={pass}
+				onChangeText={setPass}
+				autoComplete="password"
+				secureTextEntry
+			/>
+			<View style={styles.button}>
+				<Button onPress={onSubmit} title="Sign in" />
+			</View>
+			<Pressable onPress={onSignup}>
+				<Text style={styles.signUp}>No account? Sign up here!</Text>
+			</Pressable>
+		</KeyboardAwareScrollView>
+	);
+};
 
 const styles = StyleSheet.create({
 	root: {
 		flex: 1,
-		backgroundColor: '#FEFEFE'
-	}
-})
+		backgroundColor: '#FEFEFE',
+		padding: 10,
+	},
+	title: {
+		fontSize: 32,
+		textAlign: 'center',
+		marginTop: 32,
+		color: '#000000',
+	},
+	subtitle: {
+		color: '#000000',
+		marginBottom: 132,
+		textAlign: 'right',
+	},
+	welcome: {
+		fontSize: 20,
+		color: '#000000',
+		marginBottom: 32,
+		textAlign: 'center',
+	},
+	input: {
+		height: 40,
+		margin: 12,
+		borderWidth: 1,
+		padding: 10,
+		borderRadius: 3,
+		backgroundColor: '#DDDDDD',
+		color: '#000000',
+	},
+	button: {
+		margin: 12,
+		marginBottom: 32,
+	},
+	signUp: {
+		color: '#CCCCCC',
+		fontSize: 12,
+		textAlign: 'center',
+		textDecorationLine: 'underline',
+	},
+});
 
-export default SignIn;
+export default SignIn;

src/screens/SignUp.js

@@ -0,0 +1,82 @@
+import React, {useState, useCallback} from 'react';
+import {StyleSheet, View, Text, TextInput, Button} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import useSignup from '../hooks/useSignup';
+import {useNavigation} from '@react-navigation/native';
+
+const SignUp = () => {
+	const [email, setEmail] = useState('');
+	const [pass, setPass] = useState('');
+	const signUp = useSignup();
+	const navigation = useNavigation();
+
+	const onSubmit = useCallback(() => {
+		if (!email || !pass) {
+			ToastAndroid.show(
+				'Error! You need to provide both an email and a password',
+				ToastAndroid.SHORT,
+			);
+			return;
+		}
+
+		signUp(email, pass)
+			.then(() => {
+				console.log('asdasd');
+				navigation.reset({index: 0, routes: [{name: 'Buckets'}]});
+			})
+			.catch(() => {});
+	}, [email, pass, signUp, navigation]);
+
+	return (
+		<KeyboardAwareScrollView style={styles.root}>
+			<Text style={styles.help}>Let's create a new user for you!</Text>
+			<TextInput
+				style={styles.input}
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				autoComplete="email"
+			/>
+			<TextInput
+				style={styles.input}
+				placeholder="Password"
+				value={pass}
+				onChangeText={setPass}
+				autoComplete="password-new"
+				secureTextEntry
+			/>
+			<View style={styles.button}>
+				<Button onPress={onSubmit} title="Sign up" />
+			</View>
+		</KeyboardAwareScrollView>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		backgroundColor: '#FEFEFE',
+		padding: 10,
+	},
+	help: {
+		color: '#000000',
+		fontSize: 18,
+		textAlign: 'center',
+		marginBottom: 32,
+	},
+	input: {
+		height: 40,
+		margin: 12,
+		borderWidth: 1,
+		padding: 10,
+		borderRadius: 3,
+		backgroundColor: '#DDDDDD',
+		color: '#000000',
+	},
+	button: {
+		margin: 12,
+		marginBottom: 32,
+	},
+});
+
+export default SignUp;