Create Login page and add images

src/FLAD/App.tsx

@@ -8,9 +8,6 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Animated, Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native';
 import Card from './components/Card';
-import Login from './pages/login';
-import Spot from './pages/spot';
-
 
 
 export default function App() {

src/FLAD/components/CardMusic.tsx

@@ -8,53 +8,53 @@ type CustomCardMusic = { //Props
 }
 
 export default function CardMusic(CBP: CustomCardMusic) {
-    const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
+  const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
-    return (
+  return (
-      <View style={styles.container}>
+    <View style={styles.container}>
-          <View style={styles.imageContainer}>
+        <View style={styles.imageContainer}>
-              <Image source={source} style={styles.image}/>
+            <Image source={source} style={styles.image}/>
-          </View>
+        </View>
-          <View style={styles.textContainer}>
+        <View style={styles.textContainer}>
-              <Text style={styles.title}>{CBP.title}</Text>
+            <Text style={styles.title}>{CBP.title}</Text>
-              <Text style={styles.description}>{CBP.description}</Text>
+            <Text style={styles.description}>{CBP.description}</Text>
-          </View>
+        </View>
-      </View>
+    </View>
-    );
+  );
-  }
+}
-  
-  const styles = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      margin: 20
-    },
-    imageContainer: {
-      width: 80,
-      height: 80,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: 20
-    },
-    image: {
-      width: '100%',
-      height: '100%',
-      borderRadius: 10
 
-    },
+const styles = StyleSheet.create({
-    textContainer: {
+  container: {
-      flex: 1,
+    flexDirection: 'row',
-      alignItems: 'flex-start',
+    alignItems: 'center',
-      justifyContent: 'center',
+    justifyContent: 'space-between',
-    },
+    margin: 20
-    title: {
+  },
-      fontWeight: 'bold',
+  imageContainer: {
-      color: 'white',
+    width: 80,
-      fontSize: 20,
+    height: 80,
-      marginBottom: 10
+    alignItems: 'center',
-    },
+    justifyContent: 'center',
-    description: {
+    marginRight: 20
-      color: 'white',
+  },
-      fontSize: 16
+  image: {
-    }
+    width: '100%',
-  });
+    height: '100%',
+    borderRadius: 10
+
+  },
+  textContainer: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+    color: 'white',
+    fontSize: 20,
+    marginBottom: 10
+  },
+  description: {
+    color: 'white',
+    fontSize: 16
+  }
+});

src/FLAD/navigation/Navigation.tsx

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import Home from '../screens/spot';
 import FavoritePage from '../screens/favoritePage';
+import LoginPage from '../screens/loginPage';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -20,7 +21,7 @@ export default function StackNavigation() {
           />
           <Stack.Screen 
             name="Favoris" 
-            component={FavoritePage} 
+            component={LoginPage} 
             options={{ headerShown: false }}
           />
           <Stack.Screen 

src/FLAD/package.json

@@ -13,10 +13,10 @@
     "@react-navigation/native": "^6.1.3",
     "@react-navigation/native-stack": "^6.9.8",
     "@react-navigation/stack": "^6.3.12",
-    "expo": "~47.0.12",
-    "expo-cli": "^6.2.1",
     "axios": "^1.2.6",
+    "expo": "~47.0.12",
     "expo-auth-session": "~3.8.0",
+    "expo-cli": "^6.3.0",
     "expo-haptics": "~12.0.1",
     "expo-linear-gradient": "~12.0.1",
     "expo-location": "~15.0.1",

src/FLAD/screens/loginPage.tsx

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput } from 'react-native';
+
+export default function loginPage() {
+    return (
+        <View style={styles.container}>
+            <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
+                <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                <Text style={styles.text}>Se connecter</Text>
+                <TextInput placeholder='E-Mail' style={styles.input}>
+                    {/* <FontAwesomeIcon icon="fa-solid fa-lock" /> */}
+                </TextInput>
+            </ImageBackground>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create ({
+    container: {
+        flex: 1,    
+    },
+    image: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    imageLogo: {
+        width: 200,
+        height: 100,
+        alignSelf: 'center',
+        marginTop: 50
+    },
+    input: {
+        width: 300,
+        height: 30,
+        borderRadius: 10,
+        color: 'black',
+        backgroundColor: 'white',
+        fontSize: 10,
+        alignSelf: 'center'
+
+    },
+    text: {
+        fontWeight: 'bold',
+        fontSize: 20,
+        alignSelf: 'center',
+        color: 'white'
+    }
+})