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

created informationArea component for login side

Browse Source
This commit is contained in:
ue 2018-09-27 01:07:57 +03:00
parent 41dbccb354
commit 94e788191a
8 changed files with 128 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/formInput/formInput.js
View File

@ -1,12 +0,0 @@
import React from "react";
import { View, TextInput } from "react-native";
import styles from "../../styles/formInput.styles";
const FormInput = props => (
<View style={styles.container}>
<TextInput style={styles.input} {...props} />
</View>
);
export default FormInput;

12
src/components/formInput/view/formInputView.js
View File

@ -13,11 +13,13 @@ import styles from "./formInputStyles";
class FormInputView extends Component {
/* Props
* ------------------------------------------------
* @prop { string } placeholder - Title for header string.
* @prop { string } type - Description for header string.
* @prop { string } isFirstImage - Description for header string.
* @prop { string } isEditable - Description for header string.
* @prop { string } isValid - Description for header string.
* @prop { string } placeholder - Place holder text.
* @prop { string } type - Input type.
* @prop { boolean } isFirstImage - Render image from steem.
* @prop { boolean } isEditable - Can permission edit.
* @prop { boolean } isValid - This delegate input valit or not.
* @prop { boolean } secureTextEntry - For hiding password value.
*
*
*
*/

2
src/components/index.js
View File

@ -3,6 +3,6 @@ import Comment from "./comment/comment";
import PostCard from "./post-card/postCard";
import Reply from "./reply/reply";
import Search from "./search/search";
import FormInput from "./formInput/formInput";
import { FormInput } from "./formInput";
export { Logo, Comment, PostCard, Reply, Search, FormInput };

3
src/components/informationArea/index.js Normal file
View File

@ -0,0 +1,3 @@
import InformationArea from "./view/informationAreaView";
export { InformationArea };

20
src/components/informationArea/view/informationAreaStyles.js Normal file
View File

@ -0,0 +1,20 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
container: {
flexDirection: "row",
paddingLeft: 50,
paddingRight: 32,
marginTop: 10,
},
infoIcon: {
flex: 0.125,
fontSize: 20,
alignSelf: "center",
},
infoText: {
flex: 0.875,
fontSize: 12,
color: "#788187",
},
});

41
src/components/informationArea/view/informationAreaView.js Normal file
View File

