Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #114 from edx/fix-demo-bugs

Browse Source 
add loader to form buttons
This commit is contained in:
Uzair Rasheed
2021-02-01 15:51:22 +05:00
committed by GitHub
parent 228e292703 01c1042be9
commit 101a8da547
4 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/forgot-password/ForgotPasswordPage.jsx
View File

@@ -12,6 +12,8 @@ import {
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Formik } from 'formik';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import messages from './messages';
import { forgotPassword } from './data/actions';
import { forgotPasswordResultSelector } from './data/selectors';
@@ -105,6 +107,7 @@ const ForgotPasswordPage = (props) => {
default: intl.formatMessage(messages['forgot.password.page.submit.button']),
}}
onClick={handleSubmit}
icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
/>
</Form>
</div>

22
src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
View File

@@ -332,11 +332,23 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
<span
className="pgn__stateful-btn-icon"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
<svg
aria-hidden="true"
className="svg-inline--fa fa-spinner fa-w-16 fa-spin "
data-icon="spinner"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
fill="currentColor"
style={Object {}}
/>
</svg>
</span>
Recover my password
</span>

3
src/login/LoginPage.jsx
View File

@@ -9,6 +9,8 @@ import {
} from '@edx/paragon';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import AccountActivationMessage from './AccountActivationMessage';
import ConfirmationAlert from '../common-components/ConfirmationAlert';
@@ -251,6 +253,7 @@ class LoginPage extends React.Component {
labels={{
default: intl.formatMessage(messages['sign.in.button']),
}}
icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
onClick={this.handleSubmit}
/>
</Form>

22
src/login/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -716,11 +716,23 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
<span
className="pgn__stateful-btn-icon"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
<svg
aria-hidden="true"
className="svg-inline--fa fa-spinner fa-w-16 fa-spin "
data-icon="spinner"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
fill="currentColor"
style={Object {}}
/>
</svg>
</span>
Sign in
</span>