added tech signin screen

components/screen-tech-sign-in/screen-tech-sign-in.component.jsx

@@ -0,0 +1,80 @@
+import { Formik } from "formik";
+import React from "react";
+import { View, StyleSheet, Text } from "react-native";
+import { Button, TextInput } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+
+import { connect } from "react-redux";
+
+//TODO JF add props
+const mapStateToProps = (state) => ({});
+
+//TODO JF add prop functions to call dispatch with actions
+const mapDispatchToProps = {};
+
+export function TechSignIn({ employeeSignInStart, employeeSigningIn }) {
+  const { t } = useTranslation();
+
+//TODO add call to dispatch action 
+  const formSubmit = (values) => {
+    const { employeeId, pin } = values;
+    // techSignInStart(employeeId, pin);
+  };
+
+  return (
+    <View style={localStyles.content}>
+      <View style={localStyles.signInContainer}>
+        <Formik
+          initialValues={{ employeeId: "", pin: "" }}
+          onSubmit={formSubmit}
+        >
+          {({ handleChange, handleBlur, handleSubmit, values }) => (
+            <View>
+              <TextInput
+                label={t("techsignin.fields.employeeid")}
+                mode="outlined"
+                autoCapitalize="none"
+                keyboardType="default"
+                onChangeText={handleChange("employeeId")}
+                onBlur={handleBlur("employeeId")}
+                value={values.employeeId}
+                style={[localStyles.input]}
+              />
+              <TextInput
+                label={t("techsignin.fields.pin")}
+                mode="outlined"
+                secureTextEntry={true}
+                onChangeText={handleChange("pin")}
+                onBlur={handleBlur("pin")}
+                value={values.pin}
+                style={[localStyles.input]}
+              />
+              <Button
+                mode="outlined"
+                loading={employeeSigningIn}
+                onPress={handleSubmit}
+              >
+                <Text>{t("techsignin.actions.techsignin")}</Text>
+              </Button>
+            </View>
+          )}
+        </Formik>
+      </View>
+    </View>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  content: {
+    display: "flex",
+    flex: 1,
+  },
+  signInContainer: {
+    flex: 1,
+  },
+  input: {
+    margin: 12,
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TechSignIn);