QR Scan Login

bdsumon4u · Jul 6, 2022 · c218cbb · c218cbb
1 parent b6e0ac0
commit c218cbb
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 98 deletions.
diff --git a/navigation/index.tsx b/navigation/index.tsx
@@ -16,8 +16,7 @@ import ModalScreen from '../screens/ModalScreen';
 import NotFoundScreen from '../screens/NotFoundScreen';
 import LoginScreen from '../screens/LoginScreen';
 import QRCodeScreen from '../screens/QRCodeScreen';
-import TabOneScreen from '../screens/TabOneScreen';
-import TabTwoScreen from '../screens/TabTwoScreen';
+import WebViewScreen from '../screens/WebViewScreen';
 import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
 import LinkingConfiguration from './LinkingConfiguration';
 
@@ -42,64 +41,12 @@ function RootNavigator() {
     <Stack.Navigator>
       <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />
       <Stack.Screen name="QRCodeScreen" component={QRCodeScreen} options={{ headerShown: false }} />
-      <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
+      <Stack.Screen name="WebViewScreen" component={WebViewScreen} options={{ headerShown: false }} />
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
-      <Stack.Group screenOptions={{ presentation: 'modal' }}>
-        <Stack.Screen name="Modal" component={ModalScreen} />
-      </Stack.Group>
     </Stack.Navigator>
   );
 }
 
-/**
- * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
- * https://reactnavigation.org/docs/bottom-tab-navigator
- */
-const BottomTab = createBottomTabNavigator<RootTabParamList>();
-
-function BottomTabNavigator() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <BottomTab.Navigator
-      initialRouteName="TabOne"
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme].tint,
-      }}>
-      <BottomTab.Screen
-        name="TabOne"
-        component={TabOneScreen}
-        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => (
-            <Pressable
-              onPress={() => navigation.navigate('Modal')}
-              style={({ pressed }) => ({
-                opacity: pressed ? 0.5 : 1,
-              })}>
-              <FontAwesome
-                name="info-circle"
-                size={25}
-                color={Colors[colorScheme].text}
-                style={{ marginRight: 15 }}
-              />
-            </Pressable>
-          ),
-        })}
-      />
-      <BottomTab.Screen
-        name="TabTwo"
-        component={TabTwoScreen}
-        options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-        }}
-      />
-    </BottomTab.Navigator>
-  );
-}
-
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
  */

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.68.2",
+    "react-native-device-info": "^9.0.2",
     "react-native-login-screen": "^4.0.0",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "~3.11.1",

diff --git a/screens/QRCodeScreen.tsx b/screens/QRCodeScreen.tsx
@@ -1,12 +1,13 @@
-import EditScreenInfo from '../components/EditScreenInfo';
-
 import { StyleSheet, Button, Alert } from 'react-native';import { Text, View } from '../components/Themed';
 import { RootTabScreenProps } from '../types';
 import { storage } from '../constants/Server';
 import { setData } from '../utils/storage';
 import { setCookie } from '../utils/cookie';
-import RNLoginScreen from "react-native-login-screen";
+import { addDevice } from '../utils/api';
 import React, { useState, useEffect } from 'react';
+import Constants from 'expo-constants';
+import * as Device from 'expo-device';
+import DeviceInfo from 'react-native-device-info';
 import { BarCodeScanner } from 'expo-barcode-scanner';
 
 export default function QRCodeScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
@@ -34,8 +35,34 @@ export default function QRCodeScreen({ navigation }: RootTabScreenProps<'TabOne'
             });
             setCookie(data.server, 'TOKEN', data.token);
 
-
-
+            addDevice({
+              "name": Device.brand,
+              "model": Device.modelName,
+              "version": Device.platformApiLevel,
+              "app_version": DeviceInfo.getVersion(),
+              "unique_id": DeviceInfo.getUniqueId(),
+            }).then((res) => {
+              console.log(res)
+              navigation.navigate("WebViewScreen", data);
+            }).catch((err) => {
+              const messages = err.response.data.message;
+              let alertMessage = "";
+              if (typeof messages == "object") {
+                for (const key in messages) {
+                  alertMessage += messages[key][0] + "\n\r";
+                }
+              } else {
+                alertMessage = messages;
+              }
+              Alert.alert("Invalid QR Code", alertMessage, [
+                {
+                  text: "Ok",
+                  onPress: () => {
+                    navigation.navigate("LoginScreen");
+                  },
+                },
+              ]);
+            });
           } else {
             throw new Error("Invalid Json");
           }
@@ -45,7 +72,7 @@ export default function QRCodeScreen({ navigation }: RootTabScreenProps<'TabOne'
             {
               text: "Ok",
               onPress: () => {
-                navigation.navigate("Login");
+                navigation.navigate("LoginScreen");
               },
             },
           ]);

diff --git a/screens/TabOneScreen.tsx b/screens/TabOneScreen.tsx
diff --git a/screens/TabTwoScreen.tsx → screens/WebViewScreen.tsx b/screens/TabTwoScreen.tsx → screens/WebViewScreen.tsx
@@ -4,9 +4,13 @@ import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View } from '../components/Themed';
 import { WebView } from 'react-native-webview';
 
-export default function TabTwoScreen() {
+export default function WebViewScreen({navigation, route: {params}}) {
   return (
-    <WebView sharedCookiesEnabled={true} source={{ uri: 'http://islamic-qanda.com/dashboard' }} />
+      <WebView
+        style={styles.container}
+        sharedCookiesEnabled={true}
+        source={{ uri: `${params.server}/dashboard` }}
+       />
   );
 }
 

diff --git a/utils/api.ts b/utils/api.ts
@@ -4,6 +4,8 @@ import { getData, setData } from "./storage";
 
 import { storage } from "../constants/Server";
 
+axios.defaults.withCredentials = true;
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 axios.interceptors.request.use(async (request) => {
   const server = await getData(storage.server);
   const token = await getData(storage.token);
@@ -23,13 +25,13 @@ axios.interceptors.request.use(async (request) => {
 export interface DeviceInfo {
   "name": string;
   "model": string;
+  "version": string;
   "app_version": string;
-  "android_version": string;
-  "device_unique_id": string;
+  "unique_id": string;
 }
 
 export const addDevice = (info: DeviceInfo) => {
-  return axios.post("add/device", info).then(res => res.data);
+  return axios.post("devices", info).then(res => res.data);
 };
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -6949,6 +6949,11 @@ react-native-codegen@^0.0.17:
     jscodeshift "^0.13.1"
     nullthrows "^1.1.1"
 
+react-native-device-info@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-9.0.2.tgz#00c7ab139a620ac9650852cd0ef0fb69d9a4418d"
+  integrity sha512-+IfYZ/OuKjnFf7SFfgIzEqynSeFngrIHc5KgHUIfXusLDXIFJ+LhRBCD7skqnraHrfmESUOMjLbNcvy4SVdwSA==
+
 react-native-gradle-plugin@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45"