update
This commit is contained in:
Philip Cesar Garay
+99
-323
@@ -1,345 +1,121 @@
|
||||
import React, { useState, useRef, useEffect, useGlobal } from "reactn";
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
KeyboardAvoidingView,
|
||||
Image,
|
||||
Pressable,
|
||||
} from "react-native";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
/* eslint-disable react/display-name */
|
||||
import React from "reactn";
|
||||
import { Pressable, Text, View } from "react-native";
|
||||
|
||||
import {
|
||||
responsiveHeight,
|
||||
responsiveWidth,
|
||||
} from "../actions/responsiveSizes.js";
|
||||
|
||||
import firebase from "../config/firebase";
|
||||
|
||||
import Button from "../components/Button";
|
||||
import { Input } from "../components/Input";
|
||||
|
||||
import { Fonts, gutters, Palette, Style } from "../styles";
|
||||
import { Routes } from "../navigation";
|
||||
import { art, mockups } from "../assets";
|
||||
import {
|
||||
checkIfEmailIsValid,
|
||||
checkIfPasswordIsStrongEnough,
|
||||
handleFirebaseError,
|
||||
} from "../actions/signupActions";
|
||||
|
||||
import useLayoutType from "../hooks/useLayoutType.js";
|
||||
import { capitalize } from "../helpers/index.js";
|
||||
import Page from "../layouts/Page.js";
|
||||
import { background } from "../assets/index.js";
|
||||
import { Input } from "../components/Input.js";
|
||||
import GradientButton from "../components/GradientButton.js";
|
||||
import Palette from "../styles/Palette.js";
|
||||
import { FONT_FAMILY } from "../styles/Fonts.js";
|
||||
import { navigate } from "../navigation/NavigationService.js";
|
||||
import { Routes } from "../navigation/Routes.js";
|
||||
import ItemContainer from "../components/ItemContainer/ItemContainer.js";
|
||||
|
||||
export default ({ navigation }) => {
|
||||
console.log("LOGINSCREEN");
|
||||
const [, setTooltip] = useGlobal("_tooltip");
|
||||
const [, setIsLoading] = useGlobal("_isLoading");
|
||||
|
||||
const [mode, setMode] = useState("LOGIN");
|
||||
|
||||
const [emailIsStatic, setEmailIsStatic] = useState(false);
|
||||
|
||||
const [email, setEmail] = useState("login@minuit.com");
|
||||
const [password, setPassword] = useState("password");
|
||||
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
|
||||
const passwordInputRef = useRef();
|
||||
|
||||
const { isDesktop } = useLayoutType();
|
||||
|
||||
useEffect(() => {
|
||||
const checkIfUserIsLoggedIn = async () => {
|
||||
const userEmail = await AsyncStorage.getItem("userEmail");
|
||||
|
||||
if (userEmail) {
|
||||
setEmail(userEmail);
|
||||
setEmailIsStatic(true);
|
||||
}
|
||||
};
|
||||
|
||||
checkIfUserIsLoggedIn();
|
||||
}, []);
|
||||
|
||||
const onLogin = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
let trimmedEmail = email.trim();
|
||||
|
||||
await firebase.auth().signInWithEmailAndPassword(trimmedEmail, password);
|
||||
await AsyncStorage.setItem("userEmail", trimmedEmail);
|
||||
|
||||
onAuthSuccess();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setTooltip({
|
||||
text: handleFirebaseError(error.code),
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSignup = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
if (!checkIfPasswordIsStrongEnough({ password })) {
|
||||
throw new Error(
|
||||
"Votre mot de passe doit contenir au moins 6 caractères, une majuscule et un chiffre."
|
||||
);
|
||||
}
|
||||
|
||||
if (!checkIfEmailIsValid({ email })) {
|
||||
throw new Error("Veuillez renseigner une adresse email valide.");
|
||||
}
|
||||
|
||||
const { user = null } = await firebase
|
||||
.auth()
|
||||
.createUserWithEmailAndPassword(email, password);
|
||||
|
||||
if (!user) {
|
||||
throw new Error("Erreur lors de la création du compte");
|
||||
}
|
||||
|
||||
let userObject = {
|
||||
firstName: capitalize(firstName.trim()),
|
||||
lastName: capitalize(lastName.trim()),
|
||||
};
|
||||
|
||||
// push user data to firestore
|
||||
|
||||
onAuthSuccess();
|
||||
|
||||
setTooltip({
|
||||
text: "Votre compte a été créé avec succès!",
|
||||
type: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setTooltip({
|
||||
text: error?.code?.startsWith("auth/")
|
||||
? handleFirebaseError(error.code)
|
||||
: error.message,
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onAuthSuccess = async () => {
|
||||
navigation.reset({
|
||||
index: 0,
|
||||
routes: [{ name: Routes.Splash }],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
headerType="NONE"
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: Palette.lightPurple,
|
||||
...Style.containerRow,
|
||||
}}
|
||||
<Page
|
||||
backgroundImg={background.homeBG}
|
||||
headerType="NAVIGATION"
|
||||
title="Connexion"
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
position: "relative",
|
||||
flex: 1,
|
||||
padding: 2 * gutters,
|
||||
backgroundColor: Palette.darkPurple,
|
||||
height: "100%",
|
||||
...Style.containerCenter,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
resizeMode="contain"
|
||||
source={art.gradientTriangle}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: responsiveHeight(20),
|
||||
right: responsiveHeight(5),
|
||||
width: responsiveWidth(140),
|
||||
height: responsiveWidth(140),
|
||||
}}
|
||||
/>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={{ ...Style.containerCenter, width: "100%" }}
|
||||
behavior="padding"
|
||||
keyboardVerticalOffset={responsiveHeight(10)}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({ type: "megaTitle" }),
|
||||
marginBottom: responsiveHeight(10),
|
||||
}}
|
||||
>
|
||||
minuit.starter
|
||||
</Text>
|
||||
|
||||
{emailIsStatic && mode === "LOGIN" ? (
|
||||
<>
|
||||
<View style={{ flex: 1, paddingTop: 20 }}>
|
||||
<ItemContainer height={490}>
|
||||
<View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({
|
||||
type: "default",
|
||||
color: Palette.white,
|
||||
style: { marginBottom: 20, textAlign: "center" },
|
||||
}),
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{`Vous êtes connecté(e) avec l'adresse ${email},`}
|
||||
Bonjour, pseudo!
|
||||
</Text>
|
||||
|
||||
<Pressable
|
||||
onPress={async () => {
|
||||
await AsyncStorage.removeItem("userEmail");
|
||||
|
||||
setEmailIsStatic(false);
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre
|
||||
le rythme ?
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ gap: 20 }}>
|
||||
<Input
|
||||
placeholder="Adresse mail ou pseudo"
|
||||
label="Adresse mail ou pseudo"
|
||||
isBlur
|
||||
/>
|
||||
<View style={{ gap: 4 }}>
|
||||
<Input
|
||||
placeholder="Mot de passe"
|
||||
label="Mot de passe"
|
||||
type="password"
|
||||
isBlur
|
||||
/>
|
||||
<Pressable>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Mot de passe oublié?
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Poursuivre la création"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={() => navigate(Routes.BottomTab)}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
En t’inscrivant, tu acceptes nos conditions générales{"\n"}
|
||||
d’utilisation et notre politique de confidentialité.
|
||||
</Text>
|
||||
<Pressable onPress={() => navigate(Routes.Register)}>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({
|
||||
type: "default",
|
||||
color: Palette.primary,
|
||||
style: {
|
||||
marginBottom: 20,
|
||||
textAlign: "center",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
}),
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Modifier
|
||||
Tu as déjà un compte?{" "}
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
Se connecter
|
||||
</Text>
|
||||
</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<Input
|
||||
layout="line"
|
||||
type="email"
|
||||
label="Adresse email"
|
||||
placeholder="Votre adresse email"
|
||||
value={email}
|
||||
setValue={setEmail}
|
||||
containerStyle={{ marginBottom: 20 }}
|
||||
textInputProps={{
|
||||
returnKeyType: "next",
|
||||
onSubmitEditing: () => passwordInputRef.current.focus(),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Input
|
||||
layout="line"
|
||||
inputRef={passwordInputRef}
|
||||
label="Mot de passe"
|
||||
placeholder="Votre mot de passe"
|
||||
value={password}
|
||||
setValue={setPassword}
|
||||
type="password"
|
||||
containerStyle={{ marginBottom: gutters }}
|
||||
textInputProps={{
|
||||
returnKeyType: "done",
|
||||
onSubmitEditing: onLogin,
|
||||
}}
|
||||
/>
|
||||
|
||||
{mode === "LOGIN" ? (
|
||||
<Pressable
|
||||
onPress={() => navigation.navigate("ForgotPassword")}
|
||||
style={{ marginBottom: gutters }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({
|
||||
type: "default",
|
||||
style: { textDecorationLine: "underline" },
|
||||
}),
|
||||
}}
|
||||
>
|
||||
Mot de passe oublié?
|
||||
</Text>
|
||||
</Pressable>
|
||||
) : (
|
||||
<>
|
||||
<Input
|
||||
layout="line"
|
||||
label="Prénom"
|
||||
placeholder="Votre prénom"
|
||||
value={firstName}
|
||||
setValue={setFirstName}
|
||||
containerStyle={{ marginBottom: gutters }}
|
||||
/>
|
||||
|
||||
<Input
|
||||
layout="line"
|
||||
label="Nom"
|
||||
placeholder="Votre nom"
|
||||
value={lastName}
|
||||
setValue={setLastName}
|
||||
containerStyle={{ marginBottom: gutters }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
{...(mode === "LOGIN"
|
||||
? { text: "Connexion", onPress: () => navigate(Routes.BottomTab) }
|
||||
: {
|
||||
text: "Inscription",
|
||||
onPress: onSignup,
|
||||
})}
|
||||
containerStyle={{ marginBottom: gutters }}
|
||||
/>
|
||||
|
||||
<Pressable onPress={() => navigation.navigate("TermsOfUse")}>
|
||||
<Text
|
||||
style={Fonts({
|
||||
type: "default",
|
||||
style: { textAlign: "center", opacity: 1 },
|
||||
})}
|
||||
>
|
||||
En vous {mode === "LOGIN" ? "connectant" : "inscrivant"}, vous
|
||||
acceptez sans réserve les{" "}
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.primary,
|
||||
textDecorationLine: "underline",
|
||||
}}
|
||||
>
|
||||
conditions générales d'utilisation
|
||||
</Text>{" "}
|
||||
de minuit.starter.
|
||||
</Text>
|
||||
</Pressable>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</View>
|
||||
</ItemContainer>
|
||||
</View>
|
||||
|
||||
{isDesktop && (
|
||||
<View style={{ flex: 2, height: "100%", overflow: "hidden" }}>
|
||||
<Image
|
||||
resizeMode="contain"
|
||||
source={mockups.loginAppDashboard}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user