Style/UI update (#163)

Co-authored-by: Sai Ranjit Tummalapalli <[email protected]> Signed-off-by: Poonam Ghewande <[email protected]>
credebl · Dec 14, 2023 · f45fce2 · f45fce2
1 parent c583c8e
commit f45fce2
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 31 deletions.
diff --git a/app/assets/img/adeya-logo-secondary.png b/app/assets/img/adeya-logo-secondary.png
diff --git a/app/onBordingstyle.ts → app/onboardingStyles.ts b/app/onBordingstyle.ts → app/onboardingStyles.ts
@@ -5,8 +5,8 @@ export const styles = StyleSheet.create({
   container: {
     height: hp('100%'),
     width: wp('100%'),
-    padding: wp('5%'),
-    paddingTop: hp('5%'),
+    paddingTop: hp('3%'),
+    padding: hp('1%'),
   },
   headerText: {
     alignSelf: 'center',
@@ -51,14 +51,23 @@ export const styles = StyleSheet.create({
     textAlign: 'center',
     color: '#2289F7',
   },
-  descriptiionText: {
+  descriptionText: {
     alignSelf: 'center',
     marginHorizontal: wp('1%'),
   },
-  startedButtonconatiner: {
+  startedButtonContainer: {
+    marginTop: 'auto',
     margin: wp('5%'),
   },
-  guideimages: {
+  guideImages: {
     alignItems: 'center',
   },
+  ScrollView: {
+    flex: 1,
+    padding: hp('0.5%'),
+  },
+  endPageContainer: {
+    height: '100%',
+    justifyContent: 'center',
+  },
 })
diff --git a/app/screens/OnboardingPages.tsx b/app/screens/OnboardingPages.tsx
@@ -4,11 +4,11 @@ import React from 'react'
 import { Image, ScrollView, StyleSheet, Text, View, ImageBackground } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 
-import onBoardingOrganizeease from '../assets/img/onBoardingOrganizeease.svg'
-import onBoardingdatasafe from '../assets/img/onBoardingdatasafe.svg'
+import onBoardingOrganizeEase from '../assets/img/onBoardingOrganizeease.svg'
+import onBoardingDataSafe from '../assets/img/onBoardingdatasafe.svg'
 import Button, { ButtonType } from '../components/buttons/Button'
 import { useStore } from '../contexts/store'
-import { styles } from '../onBordingstyle'
+import { styles } from '../onboardingStyles'
 
 import { ITheme, theme } from '../theme'
 import { GenericFn } from '../types/fn'
@@ -88,18 +88,19 @@ const OnboardingPages = (onTutorialCompleted: GenericFn): Array<Element> => {
 
     return (
       <>
-        <ScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center' }}>
-          <Text style={[defaultStyle.headerText, styles.headerText]}>Share Securely</Text>
-          <Image source={require('../assets/img/sharesecure.png')} style={styles.backgroundImage} />
-          <View style={styles.descriptiionText}>
-            <Text style={[styles.bodyText]}>
-              Take complete control over your data. Securely connect with people and organizations to share necessary
-              information without compromising your privacy.
-            </Text>
-          </View>
-
+        <View style={styles.endPageContainer}>
+          <Text style={[defaultStyle.headerText, styles.headerText, { marginTop: 20 }]}>Share Securely</Text>
+          <ScrollView style={styles.ScrollView} contentContainerStyle={{ justifyContent: 'center' }}>
+            <Image source={require('../assets/img/sharesecure.png')} style={[styles.backgroundImage]} />
+            <View style={styles.descriptionText}>
+              <Text style={[styles.bodyText]}>
+                Take complete control over your data. Securely connect with people and organizations to share necessary
+                information without compromising your privacy.
+              </Text>
+            </View>
+          </ScrollView>
           {!(store.onboarding.didCompleteTutorial && store.authentication.didAuthenticate) && (
-            <View style={styles.startedButtonconatiner}>
+            <View style={styles.startedButtonContainer}>
               <Button
                 title="Get Started"
                 accessibilityLabel="Get Started"
@@ -109,7 +110,7 @@ const OnboardingPages = (onTutorialCompleted: GenericFn): Array<Element> => {
               />
             </View>
           )}
-        </ScrollView>
+        </View>
       </>
     )
   }
@@ -123,7 +124,7 @@ const OnboardingPages = (onTutorialCompleted: GenericFn): Array<Element> => {
           <Image source={require('../assets/img/face-scan.png')} style={styles.Image} />
         </ImageBackground>
 
-        <View style={styles.descriptiionText}>
+        <View style={styles.descriptionText}>
           <Text style={[styles.bodyText]}>
             Unlock the power of your digital identity with our all-in-one wallet! Let's embark on a journey to take full
             control of your digital presence.
@@ -139,12 +140,12 @@ const OnboardingPages = (onTutorialCompleted: GenericFn): Array<Element> => {
     body: string
   }> = [
     {
-      image: onBoardingdatasafe,
+      image: onBoardingDataSafe,
       title: 'Keep your data safe',
       body: 'Safeguard your digital Credentials with ADEYA, ensuring that your data remains protected and shared with your consent only.',
     },
     {
-      image: onBoardingOrganizeease,
+      image: onBoardingOrganizeEase,
       title: 'Organize with ease',
       body: 'Organize and manage your digital credentials effortlessly within ADEYA. Say goodbye to paper documents and embrace the convenience of an identity wallet in your hand.',
     },
@@ -160,8 +161,8 @@ const OnboardingPages = (onTutorialCompleted: GenericFn): Array<Element> => {
     return (
       <ScrollView style={styles.container}>
         <Text style={[defaultStyle.headerText, styles.headerText]}>{title}</Text>
-        <View style={styles.guideimages}>{image(imageDisplayOptions)}</View>
-        <View style={styles.descriptiionText}>
+        <View style={styles.guideImages}>{image(imageDisplayOptions)}</View>
+        <View style={styles.descriptionText}>
           <Text style={[styles.bodyText]}>{body}</Text>
         </View>
       </ScrollView>

diff --git a/app/screens/PINEnter.tsx b/app/screens/PINEnter.tsx
@@ -261,6 +261,44 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
     }
   }
 
+  const handlePINInput = async (PIN: string) => {
+    setPIN(PIN)
+    if (usage === PINEntryUsage.PINCheck) {
+      await verifyPIN(PIN)
+    }
+    if (PIN.length === minPINLength) {
+      try {
+        Keyboard.dismiss()
+        const result = await checkPIN(PIN)
+        if (!result) {
+          const newAttempt = store.loginAttempt.loginAttempts + 1
+          if (!getLockoutPenalty(newAttempt)) {
+            // skip displaying modals if we are going to lockout
+            setAlertModalVisible(true)
+          }
+          setContinueEnabled(true)
+
+          // log incorrect login attempts
+          dispatch({
+            type: DispatchAction.ATTEMPT_UPDATED,
+            payload: [{ loginAttempts: newAttempt }],
+          })
+
+          return
+        }
+
+        // reset login attempts if login is successful
+        dispatch({
+          type: DispatchAction.ATTEMPT_UPDATED,
+          payload: [{ loginAttempts: 0 }],
+        })
+
+        setAuthenticated(true)
+      } catch (error: unknown) {
+        // TODO:(jl) process error
+      }
+    }
+  }
   const onPINInputCompleted = async (PIN: string) => {
     try {
       setContinueEnabled(false)
@@ -324,12 +362,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
             <Text style={[TextTheme.normal, { alignSelf: 'center', marginBottom: 16 }]}>{t('PINEnter.EnterPIN')}</Text>
           )}
           <PINInput
-            onPINChanged={(p: string) => {
-              setPIN(p)
-              if (p.length === minPINLength) {
-                Keyboard.dismiss()
-              }
-            }}
+            onPINChanged={(p: string) => handlePINInput(p)}
             testID={testIdWithKey('EnterPIN')}
             accessibilityLabel={t('PINEnter.EnterPIN')}
             autoFocus={true}