Add files via upload

mobile/App.js

@@ -1,5 +1,5 @@
-import loginPage from "./login";
-import userPage from "./user";
+import userLogin from "./app/login";
+import userDashboard from "./app/dashboard";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 const Stack = createNativeStackNavigator();
@@ -17,12 +17,12 @@ export default function App() {
         <Stack.Screen
           options={{ headerShown: false }}
           name="Login"
-          component={loginPage}
+          component={userLogin}
         />
         <Stack.Screen
           options={{ headerShown: false }}
-          name="User"
-          component={userPage}
+          name="Dashboard"
+          component={userDashboard}
         />
       </Stack.Navigator>
     </NavigationContainer>

mobile/app.json

@@ -21,16 +21,10 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/logo.png",
         "backgroundColor": "#ffffff"
-      },
-      "package": "com.cybermajeed.Notifire"
+      }
     },
     "web": {
       "favicon": "./assets/logo.png"
-    },
-    "extra": {
-      "eas": {
-        "projectId": "768915cc-8129-4740-b178-fe5d9651326d"
-      }
     }
   }
-}
+}

mobile/app/dashboard.js

@@ -0,0 +1,28 @@
+import { SafeAreaView, Button, Text } from "react-native";
+import { styles } from "../style";
+import { auth, signOut, onAuthStateChanged } from "../auth";
+import { useState } from "react";
+export default function App({ navigation }) {
+  const [name, setName] = useState("");
+  onAuthStateChanged(auth, (user) => {
+    if (user) {
+      const name = user.email.split("@")[0];
+      setName(name);
+    }
+  });
+  const LogoutUser = () => {
+    signOut(auth)
+      .then(() => {
+        console.log("signed out");
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text>Hello {name}</Text>
+      <Button title="Logout" onPress={LogoutUser} />
+    </SafeAreaView>
+  );
+}

mobile/app/login.js

@@ -0,0 +1,112 @@
+import {
+  View,
+  SafeAreaView,
+  Image,
+  TextInput,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { styles } from "../style";
+import { useState, useEffect } from "react";
+import { auth, signInWithEmailAndPassword } from "../auth";
+
+export default function App({ navigation }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  //
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        navigation.navigate("Dashboard");
+      } else {
+        navigation.navigate("Login");
+      }
+      setUsername("");
+      setPassword("");
+      this.usrnmInp.clear();
+      this.pswdInp.clear();
+    });
+    return unsubscribe;
+  }, []);
+  //
+  const LoginUser = () => {
+    //
+    signInWithEmailAndPassword(auth, username, password)
+      .then((userCredential) => {
+        // Signed in
+        const user = userCredential.user;
+        console.log("logged in as: " + user.email);
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        console.log(errorCode);
+        console.log(errorMessage);
+      });
+  };
+  //
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar style="auto" />
+      <View style={styles.bg}></View>
+      <View style={styles.loginScreen}>
+        <View style={styles.loginScreen.cehsLogo}>
+          <Image
+            source={require("../assets/cehs.png")}
+            style={{ height: "100%", resizeMode: "contain" }}
+          />
+        </View>
+        <Text
+          style={{
+            backgroundColor: "#8300fd",
+            color: "#fff",
+            width: "100%",
+            textAlign: "center",
+            fontSize: 20,
+            paddingVertical: 10,
+          }}
+        >
+          Welcome To Notifire
+        </Text>
+        <View style={styles.loginScreen.loginInputs}>
+          <TextInput
+            autoComplete="email"
+            placeholder="Username"
+            autoCapitalize="none"
+            onChangeText={(usrnm) => setUsername(usrnm)}
+            placeholderTextColor={"#949494"}
+            keyboardType="email-address"
+            style={styles.loginScreen.loginInputs.username}
+            ref={(inp) => {
+              this.usrnmInp = inp;
+            }}
+          />
+          <TextInput
+            placeholder="Password"
+            autoCapitalize="none"
+            placeholderTextColor={"#949494"}
+            onChangeText={(pswd) => setPassword(pswd)}
+            secureTextEntry={true}
+            style={styles.loginScreen.loginInputs.password}
+            ref={(inp) => {
+              this.pswdInp = inp;
+            }}
+          />
+
+          <TouchableOpacity
+            onPress={() => {
+              if (username.trim() && password.trim()) {
+                LoginUser;
+              }
+            }}
+            style={styles.loginScreen.loginInputs.loginBtn}
+          >
+            <Text>Login</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

mobile/style.js

@@ -0,0 +1,103 @@
+import { StyleSheet, Platform } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bg: {
+    flex: 0.5,
+    backgroundColor: "dodgerblue",
+    height: "100%",
+    width: "200%",
+    position: "absolute",
+    top: "-50%",
+    left: "-50%",
+    transform: "rotate(-15deg)",
+  },
+  loginScreen: {
+    height: "85%",
+    width: "80%",
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cehsLogo: {
+      width: "100%",
+      flex: 1.8,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    loginInputs: {
+      flex: 1.2,
+      width: "100%",
+      minHeight: 100,
+      height: 100,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 20,
+      username: {
+        width: "80%",
+        backgroundColor: "#ebebeb",
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+      },
+      password: {
+        width: "80%",
+        backgroundColor: "#ebebeb",
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+      },
+      loginBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 25,
+        marginTop: 10,
+        borderRadius: 100,
+        ...Platform.select({
+          default: {
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 3 },
+            shadowRadius: 5,
+            shadowOpacity: 0.4,
+          },
+          ios: {
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 3 },
+            shadowRadius: 5,
+            shadowOpacity: 0.4,
+          },
+          android: {
+            elevation: 2,
+          },
+        }),
+      },
+    },
+    ...Platform.select({
+      default: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 10 },
+        shadowRadius: 15,
+        shadowOpacity: 0.5,
+      },
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 10 },
+        shadowRadius: 15,
+        shadowOpacity: 0.5,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+});
+
+export { styles };