Supabase

.env

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL="https://hnmqvjnnscdkcbxcbvyu.supabase.co"
+EXPO_PUBLIC_SUPABASE_ANON_KEY= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhubXF2am5uc2Nka2NieGNidnl1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTEyOTgxMjMsImV4cCI6MjAyNjg3NDEyM30.xjzSaG22KLkzskY4U3NaohE_RLTLTkeTW_2qD5RFPUc"

.env.sample

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL=
+EXPO_PUBLIC_SUPABASE_ANON_KEY=

.gitignore

@@ -34,8 +34,43 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# @generated expo-cli sync-b5df6a44d8735348b729920a7406b633cfb74d4c
 # The following patterns were generated by expo-cli
 
-expo-env.d.ts
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
 # @end expo-cli

app.json

@@ -45,7 +45,7 @@
       "policy": "appVersion"
     },
     "updates": {
-      "url": "https://u.expo.dev/a85a4ec3-52c3-42a4-9158-fa4c62823448"
+      "url": "https://u.expo.dev/c60ed383-fb7e-4a56-a589-acae0e73b49f"
     },
     "owner": "cheetah-works"
   }

app/(auth)/_layout.tsx

@@ -0,0 +1,6 @@
+import { Slot } from "expo-router";
+import React from "react";
+
+export default function AuthLayout() {
+  return <Slot />;
+}

app/(auth)/login.tsx

@@ -0,0 +1,120 @@
+import { Stack } from "expo-router";
+import React, { useState } from "react";
+import { Alert, StyleSheet, TextInput, View, Text } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+import { supabase } from "../lib/supabase-client";
+
+export default function AuthPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function signInWithEmail() {
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) Alert.alert("Sign In Error", error.message);
+    setLoading(false);
+  }
+
+  async function signUpWithEmail() {
+    setLoading(true);
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) Alert.alert("Sign Up Error", error.message);
+    setLoading(false);
+  }
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ headerShown: true, title: "Residentron" }} />
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <TextInput
+          style={styles.textInput}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder="[email protected]"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <TextInput
+          style={styles.textInput}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry
+          placeholder="Password"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <TouchableOpacity
+          disabled={loading}
+          onPress={() => signInWithEmail()}
+          style={styles.buttonContainer}
+        >
+          <Text style={styles.buttonText}>SIGN IN</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.verticallySpaced}>
+        <TouchableOpacity
+          disabled={loading}
+          onPress={() => signUpWithEmail()}
+          style={styles.buttonContainer}
+        >
+          <Text style={styles.buttonText}>SIGN UP</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "powderblue",
+    paddingHorizontal: 20,
+  },
+  verticallySpaced: {
+    paddingTop: 8,
+    paddingBottom: 8,
+    alignSelf: "stretch",
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  buttonContainer: {
+    backgroundColor: "#0052cc",
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    margin: 8,
+    elevation: 4, // Add elevation for a raised effect
+  },
+  buttonText: {
+    fontSize: 18,
+    color: "#fff",
+    fontWeight: "bold",
+    alignSelf: "center",
+    textTransform: "uppercase",
+  },
+  textInput: {
+    backgroundColor: "#f0f0f0", // Light background color for input field
+    borderColor: "#ccc",
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    margin: 8,
+    width: "100%",
+  },
+});

app/(settings)/index.tsx

@@ -0,0 +1,83 @@
+import { Stack } from "expo-router";
+import React, { useEffect, useState } from "react";
+import {
+  SafeAreaView,
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from "react-native";
+
+import { supabase } from "@/app/lib/supabase-client";
+
+export default function SettingsPage() {
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    supabase.auth
+      .getUser()
+      .then(({ data: { user } }: { data: { user: any } }) => {
+        if (user) {
+          setUser(user);
+        } else {
+          Alert.alert("Error Accessing User");
+        }
+      });
+  }, []);
+
+  const doLogout = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      Alert.alert("Error Signing Out User", error.message);
+    }
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Stack.Screen options={{ headerShown: true, title: "Settings" }} />
+      <View style={{ padding: 16 }}>
+        <Text>{JSON.stringify(user, null, 2)}</Text>
+        <TouchableOpacity onPress={doLogout} style={styles.buttonContainer}>
+          <Text style={styles.buttonText}>LOGOUT</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 40,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: "stretch",
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  buttonContainer: {
+    backgroundColor: "#000968",
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    margin: 8,
+  },
+  buttonText: {
+    fontSize: 18,
+    color: "#fff",
+    fontWeight: "bold",
+    alignSelf: "center",
+    textTransform: "uppercase",
+  },
+  textInput: {
+    borderColor: "#000968",
+    borderRadius: 4,
+    borderStyle: "solid",
+    borderWidth: 1,
+    padding: 12,
+    margin: 8,
+  },
+});

app/(tabs)/account.tsx

@@ -1,15 +1,18 @@
 import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
-import React, { useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import {
   Text,
   TouchableOpacity,
-  ScrollView,
   StyleSheet,
+  Alert,
+  ScrollView,
   Button,
 } from "react-native";
 
 import AccountSheet from "../../components/bottomSheet";
 
+import { supabase } from "@/app/lib/supabase-client";
+
 //TODO: add a notification icon
 //TODO: add a profile icon
 //TODO: details grids of profile picture, name, email, phone number, address, and edit button
@@ -22,12 +25,31 @@
   const { dismiss } = useBottomSheetModal();
   const handleOpenPress = () => bottomSheetRef.current?.present();
 
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    supabase.auth
+      .getUser()
+      .then(({ data: { user } }: { data: { user: any } }) => {
+        if (user) {
+          setUser(user);
+        } else {
+          Alert.alert("Error Accessing User");
+        }
+      });
+  }, []);
+
+  const doLogout = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      Alert.alert("Error Signing Out User", error.message);
+    }
+  };
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
         <Text style={styles.buttonText}>Personal Details</Text>
       </TouchableOpacity>
-
       <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
         <Text style={styles.buttonText}>Transactions</Text>
       </TouchableOpacity>
@@ -43,10 +65,9 @@
       <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
         <Text style={styles.buttonText}>Calendar</Text>
       </TouchableOpacity>
-
-      {/*        <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
-        <Text style={styles.buttonText}>  Edit Access</Text>
-      </TouchableOpacity> */}
+      <TouchableOpacity onPress={doLogout} style={styles.button}>
+        <Text style={styles.buttonText}>LOGOUT</Text>
+      </TouchableOpacity>
 
       <Button title="Dismiss" onPress={() => dismiss()} />