From 3a8d65250fb75aa310dfca612356caee553fce86 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Mon, 20 Nov 2023 11:42:52 +0500 Subject: [PATCH 1/9] * updated login screen UI according to ececny web --- src/assets/svgs/hive-signer-icon.tsx | 50 +++++ src/assets/svgs/index.ts | 1 + src/components/index.tsx | 2 + .../mainButton/view/mainButtonView.js | 32 +-- src/components/orDivider/orDividerStyles.ts | 25 +++ src/components/orDivider/orDividerView.tsx | 18 ++ src/config/locales/en-US.json | 13 +- src/screens/editor/children/styles.ts | 1 - .../editor/container/editorContainer.tsx | 4 +- src/screens/login/screen/loginScreen.js | 192 ++++++++++-------- src/screens/login/screen/loginStyles.js | 58 ++++-- 11 files changed, 276 insertions(+), 120 deletions(-) create mode 100644 src/assets/svgs/hive-signer-icon.tsx create mode 100644 src/assets/svgs/index.ts create mode 100644 src/components/orDivider/orDividerStyles.ts create mode 100644 src/components/orDivider/orDividerView.tsx diff --git a/src/assets/svgs/hive-signer-icon.tsx b/src/assets/svgs/hive-signer-icon.tsx new file mode 100644 index 000000000..ad78b01a3 --- /dev/null +++ b/src/assets/svgs/hive-signer-icon.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { SvgXml } from 'react-native-svg'; + +const xml = ` + + + + + image/svg+xml + + steemconnect + + + + + hivesigner + + + + + + +`; +export default () => ; diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts new file mode 100644 index 000000000..d16aae933 --- /dev/null +++ b/src/assets/svgs/index.ts @@ -0,0 +1 @@ +export { default as HiveSignerIcon } from './hive-signer-icon'; diff --git a/src/components/index.tsx b/src/components/index.tsx index 05eb5b790..629c65d8c 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -103,6 +103,7 @@ import TransferAccountSelector from './transferAccountSelector/transferAccountSe import TransferAmountInputSection from './transferAmountInputSection/transferAmountInputSection'; import TextBoxWithCopy from './textBoxWithCopy/textBoxWithCopy'; import WebViewModal from './webViewModal/webViewModal'; +import OrDivider from './orDivider/orDividerView'; // Basic UI Elements import { @@ -253,4 +254,5 @@ export { TransferAmountInputSection, TextBoxWithCopy, WebViewModal, + OrDivider, }; diff --git a/src/components/mainButton/view/mainButtonView.js b/src/components/mainButton/view/mainButtonView.js index 8d2122144..dbdd0006e 100644 --- a/src/components/mainButton/view/mainButtonView.js +++ b/src/components/mainButton/view/mainButtonView.js @@ -47,24 +47,28 @@ class MainButton extends Component { iconType, textStyle, iconPosition, + iconStyle, + renderIcon, } = this.props; if (isLoading) { this._getIndicator(); } - const iconComponent = source ? ( - - ) : ( - iconName && ( - - ) - ); + const iconComponent = + renderIcon || + (source ? ( + + ) : ( + iconName && ( + + ) + )); if (text) { return ( @@ -108,7 +112,7 @@ class MainButton extends Component { } render() { - const { wrapperStyle, children, height, style, isLoading } = this.props; + const { wrapperStyle, children, height, style, isLoading, bodyWrapperStyle } = this.props; const { isDisable } = this.state; return ( @@ -123,7 +127,7 @@ class MainButton extends Component { style && style, ]} > - + {isLoading ? this._getIndicator() : children || this._getBody()} diff --git a/src/components/orDivider/orDividerStyles.ts b/src/components/orDivider/orDividerStyles.ts new file mode 100644 index 000000000..7adc23992 --- /dev/null +++ b/src/components/orDivider/orDividerStyles.ts @@ -0,0 +1,25 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + dividerContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + divider: { + borderWidth: 0.5, + flex: 1, + borderColor: '$primaryDarkGray', + }, + leftDivider: { + marginLeft: 20, + }, + rightDivider: { + marginRight: 20, + }, + orText: { + fontSize: 16, + color: '$primaryDarkGray', + marginHorizontal: 8, + }, +}); diff --git a/src/components/orDivider/orDividerView.tsx b/src/components/orDivider/orDividerView.tsx new file mode 100644 index 000000000..ff0fadd20 --- /dev/null +++ b/src/components/orDivider/orDividerView.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { View, Text, ViewStyle } from 'react-native'; +import styles from './orDividerStyles'; + +interface OrDividerProps { + containerStyle?: ViewStyle; +} +const OrDivider = ({ containerStyle }: OrDividerProps) => { + return ( + + + OR + + + ); +}; + +export default OrDivider; diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index f99f422c5..bc5255764 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -377,12 +377,13 @@ "no_user": "User is not found." }, "login": { - "signin": "Sign in", + "signin": "Login", + "login_with_hs": "Login with hivesigner", "signup": "JOIN NOW", "signin_title": "To get all the benefits of using Ecency", - "username": "Username", - "password": "Password or WIF", - "description": "By signing in, you agree to our Terms of Services and Privacy Policies.", + "username": "username", + "password": "password / private key", + "description": "By logging in, you agree to our Terms of Services and Privacy Policies.", "cancel": "cancel", "login": "LOGIN", "steemconnect_description": "If you don't want to keep your password encrypted and saved on your device, you can use Hivesigner.", @@ -394,7 +395,9 @@ "deep_login_alert_title": "Easy Login @{username}", "deep_login_alert_body":"Verify direct login using access code", "deep_login_url_expired":"Login url expired, please use private key or password to login", - "deep_login_malformed_url":"Malformed login url, please use private key or password to login" + "deep_login_malformed_url":"Malformed login url, please use private key or password to login", + "no_account_text": "Don't have an account?", + "signup_now": "Sign up now!" }, "register": { "modal_title":"Get Hive Account", diff --git a/src/screens/editor/children/styles.ts b/src/screens/editor/children/styles.ts index 6b97e36ff..f18ec4980 100644 --- a/src/screens/editor/children/styles.ts +++ b/src/screens/editor/children/styles.ts @@ -1,5 +1,4 @@ import EStyleSheet from 'react-native-extended-stylesheet'; -import { getBottomSpace } from 'react-native-iphone-x-helper'; export default EStyleSheet.create({ sheetContent: { diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx index 912499e95..12e7521e2 100644 --- a/src/screens/editor/container/editorContainer.tsx +++ b/src/screens/editor/container/editorContainer.tsx @@ -10,6 +10,7 @@ import { isArray } from 'lodash'; import { Buffer } from 'buffer'; import { useQueryClient } from '@tanstack/react-query'; import { gestureHandlerRootHOC } from 'react-native-gesture-handler'; +import { postBodySummary } from '@ecency/render-helper'; import { addDraft, updateDraft, getDrafts, addSchedule } from '../../../providers/ecency/ecency'; import { toastNotification, setRcOffer } from '../../../redux/actions/uiAction'; import { @@ -50,7 +51,6 @@ import { useUserActivityMutation } from '../../../providers/queries/pointQueries import { PointActivityIds } from '../../../providers/ecency/ecency.types'; import { usePostsCachePrimer } from '../../../providers/queries/postQueries/postQueries'; import { PostTypes } from '../../../constants/postTypes'; -import { postBodySummary } from '@ecency/render-helper'; /* * Props Name Description Value @@ -456,7 +456,7 @@ class EditorContainer extends Component { tags: draftField.tags, beneficiaries, rewardType, - description: postDescription ? postDescription : postBodySummaryContent, + description: postDescription || postBodySummaryContent, }); const jsonMeta = makeJsonMetadata(meta, draftField.tags); diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 93bcbcdcd..09aae8210 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View, Platform, Keyboard } from 'react-native'; +import { View, Platform, Keyboard, Text } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import ScrollableTabView from 'react-native-scrollable-tab-view'; import { injectIntl } from 'react-intl'; @@ -15,6 +15,7 @@ import { LoginHeader, MainButton, Modal, + OrDivider, TabBar, TextButton, } from '../../../components'; @@ -25,9 +26,8 @@ import { default as ROUTES } from '../../../constants/routeNames'; // Styles import styles from './loginStyles'; import globalStyles from '../../../globalStyles'; - -import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png'; import { ECENCY_TERMS_URL } from '../../../config/ecencyApi'; +import { HiveSignerIcon } from '../../../assets/svgs'; class LoginScreen extends PureComponent { constructor(props) { @@ -87,7 +87,12 @@ class LoginScreen extends PureComponent { const { navigation, intl, handleOnPressLogin, handleSignUp, isLoading } = this.props; const { username, isUsernameValid, keyboardIsOpen, password, isModalOpen } = this.state; - console.log('keyboardIsOpen : ', keyboardIsOpen); + const _renderHiveicon = () => ( + + + + ); + return ( - ( - - )} - > - - - - this._handleOnPasswordChange(value)} - placeholder={intl.formatMessage({ - id: 'login.password', - })} - isEditable - secureTextEntry - type="password" - numberOfLines={1} - value={password} - inputStyle={styles.input} - /> - - - - + + + this._handleOnPasswordChange(value)} + placeholder={intl.formatMessage({ + id: 'login.password', + })} + isEditable + secureTextEntry + type="password" + numberOfLines={1} + value={password} + inputStyle={styles.input} + /> + + handleOnPressLogin(username, password)} + iconName="person" + iconColor="white" + text={intl.formatMessage({ + id: 'login.login', + })} + textStyle={styles.mainBtnText} + isDisable={!isUsernameValid || password.length < 2 || username.length < 2} + isLoading={isLoading} + wrapperStyle={styles.loginBtnWrapper} + bodyWrapperStyle={styles.loginBtnBodyWrapper} + height={50} + iconStyle={styles.loginBtnIconStyle} + /> + {/* navigation.navigate({ @@ -177,21 +182,41 @@ class LoginScreen extends PureComponent { text={intl.formatMessage({ id: 'login.cancel', })} - /> - handleOnPressLogin(username, password)} - iconName="person" - iconColor="white" - text={intl.formatMessage({ - id: 'login.login', - })} - textStyle={styles.mainBtnText} - isDisable={!isUsernameValid || password.length < 2 || username.length < 2} - isLoading={isLoading} - /> - + /> */} + + this._handleOnModalToggle()} + renderIcon={_renderHiveicon()} + text={intl.formatMessage({ + id: 'login.login_with_hs', + })} + textStyle={styles.hsLoginBtnText} + wrapperStyle={styles.loginBtnWrapper} + bodyWrapperStyle={styles.loginBtnBodyWrapper} + height={48} + style={styles.hsLoginBtnStyle} + /> + + + + + {intl.formatMessage({ + id: 'login.no_account_text', + })} + + handleSignUp()}> + {intl.formatMessage({ + id: 'login.signup_now', + })} + - + + {/* - - + */} Date: Sun, 26 Nov 2023 19:26:15 +0500 Subject: [PATCH 2/9] * added back/cross icon to login screen * removed commented code --- .../loginHeader/view/loginHeaderStyles.js | 10 ++++- .../loginHeader/view/loginHeaderView.js | 23 +++++----- src/screens/login/screen/loginScreen.js | 42 +++---------------- 3 files changed, 25 insertions(+), 50 deletions(-) diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js index caf6b1fa4..681e60fa7 100644 --- a/src/components/loginHeader/view/loginHeaderStyles.js +++ b/src/components/loginHeader/view/loginHeaderStyles.js @@ -54,9 +54,15 @@ export default EStyleSheet.create({ backgroundColor: '$primaryBackgroundColor', paddingVertical: 8, }, + backIconContainer: { + marginLeft: 20, + }, + backIcon: { + fontSize: 24, + color: '$iconColor', + }, logoContainer: { - paddingLeft: 32, - paddingRight: 8, + paddingRight: 32, alignItems: 'center', justifyContent: 'center', }, diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js index 7c3ca23d3..2006400ca 100644 --- a/src/components/loginHeader/view/loginHeaderView.js +++ b/src/components/loginHeader/view/loginHeaderView.js @@ -4,11 +4,11 @@ import * as Animatable from 'react-native-animatable'; // Constants // Components -import { TextButton } from '../../buttons'; import { LineBreak } from '../../basicUIElements'; // Styles import styles from './loginHeaderStyles'; import getWindowDimensions from '../../../utils/getWindowDimensions'; +import { IconButton } from '../..'; class LoginHeaderView extends PureComponent { /* Props @@ -27,26 +27,27 @@ class LoginHeaderView extends PureComponent { // Component Functions render() { - const { description, isKeyboardOpen, onPress, rightButtonText, title } = this.props; + const { description, isKeyboardOpen, title, onBackPress } = this.props; return ( - + + + + {/* - - - - + */} { + navigation.navigate({ + name: ROUTES.DRAWER.MAIN, + }); + }} /> - {/* - navigation.navigate({ - name: ROUTES.DRAWER.MAIN, - }) - } - text={intl.formatMessage({ - id: 'login.cancel', - })} - /> */} this._handleOnModalToggle()} @@ -197,7 +187,6 @@ class LoginScreen extends PureComponent { style={styles.hsLoginBtnStyle} /> - {intl.formatMessage({ @@ -211,27 +200,6 @@ class LoginScreen extends PureComponent { - {/* - - this._handleOnModalToggle()} - source={STEEM_CONNECT_LOGO} - text="hive" - secondText="signer" - /> - */} Date: Sun, 26 Nov 2023 19:35:20 +0500 Subject: [PATCH 3/9] * replaced mascot with ecency logo --- src/components/loginHeader/view/loginHeaderStyles.js | 4 +--- src/components/loginHeader/view/loginHeaderView.js | 9 +-------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js index 681e60fa7..85800bbfe 100644 --- a/src/components/loginHeader/view/loginHeaderStyles.js +++ b/src/components/loginHeader/view/loginHeaderStyles.js @@ -37,12 +37,10 @@ export default EStyleSheet.create({ alignItems: 'center', }, mascot: { - width: '70%', - height: '70%', + width: '60%', }, titleText: { alignSelf: 'center', - marginTop: 20, marginLeft: 32, marginRight: 12, flex: 1, diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js index 2006400ca..4ef64461a 100644 --- a/src/components/loginHeader/view/loginHeaderView.js +++ b/src/components/loginHeader/view/loginHeaderView.js @@ -41,13 +41,6 @@ class LoginHeaderView extends PureComponent { onPress={onBackPress} /> - {/* - - */} From 37b8a91a2b74ba5aa6ae9191258a86fed161c9de Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Fri, 1 Dec 2023 16:18:50 +0500 Subject: [PATCH 4/9] * reduced logo container height to fit on smaller screens --- src/components/loginHeader/view/loginHeaderStyles.js | 3 +-- src/components/loginHeader/view/loginHeaderView.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js index 85800bbfe..c673a1822 100644 --- a/src/components/loginHeader/view/loginHeaderStyles.js +++ b/src/components/loginHeader/view/loginHeaderStyles.js @@ -4,7 +4,6 @@ export default EStyleSheet.create({ container: { flex: 1, flexDirection: 'column', - height: '$deviceHeight / 3', backgroundColor: '$primaryBackgroundColor', }, safeArea: { @@ -15,7 +14,7 @@ export default EStyleSheet.create({ maxHeight: '$deviceHeight / 3', overflow: 'hidden', backgroundColor: '$primaryBackgroundColor', - height: '$deviceHeight / 3.9', + height: 120, justifyContent: 'space-between', alignItems: 'center', }, diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js index 4ef64461a..050ef45e0 100644 --- a/src/components/loginHeader/view/loginHeaderView.js +++ b/src/components/loginHeader/view/loginHeaderView.js @@ -70,7 +70,7 @@ class LoginHeaderView extends PureComponent { export default LoginHeaderView; const { height } = getWindowDimensions(); -const bodyHeight = height / 3.9; +const bodyHeight = 120; const showAnimation = { from: { opacity: 0, From b774d0903598ec28bcbd7e2e65ea6f5d725d91c2 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Fri, 1 Dec 2023 17:46:03 +0500 Subject: [PATCH 5/9] * trim whitespace and lowercase username in login screen --- src/screens/login/screen/loginScreen.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 088dbd76a..76336ec24 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -55,11 +55,11 @@ class LoginScreen extends PureComponent { _handleUsernameChange = (username) => { const { getAccountsWithUsername } = this.props; + const formattedUsername = username.trim().toLowerCase(); + this.setState({ username: formattedUsername }); - this.setState({ username }); - - getAccountsWithUsername(username).then((res) => { - const isValid = res.includes(username); + getAccountsWithUsername(formattedUsername).then((res) => { + const isValid = res.includes(formattedUsername); this.setState({ isUsernameValid: isValid }); }); From c396ab8eca86205c715213dbb2357b5471b35e24 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Mon, 11 Dec 2023 15:20:27 +0500 Subject: [PATCH 6/9] * clear username state when username is cleared --- src/components/formInput/view/formInputView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/formInput/view/formInputView.tsx b/src/components/formInput/view/formInputView.tsx index 0e40399bf..43aba58dd 100644 --- a/src/components/formInput/view/formInputView.tsx +++ b/src/components/formInput/view/formInputView.tsx @@ -201,7 +201,7 @@ const FormInputView = ({ ) : value && value.length > 0 ? ( setValue('')} + onPress={() => _handleOnChange('')} name={leftIconName} style={styles.icon} /> From 82fd8e04936c5523d23808793c865ac0f9ae8be5 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Mon, 11 Dec 2023 15:22:11 +0500 Subject: [PATCH 7/9] * converted login screen to functional component * fixed character skipping issue due to debounce method and updated debounce logic --- src/screens/login/screen/loginScreen.js | 366 ++++++++++++------------ 1 file changed, 190 insertions(+), 176 deletions(-) diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 76336ec24..3a9de9d06 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -1,7 +1,7 @@ -import React, { PureComponent } from 'react'; +import React, { useEffect, useState } from 'react'; import { View, Platform, Keyboard, Text } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; -import { injectIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import { debounce } from 'lodash'; // Actions @@ -19,201 +19,215 @@ import { // Constants import { default as ROUTES } from '../../../constants/routeNames'; +import { ECENCY_TERMS_URL } from '../../../config/ecencyApi'; // Styles import styles from './loginStyles'; -import { ECENCY_TERMS_URL } from '../../../config/ecencyApi'; import { HiveSignerIcon } from '../../../assets/svgs'; -class LoginScreen extends PureComponent { - constructor(props) { - super(props); +const LoginScreen = ({ + initialUsername, + getAccountsWithUsername, + navigation, + handleOnPressLogin, + handleSignUp, + isLoading, +}) => { + const intl = useIntl(); + const [username, setUsername] = useState(initialUsername || ''); + const [password, setPassword] = useState(''); + const [isUsernameValid, setIsUsernameValid] = useState(true); + const [keyboardIsOpen, setKeyboardIsOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); - this.state = { - username: props.initialUsername || '', - password: '', - isUsernameValid: true, - keyboardIsOpen: false, - isModalOpen: false, - }; - } - - componentDidMount() { - if (this.props.initialUsername) { - this._handleUsernameChange(this.props.initialUsername); + useEffect(() => { + if (initialUsername) { + _handleUsernameChange(initialUsername); } - } + }, []); - componentWillUnmount() { - this.keyboardDidShowListener.remove(); - this.keyboardDidHideListener.remove(); - } + useEffect(() => { + const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', _keyboardDidShow); + const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', _keyboardDidHide); - _handleOnPasswordChange = (value) => { - this.setState({ password: value }); + return () => { + keyboardDidShowListener.remove(); + keyboardDidHideListener.remove(); + }; + }, []); + + const debouncedCheckValidity = debounce((uname) => { + _checkUsernameIsValid(uname); + }, 1000); + + useEffect(() => { + if (username) { + debouncedCheckValidity(username); + + return () => debouncedCheckValidity.cancel(); + } + }, [username]); + + const _keyboardDidShow = () => { + setKeyboardIsOpen(true); }; - _handleUsernameChange = (username) => { - const { getAccountsWithUsername } = this.props; + const _keyboardDidHide = () => { + setKeyboardIsOpen(false); + }; + + const _handleOnPasswordChange = (value) => { + setPassword(value); + }; + + const _handleUsernameChange = (username) => { const formattedUsername = username.trim().toLowerCase(); - this.setState({ username: formattedUsername }); + setUsername(formattedUsername); + }; - getAccountsWithUsername(formattedUsername).then((res) => { - const isValid = res.includes(formattedUsername); - - this.setState({ isUsernameValid: isValid }); + const _checkUsernameIsValid = (uname) => { + getAccountsWithUsername(uname).then((res) => { + const isValid = res.includes(uname); + console.log('isValid : ', isValid); + setIsUsernameValid(isValid); }); }; - _handleOnModalToggle = () => { - const { isModalOpen } = this.state; - this.setState({ isModalOpen: !isModalOpen }); + const _handleOnModalToggle = () => { + setIsModalOpen(!isModalOpen); }; - UNSAFE_componentWillMount() { - this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => - this.setState({ keyboardIsOpen: true }), - ); - this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => - this.setState({ keyboardIsOpen: false }), - ); - } + const _renderHiveicon = () => ( + + + + ); - render() { - const { navigation, intl, handleOnPressLogin, handleSignUp, isLoading } = this.props; - const { username, isUsernameValid, keyboardIsOpen, password, isModalOpen } = this.state; + return ( + + handleSignUp()} + rightButtonText={intl.formatMessage({ + id: 'login.signup', + })} + onBackPress={() => { + navigation.navigate({ + name: ROUTES.DRAWER.MAIN, + }); + }} + /> - const _renderHiveicon = () => ( - - - - ); - - return ( - - handleSignUp()} - rightButtonText={intl.formatMessage({ - id: 'login.signup', - })} - onBackPress={() => { - navigation.navigate({ - name: ROUTES.DRAWER.MAIN, - }); - }} - /> - - + - - - this._handleOnPasswordChange(value)} - placeholder={intl.formatMessage({ - id: 'login.password', - })} - isEditable - secureTextEntry - type="password" - numberOfLines={1} - value={password} - inputStyle={styles.input} - /> - - handleOnPressLogin(username, password)} - iconName="person" - iconColor="white" - text={intl.formatMessage({ - id: 'login.login', - })} - textStyle={styles.mainBtnText} - isDisable={!isUsernameValid || password.length < 2 || username.length < 2} - isLoading={isLoading} - wrapperStyle={styles.loginBtnWrapper} - bodyWrapperStyle={styles.loginBtnBodyWrapper} - height={50} - iconStyle={styles.loginBtnIconStyle} - /> - - this._handleOnModalToggle()} - renderIcon={_renderHiveicon()} - text={intl.formatMessage({ - id: 'login.login_with_hs', - })} - textStyle={styles.hsLoginBtnText} - wrapperStyle={styles.loginBtnWrapper} - bodyWrapperStyle={styles.loginBtnBodyWrapper} - height={48} - style={styles.hsLoginBtnStyle} - /> - - - - {intl.formatMessage({ - id: 'login.no_account_text', - })} - - handleSignUp()}> - {intl.formatMessage({ - id: 'login.signup_now', - })} - - + _checkUsernameIsValid(username)} + /> + + + handleOnPressLogin(username, password)} + iconName="person" + iconColor="white" + text={intl.formatMessage({ + id: 'login.login', + })} + textStyle={styles.mainBtnText} + isDisable={!isUsernameValid || password.length < 2 || username.length < 2} + isLoading={isLoading} + wrapperStyle={styles.loginBtnWrapper} + bodyWrapperStyle={styles.loginBtnBodyWrapper} + height={50} + iconStyle={styles.loginBtnIconStyle} + /> + + _handleOnModalToggle()} + renderIcon={_renderHiveicon()} + text={intl.formatMessage({ + id: 'login.login_with_hs', + })} + textStyle={styles.hsLoginBtnText} + wrapperStyle={styles.loginBtnWrapper} + bodyWrapperStyle={styles.loginBtnBodyWrapper} + height={48} + style={styles.hsLoginBtnStyle} + /> + + + + {intl.formatMessage({ + id: 'login.no_account_text', + })} + + handleSignUp()}> + {intl.formatMessage({ + id: 'login.signup_now', + })} + - - - - ); - } -} + + + + + ); +}; -export default injectIntl(LoginScreen); +export default LoginScreen; From 9f53fa3c01d2e207d81b398c3fc2642a3044aba9 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Mon, 11 Dec 2023 15:25:01 +0500 Subject: [PATCH 8/9] * used intl for OR deivider --- src/components/orDivider/orDividerView.tsx | 8 +++++++- src/config/locales/en-US.json | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/orDivider/orDividerView.tsx b/src/components/orDivider/orDividerView.tsx index ff0fadd20..7b9ed5ede 100644 --- a/src/components/orDivider/orDividerView.tsx +++ b/src/components/orDivider/orDividerView.tsx @@ -1,15 +1,21 @@ import React from 'react'; import { View, Text, ViewStyle } from 'react-native'; +import { useIntl } from 'react-intl'; import styles from './orDividerStyles'; interface OrDividerProps { containerStyle?: ViewStyle; } const OrDivider = ({ containerStyle }: OrDividerProps) => { + const intl = useIntl(); return ( - OR + + {intl.formatMessage({ + id: 'login.or', + })} + ); diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index bc5255764..473264918 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -397,7 +397,8 @@ "deep_login_url_expired":"Login url expired, please use private key or password to login", "deep_login_malformed_url":"Malformed login url, please use private key or password to login", "no_account_text": "Don't have an account?", - "signup_now": "Sign up now!" + "signup_now": "Sign up now!", + "or": "OR" }, "register": { "modal_title":"Get Hive Account", From 4bed9561948a14f76408c9d9b01039ebb3233e29 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com> Date: Mon, 11 Dec 2023 17:45:29 +0500 Subject: [PATCH 9/9] * removed console log --- src/screens/login/screen/loginScreen.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js index 3a9de9d06..9ff06dff2 100644 --- a/src/screens/login/screen/loginScreen.js +++ b/src/screens/login/screen/loginScreen.js @@ -88,7 +88,6 @@ const LoginScreen = ({ const _checkUsernameIsValid = (uname) => { getAccountsWithUsername(uname).then((res) => { const isValid = res.includes(uname); - console.log('isValid : ', isValid); setIsUsernameValid(isValid); }); };