Merge pull request #4 from alaa-m1/develop

Develop

.env

@@ -0,0 +1,2 @@
+GOOGLE_CLIENT_ID=677045750668-2q9sf1tslrep7843hb1gl95lv9oa3g4h.apps.googleusercontent.com
+GOOGLE_CLIENT_ID2=677045750668-09gkkjn4bp9phf77ckjpr3btc91219on.apps.googleusercontent.com

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,4 @@
-<manifest xmlns:android="https://schemas.android.com/apk/res/android">
+<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.phoenix.ecommerce">
 
     <uses-permission android:name="android.permission.INTERNET" />
 

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
     <string name="app_name">EcommerceReactNative</string>
+    <string name="server_client_id">677045750668-2q9sf1tslrep7843hb1gl95lv9oa3g4h.apps.googleusercontent.com</string>
 </resources>

babel.config.js

@@ -13,5 +13,13 @@ module.exports = {
         },
       },
     ],
+    [
+      "module:react-native-dotenv",
+      {
+        envName: "APP_ENV",
+        moduleName: "@env",
+        path: ".env"
+      }
+    ]
   ],
 };

package.json

@@ -10,9 +10,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-google-signin/google-signin": "^10.1.0",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-dotenv": "^3.4.9",
     "react-native-paper": "^5.11.1",
     "react-native-safe-area-context": "^4.7.4",
     "react-native-vector-icons": "^10.0.1"

src/screens/Auth/AuthPage.tsx

@@ -1,16 +1,25 @@
-import {GestureResponderEvent, View} from 'react-native';
-import {Header, SignIn} from './components';
+import {GestureResponderEvent, StyleSheet, View} from 'react-native';
+import {Header, SignIn, SignUp} from './components';
+import { sharedStyles } from '~/shared';
 
 const AuthPage = () => {
   const handleNavBackPress = (event: GestureResponderEvent) => {
     console.log('111111');
   };
   return (
-    <View>
+    <View style={styles.container}>
       <Header title="Sign In" onNavBackPress={handleNavBackPress} />
-      <SignIn />
+      <SignIn style={styles.page} />
     </View>
   );
 };
 
 export default AuthPage;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    height: '100%',
+  },
+  page: sharedStyles.page,
+});

src/screens/Auth/components/Header.tsx

@@ -5,7 +5,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import {ChevronLeft} from 'lucide-react-native';
+import {Icon} from 'react-native-paper';
 import {palette, titleFontSize} from '~/shared';
 type HeaderProps = {
   title: string;
@@ -16,7 +16,7 @@ export const Header = ({title, onNavBackPress}: HeaderProps) => {
   return (
     <View style={styles.headerContainer}>
       <Pressable onPress={onNavBackPress}>
-        <ChevronLeft color={palette.primary.main} size={30} />
+        <Icon source="chevron-left" size={40} color={palette.primary.main}/>
       </Pressable>
       <Text style={styles.headerTitle}>{title}</Text>
     </View>
@@ -28,12 +28,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    paddingVertical: 20,
-    marginBottom: 20,
+    paddingVertical: 15,
   },
   headerTitle: {
     fontSize: titleFontSize,
     color: palette.primary.main,
-    marginLeft:20
+    marginLeft: 20,
   },
 });

src/screens/Auth/components/SignIn.tsx

