From efe9928752490d5ccaf67eccf93f1407133838e8 Mon Sep 17 00:00:00 2001
From: Anthony RICHARD <Anthony.RICHARD@etu.uca.fr>
Date: Wed, 15 Jan 2025 15:26:28 +0100
Subject: [PATCH] add text and button

---
 app/(auth)/_layout.tsx          |   4 +-
 app/(auth)/login.tsx            |  42 ++++++++---
 app/_layout.tsx                 |   2 +
 components/BackButton.tsx       |   2 +-
 components/ExerciceOverview.tsx |   2 +-
 components/Screen.tsx           |   8 ---
 components/form/LoginForm.tsx   | 120 +++++++++++++++-----------------
 components/form/SigninForm.tsx  |   2 +-
 components/ui/Button.tsx        |  17 +++++
 components/ui/Screen.tsx        |  13 ++++
 components/ui/Text.tsx          |  27 +++++++
 generate-react-cli.json         |   4 +-
 tailwind.config.js              |   2 +-
 13 files changed, 158 insertions(+), 87 deletions(-)
 delete mode 100644 components/Screen.tsx
 create mode 100644 components/ui/Button.tsx
 create mode 100644 components/ui/Screen.tsx
 create mode 100644 components/ui/Text.tsx

diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index df9c4da..0a21bab 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -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>
   );
diff --git a/app/(auth)/login.tsx b/app/(auth)/login.tsx
index 39fc3c6..33c338a 100644
--- a/app/(auth)/login.tsx
+++ b/app/(auth)/login.tsx
@@ -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>
-        </Screen>
-      </SafeAreaView>
+    <Screen>
+      <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>
 
     // <Screen>
     //   <Box className="h-full justify-center">
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 1c3ec19..887d66a 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -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();
 
diff --git a/components/BackButton.tsx b/components/BackButton.tsx
index 1fdbd3b..df396be 100644
--- a/components/BackButton.tsx
+++ b/components/BackButton.tsx
@@ -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 = {
diff --git a/components/ExerciceOverview.tsx b/components/ExerciceOverview.tsx
index 5714d17..9288e46 100644
--- a/components/ExerciceOverview.tsx
+++ b/components/ExerciceOverview.tsx
@@ -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() {
diff --git a/components/Screen.tsx b/components/Screen.tsx
deleted file mode 100644
index 23919f9..0000000
--- a/components/Screen.tsx
+++ /dev/null
@@ -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>;
-}
diff --git a/components/form/LoginForm.tsx b/components/form/LoginForm.tsx
index a58f45c..0406cfb 100644
--- a/components/form/LoginForm.tsx
+++ b/components/form/LoginForm.tsx
@@ -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>
   );
 }
diff --git a/components/form/SigninForm.tsx b/components/form/SigninForm.tsx
index 83ec102..955b4d2 100644
--- a/components/form/SigninForm.tsx
+++ b/components/form/SigninForm.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonText, ButtonIcon } from "../ui/button";
+import { Button, ButtonText, ButtonIcon } from "../ui/Button";
 import {
   FormControl,
   FormControlLabel,
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 0000000..b753b7c
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -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;
diff --git a/components/ui/Screen.tsx b/components/ui/Screen.tsx
new file mode 100644
index 0000000..f3773b5
--- /dev/null
+++ b/components/ui/Screen.tsx
@@ -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>
+  );
+}
diff --git a/components/ui/Text.tsx b/components/ui/Text.tsx
new file mode 100644
index 0000000..98516a2
--- /dev/null
+++ b/components/ui/Text.tsx
@@ -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;
diff --git a/generate-react-cli.json b/generate-react-cli.json
index 703e18e..43420a0 100644
--- a/generate-react-cli.json
+++ b/generate-react-cli.json
@@ -4,11 +4,11 @@
   "testLibrary": "Testing Library",
   "component": {
     "default": {
-      "path": "src/components",
+      "path": "/components",
       "withStyle": true,
       "withTest": true,
       "withStory": true,
       "withLazy": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 38f7798..572e765 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: {},