Rename and restyle set password form

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
 import SignInPage from '../../../pages/signin/SignInPage';
-import SetPasswordPage from '../../../pages/SetPasswordPage';
+import SetPasswordForm from '../../../pages/SetPasswordForm';
 import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import SCREENS from '../../../SCREENS';
 
@@ -29,7 +29,7 @@ export default () => (
         <RootStack.Screen
             name="SetPassword"
             options={defaultScreenOptions}
-            component={SetPasswordPage}
+            component={SetPasswordForm}
         />
     </RootStack.Navigator>
 );

src/pages/SetPasswordForm.js

@@ -0,0 +1,140 @@
+import React, {Component} from 'react';
+import {
+    Text,
+    TextInput,
+    View,
+    SafeAreaView,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import styles from '../styles/styles';
+import {setPassword} from '../libs/actions/Session';
+import ONYXKEYS from '../ONYXKEYS';
+import ButtonWithLoader from '../components/ButtonWithLoader';
+import themeColors from '../styles/themes/default';
+import SignInPageLayout from './signin/SignInPageLayout';
+import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus';
+
+const propTypes = {
+    /* Onyx Props */
+
+    // The details about the account that the user is signing in with
+    account: PropTypes.shape({
+        // An error message to display to the user
+        error: PropTypes.string,
+
+        // Whether or not a sign on form is loading (being submitted)
+        loading: PropTypes.bool,
+    }),
+
+    // The credentials of the logged in person
+    credentials: PropTypes.shape({
+        // The email the user logged in with
+        login: PropTypes.string,
+
+        // The password used to log in the user
+        password: PropTypes.string,
+    }),
+
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            accountID: PropTypes.string,
+            validateCode: PropTypes.string,
+        }),
+    }),
+};
+
+const defaultProps = {
+    account: {},
+    credentials: {},
+    route: {
+        params: {},
+    },
+};
+
+class SetPasswordForm extends Component {
+    constructor(props) {
+        super(props);
+
+        this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this);
+
+        this.state = {
+            password: '',
+            formError: null,
+        };
+    }
+
+    /**
+     * Validate the form and then submit it
+     */
+    validateAndSubmitForm() {
+        if (!this.state.password.trim()) {
+            this.setState({
+                formError: 'Password cannot be blank',
+            });
+            return;
+        }
+
+        this.setState({
+            formError: null,
+        });
+        setPassword(
+            this.state.password,
+            lodashGet(this.props.route, 'params.validateCode', ''),
+            lodashGet(this.props.route, 'params.accountID', ''),
+        );
+    }
+
+    render() {
+        return (
+            <SafeAreaView style={[styles.signInPage]}>
+                <SignInPageLayout>
+                    <View style={[styles.mb4]}>
+                        <Text style={[styles.formLabel]}>Enter a password:</Text>
+                        <TextInput
+                            style={[styles.textInput]}
+                            value={this.state.password}
+                            secureTextEntry
+                            autoCompleteType="password"
+                            textContentType="password"
+                            onChangeText={text => this.setState({password: text})}
+                            onSubmitEditing={this.validateAndSubmitForm}
+                            autoCapitalize="none"
+                            placeholderTextColor={themeColors.placeholderText}
+                            autoFocus={canFocusInputOnScreenFocus()}
+                        />
+                    </View>
+                    <View>
+                        <ButtonWithLoader
+                            text="Set Password"
+                            isLoading={this.props.account.loading}
+                            onClick={this.validateAndSubmitForm}
+                        />
+                    </View>
+
+                    {this.state.formError && (
+                        <Text style={[styles.formError]}>
+                            {this.state.formError}
+                        </Text>
+                    )}
+
+                    {!_.isEmpty(this.props.account.error) && (
+                        <Text style={[styles.formError]}>
+                            {this.props.account.error}
+                        </Text>
+                    )}
+                </SignInPageLayout>
+            </SafeAreaView>
+        );
+    }
+}
+
+SetPasswordForm.propTypes = propTypes;
+SetPasswordForm.defaultProps = defaultProps;
+
+export default withOnyx({
+    credentials: {key: ONYXKEYS.CREDENTIALS},
+    account: {key: ONYXKEYS.ACCOUNT},
+})(SetPasswordForm);

src/pages/signin/SignInPage.js

@@ -12,6 +12,8 @@ import SignInPageLayout from './SignInPageLayout';
 import LoginForm from './LoginForm';
 import PasswordForm from './PasswordForm';
 import ResendValidationForm from './ResendValidationForm';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import compose from '../../libs/compose';
 
 const propTypes = {
     /* Onyx Props */
@@ -43,6 +45,8 @@ const propTypes = {
         // Error to display when there is a session error returned
         authToken: PropTypes.string,
     }),
+
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -114,8 +118,11 @@ class SignInPage extends Component {
 SignInPage.propTypes = propTypes;
 SignInPage.defaultProps = defaultProps;
 
-export default withOnyx({
-    account: {key: ONYXKEYS.ACCOUNT},
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    session: {key: ONYXKEYS.SESSION},
-})(SignInPage);
+export default compose(
+    withOnyx({
+        account: {key: ONYXKEYS.ACCOUNT},
+        credentials: {key: ONYXKEYS.CREDENTIALS},
+        session: {key: ONYXKEYS.SESSION},
+    }),
+    withWindowDimensions,
+)(SignInPage);

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

@@ -9,10 +9,13 @@ import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../../assets/images/expensify-cash.svg';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
 import TermsAndLicenses from '../TermsAndLicenses';
+import {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import WelcomeText from '../../../components/WelcomeText';
 
 const propTypes = {
 
+    ...windowDimensionsPropTypes,
+
     // The children to show inside the layout
     children: PropTypes.node.isRequired,
 

src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import {
-    Image, Text, View,
+    Image,
+    Text,
+    View,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';