swimtracker-app/views/WifiPasswordView.js

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Keyboard
} 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 };

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
  }, []);

  const [keyboardStatus, setKeyboardStatus] = useState(undefined);
  const [password1, setPassword1] = useState("");
  const [password2, setPassword2] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  const _keyboardDidShow = () => setKeyboardStatus(true);
  const _keyboardDidHide = () => setKeyboardStatus(false);

  let iconName = "wifi-strength-" + props.strength;
  if (props.lock) {
    iconName += "-lock";
  }

  const onSubmit = () => {

    if (props.confirmPwInput && password1 != password2)
      setErrorMsg("Passwords don't match");
    else if (password1.length < 8)
      setErrorMsg("Password has to be at least 8 characters long")
    else if (password1.length > 128)
      setErrorMsg("Password too long");
    else
      setErrorMsg("");
  };

  return (
    <SetupView
      headerText="WiFi Password"
      lowerRightButtonText="Need help?"
      backButton={true}
      navigation={props.navigation}
    >

      {!keyboardStatus &&
        <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}
            onChangeText={setPassword1}
            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}
              onChangeText={setPassword2}
              autoCompleteType="password"
              placeholder="Repeat Password"
              placeholderTextColor="rgba(255,255,255,0.5)"
              secureTextEntry={true}
            ></TextInput>
          </View>
        }

        {errorMsg.length > 0 &&
          <View>
            <Text style={{ color: "red", paddingTop: 10, paddingLeft: 55 }}>{errorMsg}</Text>
          </View>
        }

        <TouchableOpacity style={[styles.row, styles.button]} onPress={onSubmit}>
          <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: 16,
    lineHeight: 25,
    width: "80%",
    paddingBottom: 30,
  },
  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;