Adding login and sign up pages

app/forgotpassword.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+
+const ForgotPasswordScreen: React.FC = () => {
+  const [phoneNumber, setPhoneNumber] = React.useState('');
+  const [otp, setOtp] = React.useState('');
+  const [newPassword, setNewPassword] = React.useState('');
+  const [confirmNewPassword, setConfirmNewPassword] = React.useState('');
+
+  const handleResetPassword = () => {
+    if (newPassword !== confirmNewPassword) {
+      // Passwords don't match
+      console.log('Passwords do not match');
+      return;
+    }
+
+    // Add your reset password logic here
+    console.log('Phone Number:', phoneNumber);
+    console.log('OTP:', otp);
+    console.log('New Password:', newPassword);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Forgot Password</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Phone Number"
+        onChangeText={setPhoneNumber}
+        value={phoneNumber}
+        keyboardType="phone-pad"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="OTP"
+        onChangeText={setOtp}
+        value={otp}
+        keyboardType="numeric"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="New Password"
+        onChangeText={setNewPassword}
+        value={newPassword}
+        secureTextEntry
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Re-enter New Password"
+        onChangeText={setConfirmNewPassword}
+        value={confirmNewPassword}
+        secureTextEntry
+      />
+      <TouchableOpacity style={styles.button} onPress={handleResetPassword}>
+        <Text style={styles.buttonText}>Reset Password</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  input: {
+    width: '100%',
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+  },
+  button: {
+    width: '100%',
+    height: 40,
+    backgroundColor: 'blue',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default ForgotPasswordScreen;

app/homepage.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+const Dashboard: React.FC = () => {
+  const handleNavigation = (page: string) => {
+    // Handle navigation logic here
+    console.log(`Navigating to ${page}`);
+  };
+
+  const handleFeatureClick = (feature: string) => {
+    // Handle feature click logic here
+    console.log(`Clicked on feature: ${feature}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.middleButtons}>
+        <Button title="Payment Due" onPress={() => handleFeatureClick('Payment Due')} />
+        <Button title="Visitors Update" onPress={() => handleFeatureClick('Visitors Update')} />
+        {/* Add more feature buttons as needed */}
+      </View>
+
+      <View style={styles.bottomButtons}>
+        <Button title="Home" onPress={() => handleNavigation('Home')} />
+        <Button title="Profile" onPress={() => handleNavigation('Profile')} />
+        <Button title="Settings" onPress={() => handleNavigation('Settings')} />
+        <Button title="Logout" onPress={() => handleNavigation('Logout')} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  middleButtons: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingBottom: 20,
+    width: '100%',
+  },
+});
+
+export default Dashboard;

app/login.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+
+const LoginScreen: React.FC = () => {
+  const [username, setUsername] = React.useState('');
+  const [password, setPassword] = React.useState('');
+
+  const handleLogin = () => {
+    // Add your login logic here
+    console.log('Username:', username);
+    console.log('Password:', password);
+  };
+
+  const handleForgotPassword = () => {
+    // Add your forgot password logic here
+    console.log('Forgot Password');
+  };
+
+  const handleRegister = () => {
+    // Add your register logic here
+    console.log('Register');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>RESIDENTRON</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Username"
+        onChangeText={setUsername}
+        value={username}
+        autoCapitalize="none"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        onChangeText={setPassword}
+        value={password}
+        secureTextEntry
+      />
+      <TouchableOpacity style={styles.button} onPress={handleLogin}>
+        <Text style={styles.buttonText}>Login</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={handleForgotPassword}>
+        <Text style={styles.forgotPasswordText}>Forgot Password?</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={handleRegister}>
+        <Text style={styles.registerText}>Register</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  input: {
+    width: '100%',
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+  },
+  button: {
+    width: '100%',
+    height: 40,
+    backgroundColor: 'blue',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  forgotPasswordText: {
+    marginTop: 10,
+    color: 'blue',
+  },
+  registerText: {
+    marginTop: 10,
+    color: 'blue',
+    fontWeight: 'bold',
+  },
+});
+
+export default LoginScreen;

app/myaccount.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+
+const MyAccountScreen: React.FC = () => {
+  const [fullName, setFullName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [phoneNumber, setPhoneNumber] = React.useState('');
+  const [address, setAddress] = React.useState('');
+
+  const handleSaveChanges = () => {
+    // Add your save changes logic here
+    console.log('Full Name:', fullName);
+    console.log('Email:', email);
+    console.log('Phone Number:', phoneNumber);
+    console.log('Address:', address);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>My Account</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Full Name"
+        onChangeText={setFullName}
+        value={fullName}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        onChangeText={setEmail}
+        value={email}
+        keyboardType="email-address"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Phone Number"
+        onChangeText={setPhoneNumber}
+        value={phoneNumber}
+        keyboardType="phone-pad"
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Address"
+        onChangeText={setAddress}
+        value={address}
+        multiline
+      />
+      <TouchableOpacity style={styles.button} onPress={handleSaveChanges}>
+        <Text style={styles.buttonText}>Save Changes</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  input: {
+    width: '100%',
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+  },
+  button: {
+    width: '100%',
+    height: 40,
+    backgroundColor: 'blue',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default MyAccountScreen;