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

re-align loader

Browse Source
This commit is contained in:
uzairr
2020-12-28 20:16:07 +05:00
parent 8032611ef0
commit e992d432b3
4 changed files with 20 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/logistration/_style.scss
View File

@@ -222,3 +222,11 @@ $apple-focus-black: $apple-black;
.invalid-feedback {
color: $red;
}
.no-inset{
inset: 0;
}
.full-vertical-height{
height: 100vh;
}

2
src/reset-password/ResetPasswordPage.jsx
View File

@@ -64,7 +64,7 @@ const ResetPasswordPage = (props) => {
const { token } = props.match.params;
if (token) {
props.validateToken(token);
return <Spinner text="Token validation in progress .. " />;
return <Spinner />;
}
} else if (props.token_status === 'invalid') {
return (<InvalidTokenMessage />);

40
src/reset-password/Spinner.jsx
View File

@@ -1,38 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { Spinner as ParagonSpinner } from '@edx/paragon';
const Spinner = (props) => {
const textMessage = props.text;
return (
<div className="d-flex justify-content-center reset-password-container">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="form-group">
<div className="d-flex flex-column align-items-start">
<h3 className="text-center mt-3">
<FormattedMessage
id="logistration.reset.password.request.token.validation.message"
defaultMessage="{textMessage}"
description=""
values={{
textMessage,
}}
/>
<FontAwesomeIcon icon={faSpinner} spin />
</h3>
</div>
</div>
</div>
const Spinner = () => (
<div className="position-absolute no-inset">
<div className="d-flex justify-content-center align-items-center full-vertical-height">
<ParagonSpinner animation="border" variant="primary" />
</div>
);
};
</div>
);
Spinner.defaultProps = {
text: '',
};
Spinner.propTypes = {
text: PropTypes.string,
};
export default Spinner;

42
src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
View File

@@ -488,48 +488,14 @@ Array [
exports[`ResetPasswordPage show spinner component during token validation 1`] = `
<div
className="d-flex justify-content-center reset-password-container"
className="position-absolute no-inset"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
className="d-flex justify-content-center align-items-center full-vertical-height"
>
<div
className="form-group"
>
<div
className="d-flex flex-column align-items-start"
>
<h3
className="text-center mt-3"
>
<span>
Token validation in progress ..
</span>
<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>
</h3>
</div>
</div>
className="spinner-border text-primary"
/>
</div>
</div>
`;