clear more ticket, sub and design
This commit is contained in:
Thomas Demirdjian
@@ -1,10 +1,13 @@
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { Modal, Pressable, ScrollView, Text, View } from "react-native";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { useGlobal } from "reactn";
|
||||
import { background } from "../assets";
|
||||
import BorderGradientButton from "../components/BorderGradientButton";
|
||||
import GradientButton from "../components/GradientButton";
|
||||
import { Input } from "../components/Input";
|
||||
import AppCheckbox from "../components/AppCheckbox";
|
||||
import ItemContainer from "../components/ItemContainer/ItemContainer";
|
||||
import {
|
||||
checkIfPasswordIsStrongEnough,
|
||||
@@ -30,10 +33,11 @@ const CreatePassword = () => {
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordError, setPasswordError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isCguAccepted, setIsCguAccepted] = useState(false);
|
||||
const [isCguModalVisible, setIsCguModalVisible] = useState(false);
|
||||
const [hasScrolledCguToEnd, setHasScrolledCguToEnd] = useState(false);
|
||||
const [, setTooltip] = useGlobal("_tooltip");
|
||||
|
||||
|
||||
|
||||
const handlePasswordChange = (text) => {
|
||||
setPassword(text);
|
||||
if (!text) {
|
||||
@@ -52,6 +56,30 @@ const CreatePassword = () => {
|
||||
|
||||
const isPasswordValid = checkIfPasswordIsStrongEnough({ password });
|
||||
|
||||
const handleOpenCguModal = () => {
|
||||
setHasScrolledCguToEnd(false);
|
||||
setIsCguModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseCguModal = () => {
|
||||
setIsCguModalVisible(false);
|
||||
setHasScrolledCguToEnd(false);
|
||||
};
|
||||
|
||||
const handleCguScroll = ({ nativeEvent }) => {
|
||||
const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
|
||||
const paddingToBottom = 20;
|
||||
const contentFits = contentSize.height <= layoutMeasurement.height + 1;
|
||||
const isAtEnd =
|
||||
layoutMeasurement.height + contentOffset.y >=
|
||||
contentSize.height - paddingToBottom;
|
||||
if (isAtEnd) {
|
||||
setHasScrolledCguToEnd(true);
|
||||
} else if (contentFits) {
|
||||
setHasScrolledCguToEnd(true);
|
||||
}
|
||||
};
|
||||
|
||||
const onCreateAccount = async () => {
|
||||
try {
|
||||
if (!isPasswordValid) {
|
||||
@@ -62,6 +90,14 @@ const CreatePassword = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isCguAccepted) {
|
||||
setTooltip({
|
||||
text: "Tu dois accepter les CGU pour continuer",
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
const cred = await firebase
|
||||
.auth()
|
||||
@@ -110,8 +146,19 @@ const CreatePassword = () => {
|
||||
headerType="NAVIGATION"
|
||||
title="Inscription"
|
||||
>
|
||||
<View style={{ flex: 1, paddingTop: 20 }}>
|
||||
<ItemContainer height={300} disableKeyboardHeight>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
paddingVertical: 20,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<ItemContainer
|
||||
height={isWeb ? 360 : responsiveHeight(65)}
|
||||
disableKeyboardHeight
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
|
||||
<View style={{ gap: 16 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
@@ -154,18 +201,303 @@ const CreatePassword = () => {
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<View style={{ gap: 12 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<AppCheckbox selected={isCguAccepted} />
|
||||
<Pressable onPress={handleOpenCguModal}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textDecorationLine: "underline",
|
||||
}}
|
||||
>
|
||||
Voir les CGU
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
<GradientButton
|
||||
title={loading ? "Création..." : "Suivant"}
|
||||
title={loading ? "Création..." : "Créer mon compte"}
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={onCreateAccount}
|
||||
disabled={loading || !email || !isPasswordValid}
|
||||
disabled={
|
||||
loading || !email || !isPasswordValid || !isCguAccepted
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</ItemContainer>
|
||||
</View>
|
||||
<Modal
|
||||
animationType="slide"
|
||||
visible={isCguModalVisible}
|
||||
transparent
|
||||
onRequestClose={handleCloseCguModal}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: Palette.transparentBlack,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 40,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: Palette.darkPurple,
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
paddingTop: 28,
|
||||
maxHeight: "75%",
|
||||
width: "90%",
|
||||
flexShrink: 1,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={handleCloseCguModal}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 12,
|
||||
right: 12,
|
||||
padding: 6,
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
X
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View style={{ gap: 16, flex: 1 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Conditions Générales d'Utilisation
|
||||
</Text>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ gap: 16, paddingBottom: 12 }}
|
||||
onScroll={handleCguScroll}
|
||||
onMomentumScrollEnd={handleCguScroll}
|
||||
scrollEventThrottle={16}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Cupidatat incididunt aute aute velit deserunt labore excepteur
|
||||
eu velit cillum est. Laboris in sunt ea Lorem culpa velit nisi
|
||||
ad elit esse voluptate id adipisicing nulla magna. Duis qui
|
||||
fugiat consequat elit velit aute ad. Reprehenderit proident
|
||||
duis exercitation velit proident aute minim. Anim
|
||||
reprehenderit mollit consectetur id sint adipisicing pariatur
|
||||
tempor sit pariatur proident nostrud. Sit culpa tempor enim ut
|
||||
consectetur sunt aute est reprehenderit incididunt incididunt
|
||||
in ullamco consectetur. Eiusmod non incididunt proident
|
||||
eiusmod. Esse Lorem ut amet in est id aute consectetur.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Aliqua est sint consectetur occaecat exercitation. Elit nisi
|
||||
velit ad qui eiusmod reprehenderit proident labore nostrud
|
||||
labore consequat enim fugiat non. Eiusmod occaecat pariatur
|
||||
deserunt velit elit sint irure fugiat excepteur labore ad
|
||||
velit ex deserunt laborum. Aliqua excepteur reprehenderit
|
||||
nostrud aliqua pariatur aliqua excepteur Lorem consectetur. Ut
|
||||
est culpa ullamco ipsum Lorem ullamco ea labore anim.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Et ut ex duis tempor amet aliquip cupidatat sit sit. Aliqua
|
||||
consectetur amet duis fugiat nulla duis culpa exercitation
|
||||
reprehenderit. Ea voluptate proident ad elit pariatur do.
|
||||
Culpa incididunt deserunt dolor ut officia aliquip ut
|
||||
occaecat eiusmod sint veniam. Deserunt consequat adipisicing
|
||||
aliquip velit labore fugiat aute culpa id sint. Adipisicing eu
|
||||
commodo ex do aliqua in labore laboris sit sunt adipisicing
|
||||
excepteur. Do sint velit veniam pariatur consequat proident
|
||||
cupidatat in incididunt ullamco.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Culpa eu cillum fugiat elit eiusmod enim. Cupidatat culpa
|
||||
aliquip culpa et tempor est velit. Aute id deserunt non ut
|
||||
minim deserunt adipisicing sit veniam eu id incididunt
|
||||
adipisicing dolore. Eiusmod nisi excepteur est voluptate
|
||||
consequat reprehenderit non exercitation commodo aute.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Eu culpa enim dolore anim ipsum eu veniam mollit dolore
|
||||
officia cupidatat laborum officia do. Ad proident in anim nisi
|
||||
exercitation consequat exercitation occaecat consequat ut
|
||||
laborum esse consectetur ullamco. Enim elit sit in id velit
|
||||
quis nostrud nostrud eu labore aute reprehenderit voluptate
|
||||
deserunt. Minim voluptate et duis voluptate enim duis.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Minim laboris deserunt minim ex. Duis aliquip cillum proident.
|
||||
Magna velit nisi fugiat. Non id proident pariatur elit in
|
||||
exercitation et amet id qui ad laborum nulla ullamco ea.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Cillum nisi aute dolore culpa est veniam cupidatat sunt sint
|
||||
ipsum. Amet ullamco minim non voluptate cillum dolore sunt
|
||||
irure nulla pariatur excepteur voluptate id. Commodo ullamco
|
||||
aliqua non ea mollit ullamco do minim dolor magna. Ipsum eu
|
||||
minim quis laborum do dolore labore eiusmod et. Ullamco
|
||||
officia velit anim. Exercitation voluptate reprehenderit ex et
|
||||
do eu fugiat tempor do cillum ad.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Cupidatat consectetur excepteur commodo laborum incididunt
|
||||
laboris minim dolore ut ipsum dolor ullamco culpa aliquip.
|
||||
Cillum proident quis consectetur voluptate labore nisi Lorem
|
||||
pariatur in esse. Amet ipsum mollit officia fugiat Lorem ipsum
|
||||
elit officia. Esse reprehenderit magna quis irure sit
|
||||
consectetur dolore sunt mollit aliquip eiusmod voluptate amet.
|
||||
Ex irure culpa ea cupidatat nulla ea labore aute occaecat
|
||||
consequat consectetur cillum amet. Velit ad do occaecat non
|
||||
elit quis. Amet id reprehenderit ullamco amet tempor deserunt
|
||||
exercitation elit consectetur minim aliqua. Cillum do aliquip
|
||||
do ea ipsum veniam deserunt in ipsum pariatur nisi proident et
|
||||
ut deserunt.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Mollit et adipisicing velit tempor deserunt excepteur fugiat
|
||||
eiusmod adipisicing. Tempor do ex duis dolor deserunt cillum
|
||||
officia est nisi mollit fugiat. Amet duis ea laboris officia
|
||||
aliquip id sint voluptate consectetur velit elit
|
||||
reprehenderit nostrud exercitation. Ea dolore adipisicing nulla
|
||||
incididunt laboris sint commodo non mollit eiusmod. Tempor
|
||||
nulla eu laborum tempor veniam laboris consequat non consequat
|
||||
exercitation pariatur velit. Voluptate magna mollit esse
|
||||
incididunt id. Pariatur eu irure esse ullamco fugiat culpa.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
Sint dolore aliqua pariatur do mollit occaecat deserunt qui
|
||||
proident non exercitation mollit cillum culpa. Est cupidatat
|
||||
consequat ea commodo laborum labore sunt excepteur labore aute
|
||||
est amet anim. Tempor deserunt labore mollit enim officia
|
||||
aliqua occaecat. Ullamco mollit qui mollit do ex irure enim.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
{hasScrolledCguToEnd ? (
|
||||
<View style={{ gap: 10 }}>
|
||||
<GradientButton
|
||||
title="Accepter sans réserve"
|
||||
onPress={() => {
|
||||
setIsCguAccepted(true);
|
||||
handleCloseCguModal();
|
||||
}}
|
||||
/>
|
||||
<BorderGradientButton
|
||||
title="Refuser"
|
||||
onPress={handleCloseCguModal}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Fais défiler jusqu'en bas pour afficher les actions
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user