Files
frontend-app-authn/src/logistration/ConfirmationAlert.jsx
2020-12-14 17:21:21 +05:00

54 lines
1.9 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { Alert, Hyperlink } from '@edx/paragon';
const ConfirmationAlert = (props) => {
const { email } = props;
const technicalSupportLink = (
<Hyperlink
destination="https://support.edx.org/hc/en-us/articles/206212088-What-if-I-did-not-receive-a-password-reset-message-"
>
<FormattedMessage
id="logistration.forgot.password.confirmation.support.link"
defaultMessage="contact technical support"
description="link text used in message: logistration.forgot.password.confirmation.support.link 'contact technical support.'"
/>
</Hyperlink>
);
const strongEmail = (<strong>{email}</strong>);
const lineBreak = (<br />);
return (
<Alert
variant="success"
>
<h4 style={{ color: 'green' }}>
<FormattedMessage
id="logistration.forgot.password.confirmation.title"
defaultMessage="Check Your Email"
description="Forgot password confirmation title"
/>
</h4>
<FormattedMessage
id="logistration.forgot.password.confirmation.message"
defaultMessage="You entered {strongEmail}. If this email address is associated with your edX account, we will send a message with password recovery instructions to this email address. {lineBreak}If you do not receive a password reset message after 1 minute, verify that you entered the correct email address, or check your spam folder.{lineBreak} If you need further assistance, {technicalSupportLink}."
description="Forgot password confirmation message"
values={{
strongEmail,
technicalSupportLink,
lineBreak,
}}
/>
</Alert>
);
};
ConfirmationAlert.propTypes = {
email: PropTypes.string.isRequired,
};
export default ConfirmationAlert;