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 pin prompt

This commit is contained in:
Ksenia Lebedeva 2024-09-13 16:55:41 +02:00
parent d068da24b0
commit 7430890d03
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Dialpad.tsx
View File

@ -7,12 +7,13 @@ import DialpadPin from "./DialpadPin";
const { width, height } = Dimensions.get("window"); const { width, height } = Dimensions.get("window");
type DialpadProps = { type DialpadProps = {
prompt: string;
onCancelFunc: () => void; onCancelFunc: () => void;
onNextFunc: (p?: any) => void; onNextFunc: (p?: any) => boolean;
}; };
const Dialpad: FC<DialpadProps> = props => { const Dialpad: FC<DialpadProps> = props => {
const {onNextFunc, onCancelFunc} = props; const {prompt, onNextFunc, onCancelFunc} = props;
const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"]; const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"];
const dialPadSize = width * 0.2; const dialPadSize = width * 0.2;
const dialPadTextSize = dialPadSize * 0.36; const dialPadTextSize = dialPadSize * 0.36;
@ -21,8 +22,6 @@ const Dialpad: FC<DialpadProps> = props => {
const pinContainerSize = width / 2; const pinContainerSize = width / 2;
const pinSize = pinContainerSize / pinLength; const pinSize = pinContainerSize / pinLength;
const updateCode = (item: never) => { const updateCode = (item: never) => {
if (item === "X") { if (item === "X") {
setCode((prev) => prev.slice(0, -1)); setCode((prev) => prev.slice(0, -1));
@ -34,17 +33,23 @@ const Dialpad: FC<DialpadProps> = props => {
} }
} }
const onNext = () => {
if (!onNextFunc(code.join(''))) {
setCode([]);
}
}
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={styles.pinText}>Create PIN</Text> <Text style={styles.pinText}>{prompt}</Text>
<Text style={styles.pinSubText}>Enter your secure six-digit code</Text> <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
<DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} /> <DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} />
<DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/> <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
</View> </View>
<View style={styles.btnContainer}> <View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button> <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.join(''))} btnJustifyContent='center'></Button> <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='center'></Button>
</View> </View>
</SafeAreaView> </SafeAreaView>
)}; )};

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

@ -20,8 +20,8 @@ const InitializationScreen: FC<InitializationScreenProps> = props => {
const insertPin = (p: string) => { const insertPin = (p: string) => {
onChangePin(p); onChangePin(p);
console.log(p);
setStep(PinSteps.RepeatPin); setStep(PinSteps.RepeatPin);
return true;
} }
const isSamePin = (p: string) => { const isSamePin = (p: string) => {
@ -29,17 +29,18 @@ const InitializationScreen: FC<InitializationScreenProps> = props => {
} }
const submitPin = (p: string) => { const submitPin = (p: string) => {
if(isSamePin(p)) { if(!isSamePin(p)) {
onPressFunc(pin); return false;
} else {
console.log("err");
} }
onPressFunc(pin);
return true;
} }
return ( return (
<View> <View>
{ step == PinSteps.InsertPin && <Dialpad onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> } { step == PinSteps.InsertPin && <Dialpad prompt={"Insert Pin"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> } { step == PinSteps.RepeatPin && <Dialpad prompt={"Repeat Pin"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
</View> </View>
)}; )};