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 screen style

This commit is contained in:
Michele Balistreri 2024-10-08 14:49:45 +02:00
parent a26e5eb424
commit c48fc62866
No known key found for this signature in database
GPG Key ID: E9567DA33A4F791A
8 changed files with 86 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Main.tsx
View File

@ -282,7 +282,7 @@ const Main = () => {
{step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
{step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
{step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
{step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Choose PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
{step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Enter PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
{step == Step.Home && <HomeScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} walletKey={walletKey.current} onPressFunc={login} onCancelFunc={cancel}></HomeScreen>}
{step == Step.FactoryReset && <FactoryResetScreen pinRetryCounter={pinDisplayCounter()} onPressFunc={connectCard} onCancelFunc={cancel}></FactoryResetScreen>}
<NFCModal isVisible={isModalVisible} onChangeFunc={stopNFC}></NFCModal>

4
src/NFCModal.tsx
View File

@ -21,7 +21,9 @@ const NFCModal: FC<NFCModalProps> = props => {
<Icon name="smartphone" size={40} style={Styles.modalIcon}/>
</View>
<Text style={Styles.modalPrompt}>Tap your Keycard</Text>
<Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
<View style={Styles.navContainer}>
<Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
</View>
</View>
</Modal>
)};

6
src/Styles.tsx
View File

@ -95,6 +95,12 @@ const Styles = StyleSheet.create({
},
modalIcon: {
color: '#F29AE9'
},
navContainer: {
flexDirection: 'row',
width: '95%',
marginLeft: '2.5%',
marginRight: '2.55%'
}
});

57
src/components/Button.tsx
View File

@ -1,42 +1,77 @@
import {FC } from "react";
import { DimensionValue, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Icon from 'react-native-vector-icons/Feather';
type ButtonProps = {
label: string;
label?: string;
disabled: boolean;
type?: string;
onChangeFunc: () => void;
};
const Button: FC<ButtonProps> = props => {
const {label, disabled, onChangeFunc} = props;
const {label, disabled, type = "primary", onChangeFunc} = props;
const textContainer = () => {
if(type == 'cancel') {
return style.cancelBtnContainer;
} else {
return style.primarytBtnContainer;
}
}
return (
<View style={buttonStyle.textBtnContainer}>
<TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
<Text style={buttonStyle.title}>{label}</Text>
<View style={textContainer()}>
<TouchableOpacity key={label} disabled={disabled} style={style.button} onPress={onChangeFunc}>
{type == "cancel" && <Icon name="chevron-left" size={16} style={style.cancelIcon}/>}
{type == "primary" && <Text style={style.primaryText}>{label}</Text>}
{type == "secondary" && <Text style={style.secondaryText}>{label}</Text>}
</TouchableOpacity>
</View>
)};
const buttonStyle = StyleSheet.create({
textBtnContainer: {
const style = StyleSheet.create({
primarytBtnContainer: {
flexDirection: 'row',
textAlign: 'center',
justifyContent: 'center',
backgroundColor: 'white',
width: '90%',
marginLeft: '5%',
marginRight: '5%',
height: 62,
flexGrow: 1,
flexShrink: 0,
flexBasis: 'auto'
},
cancelBtnContainer: {
textAlign: 'center',
justifyContent: 'center',
paddingTop: 15,
paddingBottom: 15
paddingBottom: 15,
borderWidth: 1,
borderColor: 'white',
width: 62,
height: 62,
flexGrow: 0,
flexShrink: 1,
flexBasis: 62
},
button: {
justifyContent: 'center'
},
title: {
primaryText: {
color: "black",
fontFamily: 'Inter',
fontSize: 14,
},
secondaryText: {
color: 'white',
fontFamily: 'Inter',
fontSize: 14
},
cancelIcon: {
textAlign: 'center'
}
});
export default Button;

51
src/components/Dialpad.tsx
View File

@ -3,6 +3,7 @@ import React, {FC, useState } from "react";
import DialpadKeypad from "./DialpadKeypad";
import Button from "./Button";
import DialpadPin from "./DialpadPin";
import Styles from "../Styles";
const { width } = Dimensions.get("window");
@ -21,8 +22,7 @@ const Dialpad: FC<DialpadProps> = props => {
const [code, setCode] = useState([]);
const [wrongRepeat, setWrongRepeat] = useState(false);
const pinLength = 6;
const pinContainerSize = width / 2;
const pinSize = (pinContainerSize / pinLength) + 8;
const pinSize = 14;
const updateCode = (item: never) => {
if (item === "X") {
@ -41,59 +41,36 @@ const Dialpad: FC<DialpadProps> = props => {
}
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={Styles.container}>
<View style={styles.textContainer}>
<Text style={styles.pinText}>{prompt}</Text>
<Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
<Text style={Styles.heading}>{prompt}</Text>
{pinRetryCounter >= 0 && <Text style={styles.pinAttempts}>Remaining attempts: {pinRetryCounter}</Text>}
{wrongRepeat && <Text style={styles.pinAttempts}>The PINs do not match</Text>}
<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}/>
</View>
<View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
<Button label="Next" disabled={false} onChangeFunc={onNext}></Button>
<View style={Styles.footer}>
<View style={Styles.navContainer}>
<Button disabled={false} onChangeFunc={onCancelFunc} type="cancel"></Button>
<Button label="Continue" disabled={false} onChangeFunc={onNext}></Button>
</View>
</View>
</SafeAreaView>
)};
const styles = StyleSheet.create({
container: {
backgroundColor: "#222222",
height: '100%',
},
textContainer: {
justifyContent: "center",
alignItems: "center",
marginTop: 30,
marginTop: 60,
position: "relative",
},
pinText: {
fontSize: 28,
fontFamily: 'Inter',
color: "white",
},
pinSubText: {
fontSize: 18,
fontFamily: 'Inter',
color: "white",
marginVertical: 30,
},
pinAttempts: {
fontSize: 18,
fontSize: 14,
fontFamily: 'Inter',
color: "white",
marginTop: -10,
marginBottom: 30
},
btnContainer: {
flexDirection: 'row',
width: '74%',
marginLeft: '13%',
marginRight: '13%',
alignItems: 'center'
marginTop: 10
}
});
});
export default Dialpad;

10
src/components/DialpadKeypad.tsx
View File

@ -6,12 +6,11 @@ type DialpadKeypadProps = {
dialPadContent: any[];
dialPadSize: number;
dialPadTextSize: number;
code: number[];
updateCodeFunc: (item: never) => void;
};
const DialpadKeypad: FC<DialpadKeypadProps> = props => {
const {dialPadContent, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
const {dialPadContent, dialPadSize, dialPadTextSize, updateCodeFunc} = props;
return (
<FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => {
@ -19,7 +18,7 @@ const DialpadKeypad: FC<DialpadKeypadProps> = props => {
<TouchableOpacity disabled={item === ""} onPress={() => updateCodeFunc(item as never)}>
<View style={[
{
borderWidth: item === "" ? 0 : 1,
borderWidth: item === "" || item === "X" ? 0 : 1,
width: dialPadSize,
height: dialPadSize,
},
@ -46,10 +45,9 @@ const styles = StyleSheet.create({
dialPadContainer: {
justifyContent: "center",
alignItems: "center",
margin: 15,
borderRadius: 45,
margin: 8,
padding: 0,
borderColor: "#199515",
borderColor: "white",
},
dialPadText: {
color: "white",

19
src/components/DialpadPin.tsx
View File

@ -47,23 +47,24 @@ const DialpadPin: FC<DialpadPinProps> = props => {
height: pinSize,
borderRadius: pinSize / 2,
overflow: "hidden",
margin: 5,
margin: 8,
}}
>
<View
style={[
{
borderColor: 'transparent',
borderRadius: pinSize / 2
borderColor: 'white',
borderRadius: pinSize,
borderWidth: 1
},
styles.pinContentContainer,
]}
>
{isSelected && (<Animated.View style={[
{
width: pinSize * 0.28,
height: pinSize * 0.28,
borderRadius: pinSize * 0.35,
width: pinSize,
height: pinSize,
borderRadius: pinSize,
},
animatedStyle,
styles.pinContent,
@ -81,18 +82,18 @@ const DialpadPin: FC<DialpadPinProps> = props => {
const styles = StyleSheet.create({
dialPadPinContainer: {
flexDirection: "row",
marginBottom: 25,
marginTop: 30,
marginBottom: 50,
alignItems: "flex-end",
},
pinContentContainer: {
flex: 1,
backgroundColor: "#ffffff11",
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
},
pinContent: {
backgroundColor: "#199515",
backgroundColor: "white",
}
});

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

@ -35,8 +35,8 @@ const InitializationScreen: FC<InitializationScreenProps> = props => {
return (
<View>
{ step == PinSteps.InsertPin && <Dialpad pinRetryCounter={-1} prompt={"Choose PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad pinRetryCounter={-1} prompt={"Repeat PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
{ step == PinSteps.InsertPin && <Dialpad pinRetryCounter={-1} prompt={"Create PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
{ step == PinSteps.RepeatPin && <Dialpad pinRetryCounter={-1} prompt={"Confirm PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
</View>
)};