fix: handled camera permission denied

displaynone · Apr 26, 2023 · 689f1d2 · 689f1d2
1 parent 82fea3c
commit 689f1d2
Show file tree

Hide file tree

Showing 18 changed files with 419 additions and 242 deletions.
diff --git a/app/qr/index.tsx b/app/qr/index.tsx
@@ -1,31 +1,35 @@
+import { Trans, t } from '@lingui/macro';
 import { BarCodeEvent, BarCodeScanner } from 'expo-barcode-scanner';
 import { Camera } from 'expo-camera';
 import { useRouter } from 'expo-router';
 import React, { FC, useEffect, useState } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { parseOtpUri } from '../../src/util/parseOtpUri';
-import { Trans, t } from '@lingui/macro';
+import { Dimensions, Linking, StyleSheet, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Button,
+  MD3Theme,
+  useTheme,
+} from 'react-native-paper';
+import Section from '../../src/components/Section';
 import colors from '../../src/constants/colors';
-import { Button, MD3Theme, useTheme } from 'react-native-paper';
-import Text from '../../src/ui/Text';
+import { CameraPermissionIcon } from '../../src/icons/CameraPermission';
 import { ScanQRIcon } from '../../src/icons/ScanQR';
-import Container from '../../src/ui/Container';
-import Section from '../../src/components/Section';
-
-const CAMERA_WIDTH = Dimensions.get('screen').width - 2 * 20;
+import Text from '../../src/ui/Text';
+import { parseOtpUri } from '../../src/util/parseOtpUri';
 
 const QRScanner: FC = () => {
   const [hasPermission, setHasPermission] = useState<boolean>();
   const [showCamera, setShowCamera] = useState(false);
   const { push } = useRouter();
   const theme = useTheme();
   const styles = getStyles(theme);
-  useEffect(() => {
-    const getBarCodeScannerPermissions = async () => {
-      const { status } = await BarCodeScanner.requestPermissionsAsync();
-      setHasPermission(status === 'granted');
-    };
 
+  const getBarCodeScannerPermissions = async () => {
+    const { status } = await BarCodeScanner.requestPermissionsAsync();
+    setHasPermission(status === 'granted');
+  };
+
+  useEffect(() => {
     getBarCodeScannerPermissions();
   }, []);
 
@@ -36,18 +40,39 @@ const QRScanner: FC = () => {
     }
   };
 
-  if (hasPermission === null) {
-    return (
-      <Text>
-        <Trans>Requesting for camera permission</Trans>
-      </Text>
-    );
+  const resetPermissions = () => {
+    Linking.openSettings();
+  };
+
+  if (hasPermission === undefined) {
+    return <ActivityIndicator />;
   }
+
   if (hasPermission === false) {
     return (
-      <Text>
-        <Trans>No access to camera</Trans>
-      </Text>
+      <Section title={t`Add a new site`} showBack>
+        <Text size="titleLarge" variant={['primary', 'bold']} numberOfLines={5}>
+          <Trans>No access to camera</Trans>
+        </Text>
+        <CameraPermissionIcon
+          width={Dimensions.get('screen').width - 48}
+          height={Dimensions.get('screen').width - 48}
+        />
+        <View style={styles.divider}>
+          <Text size="bodyLarge" variant={'secondary'} numberOfLines={4}>
+            <Trans>
+              Access to the camera was denied. To enable Shield Authenticator to
+              utilize the camera, it is necessary to provide permission through
+              the settings
+            </Trans>
+          </Text>
+        </View>
+        <View style={styles.divider}>
+          <Button mode="contained" onPress={() => resetPermissions()}>
+            <Trans>Enable camera</Trans>
+          </Button>
+        </View>
+      </Section>
     );
   }
 
@@ -103,6 +128,9 @@ const getStyles = (theme: MD3Theme) =>
       borderRadius: theme.roundness,
       marginBottom: 24,
     },
+    divider: {
+      marginTop: 24,
+    },
   });
 
 export default QRScanner;
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "android": "expo run:android",
     "format": "prettier --write '**/*.js'",
     "test": "jest",
-    "lingui:extract": "lingui extract",
+    "lingui:extract": "lingui extract --clean",
     "lingui:compile": "lingui compile",
     "prepare": "husky install",
     "lint": "eslint ./ --ext ts,tsx --fix",

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -32,7 +32,7 @@ const Section: FC<SectionProps> = ({ children, title, showBack }) => {
             )}
           </View>
           <Text size="headlineSmall" variant={['bold', 'primary']}>
-            <Trans>{title}</Trans>
+            {title}
           </Text>
         </View>
         <View style={styles.wrapper}>{children}</View>

diff --git a/src/icons/CameraPermission.tsx b/src/icons/CameraPermission.tsx
diff --git a/src/locales/ar/messages.js b/src/locales/ar/messages.js
diff --git a/src/locales/ar/messages.po b/src/locales/ar/messages.po
@@ -13,16 +13,17 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: app/qr/index.tsx:57
+#: app/qr/index.tsx:63
+msgid "Access to the camera was denied. To enable Shield Authenticator to utilize the camera, it is necessary to provide permission through the settings"
+msgstr "تم رفض الوصول إلى الكاميرا. لتمكين Shield Authenticator من استخدام الكاميرا ، من الضروري توفير إذن من خلال الإعدادات"
+
+#: app/qr/index.tsx:53
+#: app/qr/index.tsx:80
 #: src/components/AddSite.tsx:14
 msgid "Add a new site"
 msgstr "أضف موقعًا جديدًا"
 
