-
Notifications
You must be signed in to change notification settings - Fork 0
/
SignupView.js
131 lines (123 loc) · 3.82 KB
/
SignupView.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
class SignupView extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
}
this.handleCreateAccount = this.handleCreateAccount.bind(this);
this.backToLogin = this.backToLogin.bind(this);
}
/**
* Make a POST request to create a new user with the entered information.
*
* This POST request requires us to specify a requested username and password,
* Additionally, we are sending a JSON body, so we need to specify
* Content-Type: application/json
*
* Note that we very cheaply check if the responded message is what we expect,
* otherwise we display what we get back from the server. A more sophisticated
* implementation would check the status code and give custom error messages
* based on the response.
*/
handleCreateAccount() {
fetch('https://mysqlcs639.cs.wisc.edu/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
})
})
.then(res => res.json())
.then(res => {
if (res.message === "User created!") {
alert(JSON.stringify(res.message));
this.props.navigation.navigate("SignIn");
} else {
alert(JSON.stringify(res.message));
}
});
}
/**
* Use React Navigation to switch to the Log In page.
*/
backToLogin() {
this.props.navigation.navigate("SignIn");
}
/**
* Displays and collects the sign up information.
*
* The styling could definitely be cleaned up; should be consistent!
*/
render() {
return (
<View style={styles.container}>
<Text style={styles.bigText}>FitnessTracker</Text>
<Text>New here? Let's get started!</Text>
<Text>Please create an account below.</Text>
<View style={styles.space} />
<TextInput style={styles.input}
underlineColorAndroid="transparent"
placeholder="Username"
placeholderTextColor="#992a20"
onChangeText={(username) => this.setState({ username: username })}
value={this.state.username}
autoCapitalize="none"
accessibilityHint="Please enter your username here."/>
<TextInput style={styles.input}
secureTextEntry={true}
underlineColorAndroid="transparent"
placeholder="Password"
onChangeText={(password) => this.setState({ password: password })}
value={this.state.password}
placeholderTextColor="#992a20"
autoCapitalize="none"
accessibilityHint="Please enter your password here."/>
<View style={styles.space} />
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Button color="#942a21" style={styles.buttonInline} title="Create Account" onPress={this.handleCreateAccount} />
<View style={styles.spaceHorizontal} />
<View accessible={true} accessibilityHint="This will take you to the sign in screen" >
<Button color="#a1635f" style={styles.buttonInline} title="Nevermind!" onPress={this.backToLogin}/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
bigText: {
fontSize: 32,
fontWeight: "700",
marginBottom: 5
},
space: {
width: 20,
height: 20,
},
spaceHorizontal: {
display: "flex",
width: 20
},
buttonInline: {
display: "flex"
},
input: {
width: 200,
padding: 10,
margin: 5,
height: 40,
borderColor: '#c9392c',
borderWidth: 1
}
});
export default SignupView;