logout button & start of environment API requesting

app/components/EnvironmentCard.tsx

@@ -0,0 +1,19 @@
+import { View, StyleSheet, Text, Pressable } from "react-native";
+
+
+export default function EnvironmentCard() {
+    return (
+        <Pressable onPress={() => console.log('Environment card pressed')} style={styles.container}>
+            <Text>I'm pressable!</Text>
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#fff',
+        padding: 16,
+        margin: 8,
+        borderRadius: 8,
+    },
+});

app/components/LoginForm.tsx

@@ -5,7 +5,7 @@ import { useAuth } from '../context/AuthContext';
 
 /**
  * LoginForm component handles user authentication with a Portainer instance.
- * It includes a multi-step form that first validates the domain URL,
+ * It includes a multi-step form that first validates thes domain URL,
  * then allows entering username/password credentials.
  */
 export default function LoginForm() {

app/components/LogoutButton.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Text, StyleSheet, Animated, Pressable } from "react-native";
+import { useAuth } from '../context/AuthContext';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function LogoutButton() {
+    const { clearAuth } = useAuth();
+    const [scale] = useState(new Animated.Value(1));
+
+    const handlePress = async () => {
+        // Animate button press
+        Animated.sequence([
+            Animated.spring(scale, {
+                toValue: 0.95,
+                useNativeDriver: true,
+            }),
+            Animated.spring(scale, {
+                toValue: 1,
+                useNativeDriver: true,
+            })
+        ]).start();
+
+        await clearAuth();
+    };
+
+    return (
+        <Animated.View style={{ transform: [{ scale }] }}>
+            <Pressable 
+                onPress={handlePress}
+                style={({ pressed }) => [
+                    styles.button,
+                    pressed && styles.buttonPressed
+                ]}
+            >
+                <Ionicons name="log-out-outline" size={20} color="#fff" />
+                <Text style={styles.buttonText}>Logout</Text>
+            </Pressable>
+        </Animated.View>
+    );
+}
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#dc3545',
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    buttonPressed: {
+        backgroundColor: '#c82333',
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});

app/index.tsx

@@ -1,5 +1,12 @@
-import { Text, View } from "react-native";
+import { Text, View, ScrollView } from "react-native";
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import { useState, useEffect } from "react";
+
 import LoginForm from "./components/LoginForm";
+import LogoutButton from "./components/LogoutButton";
+import EnvironmentCard from "./components/EnvironmentCard";
+
+
 import { AuthProvider } from "./context/AuthContext";
 import { useAuth } from "./context/AuthContext";
 
@@ -16,6 +23,32 @@ export default function Index() {
 
 function MainContent() {
   const { isAuthenticated, domain, username, authData } = useAuth();
+  const [environmentData, setEnvironmentData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchEnvironmentData = async () => {
+      if (!isAuthenticated) return;
+      
+      setIsLoading(true);
+      try {
+        const response = await fetch('https://portainer.evansteele.net/api/endpoints', {
+          headers: {
+            'Authorization': `Bearer ${authData.jwt}`
+          }
+        });
+        const data = await response.json();
+        setEnvironmentData(data);
+      } catch (err : any) {
+        setError(err.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchEnvironmentData();
+  }, [isAuthenticated]);
 
   if (!isAuthenticated) {
     return (
@@ -26,11 +59,13 @@ function MainContent() {
   }
 
   return (
-    <View style={{ flex: 1, padding: 16, width: '100%' }}>
-      <Text>Connected to: {domain}</Text>
-      <Text>User: {username}</Text>
-      <Text>Debug authData: {JSON.stringify(authData, null, 2)}</Text>
-      {/* Use authData as needed */}
-    </View>
+    <SafeAreaProvider>
+    <SafeAreaView style={{ flex: 1, padding: 16, width: '100%' }}>
+    <ScrollView>
+        <EnvironmentCard/>
+      </ScrollView>
+    </SafeAreaView>
+    <LogoutButton />
+    </SafeAreaProvider>
   );
 }