From c7b110e5bf13b6d036398ba2de9670abdee49e6d Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Mon, 15 Sep 2025 18:23:59 -0300 Subject: [PATCH 1/8] feat: new e2e flow --- app/stacks/InsideStack.tsx | 2 + app/stacks/types.ts | 1 + app/views/E2EEnterYourPasswordView.tsx | 59 ++++++++++++---- app/views/E2EResetYourPasswordView.tsx | 95 ++++++++++++++++++++++++++ 4 files changed, 144 insertions(+), 13 deletions(-) create mode 100644 app/views/E2EResetYourPasswordView.tsx diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 1e4c52fbe9e..3e67f9b02e5 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -60,6 +60,7 @@ import E2ESaveYourPasswordView from '../views/E2ESaveYourPasswordView'; import E2EHowItWorksView from '../views/E2EHowItWorksView'; // E2EEnterYourPassword Stack import E2EEnterYourPasswordView from '../views/E2EEnterYourPasswordView'; +import E2EResetYourPasswordView from '../views/E2EResetYourPasswordView'; // InsideStackNavigator import AttachmentView from '../views/AttachmentView'; import ModalBlockView from '../views/ModalBlockView'; @@ -289,6 +290,7 @@ const E2EEnterYourPasswordStackNavigator = () => { return ( + ); }; diff --git a/app/stacks/types.ts b/app/stacks/types.ts index 4634b2457b2..d79f7538434 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -271,6 +271,7 @@ export type E2ESaveYourPasswordStackParamList = { export type E2EEnterYourPasswordStackParamList = { E2EEnterYourPasswordView: undefined; + E2EResetYourPasswordView: undefined; }; export type InsideStackParamList = { diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx index 5f5f5483568..6e44a0e8640 100644 --- a/app/views/E2EEnterYourPasswordView.tsx +++ b/app/views/E2EEnterYourPasswordView.tsx @@ -1,9 +1,11 @@ -import { useIsFocused, useNavigation } from '@react-navigation/native'; +import { useIsFocused } from '@react-navigation/native'; import React, { useEffect, useLayoutEffect, useRef } from 'react'; -import { ScrollView, StyleSheet, Text, AccessibilityInfo } from 'react-native'; +import { ScrollView, StyleSheet, Text, AccessibilityInfo, View } from 'react-native'; import { useDispatch } from 'react-redux'; import { useForm } from 'react-hook-form'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import { E2EEnterYourPasswordStackParamList } from '../stacks/types'; import { encryptionDecodeKey } from '../actions/encryption'; import Button from '../containers/Button'; import * as HeaderButton from '../containers/Header/components/HeaderButton'; @@ -18,6 +20,7 @@ import { useTheme } from '../theme'; import sharedStyles from './Styles'; import { showToast } from '../lib/methods/helpers/showToast'; import { showErrorAlert, useDebounce } from '../lib/methods/helpers'; +import { Separator } from '../containers/List'; const styles = StyleSheet.create({ info: { @@ -25,12 +28,24 @@ const styles = StyleSheet.create({ lineHeight: 24, marginTop: 24, ...sharedStyles.textRegular + }, + content: { + gap: 32 + }, + e2eePasswordInput: { + marginBottom: 0 + }, + forgotE2EEPasswordButton: { + marginTop: 0 } }); -const E2EEnterYourPasswordView = (): React.ReactElement => { +interface IE2EEnterYourPasswordView { + navigation: NativeStackNavigationProp; +} + +const E2EEnterYourPasswordView = ({ navigation }: IE2EEnterYourPasswordView): React.ReactElement => { const { colors } = useTheme(); - const navigation = useNavigation(); const isFocused = useIsFocused(); const dispatch = useDispatch(); const { enabled: encryptionEnabled, failure: encryptionFailure } = useAppSelector(state => state.encryption); @@ -96,12 +111,14 @@ const E2EEnterYourPasswordView = (): React.ReactElement => { - + contentContainerStyle={{ ...sharedStyles.containerScrollView }}> + + {I18n.t('Enter_E2EE_Password_description')} + { autoComplete='password' textContentType='password' importantForAutofill='yes' - containerStyle={{ marginBottom: 0 }} + containerStyle={styles.e2eePasswordInput} /> + +