From f0df6ba814dec1ba254943bb1ac937757a282fa2 Mon Sep 17 00:00:00 2001
From: ric <s1094610@studenti.univpm.it>
Date: Sat, 4 Dec 2021 16:00:31 +0100
Subject: [PATCH] login and registration
---
backend/routes/authRoutes.js | 16 ++++-
mobile/App.js | 15 ++--
mobile/Screens/homeScreen.js | 70 +++++++-----------
mobile/Screens/loginScreen.js | 103 +++++++++++++++++++++++++++
mobile/Screens/registrationScreen.js | 102 ++++++++++++++++++++++++++
mobile/Screens/secondScreen.js | 31 --------
6 files changed, 253 insertions(+), 84 deletions(-)
create mode 100644 mobile/Screens/loginScreen.js
create mode 100644 mobile/Screens/registrationScreen.js
delete mode 100644 mobile/Screens/secondScreen.js
diff --git a/backend/routes/authRoutes.js b/backend/routes/authRoutes.js
index 7f26197..d34fc2f 100644
--- a/backend/routes/authRoutes.js
+++ b/backend/routes/authRoutes.js
@@ -4,6 +4,18 @@ const mongoose = require('mongoose');
const router = express.Router();
const userFromDb = require('../models/userModel');
+router.post('/test', (req, res)=>{
+ const username = req.body.username;
+ const password = req.body.password;
+ console.log( username + ' ' + password );
+ if (username == 'test'){
+ return res.status(200).send('Valid username');
+ }
+ else{
+ return res.status(422).send('Invalid username');
+ }
+})
+
//register post
router.post('/signup', (req, res)=>{
console.log(req.body);
@@ -20,7 +32,7 @@ router.post('/signup', (req, res)=>{
else{
const user = new userFromDb({username:username, password:password});
user.save();
- res.send('User registered');
+ res.status(200).send('User registered');
}
})
})
@@ -42,7 +54,7 @@ router.post('/signin', (req, res)=>{
if (err) throw err;
//console.log(password, isMatch);
if (isMatch){
- res.send('Login successful');
+ res.status(200).send('Login successful');
}else{
return res.status(422).send('Invalid username or password');
}
diff --git a/mobile/App.js b/mobile/App.js
index 7613ddf..18e801d 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -1,8 +1,9 @@
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 SecondScreen from './Screens/secondScreen'
+import RegistrationScreen from './Screens/registrationScreen'
const Stack = createNativeStackNavigator();
@@ -12,12 +13,16 @@ class App extends React.Component {
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
- name="Home"
- component={HomeScreen}
+ name="Login"
+ component={LoginScreen}
/>
<Stack.Screen
- name="Second"
- component={SecondScreen}
+ name="Home"
+ component={HomeScreen}
+ />
+ <Stack.Screen
+ name="Registration"
+ component={RegistrationScreen}
/>
</Stack.Navigator>
</NavigationContainer>
diff --git a/mobile/Screens/homeScreen.js b/mobile/Screens/homeScreen.js
index ad2049b..8038a3a 100644
--- a/mobile/Screens/homeScreen.js
+++ b/mobile/Screens/homeScreen.js
@@ -1,57 +1,35 @@
import React, {Component} from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
-import io from "socket.io-client";
+import {io} from "socket.io-client"; //socket.io-client
class HomeScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- chatMessage: "",
- chatMessages: []
- };
- }
- componentDidMount() {
- this.socket = io("http://0.0.0.0:3000", {
- transports: ['websocket'] //this line is fundamental
+ componentDidMount() {
+ const socket = io("http://192.168.178.92:3000", {
+ transports: ['websocket'] //this line is fundamental
});
- }
-
- submitChatMessage() {
- this.socket.emit("chat message", this.state.chatMessage);
- this.setState({ chatMessage: "" });
- }
-
- render() {
-
- const chatMessages = this.state.chatMessages.map(chatMessage => (
- <Text key={chatMessage}>{chatMessage}</Text>
- ));
-
- return (
- <View style={styles.container}>
- <Text>HOME</Text>
-
- <Button
- title="Go to Second"
- onPress={() =>
- this.props.navigation.navigate('Second')
- }
- />
-
- <TextInput
- style={{ height: 40, borderWidth: 2 }}
+ }
+
+ render() {
+ return (
+ <View style={styles.container}>
+ <Text>Second Page</Text>
+
+ <Button
+ title="Go to Home"
+ onPress={() =>
+ this.props.navigation.navigate('Login')
+ }
+ />
+ <TextInput
+ style={{width:200, height:40, borderWidth:2} }
+ placeholder="Send a message"
autoCorrect={false}
- value={this.state.chatMessage}
- onSubmitEditing={() => this.submitChatMessage()}
- onChangeText={chatMessage => {
- this.setState({ chatMessage });
- }}
+
/>
- {chatMessages}
- </View>
- );
- }
+ </View>
+ );
+ }
}
// ...
diff --git a/mobile/Screens/loginScreen.js b/mobile/Screens/loginScreen.js
new file mode 100644
index 0000000..7515fe1
--- /dev/null
+++ b/mobile/Screens/loginScreen.js
@@ -0,0 +1,103 @@
+import React, {Component} from 'react';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+
+class LoginScreen extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ username: "",
+ password: ""
+ };
+ }
+
+ submitLogin() {
+ //try to post something to the server
+
+ 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
+ }),
+ })
+ .then(res =>{
+ if (res.status !== 200){
+ alert('Invalid username or password');
+ }
+ else{
+ alert('Succesful login')
+ this.props.navigation.navigate('Home')
+ }
+ })
+
+ this.setState({ username: "" });
+ this.setState({ password: "" });
+ }
+
+ render() {
+
+ return (
+ <View style={styles.container}>
+ <Text>LOGIN</Text>
+
+ <TextInput
+ style={styles.TextInput}
+ placeholder = "Username"
+ autoCorrect = {false}
+ value = {this.state.username}
+ onChangeText = {username => {
+ this.setState({ username });
+ }}
+ />
+
+
+ <TextInput
+ style={styles.TextInput}
+ placeholder="Password"
+ autoCorrect={false}
+ secureTextEntry={true}
+ value = {this.state.password}
+ onChangeText = {password => {
+ this.setState({ password });
+ }}
+ />
+
+ <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>
+ );
+ }
+}
+
+// ...
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ TextInput: {
+ height: 40,
+ width: 200,
+ borderWidth: 2,
+ padding:10
+ }
+ });
+
+export default LoginScreen;
\ No newline at end of file
diff --git a/mobile/Screens/registrationScreen.js b/mobile/Screens/registrationScreen.js
new file mode 100644
index 0000000..80fdbb4
--- /dev/null
+++ b/mobile/Screens/registrationScreen.js
@@ -0,0 +1,102 @@
+import React, {Component} from 'react';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+
+class RegistrationScreen extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ username: "",
+ password: ""
+ };
+ }
+
+ submitRegistration() {
+ //try to post something to the server
+
+ 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');
+ }
+ })
+
+ this.setState({ username: "" });
+ this.setState({ password: "" });
+ }
+
+ render() {
+
+ return (
+ <View style={styles.container}>
+ <Text>REGISTRATION</Text>
+
+ <TextInput
+ style={styles.TextInput}
+ placeholder = "Username"
+ autoCorrect = {false}
+ value = {this.state.username}
+ onChangeText = {username => {
+ this.setState({ username });
+ }}
+ />
+
+
+ <TextInput
+ style={styles.TextInput}
+ placeholder="Password"
+ autoCorrect={false}
+ secureTextEntry={true}
+ value = {this.state.password}
+ onChangeText = {password => {
+ this.setState({ password });
+ }}
+ />
+
+ <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>
+ );
+ }
+}
+
+// ...
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ TextInput: {
+ height: 40,
+ width: 200,
+ borderWidth: 2,
+ padding:10
+ }
+ });
+
+export default RegistrationScreen;
\ No newline at end of file
diff --git a/mobile/Screens/secondScreen.js b/mobile/Screens/secondScreen.js
deleted file mode 100644
index eb19d1b..0000000
--- a/mobile/Screens/secondScreen.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View, Button } from 'react-native';
-
-class SecondScreen extends React.Component {
- render() {
- return (
- <View style={styles.container}>
- <Text>Second Page</Text>
-
- <Button
- title="Go to Home"
- onPress={() =>
- this.props.navigation.navigate('Home')
- }
- />
- </View>
- );
- }
-}
-
-// ...
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- });
-
-export default SecondScreen;
\ No newline at end of file
--
GitLab