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

This commit is contained in:
Ksenia Lebedeva 2024-09-13 23:10:41 +02:00
parent c9efcf208c
commit 19d35f65b6
6 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Main.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, useColorScheme, DeviceEventEmitter } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import { SafeAreaView, StyleSheet, DeviceEventEmitter } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import DiscoveryScreen from './components/steps/DiscoveryScreen';
@ -20,7 +19,6 @@ enum Step {
}
const Main = () => {
const isDarkMode = useColorScheme() === 'dark';
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const [step, setStep] = useState(Step.Discovery);
@ -134,10 +132,6 @@ const Main = () => {
}
});
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const connectCard = async () => {
if (await Keycard.nfcIsSupported() && !await Keycard.nfcIsEnabled()) {
await Keycard.openNfcSettings();
@ -168,7 +162,7 @@ const Main = () => {
}
return (
<SafeAreaView style={[backgroundStyle, styles.container]}>
<SafeAreaView style={styles.container}>
{step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
{step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
{step == Step.Loading && <MnemonicScreen onPressFunc={loadMnemonic} pinRequired={pinRef.current ? false : true} onCancelFunc={cancel}></MnemonicScreen>}
@ -180,6 +174,7 @@ const Main = () => {
const styles = StyleSheet.create({
container: {
backgroundColor: '#222222',
width: '100%',
height: '100%'
},

11
src/NFCModal.tsx
View File

@ -1,8 +1,7 @@
import React, {FC, useEffect, useState } from "react";
import {Platform, StyleSheet, Text, useColorScheme, View } from "react-native";
import React, {FC} from "react";
import {Platform, StyleSheet, Text, View } from "react-native";
import Modal from "react-native-modal/dist/modal";
import Icon from 'react-native-vector-icons/Feather';
import { Colors } from "react-native/Libraries/NewAppScreen";
import Button from "./components/Button";
type NFCModalProps = {
@ -12,11 +11,10 @@ type NFCModalProps = {
const NFCModal: FC<NFCModalProps> = props => {
const {isVisible, onChangeFunc} = props;
const isDarkMode = useColorScheme() === 'dark';
return (
<Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
<View style={[modalStyle.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
<View style={modalStyle.container}>
<Text style={modalStyle.header}>Ready to Scan</Text>
<View style={modalStyle.iconContainer}>
<Icon name="smartphone" size={40} style={modalStyle.icon}/>
@ -30,7 +28,7 @@ const NFCModal: FC<NFCModalProps> = props => {
const modalStyle = StyleSheet.create({
modalContainer: {
justifyContent: 'flex-end',
margin: 0
margin: 0,
},
container: {
height: 350,
@ -39,6 +37,7 @@ const modalStyle = StyleSheet.create({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderColor: 'rgba(0, 0, 0, 0.1)',
backgroundColor: '#222222'
},
header: {
paddingTop: '7%',

12
src/components/Dialpad.tsx
View File

@ -1,11 +1,10 @@
import { SafeAreaView, StyleSheet, Text, View, Dimensions, useColorScheme } from "react-native";
import { SafeAreaView, StyleSheet, Text, View, Dimensions } 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");
const { width } = Dimensions.get("window");
type DialpadProps = {
prompt: string;
@ -14,7 +13,6 @@ import { Colors } from "react-native/Libraries/NewAppScreen";
};
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;
@ -42,7 +40,7 @@ const Dialpad: FC<DialpadProps> = props => {
}
return (
<SafeAreaView style={[styles.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
<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>
@ -58,8 +56,8 @@ const Dialpad: FC<DialpadProps> = props => {
const styles = StyleSheet.create({
container: {
backgroundColor: "#4A646C55",
height: '100%'
backgroundColor: "#222222",
height: '100%',
},
textContainer: {
justifyContent: "center",

0
src/components/PinInput.tsx
View File

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

@ -14,7 +14,8 @@ const AuthenticationScreen: FC<AuthenticationScreenProps> = props => {
<View>
<View>
<Text style={styles.heading}> Success</Text>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Text style={styles.prompt}>Work in progress...</Text>
<Button label="Home" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
</View>
</View>
)};
@ -22,7 +23,17 @@ const AuthenticationScreen: FC<AuthenticationScreenProps> = props => {
const styles = StyleSheet.create({
heading: {
textAlign: 'center',
fontSize: 16
fontSize: 30,
fontFamily: 'Inconsolata Medium',
color: '#199515',
marginTop: '50%'
},
prompt: {
textAlign: 'center',
fontSize: 18,
fontFamily: 'Inconsolata Regular',
color: 'white',
marginTop: '5%'
}
});

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

@ -18,7 +18,6 @@ type MnemonicScreenProps = {
const MnemonicScreen: FC<MnemonicScreenProps> = props => {
const {pinRequired, onPressFunc, onCancelFunc} = props;
const [mnemonic, setMnemonic] = useState('');
const [pin, setPin] = useState('');
const [errMessage, setErrMessage] = useState('');
const [step, setStep] = useState(LoadMnemonicSteps.InsertMnemonic);
@ -52,12 +51,16 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
return (
<View>
{ step == LoadMnemonicSteps.InsertMnemonic &&
<View>
<View style={styles.container}>
<Text style={styles.heading}> Load mnemonic</Text>
<TextInput editable multiline numberOfLines={6} onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={{backgroundColor: '#4A646C'}} />
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => updateMnemonic(mnemonic)} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Text>{errMessage}</Text>
<View style={styles.mnemonicContainer}>
<TextInput editable multiline onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={styles.mnemonic} placeholder="Type your passphrase"/>
</View>
<View style={styles.btnContainer}>
<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={() => updateMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
</View>
<Text style={styles.errorMessage}>{errMessage}</Text>
</View>
}
{ step == LoadMnemonicSteps.InsertPin && <Dialpad prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
@ -65,9 +68,43 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
)};
const styles = StyleSheet.create({
container: {
width: '89%',
marginLeft: '5.5%',
marginRight: '5.5%'
},
heading: {
textAlign: 'center',
marginTop: 30,
fontSize: 28,
fontFamily: 'Inconsolata Medium',
color: "white",
paddingBottom: 20
},
mnemonicContainer: {
width: '100%',
height: 300,
borderColor: '#199515',
borderBottomWidth: 1,
borderTopWidth: 1,
borderStyle: 'dashed'
},
mnemonic: {
textAlignVertical: 'bottom',
fontFamily: 'Inconsolata Regular',
fontSize: 16
},
btnContainer: {
flexDirection: 'row',
width: '90%',
marginLeft: '5%',
marginRight: '5%',
alignItems: 'center'
},
errorMessage: {
fontFamily: 'Inconsolata Regular',
textAlign: 'center',
paddingTop: '10%'
}
});