mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-23 05:13:04 +03:00
commit
3641726fa0
25
package-lock.json
generated
25
package-lock.json
generated
@ -7710,6 +7710,15 @@
|
||||
"graceful-fs": "^4.1.2",
|
||||
"jsonfile": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"react-native-keyboard-aware-scroll-view": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz",
|
||||
"integrity": "sha512-nGXsACZBCiWuwRrZy+UjiSJqb4tZ/6ePHUSY8M+09g4VfNm/ogvvWpwBa6B999NZ6DwhZTKBjVWeZxX9XG8bbQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.6.0",
|
||||
"react-native-iphone-x-helper": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -8867,17 +8876,17 @@
|
||||
}
|
||||
},
|
||||
"react-native-iphone-x-helper": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.3.tgz",
|
||||
"integrity": "sha512-QHzpx4fv9u30VVU1DMgotiZsUB+m4BRjypca2rOczyj3cZBny5I+QDplrpFIBhzsa1iADNkziWa7kInzmKs00Q=="
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz",
|
||||
"integrity": "sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag=="
|
||||
},
|
||||
"react-native-keyboard-aware-scroll-view": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz",
|
||||
"integrity": "sha512-nGXsACZBCiWuwRrZy+UjiSJqb4tZ/6ePHUSY8M+09g4VfNm/ogvvWpwBa6B999NZ6DwhZTKBjVWeZxX9XG8bbQ==",
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.7.2.tgz",
|
||||
"integrity": "sha512-FCVKAmM5jHwbWZFW/zUOhid18OoSGcbyx2jGk+q6eVjjtj+RPomeqX0aAHf2ALXYJ1BuC5+OtXhFA/hp8ombcQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.6.0",
|
||||
"react-native-iphone-x-helper": "^1.0.1"
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-iphone-x-helper": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"react-native-lightbox": {
|
||||
|
@ -25,6 +25,7 @@
|
||||
"react-native-extended-stylesheet": "^0.10.0",
|
||||
"react-native-fast-image": "^4.0.14",
|
||||
"react-native-html-renderer": "^1.0.0",
|
||||
"react-native-keyboard-aware-scroll-view": "^0.7.2",
|
||||
"react-native-markdown-editor": "^1.0.1",
|
||||
"react-native-modal": "^6.5.0",
|
||||
"react-native-modal-popover": "0.0.10",
|
||||
|
BIN
src/assets/steem_connect.png
Normal file
BIN
src/assets/steem_connect.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
@ -1,5 +1,5 @@
|
||||
import React, { Fragment } from "react";
|
||||
import { TouchableWithoutFeedback, Text } from "react-native";
|
||||
import { TouchableWithoutFeedback, Text, View } from "react-native";
|
||||
|
||||
import styles from "./greetingHeaderButtonStyles";
|
||||
|
||||
@ -9,7 +9,9 @@ const GreetingHeaderButtonView = ({ text, onPress, style }) => (
|
||||
style={[styles.button, style]}
|
||||
onPress={() => onPress && onPress()}
|
||||
>
|
||||
<View>
|
||||
<Text style={styles.buttonText}>{text}</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</Fragment>
|
||||
);
|
||||
|
@ -5,7 +5,7 @@ export default EStyleSheet.create({
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
marginHorizontal: 30,
|
||||
marginVertical: 20,
|
||||
marginVertical: 10,
|
||||
flexDirection: "row",
|
||||
backgroundColor: "#f5f5f5",
|
||||
height: 60,
|
||||
|
@ -5,7 +5,7 @@ export default EStyleSheet.create({
|
||||
flexDirection: "row",
|
||||
paddingLeft: 50,
|
||||
paddingRight: 32,
|
||||
marginTop: 10,
|
||||
marginTop: 20,
|
||||
},
|
||||
infoIcon: {
|
||||
flex: 0.125,
|
||||
|
@ -26,7 +26,7 @@ class LoginHeaderView extends Component {
|
||||
// Component Functions
|
||||
|
||||
render() {
|
||||
const { description, title } = this.props;
|
||||
const { description, title, onPress, isKeyboardOpen } = this.props;
|
||||
|
||||
return (
|
||||
<View styles={styles.container}>
|
||||
@ -36,9 +36,10 @@ class LoginHeaderView extends Component {
|
||||
source={require("../../../assets/esteem.png")}
|
||||
/>
|
||||
<View style={styles.headerButton}>
|
||||
<GreetingHeaderButton text="Sign up" />
|
||||
<GreetingHeaderButton onPress={onPress} text="Sign up" />
|
||||
</View>
|
||||
</View>
|
||||
{!isKeyboardOpen && (
|
||||
<View style={styles.body}>
|
||||
<View style={styles.titleText}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
@ -51,6 +52,7 @@ class LoginHeaderView extends Component {
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
<LineBreak />
|
||||
</View>
|
||||
);
|
||||
|
3
src/components/mainButton/index.js
Normal file
3
src/components/mainButton/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import MainButton from "./view/mainButtonView";
|
||||
|
||||
export { MainButton };
|
48
src/components/mainButton/view/mainButtonStyles.js
Normal file
48
src/components/mainButton/view/mainButtonStyles.js
Normal file
@ -0,0 +1,48 @@
|
||||
import EStyleSheet from "react-native-extended-stylesheet";
|
||||
|
||||
export default EStyleSheet.create({
|
||||
wrapper: {},
|
||||
touchable: {
|
||||
maxWidth: 200,
|
||||
minWidth: 56,
|
||||
height: 56,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#357ce6",
|
||||
flexDirection: "row",
|
||||
margin: 5,
|
||||
shadowOffset: {
|
||||
height: 5,
|
||||
},
|
||||
shadowColor: "#5f5f5fbf",
|
||||
shadowOpacity: 0.3,
|
||||
},
|
||||
icon: {
|
||||
alignSelf: "center",
|
||||
fontSize: 25,
|
||||
marginLeft: 20,
|
||||
},
|
||||
text: {
|
||||
color: "white",
|
||||
fontWeight: "400",
|
||||
alignSelf: "center",
|
||||
fontSize: 14,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 20,
|
||||
},
|
||||
secondText: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
activityIndicator: {
|
||||
minWidth: 56,
|
||||
height: 56,
|
||||
},
|
||||
body: {
|
||||
flexDirection: "row",
|
||||
},
|
||||
image: {
|
||||
marginLeft: 20,
|
||||
alignSelf: "center",
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
});
|
93
src/components/mainButton/view/mainButtonView.js
Normal file
93
src/components/mainButton/view/mainButtonView.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { Component, Fragment } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import Ionicons from "react-native-vector-icons/Ionicons";
|
||||
|
||||
// Constants
|
||||
|
||||
// Components
|
||||
|
||||
// Styles
|
||||
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 { boolean } iconName - TODO:
|
||||
* @prop { boolean } isDisable - TODO:
|
||||
*
|
||||
*
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
// Component Life Cycles
|
||||
|
||||
// Component Functions
|
||||
_handleOnPress = () => {
|
||||
const { onPress, isDisable, source } = this.props;
|
||||
|
||||
onPress && !isDisable && onPress();
|
||||
};
|
||||
|
||||
_getBody = () => {
|
||||
const {
|
||||
isLoading,
|
||||
text,
|
||||
secondText,
|
||||
iconColor,
|
||||
iconName,
|
||||
source,
|
||||
} = this.props;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ActivityIndicator color="white" style={styles.activityIndicator} />
|
||||
);
|
||||
} else if (text) {
|
||||
return (
|
||||
<Fragment>
|
||||
{source ? (
|
||||
<Image source={source} style={styles.image} resizeMode="contain" />
|
||||
) : (
|
||||
<Ionicons color={iconColor} name={iconName} style={styles.icon} />
|
||||
)}
|
||||
<Text style={styles.text}>
|
||||
{text}
|
||||
{secondText && <Text style={styles.secondText}>{secondText}</Text>}
|
||||
</Text>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return <Ionicons color={iconColor} name={iconName} style={styles.icon} />;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { wrapperStyle, isDisable } = this.props;
|
||||
|
||||
return (
|
||||
<View style={wrapperStyle}>
|
||||
<TouchableOpacity
|
||||
onPress={() => this._handleOnPress()}
|
||||
style={styles.touchable}
|
||||
>
|
||||
<View style={styles.body}>{this._getBody()}</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainButton;
|
@ -43,9 +43,7 @@ export default class TabBar extends Component {
|
||||
onPress={() => onPressHandler(page)}
|
||||
>
|
||||
<View style={styles.tab}>
|
||||
<Text style={[{ color: textColor, fontWeight }]}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text style={[{ color: textColor, fontWeight }]}>{name}</Text>
|
||||
</View>
|
||||
</Button>
|
||||
);
|
||||
@ -119,13 +117,7 @@ export default class TabBar extends Component {
|
||||
const { activeTab, backgroundColor, goToPage, style } = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.tabs,
|
||||
{ backgroundColor: backgroundColor },
|
||||
style,
|
||||
]}
|
||||
>
|
||||
<View style={[styles.tabs, { backgroundColor: backgroundColor }, style]}>
|
||||
{this.props.tabs.map((name, page) => {
|
||||
const isTabActive = activeTab === page;
|
||||
return this._renderTab(name, page, isTabActive, goToPage);
|
||||
|
@ -1,68 +1,26 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
View,
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
TextInput,
|
||||
BackHandler,
|
||||
Linking,
|
||||
StatusBar,
|
||||
} from "react-native";
|
||||
|
||||
import { Navigation } from "react-native-navigation";
|
||||
import Ionicons from "react-native-vector-icons/Ionicons";
|
||||
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 { View, BackHandler, Linking, StatusBar } from "react-native";
|
||||
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
||||
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
|
||||
|
||||
// Internal Components
|
||||
import { FormInput } from "../../../components/formInput";
|
||||
import { GreetingHeaderButton } from "../../../components/buttons";
|
||||
import { InformationArea } from "../../../components/informationArea";
|
||||
import { Login } from "../../../providers/steem/auth";
|
||||
|
||||
import { LoginHeader } from "../../../components/loginHeader";
|
||||
import { MainButton } from "../../../components/mainButton";
|
||||
import { Navigation } from "react-native-navigation";
|
||||
import { TabBar } from "../../../components/tabBar";
|
||||
import { addNewAccount } from "../../../redux/actions/accountAction";
|
||||
|
||||
import { lookupAccounts } from "../../../providers/steem/dsteem";
|
||||
import { goToAuthScreens } from "../../../navigation";
|
||||
import { lookupAccounts } from "../../../providers/steem/dsteem";
|
||||
import STEEM_CONNECT_LOGO from "../../../assets/steem_connect.png";
|
||||
|
||||
// Styles
|
||||
import styles from "./loginStyles";
|
||||
|
||||
class LoginScreen extends Component {
|
||||
static get options() {
|
||||
return {
|
||||
_statusBar: {
|
||||
visible: true,
|
||||
drawBehind: false,
|
||||
},
|
||||
topBar: {
|
||||
animate: true,
|
||||
hideOnScroll: false,
|
||||
drawBehind: false,
|
||||
noBorder: true,
|
||||
visible: true,
|
||||
elevation: 0,
|
||||
leftButtons: {},
|
||||
rightButtons: [
|
||||
{
|
||||
id: "signup",
|
||||
text: "Sign Up",
|
||||
color: "#a7adaf",
|
||||
marginRight: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
layout: {
|
||||
backgroundColor: "#f5fcff",
|
||||
},
|
||||
bottomTabs: {
|
||||
visible: false,
|
||||
drawBehind: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
Navigation.events().bindComponent(this);
|
||||
@ -72,6 +30,7 @@ class LoginScreen extends Component {
|
||||
password: "",
|
||||
isLoading: false,
|
||||
isUsernameValid: true,
|
||||
keyboardIsOpen: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -127,15 +86,13 @@ class LoginScreen extends Component {
|
||||
this.setState({ password: value });
|
||||
};
|
||||
|
||||
navigationButtonPressed({ buttonId }) {
|
||||
if (buttonId === "signup") {
|
||||
_handleSignUp = () => {
|
||||
Linking.openURL("https://signup.steemit.com/?ref=esteem").catch(err =>
|
||||
console.error("An error occurred", err)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loginwithSc2 = () => {
|
||||
_loginwithSc2 = () => {
|
||||
Navigation.push(this.props.componentId, {
|
||||
component: {
|
||||
name: "navigation.eSteem.SteemConnect",
|
||||
@ -152,14 +109,22 @@ class LoginScreen extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLoading, username, isUsernameValid, keyboardIsOpen } = this.state;
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<StatusBar hidden translucent />
|
||||
<LoginHeader
|
||||
isKeyboardOpen={keyboardIsOpen}
|
||||
title="Sign in"
|
||||
description="To get all the benefits using eSteem"
|
||||
onPress={() => this._handleSignUp()}
|
||||
/>
|
||||
<KeyboardAwareScrollView
|
||||
onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
|
||||
onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
|
||||
>
|
||||
<ScrollableTabView
|
||||
locked={isLoading}
|
||||
style={styles.tabView}
|
||||
renderTabBar={() => (
|
||||
<TabBar
|
||||
@ -175,147 +140,57 @@ class LoginScreen extends Component {
|
||||
<FormInput
|
||||
rightIconName="md-at"
|
||||
leftIconName="md-close-circle"
|
||||
isValid={this.state.isUsernameValid}
|
||||
isValid={isUsernameValid}
|
||||
onChange={value => this.handleUsername(value)}
|
||||
placeholder="Username"
|
||||
isEditable
|
||||
type="username"
|
||||
isFirstImage
|
||||
value={this.state.username}
|
||||
value={username}
|
||||
/>
|
||||
<FormInput
|
||||
rightIconName="md-lock"
|
||||
leftIconName="md-close-circle"
|
||||
isValid={this.state.isUsernameValid}
|
||||
isValid={isUsernameValid}
|
||||
onChange={value => this._handleOnPasswordChange(value)}
|
||||
placeholder="Password or WIF"
|
||||
isEditable
|
||||
secureTextEntry
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<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
|
||||
onPress={goToAuthScreens}
|
||||
style={{
|
||||
alignContent: "center",
|
||||
padding: "9%",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "#788187",
|
||||
alignSelf: "center",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
{/* It will remove */}
|
||||
<GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
|
||||
<MainButton
|
||||
wrapperStyle={styles.mainButtonWrapper}
|
||||
onPress={this._handleOnPressLogin}
|
||||
style={{
|
||||
flex: 0.4,
|
||||
width: 100,
|
||||
height: 50,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#357ce6",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
{!this.state.isLoading ? (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
color="white"
|
||||
name="md-person"
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: 25,
|
||||
flex: 0.4,
|
||||
left: 15,
|
||||
}}
|
||||
iconName="md-person"
|
||||
iconColor="white"
|
||||
text="LOGIN"
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontWeight: "600",
|
||||
alignSelf: "center",
|
||||
fontSize: 16,
|
||||
flex: 0.6,
|
||||
}}
|
||||
>
|
||||
LOGIN
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ActivityIndicator
|
||||
color="white"
|
||||
style={{ alignSelf: "center", flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View tabLabel="SteemConnect" style={styles.steemConnectTab}>
|
||||
<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",
|
||||
backgroundColor: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={this.loginwithSc2}
|
||||
style={{
|
||||
width: 200,
|
||||
height: 50,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#357ce6",
|
||||
flexDirection: "row",
|
||||
margin: 20,
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
<Ionicons
|
||||
color="white"
|
||||
name="md-person"
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: 25,
|
||||
marginHorizontal: 20,
|
||||
}}
|
||||
|
||||
<MainButton
|
||||
wrapperStyle={styles.mainButtonWrapper}
|
||||
onPress={this._loginwithSc2}
|
||||
iconName="md-person"
|
||||
source={STEEM_CONNECT_LOGO}
|
||||
text="steem"
|
||||
secondText="connect"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontWeight: "400",
|
||||
alignSelf: "center",
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
steem
|
||||
<Text style={{ fontWeight: "800" }}>connect</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollableTabView>
|
||||
</KeyboardAwareScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
@ -36,9 +36,18 @@ export default EStyleSheet.create({
|
||||
flex: 1,
|
||||
backgroundColor: "#ffffff",
|
||||
minWidth: "$deviceWidth",
|
||||
height: "$deviceHeight / 1.95",
|
||||
},
|
||||
steemConnectTab: {
|
||||
backgroundColor: "#fff",
|
||||
minWidth: "$deviceWidth",
|
||||
flex: 1,
|
||||
height: "$deviceHeight / 1.95",
|
||||
},
|
||||
mainButtonWrapper: {
|
||||
position: "absolute",
|
||||
right: 24,
|
||||
bottom: 24,
|
||||
flexDirection: "row",
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user