Optifit
/
Mobile
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add text and button

Browse Source
pull/5/head
Anthony RICHARD 5 months ago
parent 35d32527e2
commit efe9928752
13 changed files with 158 additions and 87 deletions
Show Stats Download Patch File Download Diff File

4
app/(auth)/_layout.tsx
Unescape View File

@ -2,10 +2,10 @@ import { Stack } from "expo-router";
export default function AuthLayout() {
return (
<Stack>
<Stack initialRouteName="login">
<Stack.Screen name="login" options={{ headerShown: false }} />
<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>
);

38
app/(auth)/login.tsx
Unescape View File

@ -1,6 +1,7 @@
import Screen from "@/components/Screen";
import {SafeAreaView, Text} from "react-native";
import React from "react";
import Screen from "@/components/ui/Screen";
import CustomText from "@/components/ui/Text";
import { Link } from "expo-router";
import { View } from "react-native";
const socialNetworkButtons: ISocialNetworkButtons[] = [
{ icon: "instagram" },
@ -14,11 +15,36 @@ interface ISocialNetworkButtons {
export default function LoginPage() {
return (
<SafeAreaView>
<Screen>
<Text>Tmp</Text>
<View className="flex flex-col gap-4">
<View className="flex flex-col gap-2">
<CustomText center={true} size="3xl" bold={true}>
Connexion à Optifit
</CustomText>
<CustomText center={true} size="lg">
Personnalise ton expérience du sport avec Optifit, ton nouveau coach
IA.
</CustomText>
</View>
{/* <LoginForm /> */}
<View className="flex flex-col gap-2">
<CustomText center={true}>
Tu n'as pas encore de compte ?
<Link href="/(auth)/sign-in">
<CustomText bold={true} isLink={true}>
{" "}
Inscris-toi !
</CustomText>
</Link>
</CustomText>
<Link href="/reset-password">
<CustomText center={true} bold={true} isLink={true}>
Mot de passe oublié ?
</CustomText>
</Link>
</View>
</View>
</Screen>
</SafeAreaView>
// <Screen>
// <Box className="h-full justify-center">

2
app/_layout.tsx
Unescape View File

@ -6,6 +6,8 @@ import { SessionProvider } from "@/ctx";
import {Slot, Stack} from "expo-router";
import "@/global.css";
import "@/global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

2
components/BackButton.tsx
Unescape View File

@ -1,5 +1,5 @@
import { AntDesign } from "@expo/vector-icons";
import { Button, ButtonActions } from "./ui/button";
import { Button, ButtonActions } from "./ui/Button";
import { Href, Link } from "expo-router";
type props = {

2
components/ExerciceOverview.tsx
Unescape View File

@ -3,7 +3,7 @@ import { Text } from "./ui/text";
import { Box } from "./ui/box";
import { ImageBackground } from "react-native";
import { HStack } from "@/components/ui/hstack";
import { Button } from "@/components/ui/button";
import { Button } from "@/components/ui/Button";
import { AntDesign } from "@expo/vector-icons";
export default function ExerciceOverview() {

8
components/Screen.tsx
Unescape View File

@ -1,8 +0,0 @@
import { PropsWithChildren } from "react";
import { View } from "react-native";
type props = PropsWithChildren;
export default function Screen({ children }: props) {
return <View className={"h-full p-4"}>{children}</View>;
}

120
components/form/LoginForm.tsx
Unescape View File

@ -1,8 +1,6 @@
import React from "react";
import { Button, ButtonIcon, ButtonText } from "../ui/button";
import { ArrowRightIcon } from "../ui/icon";
import { Link } from "expo-router";
import {Text} from "react-native";
import { Text } from "react-native";
import Button from "../ui/Button";
export default function LoginForm() {
const REQUIRED_ERROR = "Au moins un des champs requis est vide !";
const [emailValue, setEmailValue] = React.useState("");
@ -18,64 +16,60 @@ export default function LoginForm() {
};
return (
// <FormControl className="gap-4" isInvalid={isFormInvalid}>
// <FormControl isInvalid={isEmailInvalid}>
// <FormControlLabel>
// <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
// </FormControlLabel>
// <Input variant="outline" size="xl">
// <InputIcon color="black" as={MailIcon} />
// <InputField
// value={emailValue}
// onChangeText={setEmailValue}
// placeholder="Test@optifit.com"
// />
// </Input>
// </FormControl>
// <FormControl isInvalid={isPasswordInvalid}>
// <FormControlLabel>
// <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
// </FormControlLabel>
// <PasswordField value={passwordValue} onChangeText={setPasswordValue} />
// </FormControl>
// <VStack>
// <FormError text={REQUIRED_ERROR} />
// <Button size="xl" onPress={handleSubmit}>
// <ButtonText>Se connecter</ButtonText>
// <ButtonIcon as={ArrowRightIcon} />
// </Button>
// </VStack>
// </FormControl>
// <FormControl className="gap-4">
// <FormControl>
// <FormControlLabel>
// <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
// </FormControlLabel>
// <Input variant="outline" size="xl">
// <InputIcon color="black" as={MailIcon} />
// <InputField placeholder="Test@optifit.com" />
// </Input>
// </FormControl>
// <FormControl>
// <FormControlLabel>
// <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
// </FormControlLabel>
// <PasswordField />
// </FormControl>
// <VStack>
// <FormError text={"REQUIRED_ERROR"} />
// <Button size="xl">
// <ButtonText>Se connecter</ButtonText>
// <ButtonIcon as={ArrowRightIcon} />
// </Button>
// </VStack>
// </FormControl>
// <Link href={"/sign-in"} asChild>
// <Button size="xl" onPress={handleSubmit}>
// <ButtonText>Se connecter</ButtonText>
// <ButtonIcon as={ArrowRightIcon} />
// </Button>
// </Link>
<Text>sdf</Text>
<FormControl className="gap-4" isInvalid={isFormInvalid}>
<FormControl isInvalid={isEmailInvalid}>
<FormControlLabel>
<FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
</FormControlLabel>
<Input variant="outline" size="xl">
<InputIcon color="black" as={MailIcon} />
<InputField
value={emailValue}
onChangeText={setEmailValue}
placeholder="Test@optifit.com"
/>
</Input>
</FormControl>
<FormControl isInvalid={isPasswordInvalid}>
<FormControlLabel>
<FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
</FormControlLabel>
<PasswordField value={passwordValue} onChangeText={setPasswordValue} />
</FormControl>
<VStack>
<FormError text={REQUIRED_ERROR} />
<Button size="xl" onPress={handleSubmit}>
<ButtonText>Se connecter</ButtonText>
<ButtonIcon as={ArrowRightIcon} />
</Button>
</VStack>
</FormControl>
<FormControl className="gap-4">
<FormControl>
<FormControlLabel>
<FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
</FormControlLabel>
<Input variant="outline" size="xl">
<InputIcon color="black" as={MailIcon} />
<InputField placeholder="Test@optifit.com" />
</Input>
</FormControl>
<FormControl>
<FormControlLabel>
<FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
</FormControlLabel>
<PasswordField />
</FormControl>
<VStack>
<FormError text={"REQUIRED_ERROR"} />
<Button size="xl">
<ButtonText>Se connecter</ButtonText>
<ButtonIcon as={ArrowRightIcon} />
</Button>
</VStack>
</FormControl>
<Link href={"/sign-in"} asChild>
<Button title="Se connecter"/>
</Link>
);
}

2
components/form/SigninForm.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, ButtonText, ButtonIcon } from "../ui/button";
import { Button, ButtonText, ButtonIcon } from "../ui/Button";
import {
FormControl,
FormControlLabel,

17
components/ui/Button.tsx
Unescape View File

@ -0,0 +1,17 @@
import React from "react";
import { TouchableOpacity, View } from "react-native";
import CustomText from "./Text";
type props = { title: string; size: string };
const Button = ({ title, size }: props) => (
<View className="bg-black rounded-3xl">
<TouchableOpacity className="p-4">
<CustomText center={true} color="white" size={size}>
{title}
</CustomText>
</TouchableOpacity>
</View>
);
export default Button;

13
components/ui/Screen.tsx
Unescape View File

@ -0,0 +1,13 @@
import { PropsWithChildren } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
type props = PropsWithChildren;
export default function Screen({ children }: props) {
return (
<SafeAreaView>
<View className={"h-full p-4"}>{children}</View>
</SafeAreaView>
);
}

27
components/ui/Text.tsx
Unescape View File

@ -0,0 +1,27 @@
import { PropsWithChildren } from "react";
import { Text } from "react-native";
type props = PropsWithChildren & {
center?: boolean;
color?: string;
size?: string;
bold?: boolean;
isLink?: boolean;
};
const CustomText = ({ children, center, color, size, bold, isLink }: props) => {
const className =
"text-" +
(size ?? "md") +
" " +
(center ? "text-center" : "") +
" " +
("text-" + (color ?? "black ")) +
" " +
(bold ? "font-bold" : "") +
" " +
(isLink ? "text-orange-500 underline" : "");
return <Text className={className}>{children}</Text>;
};
export default CustomText;

2
generate-react-cli.json
Unescape View File

@ -4,7 +4,7 @@
"testLibrary": "Testing Library",
"component": {
"default": {
"path": "src/components",
"path": "/components",
"withStyle": true,
"withTest": true,
"withStory": true,

2
tailwind.config.js
Unescape View File

@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"],
content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},

Write Preview
Loading…
Cancel
Save