Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use redux to step through magic login flow
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,11 +13,4 @@ export default () => { | |
| if ( config.isEnabled( 'wp-login' ) ) { | ||
| page( '/login', controller.login ); | ||
| } | ||
| }; | ||
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| fetchRequestEmail, | ||
| hideRequestForm, | ||
| hideRequestNotice, | ||
| setInputEmailAddress, | ||
| } from 'state/login/magic-login/actions'; | ||
| import { | ||
| emailAddressFormInput, | ||
| emailAddressFormInputIsValid, | ||
| isFetchingEmail, | ||
| requestEmailError, | ||
| requestedEmailSuccessfully, | ||
| } from 'state/login/magic-login/selectors'; | ||
|
|
||
| import FormButton from 'components/forms/form-button'; | ||
| import FormFieldset from 'components/forms/form-fieldset'; | ||
| import FormTextInput from 'components/forms/form-text-input'; | ||
| import LoggedOutForm from 'components/logged-out-form'; | ||
| import LoggedOutFormLinks from 'components/logged-out-form/links'; | ||
| import LoggedOutFormLinkItem from 'components/logged-out-form/link-item'; | ||
| import Notice from 'components/notice'; | ||
| import { localize } from 'i18n-calypso'; | ||
|
|
||
| //@TODO move this to wp-login compoenent | ||
| import { getCurrentUser } from 'state/current-user/selectors'; | ||
|
|
||
| class RequestLoginEmailForm extends React.Component { | ||
| onEmailAddressFieldChange = event => { | ||
| this.props.setInputEmailAddress( event.target.value ); | ||
| }; | ||
|
|
||
| onSubmitBound = event => { | ||
| event.preventDefault(); | ||
| this.props.onSubmit( this.props.emailAddress ); | ||
| }; | ||
|
|
||
| render() { | ||
| const { | ||
| currentUser, | ||
| requestError, | ||
| isFetching, | ||
| isValidEmailAddress, | ||
| onNoticeDismiss, | ||
| onClickEnterPasswordInstead, | ||
| emailRequested, | ||
| translate, | ||
| } = this.props; | ||
|
|
||
| const submitEnabled = ( | ||
| isValidEmailAddress && | ||
| ! isFetching && | ||
| ! emailRequested && | ||
| ! requestError | ||
| ); | ||
|
|
||
| const errorText = typeof requestError === 'string' && requestError.length | ||
| ? requestError : translate( 'Unable to complete request' ); | ||
|
|
||
| return ( | ||
| <div> | ||
| { requestError && | ||
| <Notice | ||
| duration={ 10000 } | ||
| text={ errorText } | ||
| className="magic-login__request-login-email-form-notice" | ||
| showDismiss={ true } | ||
| onDismissClick={ onNoticeDismiss } | ||
| status="is-error" /> | ||
| } | ||
| <LoggedOutForm onSubmit={ this.onSubmitBound }> | ||
| <p>{ | ||
| translate( 'Get a link sent to the email address associated ' + | ||
| 'with your account to log in instantly without your password.' ) | ||
| }</p> | ||
| { currentUser && currentUser.username && | ||
| <p>{ | ||
| translate( 'NOTE: You are already logged in as user: %(user)s', { | ||
| args: { | ||
| user: currentUser.username | ||
| } | ||
| } ) }</p> | ||
| } | ||
| <FormFieldset> | ||
| <FormTextInput | ||
| autoCapitalize="off" | ||
| autoFocus="true" | ||
| name="emailAddress" | ||
| placeholder="Email address" | ||
| value={ this.props.emailAddress } | ||
| onChange={ this.onEmailAddressFieldChange } | ||
| /> | ||
|
|
||
| <div className="magic-login__form-action"> | ||
| <FormButton primary disabled={ ! submitEnabled }> | ||
| { translate( 'Request Email' ) } | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| </FormButton> | ||
| </div> | ||
| </FormFieldset> | ||
| </LoggedOutForm> | ||
| <LoggedOutFormLinks> | ||
| <LoggedOutFormLinkItem onClick={ onClickEnterPasswordInstead }> | ||
| { translate( 'Enter a password instead' ) } | ||
| </LoggedOutFormLinkItem> | ||
| </LoggedOutFormLinks> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const mapState = state => { | ||
| return { | ||
| currentUser: getCurrentUser( state ), | ||
| emailAddress: emailAddressFormInput( state ), | ||
| isFetching: isFetchingEmail( state ), | ||
| isValidEmailAddress: emailAddressFormInputIsValid( state ), | ||
| requestError: requestEmailError( state ), | ||
| emailRequested: requestedEmailSuccessfully( state ), | ||
| }; | ||
| }; | ||
|
|
||
| const mapDispatch = dispatch => { | ||
| return { | ||
| onClickEnterPasswordInstead: () => dispatch( hideRequestForm() ), | ||
| onNoticeDismiss: () => dispatch( hideRequestNotice() ), | ||
| onSubmit: emailAddress => dispatch( fetchRequestEmail( emailAddress ) ), | ||
| setInputEmailAddress: emailAddress => dispatch( setInputEmailAddress( emailAddress ) ), | ||
| }; | ||
| }; | ||
|
|
||
| export default connect( mapState, mapDispatch )( localize( RequestLoginEmailForm ) ); | ||
Oops, something went wrong.
This was confusing to our translators, because of the lack of an indefinite article, i.e "Request an Email".
A translator comment would help. (Something like "button label to request to receive an email message")