Commit 9735ffce authored by Martin Santangelo's avatar Martin Santangelo

(feat) refactor keychain modal to new styles and uses reusable buttons

parent 09f5c6b9
//@ts-nocheck
import React, { Component } from 'react';
import {
Text,
View,
TextInput,
StyleSheet,
TouchableHighlight,
} from 'react-native';
import { Text, View, TextInput } from 'react-native';
import Modal from 'react-native-modal';
import { observer, inject } from 'mobx-react';
import { ComponentsStyle } from '../styles/Components';
import { CommonStyle } from '../styles/Common';
import i18n from '../common/services/i18n.service';
import ThemedStyles from '../styles/ThemedStyles';
import Button from '../common/components/Button';
@inject('keychain')
@observer
......@@ -49,16 +43,18 @@ export default class KeychainModalScreen extends Component {
}
renderBody() {
const theme = ThemedStyles.style;
if (this.props.keychain.unlockingExisting) {
return (
<View>
<Text style={CommonStyle.modalTitle}>
<Text style={[theme.fontXL, theme.colorSecondaryText]}>
{i18n.t('keychain.unlockMessage', {
keychain: this.props.keychain.unlockingKeychain,
})}
</Text>
<TextInput
style={ComponentsStyle.input}
style={[theme.input, theme.marginVertical2x]}
placeholderTextColor={ThemedStyles.getColor('tertiary_text')}
placeholder="Password"
secureTextEntry={true}
onChangeText={(secret) => this.setState({ secret })}
......@@ -69,12 +65,12 @@ export default class KeychainModalScreen extends Component {
} else {
return (
<View>
<Text style={CommonStyle.modalTitle}>
<Text style={[theme.fontXL, theme.colorSecondaryText]}>
{i18n.t('keychain.setupMessage', {
keychain: this.props.keychain.unlockingKeychain,
})}
</Text>
<Text style={styles.note}>
<Text style={[theme.fontL, theme.paddingVertical2x]}>
{i18n.t('keychain.encryptMessage', {
keychain: this.props.keychain.unlockingKeychain,
}) +
......@@ -82,14 +78,16 @@ export default class KeychainModalScreen extends Component {
i18n.t('keychain.encryptMessage1')}
</Text>
<TextInput
style={ComponentsStyle.input}
style={[theme.input, theme.marginVertical2x]}
placeholder={i18n.t('auth.password')}
placeholderTextColor={ThemedStyles.getColor('tertiary_text')}
secureTextEntry={true}
onChangeText={(secret) => this.setState({ secret })}
value={this.state.secret || ''}
/>
<TextInput
style={[ComponentsStyle.input, styles.confirmField]}
style={[theme.input, theme.marginVertical2x]}
placeholderTextColor={ThemedStyles.getColor('tertiary_text')}
placeholder={i18n.t('auth.confirmpassword')}
secureTextEntry={true}
onChangeText={(secretConfirmation) =>
......@@ -98,7 +96,7 @@ export default class KeychainModalScreen extends Component {
value={this.state.secretConfirmation || ''}
/>
{this.state.secret !== this.state.secretConfirmation && (
<Text style={[styles.note, styles.error]}>
<Text style={[theme.colorAlert]}>
{i18n.t('auth.confirmPasswordError')}
</Text>
)}
......@@ -109,52 +107,30 @@ export default class KeychainModalScreen extends Component {
render() {
const body = this.renderBody();
const theme = ThemedStyles.style;
return (
<Modal
isVisible={this.props.keychain.isUnlocking}
backdropColor="white"
backdropColor={ThemedStyles.getColor('primary_background')}
backdropOpacity={1}>
{this.props.keychain.isUnlocking && (
<View style={[CommonStyle.flexContainer, CommonStyle.modalScreen]}>
<View style={[theme.flexContainer, theme.padding2x]}>
{body}
{this.props.keychain.unlockingAttempts > 0 && (
<Text style={[styles.note, styles.error]}>
<Text style={[theme.colorAlert, theme.fontL]}>
{i18n.t('auth.invalidPassword')}
</Text>
)}
<View style={[CommonStyle.rowJustifyStart, { marginTop: 8 }]}>
<View style={CommonStyle.flexContainer}></View>
<TouchableHighlight
underlayColor="transparent"
onPress={this.cancel}
style={[
ComponentsStyle.button,
{ backgroundColor: 'transparent', marginRight: 4 },
]}>
<Text
style={[CommonStyle.paddingLeft, CommonStyle.paddingRight]}>
{i18n.t('cancel')}
</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor="transparent"
<View style={[theme.rowJustifyStart, theme.marginTop2x]}>
<View style={theme.flexContainer} />
<Button text={i18n.t('cancel')} onPress={this.cancel} inverted />
<Button
text={i18n.t('confirm')}
onPress={this.submit}
style={[
ComponentsStyle.button,
ComponentsStyle.buttonAction,
{ backgroundColor: 'transparent' },
]}>
<Text
style={[
CommonStyle.paddingLeft,
CommonStyle.paddingRight,
CommonStyle.colorPrimary,
]}>
{i18n.t('confirm')}
</Text>
</TouchableHighlight>
containerStyle={theme.marginLeft2x}
/>
</View>
</View>
)}
......@@ -162,19 +138,3 @@ export default class KeychainModalScreen extends Component {
);
}
}
const styles = StyleSheet.create({
note: {
fontSize: 12,
marginBottom: 10,
color: '#aaa',
},
error: {
marginTop: 10,
color: '#c00',
textAlign: 'center',
},
confirmField: {
marginTop: 5,
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment