Clean up, reimplement native paper, and sign in screen.

2025-10-08 08:57:14 -07:00
parent b8261f001e
commit 091606f1ca
20 changed files with 839 additions and 687 deletions
--- a/components/sign-in/sign-in.jsx
+++ b/components/sign-in/sign-in.jsx
@@ -0,0 +1,132 @@
+import { Formik } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Image, StyleSheet, View } from "react-native";
+import { Button, Text, TextInput } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import SignInError from "./sign-in-error";
+
+import {
+    selectCurrentUser,
+    selectSigningIn,
+} from "../../redux/user/user.selectors";
+//import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
+import Constants from "expo-constants";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  signingIn: selectSigningIn,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+});
+
+export function SignIn({ emailSignInStart, signingIn }) {
+  const { t } = useTranslation();
+
+  const formSubmit = (values) => {
+    const { email, password } = values;
+    emailSignInStart(email, password);
+  };
+
+  return (
+    <View styles={styles.container}>
+      <View style={styles.imageContainer}>
+        <Image
+          style={styles.logo}
+          source={require("@/assets/images/logo192.png")}
+        />
+        <Text variant="headlineLarge">{t("app.title")}</Text>
+      </View>
+
+      <Formik initialValues={{ email: "", password: "" }} onSubmit={formSubmit}>
+        {({ handleChange, handleBlur, handleSubmit, values }) => (
+          <View style={styles.formContainer}>
+            <TextInput
+              label={t("signin.fields.email")}
+              placeholder={t("signin.fields.email")}
+              autoCapitalize="none"
+              mode="outlined"
+              autoComplete="email"
+              keyboardType="email-address"
+              onChangeText={handleChange("email")}
+              onBlur={handleBlur("email")}
+              value={values.email}
+              style={[styles.input]}
+            />
+
+            <TextInput
+              label={t("signin.fields.password")}
+              placeholder={t("signin.fields.password")}
+              secureTextEntry={true}
+              autoCorrect={false}
+              mode="outlined"
+              autoCapitalize="none"
+              onChangeText={handleChange("password")}
+              onBlur={handleBlur("password")}
+              value={values.password}
+              style={[styles.input]}
+            />
+
+            <SignInError />
+            <Button loading={signingIn} onPress={handleSubmit}>
+              {t("signin.actions.signin")}
+            </Button>
+          </View>
+        )}
+      </Formik>
+
+      <Text style={styles.footer}>
+        {t("settings.labels.version", {
+          number: Constants.expoConfig.version,
+        })}
+      </Text>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    display: "flex",
+  },
+  imageContainer: {
+    display: "flex",
+    marginTop: 80,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+  },
+  logo: {
+    maxWidth: "20%",
+    resizeMode: "contain",
+  },
+  formContainer: {
+    display: "flex",
+    width: "100%",
+    padding: 20,
+    gap: 10,
+  },
+  //   content: {
+  //     display: "flex",
+  //     flex: 1,
+  //   },
+  //   logo: { width: 100, height: 100 },
+  inputContainer: {
+    marginBottom: 20,
+    display: "flex",
+  },
+  input: {},
+  footer: {
+    padding: 10,
+    alignSelf: "center",
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);