WIP More Wifi setup

2021-06-13 12:43:50 +02:00
parent a6db96ef29
commit 0bb0e2f121
8 changed files with 263 additions and 126 deletions
--- a/views/MainMenuView.js
+++ b/views/MainMenuView.js
@@ -10,6 +10,11 @@ import {
 import themeColors from '../components/themeColors';
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 import EntypoIcon from "react-native-vector-icons/Entypo";
+import FeatherIcon from "react-native-vector-icons/Feather";
+
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+

 import { ConnState, startSession } from '../state/DeviceReduxCoupling';
 import { connect } from 'react-redux';
@@ -83,7 +88,7 @@ function ButtonGrid(props) {
          style={[{ backgroundColor: themeColors["MIDNIGHT BLUE"] }, buttonGridStyles.button]}
          activeOpacity={0.6}
        >
-          <MaterialIcon name="settings-outline" style={buttonGridStyles.icon}></MaterialIcon>
+          <MaterialCommunityIcons name="settings" style={buttonGridStyles.icon}></MaterialCommunityIcons>
          <Text style={buttonGridStyles.buttonText}>EINSTELLUNGEN</Text>
        </TouchableOpacity>
      </View>
--- a/views/WifiPasswordView.js
+++ b/views/WifiPasswordView.js
@@ -1,33 +1,69 @@
-import React from "react";
+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};
+  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}
    >
-      <Text style={styles.subtext}>
-        {props.subText}
-      </Text>
+
+      {!keyboardStatus &&
+        <Text style={styles.subtext}>
+          {props.subText}
+        </Text>
+      }

      <View style={styles.formContainer}>
        <View style={[styles.row, { backgroundColor: "rgba(155,155,155,0.8)" }]}>
@@ -38,6 +74,7 @@ function WifiPasswordView(props) {
        <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)"
@@ -49,6 +86,7 @@ function WifiPasswordView(props) {
          < 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)"
@@ -57,10 +95,15 @@ function WifiPasswordView(props) {
          </View>
        }

-        <TouchableOpacity style={[styles.row, styles.button]}>
+        {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 >
@@ -91,9 +134,10 @@ const styles = StyleSheet.create({
  subtext: {
    color: "rgba(255,255,255,1)",
    textAlign: "left",
-    fontSize: 18,
+    fontSize: 16,
    lineHeight: 25,
    width: "80%",
+    paddingBottom: 30,
  },
  formContainer: {
  },
--- a/views/WifiSelectionView.js
+++ b/views/WifiSelectionView.js
@@ -56,6 +56,7 @@ class WifiSelectionView extends React.Component {
  constructor() {
    super();
    this.state = { wifiInfo: [] };
+    this.mounted = false;
  }

  processDeviceResponse(response) {
@@ -91,39 +92,56 @@ class WifiSelectionView extends React.Component {
  }

  componentDidMount() {
+    let component = this;
+    component.mounted = true;
    this.props.device.conn.scanWifiNetworks().then(
      (result) => {
-        this.setState({ wifiInfo: this.processDeviceResponse(result) })
+        if(component.mounted) {
+          this.setState({ wifiInfo: this.processDeviceResponse(result) })
+        }
      }
    );
  }

+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
  render() {
    let inner;

    if (this.state.wifiInfo.length > 0) {
      inner = (
-        <ScrollView>
-          {this.state.wifiInfo.map(e => (
-            <WifiListElement
-              text={e.ssid}
-              strength={e.strength}
-              lock={e.locked}
-              key={e.ssid}
-              onPress={() => { this.props.navigation.navigate("WifiPasswordView", {
-                ssid: e.ssid,
-                lock: e.locked,
-                strength: e.strength,
-                buttonText: "Set Password",
-                subText: "Please enter password for your home WiFi",
-              }); }}>
-            </WifiListElement>)
-          )}
-        </ScrollView>)
+        <View style={styles.listContainer}>
+          <ScrollView style={{backgroundColor: "red", centerContent: true, paddingTop: 20}}>
+            {this.state.wifiInfo.map(e => (
+              <WifiListElement
+                text={e.ssid}
+                strength={e.strength}
+                lock={e.locked}
+                key={e.ssid}
+                onPress={() => {
+                  this.props.navigation.navigate("WifiPasswordView", {
+                    ssid: e.ssid,
+                    lock: e.locked,
+                    strength: e.strength,
+                    confirmPwInput: false,
+                    buttonText: "OK",
+                    subText: "Please enter the password for your home WiFi",
+                  });
+                }}>
+              </WifiListElement>)
+            )}
+          </ScrollView>
+        </View>
+      )
    }
    else {
-      inner = (<ActivityIndicator size="large" color="#ffffff" />
-
+      inner = (
+        <View style={{ alignItems: "center",  justifyContent:"center", height: "100%" }}>
+          <View style={{ paddingBottom: 20 }}><Text style={{ fontSize: 16, color: "#fff"}}>Scanning WiFi networks</Text></View>
+          <ActivityIndicator size="large" color="#ffffff" />
+        </View>
      )
    }

@@ -131,11 +149,19 @@ class WifiSelectionView extends React.Component {
      <SetupView
        headerText="WiFi Connection"
        lowerLeftButtonText="My WiFi wasn't found"
+        onLowerLeftButtonPress={() => {
+          this.props.navigation.navigate("WifiPasswordView", {
+            ssid: "swimtracker-E2842S", // todo real id here
+            lock: true,
+            strength: 4,
+            confirmPwInput: true,
+            buttonText: "Set Password",
+            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.",
+          });
+        }}
        lowerRightButtonText="Need help?"
      >
-        <View style={styles.listContainer}>
-          {inner}
-        </View>
+        {inner}
      </SetupView>
    )
  }
@@ -145,7 +171,7 @@ class WifiSelectionView extends React.Component {
 const styles = StyleSheet.create({
  listContainer: {
    height: "75%",
-    //backgroundColor: "red",
+    flex: 1,
  }
 });