-#: src/components/AddSite.tsx:14
-#~ msgid "Add site"
-#~ msgstr ""
-
-#: app/settings/export.tsx:58
+#: app/settings/export.tsx:56
 #: src/components/TopBar.tsx:36
 msgid "Backup your data"
 msgstr "النسخ الاحتياطي لبياناتك"
@@ -32,7 +33,7 @@ msgstr "النسخ الاحتياطي لبياناتك"
 msgid "Cancel"
 msgstr "إلغاء"
 
-#: app/settings/import.tsx:78
+#: app/settings/import.tsx:75
 msgid "Completed"
 msgstr "مكتمل"
 
@@ -48,6 +49,10 @@ msgstr "حذف"
 msgid "Enable"
 msgstr "تمكين"
 
+#: app/qr/index.tsx:72
+msgid "Enable camera"
+msgstr "تمكين الكاميرا"
+
 #: src/components/SitesList.tsx:63
 msgid "Everything is prepared for you to add your sites"
 msgstr "كل شيء جاهز لإضافة مواقعك"
@@ -56,60 +61,48 @@ msgstr "كل شيء جاهز لإضافة مواقعك"
 msgid "Fingerprint authentication"
 msgstr "مصادقة بصمات الأصابع"
 
-#: app/settings/export.tsx:73
+#: app/settings/export.tsx:70
 msgid "Generate file"
 msgstr "إنشاء ملف"
 
-#: app/settings/import.tsx:63
+#: app/settings/import.tsx:60
 msgid "If you want to restore your saved sites from a backup, you can load the file stored on your device. It's important to note that the existing sites will remain unchanged and won't be replaced"
 msgstr "إذا كنت ترغب في استعادة المواقع المحفوظة من نسخة احتياطية ، يمكنك تحميل الملف المخزن على جهازك. من المهم ملاحظة أن المواقع الحالية ستبقى دون تغيير ولن يتم استبدالها"
 
-#: app/settings/import.tsx:99
+#: app/settings/import.tsx:96
 msgid "Load backup sites"
 msgstr "تحميل مواقع النسخ الاحتياطي"
 
-#: src/providers/FingerprintAuthProvider.tsx:87
-#~ msgid "Login"
-#~ msgstr ""
-
 #: src/providers/FingerprintAuthProvider.tsx:37
 msgid "Login with your fingerprint"
 msgstr "تسجيل الدخول ببصمة إصبعك"
 
-#: app/qr/index.tsx:48
+#: app/qr/index.tsx:55
 msgid "No access to camera"
 msgstr "لا يمكن الوصول إلى الكاميرا"
 
 #: src/components/SitesList.tsx:93
 msgid "No results matching your search"
 msgstr "لا توجد نتائج مطابقة لبحثك"
 
-#: app/(home)/index.tsx:45
-#~ msgid "No sites have been added yet"
-#~ msgstr ""
-
-#: app/settings/import.tsx:77
+#: app/settings/import.tsx:74
 msgid "Processing"
 msgstr "معالجة"
 
-#: app/qr/index.tsx:41
-msgid "Requesting for camera permission"
-msgstr "طلب إذن الكاميرا"
-
-#: app/settings/import.tsx:60
+#: app/settings/import.tsx:58
 #: src/components/TopBar.tsx:41
 msgid "Restore sites"
 msgstr "استعادة المواقع"
 
-#: app/qr/index.tsx:88
+#: app/qr/index.tsx:110
 msgid "Scan QR code"
 msgstr "مسح رمز QR"
 
 #: app/qr/info.tsx:62
 msgid "Scan another code"
 msgstr "مسح رمز آخر"
 
-#: app/qr/index.tsx:60
+#: app/qr/index.tsx:82
 msgid "Scan your website's 2FA QR code using your device's camera"
 msgstr "امسح رمز QR 2FA لموقع الويب الخاص بك باستخدام كاميرا جهازك"
 
@@ -121,18 +114,18 @@ msgstr "بحث..."
 msgid "Secure the access to your stored 2FA using your device fingerprint authentication"
 msgstr "تأمين الوصول إلى 2FA المخزن باستخدام مصادقة بصمات جهازك"
 
-#: app/qr/index.tsx:74
+#: app/qr/index.tsx:96
 msgid "The QR code can be easily recognized by simply pointing your device's camera at it"
 msgstr "يمكن التعرف على رمز الاستجابة السريعة بسهولة بمجرد توجيه كاميرا جهازك إليه"
 
-#: app/settings/export.tsx:61
+#: app/settings/export.tsx:58
 msgid "To ensure that you don't lose your saved data, you can download a file of the sites and restore them at a later time"
 msgstr "للتأكد من عدم فقدان البيانات المحفوظة ، يمكنك تنزيل ملف من المواقع واستعادتها في وقت لاحق"
 
 #: src/components/CopyToClipboard.tsx:19
 msgid "Token copied to clipboard"
 msgstr "تم نسخ الرمز المميز إلى الحافظة"
 
-#: app/settings/import.tsx:84
+#: app/settings/import.tsx:81
 msgid "{sitesProcessed, plural, one {Processed 1 site of {numberOfSites}} other {Processed # sites of {numberOfSites}}}"
 msgstr "{sitesProcessed, plural, one {موقع 1 معالج لـ {numberOfSites}} other {المواقع # المجهزة لـ {numberOfSites}}}"