login done

cybermajeed · Apr 15, 2024 · 9ed8bc9 · 9ed8bc9
1 parent a408712
commit 9ed8bc9
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 164 deletions.
diff --git a/mobile/App.js b/mobile/App.js
@@ -1,166 +1,24 @@
-import {
-  StyleSheet,
-  View,
-  SafeAreaView,
-  Image,
-  TextInput,
-  Platform,
-  Pressable,
-  Text,
-  Alert,
-} from "react-native";
-/*
-https://www.youtube.com/watch?v=v2R0DFXqaF0
-https://www.youtube.com/watch?v=2hR-uWjBAgw
-*/
+import loginPage from "./login";
+import userPage from "./user";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+const Stack = createNativeStackNavigator();
+
 export default function App() {
-  const loginUser = () => {
-    Platform.OS === "web"
-      ? alert("logged in", "Yes true")
-      : Alert.alert("logged in", "Yes true");
-  };
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.bg}></View>
-      <View style={styles.loginScreen}>
-        <View style={styles.loginScreen.cehsLogo}>
-          <Image
-            source={require("./assets/cehs.png")}
-            style={{ width: "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
-            placeholder="Username"
-            placeholderTextColor={"#949494"}
-            keyboardType="email-address"
-            style={styles.loginScreen.loginInputs.username}
-          />
-          <TextInput
-            placeholder="Password"
-            placeholderTextColor={"#949494"}
-            secureTextEntry={true}
-            style={styles.loginScreen.loginInputs.password}
-          />
-          <Pressable
-            onPress={loginUser}
-            style={styles.loginScreen.loginInputs.loginBtn}
-          >
-            <Text>Login</Text>
-          </Pressable>
-        </View>
-      </View>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Login">
+        <Stack.Screen
+          options={{ headerShown: false }}
+          name="Login"
+          component={loginPage}
+        />
+        <Stack.Screen
+          options={{ headerShown: false }}
+          name="User"
+          component={userPage}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
-
-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%",
-      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: 5,
-          },
-        }),
-      },
-    },
-    ...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,
-      },
-    }),
-  },
-});
diff --git a/mobile/auth.js b/mobile/auth.js
@@ -0,0 +1,22 @@
+import { initializeApp } from "firebase/app";
+import {
+  getAuth,
+  signInWithEmailAndPassword,
+  signOut,
+  onAuthStateChanged,
+} from "firebase/auth";
+const firebaseConfig = {
+  apiKey: "AIzaSyAvVvFLrZDQLIqN0m314ANryJu-zUOOY0Y",
+  authDomain: "notifire-6339a.firebaseapp.com",
+  projectId: "notifire-6339a",
+  storageBucket: "notifire-6339a.appspot.com",
+  messagingSenderId: "908506103583",
+  appId: "1:908506103583:web:6df3490c0b4fd2a5297a2a",
+  measurementId: "G-GRPXDXB61V",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+export { auth, signInWithEmailAndPassword, signOut, onAuthStateChanged };
diff --git a/mobile/login.js b/mobile/login.js
@@ -1 +1,104 @@
-//login screen if user not logged in
+import {
+  View,
+  SafeAreaView,
+  Image,
+  TextInput,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { styles } from "./styles";
+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("User");
+      } 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(user.email);
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        console.log(errorCode);
+        console.log(errorMessage);
+      });
+  };
+  //
+  return (
+    <SafeAreaView style={styles.container}>
+      <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={LoginUser}
+            style={styles.loginScreen.loginInputs.loginBtn}
+          >
+            <Text>Login</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
diff --git a/mobile/metro.config.js b/mobile/metro.config.js
@@ -0,0 +1,7 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+config.resolver.sourceExts.push('cjs');
+module.exports = config;