-
Notifications
You must be signed in to change notification settings - Fork 0
/
LoginView.js
128 lines (120 loc) · 3.53 KB
/
LoginView.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
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import base64 from 'base-64';
class LoginView extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
}
this.handleLogin = this.handleLogin.bind(this);
this.handleSignup = this.handleSignup.bind(this);
}
/**
* Logs in to the application.
*
* Note that we have to follow the authorization rules; a header
* with a base64-encoded username and password.
*
* Upon response, we analyze whether or not we are successful.
* If successful, we use a callback from App to log us in and
* store the username and token in App.
*/
handleLogin() {
fetch('https://mysqlcs639.cs.wisc.edu/login', {
method: 'GET',
headers: {
'Authorization': 'Basic ' + base64.encode(this.state.username + ":" + this.state.password)
}
})
.then(res => res.json())
.then(res => {
if (res.token) {
console.log(res.token);
this.props.login(this.state.username, res.token);
} else {
alert("Incorrect username or password! Please try again.");
}
});
}
/**
* Use React Navigation to switch to the Sign Up page.
*/
handleSignup() {
this.props.navigation.navigate('SignUp');
}
/**
* Displays and collects the login information.
*
* The styling could definitely be cleaned up; should be consistent!
*/
render() {
return (
<View style={styles.container}>
<Text style={styles.bigText}>FitnessTracker</Text>
<Text>Welcome! Please login or signup to continue.</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"
placeholderTextColor="#992a20"
onChangeText={(password) => this.setState({ password: password })}
value={this.state.password}
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="Login" onPress={this.handleLogin} />
<View style={styles.spaceHorizontal} />
<View accessible={true} accessibilityHint="This will take you to the signup screen.">
<Button color="#942a21" style={styles.buttonInline} title="Signup" onPress={this.handleSignup}/>
</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 LoginView;