diff --git a/mobile/App.js b/mobile/App.js
index 7524f0c67f5470474344c00287d54cd1d860f146..61c7945154820a741f083535b3e4b554bce9059e 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -1,41 +1,61 @@
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import LoginScreen from './Screens/loginScreen'
-import HomeScreen from './Screens/homeScreen'
-import RegistrationScreen from './Screens/registrationScreen'
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import LoginScreen from "./Screens/loginScreen";
+import HomeScreen from "./Screens/homeScreen";
+import RegistrationScreen from "./Screens/registrationScreen";
+
+/*const ImageHeader = (props) => (
+ <View style={{ backgroundColor: "#eee" }}>
+ <Image
+ style={StyleSheet.absoluteFill}
+ source={require("./mobile/images/lightlogo_preview_rev_1.png")}
+ />
+ <Header {...props} style={{ backgroundColor: "transparent" }} />
+ </View>
+);*/
const Stack = createNativeStackNavigator();
class App extends React.Component {
-
//In the render here we define the application Screen routes
- //with navigation, then in the classes we'll use the navigate
+ //with navigation, then in the classes we'll use the navigate
//method to move from one page to another
render() {
- let x = 1;
console.log("App executed");
return (
<NavigationContainer>
- <Stack.Navigator>
- <Stack.Screen
- name="Login"
- component={LoginScreen}
- />
- <Stack.Screen
- name="Home"
- component={HomeScreen}
+ <Stack.Navigator
+ screenOptions={{
+ headerStyle: {
+ backgroundColor: "#90EAFC",
+ },
+ headerTintColor: "#black",
+ headerTitleStyle: {
+ fontWeight: "bold",
+ },
+ }}
+ >
+ <Stack.Screen
+ name="Login"
+ component={LoginScreen}
+ options={{
+ headerTitle: "Log in",
+ //header: (props) => <ImageHeader {...props} />,
+ }}
/>
- <Stack.Screen
+ <Stack.Screen name="Home" component={HomeScreen} />
+ <Stack.Screen
name="Registration"
component={RegistrationScreen}
+ options={{
+ title: "Sign up",
+ }}
/>
- </Stack.Navigator>
- </NavigationContainer>
+ </Stack.Navigator>
+ </NavigationContainer>
);
}
}
-
-
export default App;
diff --git a/mobile/Screens/homeScreen.js b/mobile/Screens/homeScreen.js
index 7fe59a1ec2d7cf1970030a6e3e1dd21857277268..79e48ca1809d8a050310210c3c5cf98bd11f0ce5 100644
--- a/mobile/Screens/homeScreen.js
+++ b/mobile/Screens/homeScreen.js
@@ -1,26 +1,25 @@
-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
-import {io} from "socket.io-client"; //socket.io-client
+import React, { Component } from "react";
+import { StyleSheet, Text, View, Button, TextInput } from "react-native";
+import { io } from "socket.io-client";
class HomeScreen extends Component {
-
constructor(props) {
super(props);
this.state = {
- msg : ""
+ msg: "",
};
}
componentDidMount() {
this.socket = io("http://192.168.178.92:3000", {
- transports: ['websocket'] //this line is fundamental
+ transports: ["websocket"], //this line is fundamental
});
- this.socket.on('msg', msg =>{
+ this.socket.on("msg", (msg) => {
alert(msg);
- })
+ });
}
- sendMessage(){
+ sendMessage() {
this.socket.emit("msg", this.state.msg);
this.setState({ msg: "" });
}
@@ -29,15 +28,15 @@ class HomeScreen extends Component {
return (
<View style={styles.container}>
<TextInput
- style={styles.input}
- placeholder="Send a message"
- autoCorrect={false}
- value={this.state.msg}
- onSubmitEditing={() => this.sendMessage()}
- onChangeText={msg => {
+ style={styles.input}
+ placeholder="Send a message"
+ autoCorrect={false}
+ value={this.state.msg}
+ onSubmitEditing={() => this.sendMessage()}
+ onChangeText={(msg) => {
this.setState({ msg });
}}
- />
+ />
</View>
);
}
@@ -45,21 +44,21 @@ class HomeScreen extends Component {
// ...
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- input: {
- position: 'absolute',
- left: 0,
- right: 0,
- bottom: 0,
- alignSelf: "stretch",
- height:40,
- borderWidth:1
- }
- });
+ container: {
+ flex: 1,
+ backgroundColor: "#fff",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ input: {
+ position: "absolute",
+ left: 0,
+ right: 0,
+ bottom: 0,
+ alignSelf: "stretch",
+ height: 40,
+ borderWidth: 1,
+ },
+});
-export default HomeScreen;
\ No newline at end of file
+export default HomeScreen;
diff --git a/mobile/Screens/loginScreen.js b/mobile/Screens/loginScreen.js
index 4095ae591f78940da596bb571a26c3cd253e73ca..a4610776c72979dd329e84cc0caa9a0a13e52d67 100644
--- a/mobile/Screens/loginScreen.js
+++ b/mobile/Screens/loginScreen.js
@@ -1,108 +1,151 @@
-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import React, { Component } from "react";
+import {
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+ Button,
+ TextInput,
+} from "react-native";
class LoginScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- username: "",
- password: ""
- };
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ username: "",
+ password: "",
+ };
+ }
- submitLogin() {
-
- //here we're going to post the username and password inserted in the
- //login page, in particulare this is a post request to the /signin route
- //in the server that will response with status:200 if the credentials are in the
- //database and with status:422 if not
- fetch('http://192.168.178.92:3000/signin', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- username : this.state.username,
- password : this.state.password
- }),
- }) //here we handle the status response of the server
- .then(res =>{
- if (res.status !== 200){
- alert('Invalid username or password');
+ submitLogin() {
+ //here we're going to post the username and password inserted in the
+ //login page, in particulare this is a post request to the /signin route
+ //in the server that will response with status:200 if the credentials are in the
+ //database and with status:422 if not
+ fetch("http://192.168.178.92:3000/signin", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ username: this.state.username,
+ password: this.state.password,
+ }),
+ }) //here we handle the status response of the server
+ .then((res) => {
+ if (res.status !== 200) {
+ alert("Invalid username or password");
+ } else {
+ alert("Succesful login");
+ this.props.navigation.navigate("Home");
}
- else{
- alert('Succesful login')
- this.props.navigation.navigate('Home')
- }
- })
- //here we set again username and password as blank
- //probably in the future we'll need to send the credentials to the home page
- //to create the user for the socket.io chat
- this.setState({ username: "" });
- this.setState({ password: "" });
- }
-
- render() {
-
- return (
- <View style={styles.container}>
- <Text>LOGIN</Text>
+ });
+ //here we set again username and password as blank
+ //probably in the future we'll need to send the credentials to the home page
+ //to create the user for the socket.io chat
+ this.setState({ username: "" });
+ this.setState({ password: "" });
+ }
- <TextInput
- style={styles.TextInput}
- placeholder = "Username"
- autoCorrect = {false}
- value = {this.state.username}
- onChangeText = {username => {
- this.setState({ username });
- }}
- />
-
+ render() {
+ return (
+ <View style={styles.container}>
+ <Text>Username</Text>
+ <View style={styles.inputView}>
+ <TextInput
+ style={styles.inputText}
+ placeholder="Username"
+ autoCorrect={false}
+ value={this.state.username}
+ onChangeText={(username) => {
+ this.setState({ username });
+ }}
+ />
+ </View>
- <TextInput
- style={styles.TextInput}
+ <Text>Password</Text>
+ <View style={styles.inputView}>
+ <TextInput
+ style={styles.inputText}
placeholder="Password"
autoCorrect={false}
secureTextEntry={true}
- value = {this.state.password}
- onChangeText = {password => {
- this.setState({ password });
- }}
- />
+ value={this.state.password}
+ onChangeText={(password) => {
+ this.setState({ password });
+ }}
+ />
+ </View>
+
+ <TouchableOpacity
+ style={styles.loginBtn}
+ onPress={() => this.submitLogin()}
+ >
+ <Text>Log in</Text>
+ </TouchableOpacity>
- <Button
- title="Login"
- onPress={() =>
- this.submitLogin()
- }
- />
- {/* this will be the button for the registration page */}
- <Button
- title="Go to Registration"
- onPress={() => {
- this.props.navigation.navigate('Registration')
- }
- }
- />
- </View>
- );
- }
+ <TouchableOpacity
+ style={styles.signupBtn}
+ onPress={() => {
+ this.props.navigation.navigate("Registration");
+ }}
+ >
+ <Text>Go to sign up</Text>
+ </TouchableOpacity>
+ </View>
+ );
+ }
}
// ...
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- TextInput: {
- height: 40,
- width: 200,
- borderWidth: 2,
- padding:10
- }
- });
+ container: {
+ flex: 1,
+ backgroundColor: "#fff",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ logo: {
+ fontWeight: "bold",
+ fontSize: 50,
+ color: "#fb5b5a",
+ marginBottom: 40,
+ },
+ inputView: {
+ width: "80%",
+ backgroundColor: "#90EAFC",
+ borderRadius: 25,
+ height: 50,
+ marginBottom: 15,
+ justifyContent: "center",
+ padding: 20,
+ },
+ inputText: {
+ height: 50,
+ color: "white",
+ },
+ forgot: {
+ color: "black",
+ fontSize: 11,
+ },
+ loginBtn: {
+ width: "40%",
+ backgroundColor: "#33B6F7",
+ borderRadius: 25,
+ height: 50,
+ alignItems: "center",
+ justifyContent: "center",
+ marginTop: 25,
+ marginBottom: 8,
+ },
+ signupBtn: {
+ width: "40%",
+ backgroundColor: "#59F66E",
+ borderRadius: 25,
+ height: 50,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+});
-export default LoginScreen;
\ No newline at end of file
+export default LoginScreen;
diff --git a/mobile/Screens/registrationScreen.js b/mobile/Screens/registrationScreen.js
index 637d4fc9661acb4f6a7f9edaab886912cddcdf4e..60a26bedbd827cb81e8fb1e19566896cd54d4063 100644
--- a/mobile/Screens/registrationScreen.js
+++ b/mobile/Screens/registrationScreen.js
@@ -1,103 +1,157 @@
-import React, {Component} from 'react';
-import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import React, { Component } from "react";
+import {
+ StyleSheet,
+ Text,
+ View,
+ Button,
+ TextInput,
+ TouchableOpacity,
+} from "react-native";
class RegistrationScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- username: "",
- password: ""
- };
- }
-
- submitRegistration() {
-
- //here we post the credentials to the signup route in the server
- //and we wait for the response
- fetch('http://192.168.178.92:3000/signup', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- username : this.state.username,
- password : this.state.password
- }),
- })
- .then(res =>{
- if (res.status !== 200){
- alert('Invalid username');
- }
- else{
- alert('User registered');
- this.props.navigation.navigate('Login');
- }
- })
+ constructor(props) {
+ super(props);
+ this.state = {
+ username: "",
+ password: "",
+ };
+ }
- this.setState({ username: "" });
- this.setState({ password: "" });
- }
+ submitRegistration() {
+ //here we post the credentials to the signup route in the server
+ //and we wait for the response
+ fetch("http://192.168.178.92:3000/signup", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ username: this.state.username,
+ password: this.state.password,
+ }),
+ }).then((res) => {
+ if (res.status !== 200) {
+ alert("Invalid username");
+ } else {
+ alert("User registered");
+ this.props.navigation.navigate("Login");
+ }
+ });
- render() {
+ this.setState({ username: "" });
+ this.setState({ password: "" });
+ }
- return (
- <View style={styles.container}>
- <Text>REGISTRATION</Text>
+ render() {
+ return (
+ <View style={styles.container}>
+ <Text>Username</Text>
+ <View style={styles.inputView}>
+ <TextInput
+ style={styles.inputText}
+ placeholder="Username"
+ autoCorrect={false}
+ value={this.state.username}
+ onChangeText={(username) => {
+ this.setState({ username });
+ }}
+ />
+ </View>
- <TextInput
- style={styles.TextInput}
- placeholder = "Username"
- autoCorrect = {false}
- value = {this.state.username}
- onChangeText = {username => {
- this.setState({ username });
- }}
- />
-
+ <Text>Password</Text>
+ <View style={styles.inputView}>
+ <TextInput
+ style={styles.inputText}
+ placeholder="Password"
+ autoCorrect={false}
+ secureTextEntry={true}
+ value={this.state.password}
+ onChangeText={(password) => {
+ this.setState({ password });
+ }}
+ />
+ </View>
- <TextInput
- style={styles.TextInput}
+ <Text>Repeat password</Text>
+ <View style={styles.inputView}>
+ <TextInput
+ style={styles.inputText}
placeholder="Password"
autoCorrect={false}
secureTextEntry={true}
- value = {this.state.password}
- onChangeText = {password => {
- this.setState({ password });
- }}
- />
+ value={this.state.password}
+ onChangeText={(password) => {
+ this.setState({ password });
+ }}
+ />
+ </View>
+
+ <TouchableOpacity
+ style={styles.signupBtn}
+ onPress={(e) => {
+ this.props.navigation.setOptions({ title: "User registered!" });
+ this.submitRegistration();
+ }}
+ >
+ <Text>Sign up</Text>
+ </TouchableOpacity>
- <Button
- title="Register"
- onPress={() =>
- this.submitRegistration()
- }
- />
- {/* this will be the button for the registration page */}
- <Button
- title="Go to Login"
- onPress={() =>
- this.props.navigation.navigate('Login')
- }
- />
- </View>
- );
- }
+ <TouchableOpacity
+ style={styles.loginBtn}
+ onPress={() => this.props.navigation.navigate("Login")}
+ >
+ <Text>Go to login</Text>
+ </TouchableOpacity>
+ </View>
+ );
+ }
}
// ...
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- TextInput: {
- height: 40,
- width: 200,
- borderWidth: 2,
- padding:10
- }
- });
+ container: {
+ flex: 1,
+ backgroundColor: "#fff",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ logo: {
+ fontWeight: "bold",
+ fontSize: 50,
+ color: "#fb5b5a",
+ marginBottom: 40,
+ },
+ inputView: {
+ width: "80%",
+ backgroundColor: "#90EAFC",
+ borderRadius: 25,
+ height: 50,
+ marginBottom: 15,
+ justifyContent: "center",
+ padding: 20,
+ },
+ inputText: {
+ height: 50,
+ color: "white",
+ },
+ loginBtn: {
+ width: "40%",
+ backgroundColor: "#59F66E",
+ borderRadius: 25,
+ height: 50,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ signupBtn: {
+ width: "40%",
+ backgroundColor: "#33B6F7",
+ borderRadius: 25,
+ height: 50,
+ alignItems: "center",
+ justifyContent: "center",
+ marginTop: 25,
+ marginBottom: 8,
+ },
+});
-export default RegistrationScreen;
\ No newline at end of file
+export default RegistrationScreen;
diff --git a/mobile/images/darklogo.jpg b/mobile/images/darklogo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dbc0f41f996972b049eb21aa5b9afb562a072b51
Binary files /dev/null and b/mobile/images/darklogo.jpg differ
diff --git a/mobile/images/fplogo1 (1).jpg b/mobile/images/fplogo1 (1).jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1233297bfcb467516e3a483083218be3a45d045f
Binary files /dev/null and b/mobile/images/fplogo1 (1).jpg differ
diff --git a/mobile/images/fplogo1 (2).jpg b/mobile/images/fplogo1 (2).jpg
new file mode 100644
index 0000000000000000000000000000000000000000..56717ca644904ef87d1f07e5352706d79041b426
Binary files /dev/null and b/mobile/images/fplogo1 (2).jpg differ
diff --git a/mobile/images/fplogo1 (3).jpg b/mobile/images/fplogo1 (3).jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d6dace32b0baab35cf077a09ce6029a7322aa078
Binary files /dev/null and b/mobile/images/fplogo1 (3).jpg differ
diff --git a/mobile/images/lightlogo.jpg b/mobile/images/lightlogo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aecd8bf8b4df911f2479b82d8fbb66505972a188
Binary files /dev/null and b/mobile/images/lightlogo.jpg differ
diff --git a/mobile/images/lightlogo_preview_rev_1.png b/mobile/images/lightlogo_preview_rev_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..42fd6789abd8db59bfc6b8133d2a8ddfa278c4c1
Binary files /dev/null and b/mobile/images/lightlogo_preview_rev_1.png differ