Page MenuHomePhabricator
Files F2905643

D5489.id18052.diff
No OneTemporary
Actions

D5489.id18052.diff
View Options

diff --git a/native/account/log-in-panel.react.js b/native/account/log-in-panel.react.js
--- a/native/account/log-in-panel.react.js
+++ b/native/account/log-in-panel.react.js
@@ -37,6 +37,7 @@
setNativeCredentials,
} from './native-credentials';
import { PanelButton, Panel } from './panel-components.react';
+import { PasswordInput } from './password-input.react';
export type LogInState = {
+usernameInputText: ?string,
@@ -59,7 +60,7 @@
};
class LogInPanel extends React.PureComponent<Props> {
usernameInput: ?TextInput;
- passwordInput: ?TextInput;
+ passwordInput: ?PasswordInput;
componentDidMount() {
this.attemptToFetchCredentials();
@@ -132,14 +133,14 @@
color="#555"
style={styles.icon}
/>
- <TextInput
+ <PasswordInput
style={styles.input}
value={this.passwordInputText}
onChangeText={this.onChangePasswordInputText}
placeholder="Password"
- secureTextEntry={true}
textContentType="password"
autoComplete="password"
+ autoCapitalize="none"
returnKeyType="go"
blurOnSubmit={false}
onSubmitEditing={this.onSubmit}
@@ -170,7 +171,7 @@
this.usernameInput.focus();
};
- passwordInputRef: (passwordInput: ?TextInput) => void = passwordInput => {
+ passwordInputRef: (passwordInput: ?PasswordInput) => void = passwordInput => {
this.passwordInput = passwordInput;
};
diff --git a/native/account/password-input.react.js b/native/account/password-input.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/password-input.react.js
@@ -0,0 +1,75 @@
+// @flow
+
+import * as React from 'react';
+import { TextInput as BaseTextInput, View, StyleSheet } from 'react-native';
+
+import Button from '../components/button.react';
+import SWMansionIcon from '../components/swmansion-icon.react';
+import { TextInput } from './modal-components.react';
+
+type Props = React.ElementConfig<typeof BaseTextInput>;
+
+type State = {
+ +secureTextEntry: boolean,
+};
+
+class PasswordInput extends React.PureComponent<Props, State> {
+ wrappedTextInput: ?TextInput;
+ constructor(props: Props) {
+ super(props);
+ this.state = { secureTextEntry: true };
+ }
+
+ onToggleShowPassword: () => void = () => {
+ this.setState(state => ({
+ secureTextEntry: !state.secureTextEntry,
+ }));
+ };
+
+ render(): React.Node {
+ const { style, ...rest } = this.props;
+ return (
+ <View>
+ <TextInput
+ style={[style, styles.inputPassword]}
+ {...rest}
+ secureTextEntry={this.state.secureTextEntry}
+ ref={this.wrappedTextInputRef}
+ />
+ <Button onPress={this.onToggleShowPassword} topStyle={styles.button}>
+ <SWMansionIcon
+ name={this.state.secureTextEntry ? 'eye-open' : 'eye-closed'}
+ size={22}
+ color="#555"
+ />
+ </Button>
+ </View>
+ );
+ }
+
+ wrappedTextInputRef: (wrappedTextInput: ?TextInput) => void = (
+ wrappedTextInput: ?TextInput,
+ ) => {
+ this.wrappedTextInput = wrappedTextInput;
+ };
+
+ focus() {
+ this.wrappedTextInput?.focus();
+ }
+}
+
+const styles = StyleSheet.create({
+ button: {
+ borderRadius: 21,
+ bottom: 0,
+ margin: 2,
+ padding: 8,
+ position: 'absolute',
+ right: -10,
+ },
+ inputPassword: {
+ paddingRight: 30,
+ },
+});
+
+export { PasswordInput };

File Metadata

Mime Type
text/plain
Expires
Mon, Oct 7, 7:20 AM (21 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2252746
Default Alt Text
D5489.id18052.diff (3 KB)

Event Timeline