status-im
/
keycard-exit
mirror of https://github.com/status-im/keycard-exit.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added repeat pin

This commit is contained in:
Ksenia Lebedeva 2024-09-12 18:09:58 +02:00
parent d3f9822f14
commit 0bde919194
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/steps/InitializationScreen.tsx
View File

@ -2,6 +2,11 @@ import {FC, useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";
import Button from "../Button";
enum PinSteps {
InsertPin,
RepeatPin
}
type InitializationScreenProps = {
onPressFunc: (pin: string) => void;
};
@ -9,16 +14,30 @@ type InitializationScreenProps = {
const InitializationScreen: FC<InitializationScreenProps> = props => {
const {onPressFunc} = props;
const [pin, onChangePin] = useState('');
const [btnDisabled, setBtnDisabled] = useState(true);
const [step, setStep] = useState(PinSteps.InsertPin);
const checkPin = (p: string) => {
pin === p ? setBtnDisabled(false) : setBtnDisabled(true);
}
return (
<View>
{ step == PinSteps.InsertPin &&
<View>
<Text style={styles.heading}> Insert pin</Text>
<TextInput onChangeText={onChangePin} value={pin} placeholder="******" keyboardType="number-pad" maxLength={6}/>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(pin)}} btnJustifyContent='center'></Button>
<TextInput onChangeText={onChangePin} value={pin} keyboardType="number-pad" maxLength={6}/>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => setStep(PinSteps.RepeatPin)} btnJustifyContent='center'></Button>
</View>
}
{ step == PinSteps.RepeatPin &&
<View>
<Text style={styles.heading}> Repeat pin</Text>
<TextInput onChangeText={(val) => {checkPin(val)}} keyboardType="number-pad" maxLength={6}/>
<Button label="Next" disabled={btnDisabled} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(pin)}} btnJustifyContent='center'></Button>
</View>
}
</View>
)};