feat: add alert before skip pin code

ismaelsousa · Sep 26, 2022 · a283b0b · a283b0b
1 parent 6e391a1
commit a283b0b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/screens/PinLocker/pin.locker.view.tsx b/src/screens/PinLocker/pin.locker.view.tsx
@@ -8,6 +8,7 @@ import {useTheme} from 'styled-components/native';
 import {SkipText, styles} from './styles';
 import useMyNavigation from '../../common/hooks/useMyNavigation';
 import usePinLockerController from './pin.locker.controller';
+import {Alert, View} from 'react-native';
 
 const PinLockerView: React.FC = () => {
   const {colors} = useTheme();
@@ -46,6 +47,7 @@ const PinLockerView: React.FC = () => {
   return (
     <Container>
       <PINCode
+        // styleMainContainer={{backgroundColor: 'red'}}
         touchIDDisabled={true}
         key={'pin'}
         status={pinStatus}
@@ -80,13 +82,22 @@ const PinLockerView: React.FC = () => {
         buttonComponentLockedPage={() => null}
       />
       {pinStatus === 'choose' && (
-        <SkipText color="brand" size={16} onPress={setToNotAskToSetPinAgain}>
+        <SkipText
+          color="brand"
+          size={16}
+          onPress={() =>
+            Alert.alert(
+              '🚧 Are you sure?',
+              'This prevents unauthorized access.',
+              [
+                {text: 'cancel'},
+                {onPress: setToNotAskToSetPinAgain, text: 'proceed'},
+              ],
+            )
+          }>
           Skip
         </SkipText>
       )}
-      {/**
-       * //TODO: add a radio button to not ask to enter pin code again next time
-       */}
     </Container>
   );
 };

diff --git a/src/screens/PinLocker/styles.ts b/src/screens/PinLocker/styles.ts
@@ -15,7 +15,8 @@ export const styles = StyleSheet.create({
 });
 
 export const SkipText = styled(Text)`
-  position: absolute;
-  bottom: 50px;
   align-self: center;
+  padding: 20px;
+  min-height: 14px;
+  margin-bottom: 50px;
 `;