chore: add alert in security page

getAlby · Sep 17, 2024 · 8e708e7 · 8e708e7
1 parent c96d93c
commit 8e708e7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -81,8 +81,8 @@ export default function RootLayout() {
 
   async function checkBiometricStatus() {
     const compatible = await LocalAuthentication.hasHardwareAsync();
-    const enrolled = await LocalAuthentication.isEnrolledAsync();
-    if (compatible && enrolled) {
+    const securityLevel = await LocalAuthentication.getEnrolledLevelAsync();
+    if (compatible && securityLevel > 0) {
       useAppStore.getState().setBiometricSupported(true);
     } else {
       useAppStore.getState().setBiometricSupported(false);

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -37,6 +37,7 @@ import {
   Fingerprint,
   HelpCircle,
   CircleCheck,
+  TriangleAlert,
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
 
@@ -89,6 +90,7 @@ interopIcon(Egg);
 interopIcon(Fingerprint);
 interopIcon(HelpCircle);
 interopIcon(CircleCheck);
+interopIcon(TriangleAlert);
 
 export {
   AlertCircle,
@@ -128,4 +130,5 @@ export {
   Fingerprint,
   HelpCircle,
   CircleCheck,
+  TriangleAlert,
 };
diff --git a/pages/settings/Security.tsx b/pages/settings/Security.tsx
@@ -4,22 +4,37 @@ import { Label } from "~/components/ui/label";
 import { Switch } from "~/components/ui/switch";
 import Screen from "~/components/Screen";
 import { useAppStore } from "~/lib/state/appStore";
+import { TriangleAlert } from "~/components/Icons";
+import { cn } from "~/lib/utils";
 
 export function Security() {
   const isEnabled = useAppStore((store) => store.isSecurityEnabled);
+  const isSupported = useAppStore((store) => store.isBiometricSupported);
   return (
     <View className="flex-1 p-6">
       <Screen title="Security" />
+      {!isSupported && (
+        <View className="flex-row items-center border border-muted-foreground rounded-lg p-3 mb-4 gap-3">
+          <TriangleAlert className="text-foreground" />
+          <View className="flex-col">
+            <Text className="font-bold text-base">Can't add security</Text>
+            <Text className="text-sm">
+              Add phone lock in device settings to secure access
+            </Text>
+          </View>
+        </View>
+      )}
       <View className="flex-1">
         <View className='flex-row items-center justify-between gap-2'>
           <Label
-            className="text-2xl"
+            className={cn('text-2xl', !isSupported && 'opacity-50')}
             nativeID='security'
           >
             <Text className="text-lg">Require phone lock to access</Text>
           </Label>
           <Switch
             checked={isEnabled}
+            disabled={!isSupported}
             onCheckedChange={() => {
               useAppStore.getState().setSecurityEnabled(!isEnabled);
             }}

diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
@@ -44,16 +44,14 @@ export function Settings() {
         </TouchableOpacity>
       </Link>
 
-      {isBiometricSupported && (
-        <Link href="/settings/security" asChild>
-          <TouchableOpacity className="flex flex-row gap-4">
-            <Fingerprint className="text-foreground" />
-            <Text className="text-foreground font-medium2 text-xl">
-              Security
-            </Text>
-          </TouchableOpacity>
-        </Link>
-      )}
+      <Link href="/settings/security" asChild>
+        <TouchableOpacity className="flex flex-row gap-4">
+          <Fingerprint className="text-foreground" />
+          <Text className="text-foreground font-medium2 text-xl">
+            Security
+          </Text>
+        </TouchableOpacity>
+      </Link>
 
       <TouchableOpacity
         className="flex flex-row gap-4"