parent
4621a3012e
commit
668babdef5
@ -1,46 +0,0 @@
|
||||
import React from "react";
|
||||
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
||||
import { Link, Tabs } from "expo-router";
|
||||
import { Pressable } from "react-native";
|
||||
|
||||
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
|
||||
function TabBarIcon(props: {
|
||||
name: React.ComponentProps<typeof FontAwesome>["name"];
|
||||
color: string;
|
||||
}) {
|
||||
return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
|
||||
}
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Tab One",
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
headerRight: () => (
|
||||
<Link href="/modal" asChild>
|
||||
<Pressable>
|
||||
{({ pressed }) => (
|
||||
<FontAwesome
|
||||
name="info-circle"
|
||||
size={25}
|
||||
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
</Link>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="two"
|
||||
options={{
|
||||
title: "Tab Two",
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import { Button, StyleSheet } from "react-native";
|
||||
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { View } from "react-native";
|
||||
import { useSession } from "@/ctx";
|
||||
|
||||
export default function TabOneScreen() {
|
||||
const { signOut, session } = useSession();
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Tab One</Text>
|
||||
<Text>Welcome, {session}</Text>
|
||||
<View style={styles.separator} />
|
||||
<Button
|
||||
title="Sign Out"
|
||||
onPress={() => {
|
||||
// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
|
||||
signOut();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: "80%",
|
||||
},
|
||||
});
|
||||
@ -1,64 +0,0 @@
|
||||
import { Text } from "../../../components/ui/text";
|
||||
import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
ButtonIcon,
|
||||
ButtonText,
|
||||
} from "../../../components/ui/button";
|
||||
import { VStack } from "../../../components/ui/vstack";
|
||||
import React from "react";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
LockIcon,
|
||||
MailIcon,
|
||||
MessageCircleIcon,
|
||||
} from "../../../components/ui/icon";
|
||||
import BackButton from "../../../components/BackButton";
|
||||
import Screen from "../../../components/Screen";
|
||||
import { Heading } from "../../../components/ui/heading";
|
||||
import { Link } from "expo-router";
|
||||
|
||||
const resetButtons: IResetButton[] = [
|
||||
{ icon: MailIcon, text: "Envoyer par email" },
|
||||
{ icon: LockIcon, text: "Envoyer par 2FA" },
|
||||
{ icon: MessageCircleIcon, text: "Envoyer par SMS" },
|
||||
];
|
||||
|
||||
interface IResetButton {
|
||||
icon: React.ElementType;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<Screen>
|
||||
<BackButton link={"/LoginPage"} />
|
||||
<VStack space="2xl">
|
||||
<VStack space="sm">
|
||||
<Heading className="text-center" size="3xl">
|
||||
Réinitialisation de ton mot de passe
|
||||
</Heading>
|
||||
<Text size="lg" className="text-center">
|
||||
Selectionne une méthode pour recevoir ton code temporaire
|
||||
</Text>
|
||||
</VStack>
|
||||
<ButtonGroup space="xl">
|
||||
{resetButtons.map((resetButton) => (
|
||||
<Link key={resetButton.text} href={"/CodeSentPage"} asChild>
|
||||
<Button
|
||||
className="justify-between"
|
||||
size="2xl"
|
||||
action="primary"
|
||||
variant="outline"
|
||||
>
|
||||
<ButtonIcon as={resetButton.icon} />
|
||||
<ButtonText>{resetButton.text}</ButtonText>
|
||||
<ButtonIcon as={ArrowRightIcon} />
|
||||
</Button>
|
||||
</Link>
|
||||
))}
|
||||
</ButtonGroup>
|
||||
</VStack>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function TabTwoScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Tab Two</Text>
|
||||
<View style={styles.separator} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: "80%",
|
||||
},
|
||||
});
|
||||
@ -1,25 +1,15 @@
|
||||
import { Redirect, Stack } from "expo-router";
|
||||
import { Slot, Stack} from "expo-router";
|
||||
|
||||
import { useSession } from "@/ctx";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import {SafeAreaView, View} from "react-native";
|
||||
|
||||
export default function AppLayout() {
|
||||
const { session, isLoading } = useSession();
|
||||
// You can keep the splash screen open, or render a loading screen like we do here.
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
export default function AuthLayout() {
|
||||
|
||||
// Only require authentication within the (app) group's layout as users
|
||||
// need to be able to access the (auth) group and sign in again.
|
||||
if (!session) {
|
||||
return <Redirect href="/login" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="code-send" options={{headerShown: false}}/>
|
||||
<Stack.Screen name="sign-in" options={{headerShown: false}}/>
|
||||
<Stack.Screen name="login" options={{headerShown: false}}/>
|
||||
<Stack.Screen name="reset-password" options={{headerShown: false}}/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { Platform, StyleSheet } from "react-native";
|
||||
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function ModalScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Modal</Text>
|
||||
<View style={styles.separator} />
|
||||
|
||||
{/* Use a light status bar on iOS to account for the black space above the modal */}
|
||||
<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: "80%",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,67 @@
|
||||
import {Text} from "@/components/ui/text";
|
||||
import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
ButtonIcon,
|
||||
ButtonText,
|
||||
} from "@/components/ui/button";
|
||||
import {VStack} from "@/components/ui/vstack";
|
||||
import React from "react";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
LockIcon,
|
||||
MailIcon,
|
||||
MessageCircleIcon,
|
||||
} from "@/components/ui/icon";
|
||||
import BackButton from "@/components/BackButton";
|
||||
import Screen from "@/components/Screen";
|
||||
import {Heading} from "@/components/ui/heading";
|
||||
import {Link} from "expo-router";
|
||||
import {SafeAreaView} from "react-native";
|
||||
|
||||
const resetButtons: IResetButton[] = [
|
||||
{icon: MailIcon, text: "Envoyer par email"},
|
||||
{icon: LockIcon, text: "Envoyer par 2FA"},
|
||||
{icon: MessageCircleIcon, text: "Envoyer par SMS"},
|
||||
];
|
||||
|
||||
interface IResetButton {
|
||||
icon: React.ElementType;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Screen>
|
||||
<BackButton link={"/login"}/>
|
||||
<VStack space="2xl">
|
||||
<VStack space="sm">
|
||||
<Heading className="text-center" size="3xl">
|
||||
Réinitialisation de ton mot de passe
|
||||
</Heading>
|
||||
<Text size="lg" className="text-center">
|
||||
Selectionne une méthode pour recevoir ton code temporaire
|
||||
</Text>
|
||||
</VStack>
|
||||
<ButtonGroup space="xl">
|
||||
{resetButtons.map((resetButton) => (
|
||||
<Link key={resetButton.text} href={"/sign-in"} asChild>
|
||||
<Button
|
||||
className="justify-between"
|
||||
size="2xl"
|
||||
action="primary"
|
||||
variant="outline"
|
||||
>
|
||||
<ButtonIcon as={resetButton.icon}/>
|
||||
<ButtonText>{resetButton.text}</ButtonText>
|
||||
<ButtonIcon as={ArrowRightIcon}/>
|
||||
</Button>
|
||||
</Link>
|
||||
))}
|
||||
</ButtonGroup>
|
||||
</VStack>
|
||||
</Screen>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
import { Text } from "../../../components/ui/text";
|
||||
import { VStack } from "../../../components/ui/vstack";
|
||||
import { Box } from "../../../components/ui/box";
|
||||
import { HStack } from "../../../components/ui/hstack";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { VStack } from "@/components/ui/vstack";
|
||||
import { Box } from "@/components/ui/box";
|
||||
import { HStack } from "@/components/ui/hstack";
|
||||
import React from "react";
|
||||
import SigninForm from "../../../components/form/SigninForm";
|
||||
import Screen from "../../../components/Screen";
|
||||
import { Heading } from "../../../components/ui/heading";
|
||||
import SigninForm from "@/components/form/SigninForm";
|
||||
import Screen from "@/components/Screen";
|
||||
import { Heading } from "@/components/ui/heading";
|
||||
import { Link } from "expo-router";
|
||||
import { LinkText } from "../../../components/ui/link";
|
||||
import { LinkText } from "@/components/ui/link";
|
||||
|
||||
export default function SigninPage() {
|
||||
return (
|
||||
@ -1,9 +0,0 @@
|
||||
import { Stack } from "expo-router";
|
||||
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="ProfileScreen" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import { Stack } from "expo-router";
|
||||
|
||||
export default function RootLayout() {
|
||||
export default function RootoLayout() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="HomeScreen" />
|
||||
<Stack.Screen name="index" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { Stack } from "expo-router";
|
||||
|
||||
export default function KRootLayout() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="profile" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import {Redirect, Tabs} from "expo-router";
|
||||
import {useSession} from "@/ctx";
|
||||
import {Text} from "react-native"
|
||||
|
||||
export default function TabBarLayout() {
|
||||
const { session, isLoading } = useSession();
|
||||
|
||||
// You can keep the splash screen open, or render a loading screen like we do here.
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
|
||||
// Only require authentication within the (app) group's layout as users
|
||||
// need to be able to access the (auth) group and sign in again.
|
||||
if (!session) {
|
||||
// On web, static rendering will stop here as the user is not authenticated
|
||||
// in the headless Node process that the pages are rendered in.
|
||||
return <Redirect href="/reset-password" />;
|
||||
}
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
}}
|
||||
initialRouteName={"(home)"}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="(home)"
|
||||
options={{
|
||||
title: 'Home',
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="(profile)"
|
||||
options={{
|
||||
title: 'Profile',
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import { ScrollViewStyleReset } from 'expo-router/html';
|
||||
|
||||
// This file is web-only and used to configure the root HTML for every
|
||||
// web page during static rendering.
|
||||
// The contents of this function only run in Node.js environments and
|
||||
// do not have access to the DOM or browser APIs.
|
||||
export default function Root({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
{/*
|
||||
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
|
||||
*/}
|
||||
<ScrollViewStyleReset />
|
||||
|
||||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
|
||||
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
|
||||
{/* Add any additional <head> elements that you want globally available on web... */}
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBackground = `
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #000;
|
||||
}
|
||||
}`;
|
||||
@ -1,106 +1,106 @@
|
||||
import HomeScreen from "@/app/(home)/home";
|
||||
import {
|
||||
AntDesign,
|
||||
Entypo,
|
||||
MaterialCommunityIcons,
|
||||
MaterialIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import ProfileScreen from "@/app/(profile)/profile";
|
||||
import React from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
|
||||
export default function NavBar() {
|
||||
const BottomTabNavigator = createBottomTabNavigator();
|
||||
return (
|
||||
<BottomTabNavigator.Navigator
|
||||
initialRouteName="Home"
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarShowLabel: false,
|
||||
tabBarStyle: {
|
||||
height: 75,
|
||||
backgroundColor: "#f9f9f9",
|
||||
},
|
||||
tabBarActiveTintColor: "black",
|
||||
tabBarInactiveTintColor: "#8e8e93",
|
||||
tabBarItemStyle: {
|
||||
borderRadius: 50,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BottomTabNavigator.Screen
|
||||
name="Home"
|
||||
component={HomeScreen}
|
||||
options={{
|
||||
tabBarIcon: ({ color, size, focused }) => (
|
||||
<MaterialIcons
|
||||
name="home"
|
||||
color={focused ? "black" : color}
|
||||
size={focused ? size + 4 : size}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<BottomTabNavigator.Screen
|
||||
name="Exercice"
|
||||
component={ProfileScreen}
|
||||
options={{
|
||||
tabBarIcon: ({ color, size, focused }) => (
|
||||
<MaterialCommunityIcons
|
||||
name="dumbbell"
|
||||
size={focused ? size + 4 : size}
|
||||
color={focused ? "black" : color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<BottomTabNavigator.Screen
|
||||
name="Add"
|
||||
component={ProfileScreen}
|
||||
options={{
|
||||
tabBarIcon: ({ color, size, focused }) => (
|
||||
<Entypo
|
||||
name="plus"
|
||||
size={focused ? size + 6 : size}
|
||||
color="white"
|
||||
/>
|
||||
),
|
||||
tabBarItemStyle: {
|
||||
borderRadius: 50,
|
||||
backgroundColor: "orange",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<BottomTabNavigator.Screen
|
||||
name="Help"
|
||||
component={ProfileScreen}
|
||||
options={{
|
||||
tabBarIcon: ({ color, size, focused }) => (
|
||||
<AntDesign
|
||||
name="question"
|
||||
size={focused ? size + 2 : size} // Augmente la taille si actif
|
||||
color={focused ? "black" : color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<BottomTabNavigator.Screen
|
||||
name="Settings"
|
||||
component={ProfileScreen}
|
||||
options={{
|
||||
tabBarIcon: ({ color, size, focused }) => (
|
||||
<MaterialIcons
|
||||
name="account-circle"
|
||||
size={focused ? size + 3 : size}
|
||||
color={focused ? "black" : color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</BottomTabNavigator.Navigator>
|
||||
);
|
||||
}
|
||||
// import HomeScreen from "@/app/(tabs)/(home)/home";
|
||||
// import {
|
||||
// AntDesign,
|
||||
// Entypo,
|
||||
// MaterialCommunityIcons,
|
||||
// MaterialIcons,
|
||||
// } from "@expo/vector-icons";
|
||||
// import ProfileScreen from "@/app/(tabs)/(profile)/profile";
|
||||
// import React from "react";
|
||||
// import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
//
|
||||
// export default function NavBar() {
|
||||
// const BottomTabNavigator = createBottomTabNavigator();
|
||||
// return (
|
||||
// <BottomTabNavigator.Navigator
|
||||
// initialRouteName="Home"
|
||||
// screenOptions={{
|
||||
// headerShown: false,
|
||||
// tabBarShowLabel: false,
|
||||
// tabBarStyle: {
|
||||
// height: 75,
|
||||
// backgroundColor: "#f9f9f9",
|
||||
// },
|
||||
// tabBarActiveTintColor: "black",
|
||||
// tabBarInactiveTintColor: "#8e8e93",
|
||||
// tabBarItemStyle: {
|
||||
// borderRadius: 50,
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// <BottomTabNavigator.Screen
|
||||
// name="Home"
|
||||
// component={HomeScreen}
|
||||
// options={{
|
||||
// tabBarIcon: ({ color, size, focused }) => (
|
||||
// <MaterialIcons
|
||||
// name="home"
|
||||
// color={focused ? "black" : color}
|
||||
// size={focused ? size + 4 : size}
|
||||
// />
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
//
|
||||
// <BottomTabNavigator.Screen
|
||||
// name="Exercice"
|
||||
// component={ProfileScreen}
|
||||
// options={{
|
||||
// tabBarIcon: ({ color, size, focused }) => (
|
||||
// <MaterialCommunityIcons
|
||||
// name="dumbbell"
|
||||
// size={focused ? size + 4 : size}
|
||||
// color={focused ? "black" : color}
|
||||
// />
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
//
|
||||
// <BottomTabNavigator.Screen
|
||||
// name="Add"
|
||||
// component={ProfileScreen}
|
||||
// options={{
|
||||
// tabBarIcon: ({ color, size, focused }) => (
|
||||
// <Entypo
|
||||
// name="plus"
|
||||
// size={focused ? size + 6 : size}
|
||||
// color="white"
|
||||
// />
|
||||
// ),
|
||||
// tabBarItemStyle: {
|
||||
// borderRadius: 50,
|
||||
// backgroundColor: "orange",
|
||||
// },
|
||||
// }}
|
||||
// />
|
||||
//
|
||||
// <BottomTabNavigator.Screen
|
||||
// name="Help"
|
||||
// component={ProfileScreen}
|
||||
// options={{
|
||||
// tabBarIcon: ({ color, size, focused }) => (
|
||||
// <AntDesign
|
||||
// name="question"
|
||||
// size={focused ? size + 2 : size} // Augmente la taille si actif
|
||||
// color={focused ? "black" : color}
|
||||
// />
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
//
|
||||
// <BottomTabNavigator.Screen
|
||||
// name="Settings"
|
||||
// component={ProfileScreen}
|
||||
// options={{
|
||||
// tabBarIcon: ({ color, size, focused }) => (
|
||||
// <MaterialIcons
|
||||
// name="account-circle"
|
||||
// size={focused ? size + 3 : size}
|
||||
// color={focused ? "black" : color}
|
||||
// />
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
// </BottomTabNavigator.Navigator>
|
||||
// );
|
||||
// }
|
||||
|
||||
Loading…
Reference in new issue