1 files changed, 67 insertions, 0 deletions
diff --git a/frontend/app/components/cardInput.js b/frontend/app/components/cardInput.js
new file mode 100644
index 0000000..b286d56
--- /dev/null
+++ b/frontend/app/components/cardInput.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  RkButton,
+  RkTextInput,
+  RkText,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { FontAwesome } from '../assets/icons';
+
+export class CardInput extends React.Component {
+  state = {
+    hidden: true,
+    cardNumber: '',
+  };
+
+  formatCreditNumber = (number, isHidden) => (
+    isHidden
+      ? number.replace(/\D/g, '')
+      : number.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()
+  );
+
+  onInputLabelPressed = () => {
+    this.setState({
+      hidden: !this.state.hidden,
+      cardNumber: this.formatCreditNumber(this.state.cardNumber, !this.state.hidden),
+    });
+  };
+
+  onInputChanged = (text) => {
+    this.setState({
+      cardNumber: this.formatCreditNumber(text, this.state.hidden),
+    });
+  };
+
+  renderInputLabel = () => (
+    <RkButton
+      style={styles.button}
+      rkType='clear'
+      onPress={this.onInputLabelPressed}>
+      <RkText style={styles.icon} rkType='awesome secondaryColor'>{FontAwesome.slashEye}</RkText>
+    </RkButton>
+  );
+
+  render = () => (
+    <RkTextInput
+      autoCapitalize='none'
+      rkType='bordered rounded iconRight'
+      autoCorrect={false}
+      label={this.renderInputLabel()}
+      secureTextEntry={this.state.hidden}
+      onChangeText={this.onInputChanged}
+      value={this.state.cardNumber}
+      keyboardType='numeric'
+      maxLength={19}
+      {...this.props}
+    />
+  );
+}
+
+let styles = RkStyleSheet.create({
+  icon: {
+    fontSize: 24,
+  },
+  button: {
+    right: 17,
+  },
+});