Files
imexmobile/components/screen-tech-sign-in/screen-tech-sign-in.component.jsx
2023-04-12 12:04:23 -04:00

81 lines
2.2 KiB
JavaScript

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);