@@ -1,19 +1,56 @@
-import {GestureResponderEvent, View} from 'react-native';
-import {EButton, ETextField} from '~/shared';
+import {useEffect, useState} from 'react';
+import {
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {EButton, ESeparate, ETextField, useAlert} from '~/shared';
+import {Checkbox} from 'react-native-paper';
+import {useGoogleSignin} from '../hooks';
+import _ from 'lodash';
+
+type SignInProps = {
+  style: StyleProp<ViewStyle>;
+};
+export const SignIn = (props: SignInProps) => {
+  const {googleSignIn, error, useInfo} = useGoogleSignin();
+
+  const {showAlert} = useAlert({
+    title: 'title 11',
+    msg: useInfo?.user.name || '',
+    onDismiss: () => console.log('onDismiss'),
+    cancelBtn: {},
+  });
+
+  useEffect(() => {
+    if (!_.isEmpty(useInfo?.user.name)) showAlert();
+  }, [useInfo?.user.name]);
 
-export const SignIn = () => {
   const handleOnSignIn = (event: GestureResponderEvent) => {
     console.log('SignIn');
   };
+
   return (
-    <View>
+    <View {...props}>
       <ETextField label="Email:" placeholder="[email protected]" />
-      <ETextField
-        label="Password:"
-        placeholder="*********"
-        isPassword
-      />
+      <ETextField label="Password:" placeholder="*********" isPassword />
       <EButton variant="contained" label="Sign In" onPress={handleOnSignIn} />
+      <ESeparate label="Or continue with" />
+      <EButton
+        variant="outlined"
+        // label="Google"
+        onPress={(event: GestureResponderEvent) => googleSignIn()}
+        viewStyle={styles.googleBtn}
+        iconProps={{name: 'google', color: '#4285F4', size: 35}}
+      />
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  googleBtn: {
+    width: '50%',
+  },
+});

src/screens/Auth/components/SignUp.tsx

@@ -0,0 +1,71 @@
+import {useEffect, useState} from 'react';
+import {
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {EButton, ESeparate, ETextField, useAlert} from '~/shared';
+import {Checkbox} from 'react-native-paper';
+import {useGoogleSignin} from '../hooks';
+import _ from 'lodash';
+
+type SignUpProps = {
+  style: StyleProp<ViewStyle>;
+};
+export const SignUp = (props: SignUpProps) => {
+  const [checked, setChecked] = useState<
+    'checked' | 'unchecked' | 'indeterminate'
+  >('checked');
+
+  const {googleSignIn, error, useInfo} = useGoogleSignin();
+
+  const {showAlert} = useAlert({
+    title: 'title 11',
+    msg: useInfo?.user.name || '',
+    onDismiss: () => console.log('onDismiss'),
+    cancelBtn: {},
+  });
+  useEffect(() => {
+    if (!_.isEmpty(useInfo?.user.name)) showAlert();
+  }, [useInfo?.user.name]);
+
+  const handleOnSignUp = (event: GestureResponderEvent) => {
+    console.log('SignUp');
+  };
+
+  return (
+    <View {...props}>
+      <ETextField label="Name:" placeholder="User name" />
+      <ETextField label="Email:" placeholder="[email protected]" />
+      <ETextField label="Password:" placeholder="*********" isPassword />
+      <Checkbox.Item
+        label="Accept terms & conditions"
+        status={checked}
+        position="leading"
+        labelVariant="headlineSmall"
+        onPress={() => {
+          if (checked === 'checked') {
+            setChecked('unchecked');
+          } else setChecked('checked');
+        }}
+      />
+      <EButton variant="contained" label="Sign Up" onPress={handleOnSignUp} />
+      <ESeparate label="Or continue with" />
+      <EButton
+        variant="outlined"
+        // label="Google"
+        onPress={(event: GestureResponderEvent) => googleSignIn()}
+        viewStyle={styles.googleBtn}
+        iconProps={{name: 'google', color: '#4285F4', size: 35}}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  googleBtn: {
+    width: '50%',
+  },
+});

src/screens/Auth/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./Header";
-export * from "./SignIn";
+export * from "./SignIn";
+export * from "./SignUp";

src/screens/Auth/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useGoogleSignIn";

src/screens/Auth/hooks/useGoogleSignIn.ts

@@ -0,0 +1,44 @@
+import {
+    GoogleSignin,
+    User,
+    statusCodes,
+} from '@react-native-google-signin/google-signin';
+import { GOOGLE_CLIENT_ID2 } from "@env";
+import { useEffect, useState } from 'react';
+
+export const useGoogleSignin = () => {
+    const [error, setError] = useState<{ key: string, value: string }>({ key: "", value: "" });
+    const [useInfo, setUserInfo] = useState<User>();
+
+    useEffect(() => {
+        GoogleSignin.configure({
+            scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
+            webClientId: GOOGLE_CLIENT_ID2, // client ID of type WEB for your server (needed to verify user ID and offline access)
+            offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
+            forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
+        });
+
+    }, []);
+
+    const googleSignIn = async () => {
+        try {
+            await GoogleSignin.hasPlayServices();
+            const user = await GoogleSignin.signIn();
+            console.log('userInfo=', user);
+            setUserInfo(user)
+        } catch (error: any) {
+            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
+                setError({ key: statusCodes.SIGN_IN_CANCELLED, value: "user cancelled the login flow" })
+            } else if (error.code === statusCodes.IN_PROGRESS) {
+                // 
+                setError({ key: statusCodes.IN_PROGRESS, value: "operation (e.g. sign in) is in progress already" })
+            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+                setError({ key: statusCodes.PLAY_SERVICES_NOT_AVAILABLE, value: "play services not available or outdated" })
+            } else {
+                // some other error happened
+                setError({ key: "other", value: "some other error happened" })
+            }
+        }
+    };
+    return { googleSignIn, error, useInfo }
+}