@ -0,0 +1,41 @@
import React, { Component } from "react";
import { View, Text } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
// Constants
// Components
// Styles
import styles from "./informationAreaStyles";
class FormInputView extends Component {
/* Props
* ------------------------------------------------
* @prop { string } description - Description texts.
* @prop { string } iconName - For icon render name.
*
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
render() {
const { description, iconName } = this.props;
return (
<View style={styles.container}>
<Ionicons color="#c1c5c7" style={styles.infoIcon} name={iconName} />
<Text style={styles.infoText}>{description}</Text>
</View>
);
}
}
export default FormInputView;

76
src/screens/login/screen/loginScreen.js
View File

@ -18,6 +18,7 @@ import FastImage from "react-native-fast-image";
import { TabBar } from "../../../components/tabBar";
import { LoginHeader } from "../../../components/loginHeader";
import { FormInput } from "../../../components/formInput";
import { InformationArea } from "../../../components/informationArea";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import { Login } from "../../../providers/steem/auth";
@ -71,8 +72,6 @@ class LoginScreen extends Component {
password: "",
isLoading: false,
isUsernameValid: true,
usernameBorderColor: "#c1c5c7",
passwordBorderColor: "#c1c5c7",
};
}
@ -90,18 +89,16 @@ class LoginScreen extends Component {
BackHandler.removeEventListener("hardwareBackPress");
}
doLogin = () => {
const { componentId } = this.props;
_handleOnPressLogin = () => {
const { componentId, dispatch } = this.props;
const { password, username } = this.state;
this.setState({ isLoading: true });
let password = this.state.password;
let username = this.state.username;
Login(username, password)
.then(result => {
if (result) {
this.props.dispatch(addNewAccount(result));
dispatch(addNewAccount(result));
Navigation.setStackRoot(componentId, {
component: {
name: "navigation.eSteem.PinCode",
@ -125,6 +122,7 @@ class LoginScreen extends Component {
const validUsers = await lookupAccounts(username);
await this.setState({ isUsernameValid: validUsers.includes(username) });
};
_handleOnPasswordChange = value => {
this.setState({ password: value });
};
@ -195,28 +193,12 @@ class LoginScreen extends Component {
secureTextEntry
type="password"
/>
<View
style={{
flexDirection: "row",
marginHorizontal: 30,
paddingLeft: 10,
}}
>
<Ionicons
color="#c1c5c7"
style={{
flex: 0.125,
fontSize: 25,
alignSelf: "center",
}}
name="ios-information-circle-outline"
/>
<Text style={{ flex: 0.875, color: "#788187" }}>
User credentials are kept locally on the device. Credentials are
removed upon logout!
</Text>
</View>
<InformationArea
description="User credentials are kept locally on the device. Credentials are
removed upon logout!"
iconName="ios-information-circle-outline"
/>
<View style={{ flexDirection: "row", margin: 30 }}>
<View style={{ flex: 0.6 }}>
<TouchableOpacity
@ -238,7 +220,7 @@ class LoginScreen extends Component {
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={this.doLogin}
onPress={this._handleOnPressLogin}
style={{
flex: 0.4,
width: 100,
@ -287,36 +269,10 @@ class LoginScreen extends Component {
</View>
</View>
<View tabLabel="SteemConnect" style={styles.steemConnectTab}>
<View
style={{
flex: 1,
backgroundColor: "#ffffff",
marginTop: 10,
}}
>
<View
style={{
flexDirection: "row",
marginHorizontal: 30,
paddingLeft: 10,
marginTop: 20,
}}
>
<Ionicons
color="#c1c5c7"
style={{
flex: 0.125,
fontSize: 25,
alignSelf: "center",
}}
name="ios-information-circle-outline"
/>
<Text style={{ flex: 0.875, color: "#788187" }}>
If you don't want to keep your password encrypted and saved on
your device, you can use Steemconnect.
</Text>
</View>
</View>
<InformationArea
description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
iconName="ios-information-circle-outline"
/>
<View
style={{
alignItems: "flex-end",

81
src/screens/login/screen/loginStyles.js
View File

@ -1,45 +1,44 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
container: {
margin: 0,
padding: 0,
backgroundColor: "#f1f1f1",
flexDirection: "column",
},
header: {
flexDirection: "row",
padding: 0,
backgroundColor: "white",
marginBottom: 10,
height: 200,
flex: 0.4,
},
footer: {
flex: 0.2,
bottom: 0,
marginTop: 10,
height: 80,
backgroundColor: "white",
flexDirection: "row",
},
tabView: {
alignSelf: "center",
backgroundColor: "transparent",
},
tabbar: {
alignSelf: "center",
height: 40,
backgroundColor: "white",
},
tabbarItem: {
flex: 1,
backgroundColor: "#ffffff",
minWidth: "$deviceWidth",
},
steemConnectTab: {
flex: 1,
backgroundColor: "#e9e9e9",
minWidth: "$deviceWidth",
},
container: {
margin: 0,
padding: 0,
backgroundColor: "#f1f1f1",
flexDirection: "column",
},
header: {
flexDirection: "row",
padding: 0,
backgroundColor: "white",
marginBottom: 10,
height: 200,
flex: 0.4,
},
footer: {
flex: 0.2,
bottom: 0,
marginTop: 10,
height: 80,
backgroundColor: "white",
flexDirection: "row",
},
tabView: {
alignSelf: "center",
backgroundColor: "transparent",
},
tabbar: {
alignSelf: "center",
height: 40,
backgroundColor: "white",
},
tabbarItem: {
flex: 1,
backgroundColor: "#ffffff",
minWidth: "$deviceWidth",
},
steemConnectTab: {
backgroundColor: "#fff",
minWidth: "$deviceWidth",
},
});