Page MenuHomePhabricator
Files F3523806

D14067.id46300.diff
No OneTemporary
Actions

D14067.id46300.diff
View Options

diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -458,7 +458,7 @@
<PromptButton
text="Sign in"
onPress={onPressLogIn}
- variant="regular"
+ variant="enabled"
key="login-form"
/>,
);
@@ -469,7 +469,7 @@
<PromptButton
text={buttonText}
onPress={onPressQRCodeSignIn}
- variant="regular"
+ variant="enabled"
key="qr-code-login"
/>,
);
@@ -514,7 +514,7 @@
<PromptButton
text="Register"
onPress={onPressNewRegister}
- variant="regular"
+ variant="enabled"
/>
</AnimatedView>
);
diff --git a/native/account/prompt-button.react.js b/native/account/prompt-button.react.js
--- a/native/account/prompt-button.react.js
+++ b/native/account/prompt-button.react.js
@@ -10,31 +10,31 @@
type Props = {
+text: string,
+onPress: () => mixed,
- +variant: 'regular' | 'siwe',
+ +variant: 'enabled' | 'disabled' | 'loading' | 'siwe',
};
function PromptButton(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const { text, onPress, variant } = props;
- if (variant === 'regular') {
+ if (variant === 'siwe') {
return (
<View style={styles.container}>
- <PrimaryButton onPress={onPress} label={text} />
+ <PrimaryButton onPress={onPress} style={styles.siweButton}>
+ <View style={styles.siweIcon}>
+ <EthereumLogo />
+ </View>
+ <Text style={styles.buttonText}>{text}</Text>
+ </PrimaryButton>
+ </View>
+ );
+ } else {
+ return (
+ <View style={styles.container}>
+ <PrimaryButton onPress={onPress} label={text} variant={variant} />
</View>
);
}
-
- return (
- <View style={styles.container}>
- <PrimaryButton onPress={onPress} style={styles.siweButton}>
- <View style={styles.siweIcon}>
- <EthereumLogo />
- </View>
- <Text style={styles.buttonText}>{text}</Text>
- </PrimaryButton>
- </View>
- );
}
const unboundStyles = {
diff --git a/native/account/restore-password-account-screen.react.js b/native/account/restore-password-account-screen.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/restore-password-account-screen.react.js
@@ -0,0 +1,92 @@
+// @flow
+
+import * as React from 'react';
+import { Text, TextInput, View } from 'react-native';
+
+import PromptButton from './prompt-button.react.js';
+import RegistrationButtonContainer from './registration/registration-button-container.react.js';
+import RegistrationContainer from './registration/registration-container.react.js';
+import RegistrationContentContainer from './registration/registration-content-container.react.js';
+import RegistrationTextInput from './registration/registration-text-input.react.js';
+import type { SignInNavigationProp } from './sign-in-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+ +navigation: SignInNavigationProp<'RestorePasswordAccountScreen'>,
+ +route: NavigationRoute<'RestorePasswordAccountScreen'>,
+};
+
+// eslint-disable-next-line no-unused-vars
+function RestorePasswordAccountScreen(props: Props): React.Node {
+ const [username, setUsername] = React.useState('');
+ const [password, setPassword] = React.useState('');
+
+ const passwordInputRef = React.useRef<?React.ElementRef<typeof TextInput>>();
+ const focusPasswordInput = React.useCallback(() => {
+ passwordInputRef.current?.focus();
+ }, []);
+
+ const areCredentialsPresent = !!username && !!password;
+ const onProceed = React.useCallback(() => {}, []);
+
+ const styles = useStyles(unboundStyles);
+ return (
+ <RegistrationContainer>
+ <RegistrationContentContainer>
+ <Text style={styles.header}>Restore with password</Text>
+ <RegistrationTextInput
+ value={username}
+ onChangeText={setUsername}
+ placeholder="Username"
+ autoFocus={true}
+ autoCorrect={false}
+ autoCapitalize="none"
+ keyboardType="ascii-capable"
+ textContentType="username"
+ autoComplete="username"
+ returnKeyType="next"
+ onSubmitEditing={focusPasswordInput}
+ />
+ <RegistrationTextInput
+ value={password}
+ onChangeText={setPassword}
+ placeholder="Password"
+ secureTextEntry={true}
+ textContentType="password"
+ autoComplete="password"
+ autoCapitalize="none"
+ returnKeyType="go"
+ onSubmitEditing={onProceed}
+ style={styles.password}
+ ref={passwordInputRef}
+ />
+ </RegistrationContentContainer>
+ <RegistrationButtonContainer>
+ <View style={styles.buttonContainer}>
+ <PromptButton
+ text="Restore"
+ onPress={onProceed}
+ variant={areCredentialsPresent ? 'enabled' : 'disabled'}
+ />
+ </View>
+ </RegistrationButtonContainer>
+ </RegistrationContainer>
+ );
+}
+
+const unboundStyles = {
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ buttonContainer: {
+ flexDirection: 'row',
+ },
+ password: {
+ marginTop: 16,
+ },
+};
+
+export default RestorePasswordAccountScreen;
diff --git a/native/account/restore-prompt-screen.react.js b/native/account/restore-prompt-screen.react.js
--- a/native/account/restore-prompt-screen.react.js
+++ b/native/account/restore-prompt-screen.react.js
@@ -9,6 +9,7 @@
import RegistrationContentContainer from './registration/registration-content-container.react.js';
import type { SignInNavigationProp } from './sign-in-navigator.react';
import type { NavigationRoute } from '../navigation/route-names';
+import { RestorePasswordAccountScreenRouteName } from '../navigation/route-names.js';
import { useColors, useStyles } from '../themes/colors.js';
import RestoreIcon from '../vectors/restore-icon.react.js';
@@ -17,10 +18,13 @@
+route: NavigationRoute<'RestorePromptScreen'>,
};
-// eslint-disable-next-line no-unused-vars
function RestorePromptScreen(props: Props): React.Node {
const styles = useStyles(unboundStyles);
+ const openPasswordRestoreScreen = React.useCallback(() => {
+ props.navigation.navigate(RestorePasswordAccountScreenRouteName);
+ }, [props.navigation]);
+
const colors = useColors();
return (
<RegistrationContainer>
@@ -53,8 +57,8 @@
<View style={styles.buttonContainer}>
<PromptButton
text="Restore with password"
- onPress={() => {}}
- variant="regular"
+ onPress={openPasswordRestoreScreen}
+ variant="enabled"
/>
</View>
</RegistrationButtonContainer>
diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js
--- a/native/account/sign-in-navigator.react.js
+++ b/native/account/sign-in-navigator.react.js
@@ -8,6 +8,7 @@
import * as React from 'react';
import QRCodeScreen from './qr-code-screen.react.js';
+import RestorePasswordAccountScreen from './restore-password-account-screen.react.js';
import RestorePromptScreen from './restore-prompt-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import {
@@ -15,6 +16,7 @@
type SignInParamList,
QRCodeScreenRouteName,
RestorePromptScreenRouteName,
+ RestorePasswordAccountScreenRouteName,
} from '../navigation/route-names.js';
import { useColors } from '../themes/colors.js';
@@ -59,6 +61,10 @@
name={RestorePromptScreenRouteName}
component={RestorePromptScreen}
/>
+ <SignInStack.Screen
+ name={RestorePasswordAccountScreenRouteName}
+ component={RestorePasswordAccountScreen}
+ />
</SignInStack.Navigator>
);
}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -152,6 +152,8 @@
export const SignInNavigatorRouteName = 'SignInNavigator';
export const QRCodeScreenRouteName = 'QRCodeScreen';
export const RestorePromptScreenRouteName = 'RestorePromptScreen';
+export const RestorePasswordAccountScreenRouteName =
+ 'RestorePasswordAccountScreen';
export const UserProfileBottomSheetNavigatorRouteName =
'UserProfileBottomSheetNavigator';
export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
@@ -337,6 +339,7 @@
export type SignInParamList = {
+QRCodeScreen: void,
+RestorePromptScreen: void,
+ +RestorePasswordAccountScreen: void,
};
export type UserProfileBottomSheetParamList = {

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 10:20 AM (5 h, 3 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699632
Default Alt Text
D14067.id46300.diff (8 KB)

Event Timeline