136 lines
3.3 KiB
JavaScript
136 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
TextInput,
|
|
} from "react-native";
|
|
import SetupView from '../components/SetupView';
|
|
import EvilIcon from "react-native-vector-icons/EvilIcons";
|
|
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
|
|
import themeColors from '../components/themeColors';
|
|
|
|
|
|
function WifiPasswordView(props) {
|
|
props = {...props, ...props.route.params};
|
|
|
|
let iconName = "wifi-strength-" + props.strength;
|
|
if (props.lock) {
|
|
iconName += "-lock";
|
|
}
|
|
|
|
return (
|
|
<SetupView
|
|
headerText="WiFi Password"
|
|
lowerRightButtonText="Need help?"
|
|
>
|
|
<Text style={styles.subtext}>
|
|
{props.subText}
|
|
</Text>
|
|
|
|
<View style={styles.formContainer}>
|
|
<View style={[styles.row, { backgroundColor: "rgba(155,155,155,0.8)" }]}>
|
|
<MaterialIcon style={styles.ssidIcon} name={iconName}></MaterialIcon>
|
|
<Text style={styles.ssidLabel} >{props.ssid}</Text>
|
|
</View>
|
|
|
|
<View style={styles.row}>
|
|
<EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
|
|
<TextInput style={styles.passwordInput}
|
|
autoCompleteType="password"
|
|
placeholder="Password"
|
|
placeholderTextColor="rgba(255,255,255,0.5)"
|
|
secureTextEntry={true}
|
|
></TextInput>
|
|
</View>
|
|
|
|
{props.confirmPwInput &&
|
|
< View style={styles.row}>
|
|
<EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
|
|
<TextInput style={styles.passwordInput}
|
|
autoCompleteType="password"
|
|
placeholder="Repeat Password"
|
|
placeholderTextColor="rgba(255,255,255,0.5)"
|
|
secureTextEntry={true}
|
|
></TextInput>
|
|
</View>
|
|
}
|
|
|
|
<TouchableOpacity style={[styles.row, styles.button]}>
|
|
<Text style={[styles.ssidLabel, { alignSelf: "center", textAlign: "center" }]}>{props.buttonText}</Text>
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
</SetupView >
|
|
);
|
|
}
|
|
|
|
WifiPasswordView.defaultProps = {
|
|
lock: true,
|
|
strength: 2,
|
|
ssid: "TheWLANName",
|
|
confirmPwInput: false,
|
|
buttonText: "Set Password",
|
|
subText: "Please enter password for your home WiFi"
|
|
}
|
|
|
|
|
|
WifiPasswordView.defaultProps = {
|
|
lock: true,
|
|
strength: 3,
|
|
ssid: "swimtracker-E2842S",
|
|
subText: "Use this option only if you're home WiFi doesn't reach the SwimTracker. The SwimTracker creates its own WiFi with the password you set here.",
|
|
confirmPwInput: true,
|
|
buttonText: "Set Password",
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
subtext: {
|
|
color: "rgba(255,255,255,1)",
|
|
textAlign: "left",
|
|
fontSize: 18,
|
|
lineHeight: 25,
|
|
width: "80%",
|
|
},
|
|
formContainer: {
|
|
},
|
|
row: {
|
|
backgroundColor: "rgba(255,255,255,0.4)",
|
|
borderRadius: 5,
|
|
width: "100%",
|
|
height: 50,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 5,
|
|
marginBottom: 5,
|
|
},
|
|
ssidLabel: {
|
|
color: "rgba(255,255,255,1)",
|
|
fontSize: 18,
|
|
width: "100%"
|
|
},
|
|
button: {
|
|
marginTop: 20,
|
|
backgroundColor: themeColors["GREEN SEA"],
|
|
justifyContent: "center"
|
|
},
|
|
ssidIcon: {
|
|
fontSize: 25,
|
|
color: "rgba(255,255,255,1)",
|
|
marginLeft: 15,
|
|
marginRight: 15,
|
|
},
|
|
passwordInput: {
|
|
height: 30,
|
|
color: "rgba(255,255,255,1)",
|
|
width: "100%",
|
|
fontSize: 18,
|
|
}
|
|
|
|
});
|
|
|
|
|
|
export default WifiPasswordView; |