login style
This commit is contained in:
+122
-82
@@ -15,11 +15,11 @@ import {
|
||||
} from "react-native";
|
||||
import Svg, { Path } from "react-native-svg";
|
||||
import { useGlobal } from "reactn";
|
||||
import { handleFirebaseError } from "../actions/signupActions.js";
|
||||
import { background } from "../assets";
|
||||
import GradientButton from "../components/GradientButton.js";
|
||||
import { Input } from "../components/Input.js";
|
||||
import ItemContainer from "../components/ItemContainer/ItemContainer";
|
||||
import { handleFirebaseError } from "../actions/signupActions.js";
|
||||
import firebase, { usersRef } from "../config/firebase";
|
||||
import {
|
||||
GOOGLE_ANDROID_CLIENT_ID,
|
||||
@@ -114,8 +114,7 @@ export default ({ navigation }) => {
|
||||
? handleFirebaseError(e.code)
|
||||
: e?.message;
|
||||
setTooltip({
|
||||
text:
|
||||
message || "Connexion Google impossible. Merci de réessayer.",
|
||||
text: message || "Connexion Google impossible. Merci de réessayer.",
|
||||
type: "error",
|
||||
});
|
||||
setLoading(false);
|
||||
@@ -202,37 +201,21 @@ export default ({ navigation }) => {
|
||||
title={isWeb ? "" : "Connexion"}
|
||||
hideBackButton
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ItemContainer height={550} width={800} disableKeyboardHeight>
|
||||
<View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{"Bonjour !"}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
<View style={styles.screen}>
|
||||
<ItemContainer
|
||||
height={isWeb ? 520 : 550}
|
||||
disableKeyboardHeight
|
||||
style={styles.loginCard}
|
||||
>
|
||||
<View style={styles.cardContent}>
|
||||
<View style={styles.greetingSection}>
|
||||
<Text style={styles.greetingTitle}>{"Bonjour !"}</Text>
|
||||
<Text style={styles.greetingSubtitle}>
|
||||
Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre
|
||||
le rythme ?
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ gap: 20 }}>
|
||||
<View style={styles.formFields}>
|
||||
<Input
|
||||
placeholder="Adresse mail"
|
||||
label="Adresse mail"
|
||||
@@ -241,7 +224,7 @@ export default ({ navigation }) => {
|
||||
setValue={setEmail}
|
||||
isBlur
|
||||
/>
|
||||
<View style={{ gap: 4 }}>
|
||||
<View style={styles.passwordField}>
|
||||
<Input
|
||||
placeholder="Mot de passe"
|
||||
label="Mot de passe"
|
||||
@@ -250,16 +233,14 @@ export default ({ navigation }) => {
|
||||
setValue={setPassword}
|
||||
isBlur
|
||||
/>
|
||||
<Pressable onPress={() => navigate(Routes.ForgotPassword)}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Mot de passe oublié?
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={() => navigate(Routes.ForgotPassword)}
|
||||
style={({ pressed }) => [
|
||||
styles.linkPressable,
|
||||
pressed && styles.linkPressed,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.linkText}>Mot de passe oublié ?</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
@@ -278,29 +259,16 @@ export default ({ navigation }) => {
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<View
|
||||
style={{
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => navigate(Routes.Register)}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Pas encore de compte?{" "}
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
Créer un compte
|
||||
</Text>
|
||||
</Text>
|
||||
<View style={styles.signupWrapper}>
|
||||
<Text style={styles.signupPrompt}>Pas encore de compte ?</Text>
|
||||
<Pressable
|
||||
onPress={() => navigate(Routes.Register)}
|
||||
style={({ pressed }) => [
|
||||
styles.signupPressable,
|
||||
pressed && styles.linkPressed,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.signupLink}>Créer un compte</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
@@ -372,23 +340,94 @@ const getNativeGoogleRedirectUri = () => {
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
loginCard: {
|
||||
width: "100%",
|
||||
maxWidth: 520,
|
||||
},
|
||||
cardContent: {
|
||||
gap: 28,
|
||||
paddingTop: 8,
|
||||
width: "100%",
|
||||
},
|
||||
greetingSection: {
|
||||
gap: 6,
|
||||
width: "100%",
|
||||
},
|
||||
greetingTitle: {
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
},
|
||||
greetingSubtitle: {
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
},
|
||||
formFields: {
|
||||
gap: 20,
|
||||
width: "100%",
|
||||
},
|
||||
passwordField: {
|
||||
gap: 8,
|
||||
width: "100%",
|
||||
},
|
||||
linkPressable: {
|
||||
alignSelf: "flex-end",
|
||||
},
|
||||
linkPressed: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: "right",
|
||||
},
|
||||
signupWrapper: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 6,
|
||||
},
|
||||
signupPrompt: {
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
signupPressable: {
|
||||
paddingHorizontal: 2,
|
||||
},
|
||||
signupLink: {
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
},
|
||||
webButton: {
|
||||
alignSelf: "center",
|
||||
borderRadius: 12,
|
||||
width: "80%",
|
||||
height: 48,
|
||||
borderRadius: 4,
|
||||
|
||||
backgroundColor: Palette.white,
|
||||
borderWidth: 1,
|
||||
borderColor: "#DADCE0",
|
||||
justifyContent: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
borderColor: "#E3E7EF",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
shadowColor: "rgba(12, 6, 34, 0.08)",
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 16,
|
||||
elevation: 2,
|
||||
},
|
||||
webButtonPressed: {
|
||||
backgroundColor: "#F6F9FE",
|
||||
backgroundColor: "#F4F7FF",
|
||||
},
|
||||
webButtonDisabled: {
|
||||
opacity: 0.7,
|
||||
@@ -396,24 +435,25 @@ const styles = StyleSheet.create({
|
||||
webContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 12,
|
||||
justifyContent: "space-between",
|
||||
gap: 12,
|
||||
},
|
||||
webIconContainer: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
width: 28,
|
||||
height: 28,
|
||||
},
|
||||
webText: {
|
||||
flex: 1,
|
||||
textAlign: "center",
|
||||
fontSize: 14,
|
||||
color: "#3C4043",
|
||||
fontSize: 15,
|
||||
color: "#202124",
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
},
|
||||
webRightSpacer: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
width: 24,
|
||||
height: 24,
|
||||
},
|
||||
nativeButtonWrapper: {
|
||||
alignSelf: "center",
|
||||
@@ -433,7 +473,7 @@ const styles = StyleSheet.create({
|
||||
});
|
||||
|
||||
const GoogleLogo = () => (
|
||||
<Svg width={18} height={18} viewBox="0 0 18 18">
|
||||
<Svg width={24} height={24} viewBox="0 0 18 18">
|
||||
<Path
|
||||
fill="#4285F4"
|
||||
d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.9c1.68-1.55 2.7-3.83 2.7-6.61Z"
|
||||
|
||||
Reference in New Issue
Block a user