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 screen

This commit is contained in:
Ksenia Lebedeva 2024-09-13 16:41:30 +02:00
parent 628187e68d
commit d068da24b0
2 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CustomDialpad.tsx → src/components/Dialpad.tsx
View File

@ -6,12 +6,12 @@ import DialpadPin from "./DialpadPin";
const { width, height } = Dimensions.get("window");
type CustomDialpadProps = {
type DialpadProps = {
onCancelFunc: () => void;
onNextFunc: (p?: string) => void;
onNextFunc: (p?: any) => void;
};
const CustomDialpad: FC<CustomDialpadProps> = props => {
const Dialpad: FC<DialpadProps> = props => {
const {onNextFunc, onCancelFunc} = props;
const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"];
const dialPadSize = width * 0.2;
@ -44,7 +44,7 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
</View>
<View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={() => onNextFunc(code.toString())} btnJustifyContent='center'></Button>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={() => onNextFunc(code.join(''))} btnJustifyContent='center'></Button>
</View>
</SafeAreaView>
)};
@ -78,4 +78,4 @@ const styles = StyleSheet.create({
}
});
export default CustomDialpad;
export default Dialpad;

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

@ -1,10 +1,9 @@
import {FC, useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";
import Button from "../Button";
import CustomDialpad from "../CustomDialpad";
import Dialpad from "../Dialpad";
enum PinSteps {
NumPad,
InsertPin,
RepeatPin
}
@ -17,33 +16,30 @@ type InitializationScreenProps = {
const InitializationScreen: FC<InitializationScreenProps> = props => {
const {onPressFunc, onCancelFunc} = props;
const [pin, onChangePin] = useState('');
const [btnDisabled, setBtnDisabled] = useState(true);
const [step, setStep] = useState(PinSteps.NumPad);
const [step, setStep] = useState(PinSteps.InsertPin);
const checkPin = (p: string) => {
pin === p ? setBtnDisabled(false) : setBtnDisabled(true);
const insertPin = (p: string) => {
onChangePin(p);
console.log(p);
setStep(PinSteps.RepeatPin);
}
const isSamePin = (p: string) => {
return pin === p;
}
const submitPin = (p: string) => {
if(isSamePin(p)) {
onPressFunc(pin);
} else {
console.log("err");
}
}
return (
<View>
<CustomDialpad onCancelFunc={() => {}} onNextFunc={(code: string | undefined) => {console.log(code)}}></CustomDialpad>
{ step == PinSteps.InsertPin &&
<View>
<Text style={styles.heading}> Insert pin</Text>
<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>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onCancelFunc} 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>
<Button label="Back" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => setStep(PinSteps.InsertPin)} btnJustifyContent='center'></Button>
</View>
}
{ step == PinSteps.InsertPin && <Dialpad onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
</View>
)};