107 lines
4.1 KiB
JavaScript
107 lines
4.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
TextInput,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
|
|
import SetupView from '../components/SetupView';
|
|
import { connect } from 'react-redux';
|
|
import { changeSwimTrackerHostname } from '../state/Reducer';
|
|
import { i18n } from '../utility/i18n';
|
|
|
|
const validHostnameRegex = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/;
|
|
|
|
function isValidHostname(hostname) {
|
|
return validHostnameRegex.test(hostname);
|
|
}
|
|
|
|
function ConnectingView(props) {
|
|
|
|
const [isHostnameValid, setIsHostnameValid] = useState(isValidHostname(props.swimTrackerHost));
|
|
const [hostnameTextInput, setHostnameTextInput] = useState(props.swimTrackerHost);
|
|
const [advancedMode, setAdvancedMode] = useState(false);
|
|
|
|
|
|
let onHostnameChange = newHostName => {
|
|
setHostnameTextInput(newHostName);
|
|
const newHostnameValid = isValidHostname(newHostName);
|
|
setIsHostnameValid(newHostnameValid);
|
|
if (newHostnameValid) {
|
|
props.dispatch(changeSwimTrackerHostname(newHostName));
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const hiddenStyle = advancedMode ? {} : {"display": "none"};
|
|
|
|
return (
|
|
<SetupView
|
|
headerText={i18n.t("connecting") + "..."}
|
|
lowerLeftButtonText={ i18n.t(advancedMode ? 'simpleMode' : 'advancedMode') }
|
|
onLowerLeftButtonPress={() => { setAdvancedMode(!advancedMode); }}
|
|
lowerRightButtonText={i18n.t('help')}
|
|
>
|
|
<View style={{flexDirection: "row", alignItems: "center"}}>
|
|
<ActivityIndicator size="large" color="#ffffff" />
|
|
<Text style={styles.subtext}>
|
|
{i18n.t('connectSubtext')}
|
|
</Text>
|
|
</View>
|
|
{true &&
|
|
<View style={StyleSheet.flatten([styles.row, hiddenStyle])}>
|
|
<Text style={styles.label}>Host:</Text>
|
|
<TextInput
|
|
onChangeText={onHostnameChange}
|
|
value={hostnameTextInput}
|
|
style={{ ...styles.hostnameInput, color: isHostnameValid ? "rgb(255, 255, 255)" : "rgb(255, 150, 150)" }}
|
|
placeholderTextColor="rgba(255,255,255,0.5)"
|
|
/>
|
|
</View>
|
|
}
|
|
</SetupView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
subtext: {
|
|
color: "rgba(255,255,255,1)",
|
|
textAlign: "left",
|
|
fontSize: 16,
|
|
lineHeight: 25,
|
|
width: "100%",
|
|
//paddingTop: 50,
|
|
paddingLeft: 30,
|
|
},
|
|
row: {
|
|
backgroundColor: "rgba(255,255,255,0.4)",
|
|
borderRadius: 5,
|
|
width: "100%",
|
|
height: 50,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 60,
|
|
marginBottom: 5,
|
|
},
|
|
hostnameInput: {
|
|
height: 30,
|
|
color: "rgba(255,255,255,1)",
|
|
width: "80%",
|
|
fontSize: 18,
|
|
},
|
|
label : {
|
|
color: "rgb(80, 80, 80)",
|
|
marginLeft: 15,
|
|
marginRight: 10,
|
|
}
|
|
});
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
return { swimTrackerHost: state.settings.swimTrackerHost };
|
|
};
|
|
|
|
export default connect(mapStateToProps)(ConnectingView);
|