diff --git a/app/assets/scripts/a11n/signin.js b/app/assets/scripts/a11n/signin.js index 17f144cf..666d0191 100644 --- a/app/assets/scripts/a11n/signin.js +++ b/app/assets/scripts/a11n/signin.js @@ -24,6 +24,7 @@ import { SectionFieldset } from '../components/common/forms/section-fieldset'; import { FormikInputText } from '../components/common/forms/input-text'; import { createProcessToast } from '../components/common/toasts'; import { useUser } from '../context/user'; +import FormInfoTip from '../components/common/forms/form-info-tooltip'; const OTPModal = styled(Modal)` max-width: 24rem; @@ -192,7 +193,33 @@ function SignIn() { {!mfaEnabled && mfaCode && ( -

Set-up OTP

+

+ Set-up OTP + + A one-time password (OTP) increases the security of your APT + account. To use OTP with APT, you'll need to download + an application (sometimes referred to as MFA) that generates + a time-sensitive code (OTP) that is entered upon login. APT + doesn't endorse any particular application, but some + include{' '} + + Google Authenticator + {' '} + (Android, iOS),{' '} + + Microsoft Authenticator + {' '} + (Android, iOS), and{' '} + 1Password (Android, + iOS, Mac, PC, Linux, web browser). Please follow the + respective application's instructions for how to + install and setup the OTP generator. +

+ } + /> +

Please use the following code or QR to generate Time-based OTP from the Authenticator app. diff --git a/app/assets/scripts/components/common/forms/form-info-tooltip.js b/app/assets/scripts/components/common/forms/form-info-tooltip.js index 1a108348..be512889 100644 --- a/app/assets/scripts/components/common/forms/form-info-tooltip.js +++ b/app/assets/scripts/components/common/forms/form-info-tooltip.js @@ -23,9 +23,9 @@ const TooltipTagComponent = React.forwardRef((props, ref) => ( TooltipTagComponent.displayName = 'TooltipTagComponent'; -export default function FormInfoTip({ title }) { +export default function FormInfoTip({ title, ...rest }) { return ( - + More information );