ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-23 05:13:04 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated pin code desing

Browse Source
This commit is contained in:
mistikk 2018-09-28 23:39:45 +03:00
parent 141d72dd9e
commit 89d6cfa479
7 changed files with 149 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/numericKeyboard/views/numericKeyboardStyles.js
View File

@ -3,14 +3,20 @@ import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
justifyContent: "space-between",
marginTop: 20,
width: "$deviceWidth / 1.5",
},
buttonGroup: {
width: "100%",
flex: 1,
flexDirection: "row",
marginBottom: 15,
justifyContent: "space-between",
},
button: {
marginBottom: 15,
},
});

29
src/components/numericKeyboard/views/numericKeyboardView.js
View File

@ -25,30 +25,21 @@ class NumericKeyboard extends Component {
return (
<View style={styles.container}>
<View style={styles.buttonGroup}>
<CircularButton text={1} />
<CircularButton
style={{ marginLeft: 15, marginRight: 15 }}
text={2}
/>
<CircularButton text={3} />
<CircularButton style={styles.button} text={1} />
<CircularButton style={styles.button} text={2} />
<CircularButton style={styles.button} text={3} />
</View>
<View style={styles.buttonGroup}>
<CircularButton text={4} />
<CircularButton
style={{ marginLeft: 15, marginRight: 15 }}
text={5}
/>
<CircularButton text={6} />
<CircularButton style={styles.button} text={4} />
<CircularButton style={styles.button} text={5} />
<CircularButton style={styles.button} text={6} />
</View>
<View style={styles.buttonGroup}>
<CircularButton text={7} />
<CircularButton
style={{ marginLeft: 15, marginRight: 15 }}
text={8}
/>
<CircularButton text={9} />
<CircularButton style={styles.button} text={7} />
<CircularButton style={styles.button} text={8} />
<CircularButton style={styles.button} text={9} />
</View>
<CircularButton text={0} />
<CircularButton style={styles.button} text={0} />
</View>
);
}

60
src/index.js
View File

@ -6,42 +6,42 @@ import { StatusBar, Dimensions } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
EStyleSheet.build({
// Primary Colors
$white: "#FFFFFF",
$black: "#000000",
$primaryBlue: "#357ce6",
$primaryGray: "#788187",
$primaryLightGray: "#f6f6f6",
$primaryRed: "#e63535",
// Primary Colors
$white: "#FFFFFF",
$black: "#000000",
$primaryBlue: "#357ce6",
$primaryGray: "#788187",
$primaryLightGray: "#f6f6f6",
$primaryRed: "#e63535",
// General Colors
$borderColor: "#ffff",
$bubblesBlue: "#5CCDFF",
$iconColor: "#c1c5c7",
$dangerColor: "#fff",
$warningColor: "#fff",
$successColor: "#fff",
$disableButton: "#fff",
$shadowColor: "#fff",
$disableGray: "#fff",
// General Colors
$borderColor: "#ffff",
$bubblesBlue: "#5CCDFF",
$iconColor: "#c1c5c7",
$dangerColor: "#fff",
$warningColor: "#fff",
$successColor: "#fff",
$disableButton: "#fff",
$shadowColor: "#fff",
$disableGray: "#fff",
// Devices Sizes
$deviceHeight: Dimensions.get("window").height,
$deviceWidth: Dimensions.get("window").width,
// Devices Sizes
$deviceHeight: Dimensions.get("window").height,
$deviceWidth: Dimensions.get("window").width,
// Fonts Properties
$primaryFont: "Roboto",
$primaryLatterSpacing: 0,
// Fonts Properties
$primaryFont: "Roboto",
$primaryLatterSpacing: 0,
});
registerScreens();
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: "navigation.eSteem.Splash",
},
},
});
Navigation.setRoot({
root: {
component: {
name: "navigation.eSteem.Splash",
},
},
});
});

2
src/navigation.js
View File

@ -309,7 +309,7 @@ export const goToNoAuthScreens = () =>
{
// TODO before commit navigation.eSteem.Login
component: {
name: "navigation.eSteem.Login",
name: "navigation.eSteem.PinCode",
},
},
],

134
src/screens/pinCode/pinCodeScreen.js
View File

