From 0addf950205b33b0bbf4c7e98a4f9ecf058e3e17 Mon Sep 17 00:00:00 2001 From: ue Date: Wed, 26 Sep 2018 22:23:45 +0300 Subject: [PATCH 1/5] created loginHeader & basicUIComponents(lineBreak) still working on it --- .eslintrc.js | 40 +- .prettierrc | 8 +- .../example/screen/exampleScreen.js | 36 +- src/components/basicUIElements/index.js | 3 + .../basicUIElements/view/lineBreakStyles.js | 9 + .../basicUIElements/view/lineBreakView.js | 7 + src/components/loginHeader/index.js | 3 + .../loginHeader/view/loginHeaderStyles.js | 37 + .../loginHeader/view/loginHeaderView.js | 47 + src/navigation.js | 635 ++++++------ src/screens/login/screen/loginScreen.js | 978 ++++++++---------- 11 files changed, 919 insertions(+), 884 deletions(-) create mode 100644 src/components/basicUIElements/index.js create mode 100644 src/components/basicUIElements/view/lineBreakStyles.js create mode 100644 src/components/basicUIElements/view/lineBreakView.js create mode 100644 src/components/loginHeader/index.js create mode 100644 src/components/loginHeader/view/loginHeaderStyles.js create mode 100644 src/components/loginHeader/view/loginHeaderView.js diff --git a/.eslintrc.js b/.eslintrc.js index 8a0fe98b8..febda4edc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,22 +1,22 @@ module.exports = { - env: { - browser: true, - commonjs: true, - es6: true, - }, - extends: "eslint:recommended", - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: "module", - }, - plugins: ["react"], - rules: { - indent: ["error", "space"], - "linebreak-style": ["error", "unix"], - quotes: ["error", "double"], - semi: ["error", "always"], - }, + env: { + browser: true, + commonjs: true, + es6: true, + }, + extends: "eslint:recommended", + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 2018, + sourceType: "module", + }, + plugins: ["react"], + rules: { + indent: ["error", "space"], + "linebreak-style": ["error", "unix"], + quotes: ["error", "double"], + semi: ["error", "always"], + }, }; diff --git a/.prettierrc b/.prettierrc index c860767b6..efe259aca 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "tabWidth": 4, - "singleQuote": false, - "trailingComma": "es5" -} \ No newline at end of file + "tabWidth": 2, + "singleQuote": false, + "trailingComma": "es5" +} diff --git a/src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleScreen.js b/src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleScreen.js index cba427e12..fc96cd237 100644 --- a/src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleScreen.js +++ b/src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleScreen.js @@ -9,29 +9,29 @@ import {} from "react-native"; // eslint-disable-next-line import styles from "./_styles"; -/* -* Props Name Description Value -*@props --> props name here description here Value Type Here -* -*/ - class ExampleView extends Component { - constructor(props) { - super(props); - this.state = {}; - } + /* Props + * ------------------------------------------------ TODO: Fill fallowlines + * @prop { type } name - Description. + * @prop { type } name - Description. + * + */ + constructor(props) { + super(props); + this.state = {}; + } - // Component Life Cycles + // Component Life Cycles - // Component Functions + // Component Functions - render() { - // eslint-disable-next-line - const {} = this.props; + render() { + // eslint-disable-next-line + const {} = this.props; - // eslint-disable-next-line - return ; - } + // eslint-disable-next-line + return ; + } } export default ExampleView; diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js new file mode 100644 index 000000000..177e5fc7c --- /dev/null +++ b/src/components/basicUIElements/index.js @@ -0,0 +1,3 @@ +import LineBreak from "./view/lineBreakView"; + +export { LineBreak }; diff --git a/src/components/basicUIElements/view/lineBreakStyles.js b/src/components/basicUIElements/view/lineBreakStyles.js new file mode 100644 index 000000000..864ab5e5b --- /dev/null +++ b/src/components/basicUIElements/view/lineBreakStyles.js @@ -0,0 +1,9 @@ +import EStyleSheet from "react-native-extended-stylesheet"; + +export default EStyleSheet.create({ + lineBreak: { + width: "$deviceWidth", + backgroundColor: "#f6f6f6", + height: 10, + }, +}); diff --git a/src/components/basicUIElements/view/lineBreakView.js b/src/components/basicUIElements/view/lineBreakView.js new file mode 100644 index 000000000..65779d15d --- /dev/null +++ b/src/components/basicUIElements/view/lineBreakView.js @@ -0,0 +1,7 @@ +import React from "react"; +import { View } from "react-native"; +import styles from "./lineBreakStyles"; + +const LineBreak = ({ color }) => ; + +export default LineBreak; diff --git a/src/components/loginHeader/index.js b/src/components/loginHeader/index.js new file mode 100644 index 000000000..2309369a7 --- /dev/null +++ b/src/components/loginHeader/index.js @@ -0,0 +1,3 @@ +import LoginHeader from "./view/loginHeaderView"; + +export { LoginHeader }; diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js new file mode 100644 index 000000000..0d72df78a --- /dev/null +++ b/src/components/loginHeader/view/loginHeaderStyles.js @@ -0,0 +1,37 @@ +import EStyleSheet from "react-native-extended-stylesheet"; + +export default EStyleSheet.create({ + wrapper: { + flex: 1, + flexDirection: "row", + maxHeight: "$deviceHeight / 3", + overflow: "hidden", + backgroundColor: "#ffffff", + }, + description: { + textAlignVertical: "center", + color: "#788187", + fontSize: 14, + fontWeight: "400", + }, + title: { + textAlignVertical: "center", + fontSize: 20, + fontWeight: "bold", + color: "#788187", + marginBottom: 16, + }, + mascot: { + width: 217, + height: 300, + marginLeft: 50, + marginTop: 40, + }, + titleText: { + flex: 0.4, + alignSelf: "center", + height: 100, + marginTop: 20, + left: 20, + }, +}); diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js new file mode 100644 index 000000000..6116c2190 --- /dev/null +++ b/src/components/loginHeader/view/loginHeaderView.js @@ -0,0 +1,47 @@ +import React, { Component } from "react"; +import { View, Text, Image } from "react-native"; +// Constants + +// Components + +// Styles +// eslint-disable-next-line +import styles from "./loginHeaderStyles"; + +class LoginHeaderView extends Component { + /* Props + * ------------------------------------------------ + * @prop { string } title - Title for header string. + * @prop { string } description - Description for header string. + * + */ + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + + render() { + const { description, title } = this.props; + + return ( + + + {title} + {description} + + + + + + ); + } +} + +export default LoginHeaderView; diff --git a/src/navigation.js b/src/navigation.js index f76f65e31..224bbf8c2 100755 --- a/src/navigation.js +++ b/src/navigation.js @@ -4,331 +4,322 @@ import { Dimensions } from "react-native"; const deviceWidth = Dimensions.get("window").width; export const goToAuthScreens = () => - Navigation.setRoot({ - root: { - sideMenu: { - right: { - component: { - name: "navigation.eSteem.SideMenuScreen", - passProps: { - side: "right", - }, - }, - }, - center: { - bottomTabs: { - children: [ - { - stack: { - id: "tab1Stack", - children: [ - { - component: { - name: "navigation.eSteem.Home", - passProps: { - text: - "This is a side menu center screen tab 1", - }, - }, - }, - ], - options: { - bottomTab: { - iconInsets: { - top: 6, - left: 0, - bottom: -6, - right: 0, - }, - icon: require("./assets/feed.png"), - iconColor: "gray", - selectedIconColor: "#222", - }, - }, - }, - }, - { - stack: { - children: [ - { - component: { - name: - "navigation.eSteem.Notifications", - passProps: { - text: - "This is a side menu center screen tab 2", - }, - }, - }, - ], - options: { - bottomTab: { - iconInsets: { - top: 6, - left: 0, - bottom: -6, - right: 0, - }, - icon: require("./assets/notification.png"), - iconColor: "gray", - selectedIconColor: "#222", - }, - }, - }, - }, - { - stack: { - children: [ - { - component: { - name: - "navigation.eSteem.Editor", - passProps: { - text: - "This is a side menu center screen tab 3", - }, - }, - }, - ], - options: { - bottomTab: { - iconInsets: { - top: 6, - left: 0, - bottom: -6, - right: 0, - }, - icon: require("./assets/add.png"), - iconColor: "gray", - selectedIconColor: "#222", - }, - }, - }, - }, - { - stack: { - children: [ - { - component: { - name: - "navigation.eSteem.Wallet", - passProps: { - text: - "This is a side menu center screen tab 3", - }, - }, - }, - ], - options: { - bottomTab: { - iconInsets: { - top: 6, - left: 0, - bottom: -6, - right: 0, - }, - icon: require("./assets/wallet.png"), - iconColor: "gray", - selectedIconColor: "#222", - }, - }, - }, - }, - { - stack: { - children: [ - { - component: { - name: - "navigation.eSteem.Wallet", - passProps: { - text: - "This is a side menu center screen tab 3", - }, - }, - }, - ], - options: { - bottomTab: { - iconInsets: { - top: 6, - left: 0, - bottom: -6, - right: 0, - }, - icon: require("./assets/wallet.png"), - iconColor: "gray", - selectedIconColor: "#222", - }, - }, - }, - }, - ], - options: { - bottomTab: { - tabBarShowLabels: "hidden", - textColor: "#AED581", - iconColor: "#AED581", - selectedTextColor: "gray", - selectedIconColor: "gray", - fontFamily: "HelveticaNeue-Italic", - fontSize: 13, - }, - }, - }, - }, - options: { - topBar: { - visible: true, - animate: true, // Controls whether TopBar visibility changes should be animated - hideOnScroll: false, - elevation: 0, - noBorder: true, - rightButtons: [ - { - id: "search", - icon: require("./assets/search.png"), - }, - ], - }, - bottomTabs: { - titleDisplayMode: "alwaysHide", - visible: true, - animate: false, // Controls whether BottomTabs visibility changes should be animated - }, - bottomTab: { - iconColor: "gray", - selectedIconColor: "#222", - textColor: "#1B4C77", - selectedTextColor: "#0f0", - fontFamily: "HelveticaNeue-Italic", - fontSize: 13, - }, - sideMenu: { - right: { - width: deviceWidth / 1.4, - }, - }, - // _animations: { - // startApp: { - // y: { - // from: 1000, - // to: 0, - // duration: 500, - // interpolation: "accelerate", - // }, - // alpha: { - // from: 0, - // to: 1, - // duration: 500, - // interpolation: "accelerate", - // }, - // }, - // push: { - // topBar: { - // id: "TEST", - // alpha: { - // from: 0, - // to: 1, - // duration: 500, - // interpolation: "accelerate", - // }, - // }, - // bottomTabs: { - // y: { - // from: 1000, - // to: 0, - // duration: 500, - // interpolation: "decelerate", - // }, - // alpha: { - // from: 0, - // to: 1, - // duration: 500, - // interpolation: "decelerate", - // }, - // }, - // content: { - // y: { - // from: 1000, - // to: 0, - // duration: 500, - // interpolation: "accelerate", - // }, - // alpha: { - // from: 0, - // to: 1, - // duration: 500, - // interpolation: "accelerate", - // }, - // }, - // waitForRender: false, - // }, - // pop: { - // topBar: { - // id: "TEST", - // alpha: { - // from: 1, - // to: 0, - // duration: 500, - // interpolation: "accelerate", - // }, - // }, - // bottomTabs: { - // y: { - // from: 0, - // to: 100, - // duration: 500, - // interpolation: "decelerate", - // }, - // alpha: { - // from: 1, - // to: 0, - // duration: 500, - // interpolation: "decelerate", - // }, - // }, - // content: { - // y: { - // from: 0, - // to: 1000, - // duration: 500, - // interpolation: "decelerate", - // }, - // alpha: { - // from: 1, - // to: 0, - // duration: 500, - // interpolation: "decelerate", - // }, - // }, - // }, - // }, - }, + Navigation.setRoot({ + root: { + sideMenu: { + right: { + component: { + name: "navigation.eSteem.SideMenuScreen", + passProps: { + side: "right", }, + }, }, - }); + center: { + bottomTabs: { + children: [ + { + stack: { + id: "tab1Stack", + children: [ + { + component: { + name: "navigation.eSteem.Home", + passProps: { + text: "This is a side menu center screen tab 1", + }, + }, + }, + ], + options: { + bottomTab: { + iconInsets: { + top: 6, + left: 0, + bottom: -6, + right: 0, + }, + icon: require("./assets/feed.png"), + iconColor: "gray", + selectedIconColor: "#222", + }, + }, + }, + }, + { + stack: { + children: [ + { + component: { + name: "navigation.eSteem.Notifications", + passProps: { + text: "This is a side menu center screen tab 2", + }, + }, + }, + ], + options: { + bottomTab: { + iconInsets: { + top: 6, + left: 0, + bottom: -6, + right: 0, + }, + icon: require("./assets/notification.png"), + iconColor: "gray", + selectedIconColor: "#222", + }, + }, + }, + }, + { + stack: { + children: [ + { + component: { + name: "navigation.eSteem.Editor", + passProps: { + text: "This is a side menu center screen tab 3", + }, + }, + }, + ], + options: { + bottomTab: { + iconInsets: { + top: 6, + left: 0, + bottom: -6, + right: 0, + }, + icon: require("./assets/add.png"), + iconColor: "gray", + selectedIconColor: "#222", + }, + }, + }, + }, + { + stack: { + children: [ + { + component: { + name: "navigation.eSteem.Wallet", + passProps: { + text: "This is a side menu center screen tab 3", + }, + }, + }, + ], + options: { + bottomTab: { + iconInsets: { + top: 6, + left: 0, + bottom: -6, + right: 0, + }, + icon: require("./assets/wallet.png"), + iconColor: "gray", + selectedIconColor: "#222", + }, + }, + }, + }, + { + stack: { + children: [ + { + component: { + name: "navigation.eSteem.Wallet", + passProps: { + text: "This is a side menu center screen tab 3", + }, + }, + }, + ], + options: { + bottomTab: { + iconInsets: { + top: 6, + left: 0, + bottom: -6, + right: 0, + }, + icon: require("./assets/wallet.png"), + iconColor: "gray", + selectedIconColor: "#222", + }, + }, + }, + }, + ], + options: { + bottomTab: { + tabBarShowLabels: "hidden", + textColor: "#AED581", + iconColor: "#AED581", + selectedTextColor: "gray", + selectedIconColor: "gray", + fontFamily: "HelveticaNeue-Italic", + fontSize: 13, + }, + }, + }, + }, + options: { + topBar: { + visible: true, + animate: true, // Controls whether TopBar visibility changes should be animated + hideOnScroll: false, + elevation: 0, + noBorder: true, + rightButtons: [ + { + id: "search", + icon: require("./assets/search.png"), + }, + ], + }, + bottomTabs: { + titleDisplayMode: "alwaysHide", + visible: true, + animate: false, // Controls whether BottomTabs visibility changes should be animated + }, + bottomTab: { + iconColor: "gray", + selectedIconColor: "#222", + textColor: "#1B4C77", + selectedTextColor: "#0f0", + fontFamily: "HelveticaNeue-Italic", + fontSize: 13, + }, + sideMenu: { + right: { + width: deviceWidth / 1.4, + }, + }, + // _animations: { + // startApp: { + // y: { + // from: 1000, + // to: 0, + // duration: 500, + // interpolation: "accelerate", + // }, + // alpha: { + // from: 0, + // to: 1, + // duration: 500, + // interpolation: "accelerate", + // }, + // }, + // push: { + // topBar: { + // id: "TEST", + // alpha: { + // from: 0, + // to: 1, + // duration: 500, + // interpolation: "accelerate", + // }, + // }, + // bottomTabs: { + // y: { + // from: 1000, + // to: 0, + // duration: 500, + // interpolation: "decelerate", + // }, + // alpha: { + // from: 0, + // to: 1, + // duration: 500, + // interpolation: "decelerate", + // }, + // }, + // content: { + // y: { + // from: 1000, + // to: 0, + // duration: 500, + // interpolation: "accelerate", + // }, + // alpha: { + // from: 0, + // to: 1, + // duration: 500, + // interpolation: "accelerate", + // }, + // }, + // waitForRender: false, + // }, + // pop: { + // topBar: { + // id: "TEST", + // alpha: { + // from: 1, + // to: 0, + // duration: 500, + // interpolation: "accelerate", + // }, + // }, + // bottomTabs: { + // y: { + // from: 0, + // to: 100, + // duration: 500, + // interpolation: "decelerate", + // }, + // alpha: { + // from: 1, + // to: 0, + // duration: 500, + // interpolation: "decelerate", + // }, + // }, + // content: { + // y: { + // from: 0, + // to: 1000, + // duration: 500, + // interpolation: "decelerate", + // }, + // alpha: { + // from: 1, + // to: 0, + // duration: 500, + // interpolation: "decelerate", + // }, + // }, + // }, + // }, + }, + }, + }, + }); export const goToNoAuthScreens = () => - Navigation.setRoot({ - root: { - stack: { - id: "LoginScreen", - children: [ - { - // TODO before commit navigation.eSteem.Login - component: { - name: "navigation.eSteem.Login", - }, - }, - ], - options: { - topBar: { - visible: true, - noBorder: true, - elevation: 0, - }, - }, + Navigation.setRoot({ + root: { + stack: { + id: "LoginScreen", + children: [ + { + // TODO before commit navigation.eSteem.Login + component: { + name: "navigation.eSteem.Login", }, + }, + ], + options: { + topBar: { + visible: false, + noBorder: true, + elevation: 0, + }, }, - }); + }, + }, + }); diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index f6a911682..ee656175e 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -1,13 +1,13 @@ import React, { Component } from "react"; import { - View, - ActivityIndicator, - Text, - Image, - TouchableOpacity, - TextInput, - BackHandler, - Linking, + View, + ActivityIndicator, + Text, + Image, + TouchableOpacity, + TextInput, + BackHandler, + Linking, } from "react-native"; import { Navigation } from "react-native-navigation"; @@ -15,6 +15,8 @@ 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 { LineBreak } from "../../../components/basicUIElements"; import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view"; import { Login } from "../../../providers/steem/auth"; @@ -27,528 +29,464 @@ import { goToAuthScreens } from "../../../navigation"; 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); - this.handleUsername = this.handleUsername.bind(this); - this.state = { - username: "", - password: "", - isLoading: false, - isUsernameValid: true, - usernameBorderColor: "#c1c5c7", - passwordBorderColor: "#c1c5c7", - }; - } - - componentDidMount() { - BackHandler.addEventListener("hardwareBackPress", () => { - Navigation.pop(this.props.componentId); - return true; - }); - Linking.getInitialURL().then(url => { - console.log(url); - }); - } - - componentWillUnmount() { - BackHandler.removeEventListener("hardwareBackPress"); - } - - doLogin = () => { - const { componentId } = this.props; - - this.setState({ isLoading: true }); - - let password = this.state.password; - let username = this.state.username; - - console.log("componentId", componentId); - - Login(username, password) - .then(result => { - if (result) { - this.props.dispatch(addNewAccount(result)); - Navigation.setStackRoot(componentId, { - component: { - name: "navigation.eSteem.PinCode", - options: { - topBar: { - visible: false, - }, - }, - }, - }); - } - }) - .catch(err => { - alert(err); - this.setState({ isLoading: false }); - }); + 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, + }, }; - - handleUsername = async username => { - await this.setState({ username }); - let validUsers = await lookupAccounts(username); - await this.setState({ isUsernameValid: validUsers.includes(username) }); + } + constructor(props) { + super(props); + Navigation.events().bindComponent(this); + this.handleUsername = this.handleUsername.bind(this); + this.state = { + username: "", + password: "", + isLoading: false, + isUsernameValid: true, + usernameBorderColor: "#c1c5c7", + passwordBorderColor: "#c1c5c7", }; + } - navigationButtonPressed({ buttonId }) { - if (buttonId === "signup") { - Linking.openURL("https://signup.steemit.com/?ref=esteem").catch( - err => console.error("An error occurred", err) - ); - } - } + componentDidMount() { + BackHandler.addEventListener("hardwareBackPress", () => { + Navigation.pop(this.props.componentId); + return true; + }); + Linking.getInitialURL().then(url => { + console.log(url); + }); + } - loginwithSc2 = () => { - Navigation.push(this.props.componentId, { + componentWillUnmount() { + BackHandler.removeEventListener("hardwareBackPress"); + } + + doLogin = () => { + const { componentId } = this.props; + + this.setState({ isLoading: true }); + + let password = this.state.password; + let username = this.state.username; + + console.log("componentId", componentId); + + Login(username, password) + .then(result => { + if (result) { + this.props.dispatch(addNewAccount(result)); + Navigation.setStackRoot(componentId, { component: { - name: "navigation.eSteem.SteemConnect", - passProps: {}, - options: { - topBar: { - title: { - text: "Login via SC2", - }, - }, + name: "navigation.eSteem.PinCode", + options: { + topBar: { + visible: false, }, + }, }, - }); - }; + }); + } + }) + .catch(err => { + alert(err); + this.setState({ isLoading: false }); + }); + }; - render() { - return ( - - ( - - )} - > - - - {this.state.username.length > 2 ? ( - - - - ) : ( - - )} - - this.setState({ - usernameBorderColor: "#357ce6", - }) - } - onSubmitEditing={() => - this.setState({ - usernameBorderColor: "#c1c5c7", - }) - } - autoCapitalize="none" - placeholder="username" - editable={true} - textContentType="username" - onChangeText={text => { - this.handleUsername(text); - }} - value={this.state.username} - style={{ - height: 60, - flex: 0.7, - }} - /> + handleUsername = async username => { + await this.setState({ username }); + let validUsers = await lookupAccounts(username); + await this.setState({ isUsernameValid: validUsers.includes(username) }); + }; - {this.state.username.length > 0 ? ( - - this.setState({ username: "" }) - } - name="md-close-circle" - style={{ - flex: 0.15, - fontSize: 25, - top: 18, - left: 8, - color: "#c1c5c7", - }} - /> - ) : null} - - - - - - this.setState({ - passwordBorderColor: "#357ce6", - }) - } - onSubmitEditing={() => - this.setState({ - passwordBorderColor: "#c1c5c7", - }) - } - secureTextEntry={true} - placeholder="Password or WIF" - textContentType="password" - onChangeText={text => - this.setState({ password: text }) - } - value={this.state.password} - style={{ - height: 60, - flex: 0.7, - width: "100%", - }} - /> - - {this.state.password.length > 0 ? ( - - this.setState({ password: "" }) - } - name="md-close-circle" - style={{ - flex: 0.15, - fontSize: 25, - top: 18, - left: 8, - color: "#c1c5c7", - }} - /> - ) : null} - - - - - - User credentials are kept locally on the device. - Credentials are removed upon logout! - - - - - - - - Cancel - - - - - {!this.state.isLoading ? ( - - - - LOGIN - - - ) : ( - - )} - - - - - - - - - Sign in - - - To get all the benefits using eSteem - - - - - - - - - - - - - If you don't want to keep your password - encrypted and saved on your device, you can - use Steemconnect. - - - - - - - - - steem - - connect - - - - - - - - - ); + navigationButtonPressed({ buttonId }) { + if (buttonId === "signup") { + Linking.openURL("https://signup.steemit.com/?ref=esteem").catch(err => + console.error("An error occurred", err) + ); } + } + + loginwithSc2 = () => { + Navigation.push(this.props.componentId, { + component: { + name: "navigation.eSteem.SteemConnect", + passProps: {}, + options: { + topBar: { + title: { + text: "Login via SC2", + }, + }, + }, + }, + }); + }; + + render() { + return ( + + + + ( + + )} + > + + + {this.state.username.length > 2 ? ( + + + + ) : ( + + )} + + this.setState({ + usernameBorderColor: "#357ce6", + }) + } + onSubmitEditing={() => + this.setState({ + usernameBorderColor: "#c1c5c7", + }) + } + autoCapitalize="none" + placeholder="username" + editable={true} + textContentType="username" + onChangeText={text => { + this.handleUsername(text); + }} + value={this.state.username} + style={{ + height: 60, + flex: 0.7, + }} + /> + + {this.state.username.length > 0 ? ( + this.setState({ username: "" })} + name="md-close-circle" + style={{ + flex: 0.15, + fontSize: 25, + top: 18, + left: 8, + color: "#c1c5c7", + }} + /> + ) : null} + + + + + + this.setState({ + passwordBorderColor: "#357ce6", + }) + } + onSubmitEditing={() => + this.setState({ + passwordBorderColor: "#c1c5c7", + }) + } + secureTextEntry={true} + placeholder="Password or WIF" + textContentType="password" + onChangeText={text => this.setState({ password: text })} + value={this.state.password} + style={{ + height: 60, + flex: 0.7, + width: "100%", + }} + /> + + {this.state.password.length > 0 ? ( + this.setState({ password: "" })} + name="md-close-circle" + style={{ + flex: 0.15, + fontSize: 25, + top: 18, + left: 8, + color: "#c1c5c7", + }} + /> + ) : null} + + + + + + User credentials are kept locally on the device. Credentials are + removed upon logout! + + + + + + + + Cancel + + + + + {!this.state.isLoading ? ( + + + + LOGIN + + + ) : ( + + )} + + + + + + + + + If you don't want to keep your password encrypted and saved on + your device, you can use Steemconnect. + + + + + + + + + steem + connect + + + + + + + + ); + } } export default LoginScreen; From ed38404414aa437570aa520017204674f54d328b Mon Sep 17 00:00:00 2001 From: ue Date: Wed, 26 Sep 2018 23:15:42 +0300 Subject: [PATCH 2/5] created buttons component & created login header bar --- src/components/buttons/index.js | 3 ++ .../views/greetingHeaderButtonStyles.js | 13 +++++++++ .../buttons/views/greetingHeaderButtonView.js | 17 +++++++++++ .../loginHeader/view/loginHeaderStyles.js | 29 ++++++++++++++++--- .../loginHeader/view/loginHeaderView.js | 29 +++++++++++++------ src/screens/login/screen/loginScreen.js | 2 ++ 6 files changed, 80 insertions(+), 13 deletions(-) create mode 100644 src/components/buttons/index.js create mode 100644 src/components/buttons/views/greetingHeaderButtonStyles.js create mode 100644 src/components/buttons/views/greetingHeaderButtonView.js diff --git a/src/components/buttons/index.js b/src/components/buttons/index.js new file mode 100644 index 000000000..fcbe55cbf --- /dev/null +++ b/src/components/buttons/index.js @@ -0,0 +1,3 @@ +import GreetingHeaderButton from "./views/greetingHeaderButtonView"; + +export { GreetingHeaderButton }; diff --git a/src/components/buttons/views/greetingHeaderButtonStyles.js b/src/components/buttons/views/greetingHeaderButtonStyles.js new file mode 100644 index 000000000..8fb2f46b4 --- /dev/null +++ b/src/components/buttons/views/greetingHeaderButtonStyles.js @@ -0,0 +1,13 @@ +import EStyleSheet from "react-native-extended-stylesheet"; + +export default EStyleSheet.create({ + button: { + width: 54, + backgroundColor: "transparent", + height: 19, + }, + buttonText: { + color: "#c1c5c7", + fontSize: 16, + }, +}); diff --git a/src/components/buttons/views/greetingHeaderButtonView.js b/src/components/buttons/views/greetingHeaderButtonView.js new file mode 100644 index 000000000..7f32598dc --- /dev/null +++ b/src/components/buttons/views/greetingHeaderButtonView.js @@ -0,0 +1,17 @@ +import React, { Fragment } from "react"; +import { TouchableWithoutFeedback, Text } from "react-native"; + +import styles from "./greetingHeaderButtonStyles"; + +const GreetingHeaderButtonView = ({ text, onPress, style }) => ( + + onPress && onPress()} + > + {text} + + +); + +export default GreetingHeaderButtonView; diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js index 0d72df78a..71ed9ce90 100644 --- a/src/components/loginHeader/view/loginHeaderStyles.js +++ b/src/components/loginHeader/view/loginHeaderStyles.js @@ -1,12 +1,16 @@ import EStyleSheet from "react-native-extended-stylesheet"; export default EStyleSheet.create({ - wrapper: { + container: { flex: 1, + flexDirection: "column", + height: "$deviceHeight / 3", + }, + body: { flexDirection: "row", maxHeight: "$deviceHeight / 3", overflow: "hidden", - backgroundColor: "#ffffff", + backgroundColor: "$white", }, description: { textAlignVertical: "center", @@ -31,7 +35,24 @@ export default EStyleSheet.create({ flex: 0.4, alignSelf: "center", height: 100, - marginTop: 20, - left: 20, + marginTop: 50, + marginLeft: 32, + }, + headerRow: { + width: "$deviceWidth", + flexDirection: "row", + height: 55, + justifyContent: "space-between", + }, + logo: { + width: 32, + height: 32, + marginLeft: 32, + alignSelf: "center", + }, + headerButton: { + margin: 10, + marginRight: 19, + alignSelf: "center", }, }); diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js index 6116c2190..b78ed2b7a 100644 --- a/src/components/loginHeader/view/loginHeaderView.js +++ b/src/components/loginHeader/view/loginHeaderView.js @@ -3,7 +3,7 @@ import { View, Text, Image } from "react-native"; // Constants // Components - +import { GreetingHeaderButton } from "../../buttons"; // Styles // eslint-disable-next-line import styles from "./loginHeaderStyles"; @@ -28,16 +28,27 @@ class LoginHeaderView extends Component { const { description, title } = this.props; return ( - - - {title} - {description} - - + + + + + + + + + {title} + {description} + + + + ); diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index ee656175e..f7fdf4b00 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -8,6 +8,7 @@ import { TextInput, BackHandler, Linking, + StatusBar, } from "react-native"; import { Navigation } from "react-native-navigation"; @@ -154,6 +155,7 @@ class LoginScreen extends Component { render() { return ( + + ); } diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index f7fdf4b00..64bb5534a 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -160,7 +160,6 @@ class LoginScreen extends Component { title="Sign in" description="To get all the benefits using eSteem" /> - ( From 41dbccb354f718897c56f38b28f127cbb04704b6 Mon Sep 17 00:00:00 2001 From: ue Date: Thu, 27 Sep 2018 00:11:55 +0300 Subject: [PATCH 4/5] created formInput component moved all jsx to there enhanced --- src/components/formInput/index.js | 3 + .../formInput/view/formInputStyles.js | 32 ++++ .../formInput/view/formInputView.js | 113 +++++++++++ src/screens/login/screen/loginScreen.js | 177 +++--------------- 4 files changed, 174 insertions(+), 151 deletions(-) create mode 100644 src/components/formInput/index.js create mode 100644 src/components/formInput/view/formInputStyles.js create mode 100644 src/components/formInput/view/formInputView.js diff --git a/src/components/formInput/index.js b/src/components/formInput/index.js new file mode 100644 index 000000000..eabba3c2a --- /dev/null +++ b/src/components/formInput/index.js @@ -0,0 +1,3 @@ +import FormInput from "./view/formInputView"; + +export { FormInput }; diff --git a/src/components/formInput/view/formInputStyles.js b/src/components/formInput/view/formInputStyles.js new file mode 100644 index 000000000..d90b10a73 --- /dev/null +++ b/src/components/formInput/view/formInputStyles.js @@ -0,0 +1,32 @@ +import EStyleSheet from "react-native-extended-stylesheet"; + +export default EStyleSheet.create({ + wrapper: { + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + marginHorizontal: 30, + marginVertical: 20, + flexDirection: "row", + backgroundColor: "#f5f5f5", + height: 60, + borderBottomWidth: 2, + }, + firstImage: { + width: 24, + height: 24, + borderRadius: 12, + top: 15, + marginLeft: 12, + }, + textInput: { + height: 60, + flex: 0.7, + }, + icon: { + flex: 0.15, + fontSize: 25, + top: 18, + left: 8, + color: "#c1c5c7", + }, +}); diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js new file mode 100644 index 000000000..0dee6d175 --- /dev/null +++ b/src/components/formInput/view/formInputView.js @@ -0,0 +1,113 @@ +import React, { Component } from "react"; +import { View, Text, Image, TextInput } from "react-native"; +import Ionicons from "react-native-vector-icons/Ionicons"; +import FastImage from "react-native-fast-image"; + +// Constants + +// Components + +// Styles +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. + * + * + */ + constructor(props) { + super(props); + + this.state = { + value: "", + inputBorderColor: "#c1c5c7", + }; + } + + // Component Life Cycles + + // Component Functions + _handleOnChange = value => { + const { onChange } = this.props; + + value && this.setState({ value }); + onChange && value && onChange(value); + }; + + render() { + const { inputBorderColor, value } = this.state; + const { + placeholder, + type, + isFirstImage, + isEditable, + isValid, + leftIconName, + rightIconName, + secureTextEntry, + } = this.props; + + return ( + + {isFirstImage && value && value.length > 2 ? ( + + + + ) : ( + + )} + + this.setState({ + inputBorderColor: "#357ce6", + }) + } + onSubmitEditing={() => + this.setState({ + inputBorderColor: "#c1c5c7", + }) + } + autoCapitalize="none" + secureTextEntry={secureTextEntry} + placeholder={placeholder} + editable={isEditable || true} + textContentType={type} + onChangeText={value => { + this._handleOnChange(value); + }} + value={value} + style={styles.textInput} + /> + {value && value.length > 0 ? ( + this.setState({ value: "" })} + name={leftIconName} + style={styles.icon} + /> + ) : null} + + ); + } +} + +export default FormInputView; diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 64bb5534a..2045c1be0 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -17,7 +17,7 @@ import FastImage from "react-native-fast-image"; import { TabBar } from "../../../components/tabBar"; import { LoginHeader } from "../../../components/loginHeader"; -import { LineBreak } from "../../../components/basicUIElements"; +import { FormInput } from "../../../components/formInput"; import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view"; import { Login } from "../../../providers/steem/auth"; @@ -98,8 +98,6 @@ class LoginScreen extends Component { let password = this.state.password; let username = this.state.username; - console.log("componentId", componentId); - Login(username, password) .then(result => { if (result) { @@ -124,9 +122,12 @@ class LoginScreen extends Component { handleUsername = async username => { await this.setState({ username }); - let validUsers = await lookupAccounts(username); + const validUsers = await lookupAccounts(username); await this.setState({ isUsernameValid: validUsers.includes(username) }); }; + _handleOnPasswordChange = value => { + this.setState({ password: value }); + }; navigationButtonPressed({ buttonId }) { if (buttonId === "signup") { @@ -173,153 +174,27 @@ class LoginScreen extends Component { )} > - - {this.state.username.length > 2 ? ( - - - - ) : ( - - )} - - this.setState({ - usernameBorderColor: "#357ce6", - }) - } - onSubmitEditing={() => - this.setState({ - usernameBorderColor: "#c1c5c7", - }) - } - autoCapitalize="none" - placeholder="username" - editable={true} - textContentType="username" - onChangeText={text => { - this.handleUsername(text); - }} - value={this.state.username} - style={{ - height: 60, - flex: 0.7, - }} - /> - - {this.state.username.length > 0 ? ( - this.setState({ username: "" })} - name="md-close-circle" - style={{ - flex: 0.15, - fontSize: 25, - top: 18, - left: 8, - color: "#c1c5c7", - }} - /> - ) : null} - - - - - - this.setState({ - passwordBorderColor: "#357ce6", - }) - } - onSubmitEditing={() => - this.setState({ - passwordBorderColor: "#c1c5c7", - }) - } - secureTextEntry={true} - placeholder="Password or WIF" - textContentType="password" - onChangeText={text => this.setState({ password: text })} - value={this.state.password} - style={{ - height: 60, - flex: 0.7, - width: "100%", - }} - /> - - {this.state.password.length > 0 ? ( - this.setState({ password: "" })} - name="md-close-circle" - style={{ - flex: 0.15, - fontSize: 25, - top: 18, - left: 8, - color: "#c1c5c7", - }} - /> - ) : null} - - + this.handleUsername(value)} + placeholder="Username" + isEditable + type="username" + isFirstImage + value={this.state.username} + /> + this._handleOnPasswordChange(value)} + placeholder="Password or WIF" + isEditable + secureTextEntry + type="password" + /> Date: Thu, 27 Sep 2018 01:07:57 +0300 Subject: [PATCH 5/5] created informationArea component for login side --- src/components/formInput/formInput.js | 12 --- .../formInput/view/formInputView.js | 12 +-- src/components/index.js | 2 +- src/components/informationArea/index.js | 3 + .../view/informationAreaStyles.js | 20 +++++ .../view/informationAreaView.js | 41 ++++++++++ src/screens/login/screen/loginScreen.js | 76 ++++------------- src/screens/login/screen/loginStyles.js | 81 +++++++++---------- 8 files changed, 128 insertions(+), 119 deletions(-) delete mode 100644 src/components/formInput/formInput.js create mode 100644 src/components/informationArea/index.js create mode 100644 src/components/informationArea/view/informationAreaStyles.js create mode 100644 src/components/informationArea/view/informationAreaView.js diff --git a/src/components/formInput/formInput.js b/src/components/formInput/formInput.js deleted file mode 100644 index ff63f4b2b..000000000 --- a/src/components/formInput/formInput.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { View, TextInput } from "react-native"; - -import styles from "../../styles/formInput.styles"; - -const FormInput = props => ( - - - -); - -export default FormInput; diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index 0dee6d175..440e31883 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -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. + * * * */ diff --git a/src/components/index.js b/src/components/index.js index 9fcf3bedf..7ee056a36 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -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 }; diff --git a/src/components/informationArea/index.js b/src/components/informationArea/index.js new file mode 100644 index 000000000..d6d50dc6c --- /dev/null +++ b/src/components/informationArea/index.js @@ -0,0 +1,3 @@ +import InformationArea from "./view/informationAreaView"; + +export { InformationArea }; diff --git a/src/components/informationArea/view/informationAreaStyles.js b/src/components/informationArea/view/informationAreaStyles.js new file mode 100644 index 000000000..d6565c9f3 --- /dev/null +++ b/src/components/informationArea/view/informationAreaStyles.js @@ -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", + }, +}); diff --git a/src/components/informationArea/view/informationAreaView.js b/src/components/informationArea/view/informationAreaView.js new file mode 100644 index 000000000..273693b34 --- /dev/null +++ b/src/components/informationArea/view/informationAreaView.js @@ -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 ( + + + {description} + + ); + } +} + +export default FormInputView; diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 2045c1be0..45a5a6bbf 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -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" /> - - - - User credentials are kept locally on the device. Credentials are - removed upon logout! - - + - - - - - If you don't want to keep your password encrypted and saved on - your device, you can use Steemconnect. - - - +