diff --git a/src/components/BlankResults.tsx b/src/components/BlankResults.tsx new file mode 100644 index 0000000..6e00402 --- /dev/null +++ b/src/components/BlankResults.tsx @@ -0,0 +1,27 @@ +import React, { Component }from 'react'; + +import { + Text, + View, + StyleSheet +} from 'react-native'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center' + } as React.ViewStyle, +}); + +interface Props { +} + + +export default function BlankResults(props : Props) { + return ( + + Something + + ); +} diff --git a/src/components/Input.tsx b/src/components/Input.tsx index e5eadfd..0ca5a3d 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -3,7 +3,6 @@ import React, { Component }from 'react'; import { TextInput, View, StyleSheet } from 'react-native'; import { BRAND_PRIMARY } from '../settings/styles'; - const styles = StyleSheet.create({ inputBorder: { borderWidth: 1, diff --git a/src/components/Results.tsx b/src/components/Results.tsx new file mode 100644 index 0000000..81fefcf --- /dev/null +++ b/src/components/Results.tsx @@ -0,0 +1,32 @@ +import React, { Component }from 'react'; +import zxcvbn from 'zxcvbn'; +import { + Text, + View, + StyleSheet +} from 'react-native'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center' + } as React.ViewStyle, +}); + +interface Props { + value: string; +} + +interface State { + +} + +export default function Result(props : Props) { + const resultData = zxcvbn(props.value); + return ( + + {resultData.score} + + ); +} diff --git a/src/types/index.ts b/src/types/index.ts index 7f1c6d5..bcd6432 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -4,3 +4,8 @@ declare module "react-native-vector-icons/FontAwesome" { var noTypeInfoYet: any; // any var name here really export = noTypeInfoYet; } + +declare module "zxcvbn" { + var noTypeInfoYet: any; // any var name here really + export = noTypeInfoYet; +} diff --git a/src/views/main.tsx b/src/views/main.tsx index 000eff7..3cf2540 100644 --- a/src/views/main.tsx +++ b/src/views/main.tsx @@ -5,11 +5,14 @@ import { View } from 'react-native'; import Input from '../components/Input'; +import Results from '../components/Results'; +import BlankResults from '../components/BlankResults'; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'stretch', + justifyContent: 'center', backgroundColor: '#FFF', } as React.ViewStyle, @@ -39,12 +42,15 @@ export default class App extends Component { } render() { + const results = this.state.text ? ( + + ) : ( + + ); return ( - - Welcome to React Native! - + { results } ); }