@ -35,87 +35,61 @@ class PinCodeScreen extends React.Component {
const pass = [0, 1];
return (
<Container style={globalStyles.container}>
<Content>
<Logo style={styles.logo} />
<Text style={styles.title}>Enter Pin Code</Text>
<Animated.View
style={{
transform: [{ translateX: tilt }],
flexDirection: "row",
alignSelf: "center",
}}
>
{[...Array(4)].map((val, index) => {
if (pass[index] === undefined) {
return (
<Animated.View
key={"passwordItem-" + index}
style={{
alignItems: "center",
justifyContent: "center",
height: 20,
margin: 5,
width: 20,
borderRadius: 20 / 2,
borderWidth: 1,
borderColor: "#357ce6",
backgroundColor: "#fff",
}}
/>
);
} else {
return (
<Animated.View
key={"passwordItem-" + index}
style={{
alignItems: "center",
justifyContent: "center",
height: 20,
margin: 5,
width: 20,
borderRadius: 20 / 2,
borderWidth: 1,
borderColor: "#357ce6",
backgroundColor: "#357ce6",
}}
/>
);
}
})}
</Animated.View>
<NumericKeyboard />
<Item style={styles.input}>
{/* <Input
secureTextEntry={!this.state.showPassword}
keyboardType="numeric"
maxLength={4}
onChangeText={e => this._handleOnChangeInput(e)}
value={this.state.pin}
/> */}
{/* <TouchableOpacity
onPress={() =>
this.setState({
showPassword: !this.state.showPassword,
})
}
>
<Icon
style={styles.icon}
active
name="lock"
type="EvilIcons"
backgroundColor={"#fff"}
/>
</TouchableOpacity> */}
</Item>
<TouchableOpacity>
<Text style={styles.forgotButtonText}>Oh, I forgot it…</Text>
</TouchableOpacity>
<Logo style={styles.logo} />
<Text style={styles.title}>Enter Pin Code</Text>
<Animated.View
style={{
transform: [{ translateX: tilt }],
flexDirection: "row",
alignSelf: "center",
}}
>
{[...Array(4)].map((val, index) => {
if (pass[index] === undefined) {
return (
<Animated.View
key={"passwordItem-" + index}
style={{
alignItems: "center",
justifyContent: "center",
height: 20,
margin: 5,
width: 20,
borderRadius: 20 / 2,
borderWidth: 1,
borderColor: "#357ce6",
backgroundColor: "#fff",
}}
/>
);
} else {
return (
<Animated.View
key={"passwordItem-" + index}
style={{
alignItems: "center",
justifyContent: "center",
height: 20,
margin: 5,
width: 20,
borderRadius: 20 / 2,
borderWidth: 1,
borderColor: "#357ce6",
backgroundColor: "#357ce6",
}}
/>
);
}
})}
</Animated.View>
<NumericKeyboard />
<TouchableOpacity>
<Text style={styles.forgotButtonText}>Oh, I forgot it…</Text>
</TouchableOpacity>
<Text style={styles.forgotButtonText}>
{this.props.informationText}
</Text>
</Content>
<Text style={styles.forgotButtonText}>
{this.props.informationText}
</Text>
</Container>
);
}

39
src/screens/splash/splashContainer.js
View File

@ -7,28 +7,27 @@ import { getAuthStatus } from "../../realm/realm";
import SplashScreen from "./splashScreen";
class SplashContainer extends React.Component {
constructor(props) {
super(props);
}
constructor(props) {
super(props);
}
async componentDidMount() {
await getAuthStatus()
.then(result => {
if (result === true) {
goToAuthScreens();
} else {
goToNoAuthScreens();
}
})
.catch(error => {
console.log(error);
goToAuthScreens();
});
}
async componentDidMount() {
await getAuthStatus()
.then(result => {
if (result === true) {
goToAuthScreens();
} else {
goToNoAuthScreens();
}
})
.catch(() => {
goToAuthScreens();
});
}
render() {
return <SplashScreen />;
}
render() {
return <SplashScreen />;
}
}
export default SplashContainer;

56
src/styles/pinCode.styles.js
View File

@ -1,32 +1,32 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
title: {
color: "#357ce6",
fontSize: 20,
fontWeight: "bold",
marginTop: 25,
alignSelf: "center",
marginBottom: 25,
},
logo: {
marginTop: "$deviceHeight / 8",
},
forgotButtonText: {
color: "#788187",
fontSize: 14,
marginTop: 25,
alignSelf: "center",
marginBottom: 25,
},
input: {
backgroundColor: "#f5f5f5",
borderColor: "#fff",
borderRadius: 5,
paddingLeft: 15,
minWidth: "$deviceWidth / 2",
},
icon: {
color: "#357ce6",
},
title: {
flex: 1,
color: "#357ce6",
fontSize: 20,
fontWeight: "bold",
alignSelf: "center",
},
logo: {
marginTop: "$deviceHeight / 8",
flex: 1,
},
forgotButtonText: {
color: "#788187",
fontSize: 14,
marginTop: 25,
alignSelf: "center",
marginBottom: 25,
},
input: {
backgroundColor: "#f5f5f5",
borderColor: "#fff",
borderRadius: 5,
paddingLeft: 15,
minWidth: "$deviceWidth / 2",
},
icon: {
color: "#357ce6",
},
});