Merge pull request #27 from Naveen-g09/naveen-ui

Refactoring UI
Naveen-g09 · Mar 24, 2024 · 935104c · 935104c
2 parents 8b22650 + 3a8d413
commit 935104c
Show file tree

Hide file tree

Showing 14 changed files with 5,575 additions and 3,341 deletions.
diff --git a/app.json b/app.json
@@ -35,7 +35,7 @@
       "expo-router"
     ],
     "experiments": {
-      "typedRoutes": true
+      "typedRoutes": false
     },
     "extra": {
       "router": {

diff --git a/app/(tabs)/login.tsx b/app/(tabs)/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;
diff --git a/app/(tabs)/myaccount.tsx b/app/(tabs)/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;
diff --git a/app/Stories.tsx b/app/Stories.tsx
@@ -87,7 +87,7 @@ const Stories = () => {
                   alignItems: 'center',
                 }}>
                 <Image
-                  source={data?.image ?? require('../path/to/default/image.png')}
+                  source={data?.image ?? require('../storage/images/post3.jpg')}
                   style={{
                     resizeMode: 'cover',
                     width: '92%',

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -54,16 +54,17 @@ function RootLayoutNav() {
 
   return (
     <BottomSheetModalProvider>
-    <ThemeProvider
-          value={colorScheme === "light" ? DefaultTheme : DefaultTheme}
-        >
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{
-          title: 'Notifications',
-          presentation: 'modal' }} />
-      </Stack>
-    </ThemeProvider>
-  </BottomSheetModalProvider>
+      <ThemeProvider
+        value={colorScheme === "light" ? DefaultTheme : DefaultTheme}
+      >
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{
+            title: 'Notifications',
+            presentation: 'modal'
+          }} />
+        </Stack>
+      </ThemeProvider>
+    </BottomSheetModalProvider>
   );
 }
diff --git a/app/forgotpassword.tsx b/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;
diff --git a/app/homepage.tsx b/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;