status-im/keycard-exit
2
0
Fork 0
mirror of https://github.com/status-im/keycard-exit.git synced 2025-02-12 10:48:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

added enter pin screen

Browse Source
This commit is contained in:
Ksenia Lebedeva 2024-09-13 19:07:13 +02:00
parent eda1670f9c
commit c9efcf208c
5 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Dialpad.tsx
View File

@ -1,8 +1,9 @@
import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
import { SafeAreaView, StyleSheet, Text, View, Dimensions, useColorScheme } from "react-native";
import React, {FC, useState } from "react";
import DialpadKeypad from "./DialpadKeypad";
import Button from "./Button";
import DialpadPin from "./DialpadPin";
import { Colors } from "react-native/Libraries/NewAppScreen";
const { width, height } = Dimensions.get("window");
@ -13,6 +14,7 @@ import DialpadPin from "./DialpadPin";
};
const Dialpad: FC<DialpadProps> = props => {
const isDarkMode = useColorScheme() === 'dark';
const {prompt, onNextFunc, onCancelFunc} = props;
const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"];
const dialPadSize = width * 0.2;
@ -20,7 +22,7 @@ const Dialpad: FC<DialpadProps> = props => {
const [code, setCode] = useState([]);
const pinLength = 6;
const pinContainerSize = width / 2;
const pinSize = pinContainerSize / pinLength;
const pinSize = (pinContainerSize / pinLength) + 8;
const updateCode = (item: never) => {
if (item === "X") {
@ -40,7 +42,7 @@ const Dialpad: FC<DialpadProps> = props => {
}
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={[styles.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
<View style={styles.textContainer}>
<Text style={styles.pinText}>{prompt}</Text>
<Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
@ -48,8 +50,8 @@ const Dialpad: FC<DialpadProps> = props => {
<DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
</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={onNext} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='flex-start'></Button>
<Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='flex-end'></Button>
</View>
</SafeAreaView>
)};
@ -62,23 +64,25 @@ const styles = StyleSheet.create({
textContainer: {
justifyContent: "center",
alignItems: "center",
marginTop: 40,
marginTop: 30,
position: "relative",
},
pinText: {
fontSize: 30,
fontWeight: "medium",
fontSize: 28,
fontFamily: 'Inconsolata Medium',
color: "white",
},
pinSubText: {
fontSize: 18,
fontWeight: "medium",
fontFamily: 'Inconsolata Regular',
color: "white",
marginVertical: 30,
},
btnContainer: {
flexDirection: 'row',
width: '100%',
width: '74%',
marginLeft: '13%',
marginRight: '13%',
alignItems: 'center'
}
});

9
src/components/DialpadKeypad.tsx
View File

@ -19,7 +19,7 @@ const DialpadKeypad: FC<DialpadKeypadProps> = props => {
<TouchableOpacity disabled={item === ""} onPress={() => updateCodeFunc(item as never)}>
<View style={[
{
backgroundColor: item === "" ? "transparent" : "#fff",
borderWidth: item === "" ? 0 : 1,
width: dialPadSize,
height: dialPadSize,
},
@ -27,7 +27,7 @@ const DialpadKeypad: FC<DialpadKeypadProps> = props => {
]}
>
{item === "X" ? (
<Icon name="delete" size={24} color="#3F1D38" />
<Icon name="delete" size={24} color="white" />
) : (
<Text
style={[{ fontSize: dialPadTextSize }, styles.dialPadText]}
@ -49,10 +49,11 @@ const styles = StyleSheet.create({
margin: 15,
borderRadius: 45,
padding: 0,
borderColor: "transparent",
borderColor: "#199515",
},
dialPadText: {
color: "#3F1D38",
color: "white",
fontFamily: 'Inconsolata Regular'
}
});

16
src/components/DialpadPin.tsx
View File

@ -27,7 +27,7 @@ const DialpadPin: FC<DialpadPinProps> = props => {
useEffect(() => {
Animated.timing(animatedValue, {
toValue: code.length,
duration: 300,
duration: 400,
useNativeDriver: true,
}).start();
}, [code]);
@ -53,16 +53,16 @@ const DialpadPin: FC<DialpadPinProps> = props => {
<View
style={[
{
borderRadius: pinSize / 2,
borderColor: !isSelected ? "lightgrey" : "#3F1D38",
borderColor: 'transparent',
borderRadius: pinSize / 2
},
styles.pinContentContainer,
]}
>
{isSelected && (<Animated.View style={[
{
width: pinSize * 0.5,
height: pinSize * 0.5,
width: pinSize * 0.28,
height: pinSize * 0.28,
borderRadius: pinSize * 0.35,
},
animatedStyle,
@ -81,18 +81,18 @@ const DialpadPin: FC<DialpadPinProps> = props => {
const styles = StyleSheet.create({
dialPadPinContainer: {
flexDirection: "row",
marginBottom: 30,
marginBottom: 25,
alignItems: "flex-end",
},
pinContentContainer: {
flex: 1,
backgroundColor: "#fff",
backgroundColor: "#ffffff11",
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
},
pinContent: {
backgroundColor: "#5E454B",
backgroundColor: "#199515",
}
});

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

@ -39,16 +39,12 @@ const InitializationScreen: FC<InitializationScreenProps> = props => {
return (
<View>
{ step == PinSteps.InsertPin && <Dialpad prompt={"Insert Pin"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad prompt={"Repeat Pin"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
{ step == PinSteps.InsertPin && <Dialpad prompt={"Choose PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad prompt={"Repeat PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
</View>
)};
const styles = StyleSheet.create({
heading: {
textAlign: 'center',
fontSize: 16
}
});
export default InitializationScreen;

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

@ -2,6 +2,7 @@ import {FC, useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";
import Button from "../Button";
import { MNEMONIC } from "../../MnemonicList";
import Dialpad from "../Dialpad";
enum LoadMnemonicSteps {
InsertMnemonic,
@ -43,6 +44,11 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
}
}
const submitPin = (p: string) => {
onPressFunc(mnemonic, p);
return true;
}
return (
<View>
{ step == LoadMnemonicSteps.InsertMnemonic &&
@ -54,14 +60,7 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
<Text>{errMessage}</Text>
</View>
}
{ step == LoadMnemonicSteps.InsertPin &&
<View>
<Text style={styles.heading}> Insert pin</Text>
<TextInput onChangeText={setPin} value={pin} keyboardType="number-pad" maxLength={6}/>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(mnemonic, pin)}} btnJustifyContent='center'></Button>
<Button label="Back" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} btnJustifyContent='center'></Button>
</View>
}
{ step == LoadMnemonicSteps.InsertPin && <Dialpad prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
</View>
)};