ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-11-24 08:55:14 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #33 from esteemapp/login

Browse Source 
validation added && cancel button fixed
This commit is contained in:
Feruz M 2018-09-30 20:03:44 +03:00 committed by GitHub
commit 4bf5bfa2f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/buttons/index.js
View File

@ -1,3 +1,3 @@
import GreetingHeaderButton from "./views/greetingHeaderButtonView";
import TextButton from "./views/textButtonView";
export { GreetingHeaderButton };
export { TextButton };

2
src/components/buttons/views/greetingHeaderButtonStyles.js → src/components/buttons/views/textButtonStyles.js
View File

@ -2,6 +2,8 @@ import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
button: {
flex: 1,
flexDirection: "row",
width: 54,
backgroundColor: "transparent",
height: 19,

6
src/components/buttons/views/greetingHeaderButtonView.js → src/components/buttons/views/textButtonView.js
View File

@ -1,9 +1,9 @@
import React, { Fragment } from "react";
import { TouchableWithoutFeedback, Text, View } from "react-native";
import styles from "./greetingHeaderButtonStyles";
import styles from "./textButtonStyles";
const GreetingHeaderButtonView = ({ text, onPress, style }) => (
const TextButtonView = ({ text, onPress, style }) => (
<Fragment>
<TouchableWithoutFeedback
style={[styles.button, style]}
@ -16,4 +16,4 @@ const GreetingHeaderButtonView = ({ text, onPress, style }) => (
</Fragment>
);
export default GreetingHeaderButtonView;
export default TextButtonView;

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

@ -29,27 +29,34 @@ class FormInputView extends Component {
this.state = {
value: "",
inputBorderColor: "#c1c5c7",
isValid: true,
};
}
// Component Life Cycles
componentWillReceiveProps(nextProps) {
const { isValid } = this.props;
if (nextProps.isValid !== isValid) {
this.setState({ isValid: nextProps.isValid });
}
}
// Component Functions
_handleOnChange = value => {
const { onChange } = this.props;
value && this.setState({ value });
onChange && value && onChange(value);
this.setState({ value });
onChange && onChange(value);
};
render() {
const { inputBorderColor, value } = this.state;
const { inputBorderColor, isValid, value } = this.state;
const {
placeholder,
type,
isFirstImage,
isEditable,
isValid,
leftIconName,
rightIconName,
secureTextEntry,

4
src/components/loginHeader/view/loginHeaderView.js
View File

@ -3,7 +3,7 @@ import { View, Text, Image } from "react-native";
// Constants
// Components
import { GreetingHeaderButton } from "../../buttons";
import { TextButton } from "../../buttons";
import { LineBreak } from "../../basicUIElements";
// Styles
// eslint-disable-next-line
@ -36,7 +36,7 @@ class LoginHeaderView extends Component {
source={require("../../../assets/esteem.png")}
/>
<View style={styles.headerButton}>
<GreetingHeaderButton onPress={onPress} text="Sign up" />
<TextButton onPress={onPress} text="Sign up" />
</View>
</View>
{!isKeyboardOpen && (

3
src/components/mainButton/view/mainButtonStyles.js
View File

@ -45,4 +45,7 @@ export default EStyleSheet.create({
width: 20,
height: 20,
},
disableTouchable: {
backgroundColor: "#c1c5c7",
},
});

35
src/components/mainButton/view/mainButtonView.js
View File

@ -18,28 +18,41 @@ import styles from "./mainButtonStyles";
class MainButton extends Component {
/* Props
* ------------------------------------------------
* @prop { string } isLoading - TODO:
* @prop { string } text - TODO:
* @prop { boolean } secondText - TODO:
* @prop { boolean } iconColor - TODO:
* @prop { string } isLoading - TODO:
* @prop { string } text - TODO:
* @prop { boolean } secondText - TODO:
* @prop { boolean } iconColor - TODO:
* @prop { boolean } iconName - TODO:
* @prop { boolean } isDisable - TODO:
* @prop { boolean } isDisable - TODO:
*
*
*/
constructor(props) {
super(props);
this.state = {};
this.state = {
isDisable: !props.isLoading && props.isDisable,
};
}
// Component Life Cycles
componentWillReceiveProps(nextProps) {
const { isLoading, isDisable } = this.props;
if (
nextProps.isLoading !== isLoading ||
nextProps.isDisable !== isDisable
) {
this.setState({
isDisable: !nextProps.isLoading && nextProps.isDisable,
});
}
}
// Component Functions
_handleOnPress = () => {
const { onPress, isDisable, source } = this.props;
const { onPress } = this.props;
onPress && !isDisable && onPress();
onPress && onPress();
};
_getBody = () => {
@ -75,13 +88,15 @@ class MainButton extends Component {
};
render() {
const { wrapperStyle, isDisable } = this.props;
const { wrapperStyle } = this.props;
const { isDisable } = this.state;
return (
<View style={wrapperStyle}>
<TouchableOpacity
disabled={isDisable}
onPress={() => this._handleOnPress()}
style={styles.touchable}
style={[styles.touchable, isDisable && styles.disableTouchable]}
>
<View style={styles.body}>{this._getBody()}</View>
</TouchableOpacity>

2
src/components/notification/view/notificationStyles.js
View File

@ -48,7 +48,7 @@ export default EStyleSheet.create({
fontWeight: "500",
},
scrollView: {
height: "$deviceHeight / 1.25",
height: "$deviceHeight / 1.35",
},
isNewNotification: {
backgroundColor: "#eaf2fc",

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

@ -5,7 +5,7 @@ import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
// Internal Components
import { FormInput } from "../../../components/formInput";
import { GreetingHeaderButton } from "../../../components/buttons";
import { TextButton } from "../../../components/buttons";
import { InformationArea } from "../../../components/informationArea";
import { Login } from "../../../providers/steem/auth";
import { LoginHeader } from "../../../components/loginHeader";
@ -29,7 +29,7 @@ class LoginScreen extends Component {
username: "",
password: "",
isLoading: false,
isUsernameValid: true,
isUsernameValid: false,
keyboardIsOpen: false,
};
}
@ -109,7 +109,14 @@ class LoginScreen extends Component {
};
render() {
const { isLoading, username, isUsernameValid, keyboardIsOpen } = this.state;
const {
isLoading,
username,
isUsernameValid,
keyboardIsOpen,
password,
} = this.state;
return (
<View style={{ flex: 1 }}>
<StatusBar hidden translucent />
@ -163,14 +170,18 @@ class LoginScreen extends Component {
removed upon logout!"
iconName="ios-information-circle-outline"
/>
{/* It will remove */}
<GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
<View style={styles.footerButtons}>
<TextButton onPress={goToAuthScreens} text="cancel" />
</View>
<MainButton
wrapperStyle={styles.mainButtonWrapper}
onPress={this._handleOnPressLogin}
iconName="md-person"
iconColor="white"
text="LOGIN"
isDisable={
!isUsernameValid || password.length < 2 || username.length < 2
}
isLoading={isLoading}
/>
</View>
@ -179,7 +190,6 @@ class LoginScreen extends Component {
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"
/>
<MainButton
wrapperStyle={styles.mainButtonWrapper}
onPress={this._loginwithSc2}

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

@ -50,4 +50,14 @@ export default EStyleSheet.create({
bottom: 24,
flexDirection: "row",
},
footerButtons: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
alignSelf: "flex-end",
position: "absolute",
bottom: 45,
left: "$deviceWidth / 2.3",
},
});

6
src/screens/notification/screen/notificationScreen.js
View File

@ -1,5 +1,5 @@
import React, { Fragment } from "react";
import { Text, View } from "react-native";
import { Text, View, SafeAreaView } from "react-native";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import { TabBar } from "../../../components/tabBar";
import { Notification } from "../../../components/notification";
@ -9,7 +9,7 @@ import styles from "./notificationStyles";
class NotificationScreen extends React.Component {
render() {
return (
<Fragment>
<SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
<ScrollableTabView
style={styles.tabView}
renderTabBar={() => (
@ -29,7 +29,7 @@ class NotificationScreen extends React.Component {
<Text>Leaderboard</Text>
</View>
</ScrollableTabView>
</Fragment>
</SafeAreaView>
);
}
}