diff options
3 files changed, 22 insertions, 1 deletions
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 26dccfcd..b162ae3a 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -92,7 +92,10 @@ "button": "Next" }, "user-form": { - "title": "Remember your backup account?" + "title": "Remember your backup account?", + "description": "When you created your account you received a message - it was sent by team@pixelated-project.org. You'll need the recovery code that is in it.", + "input-label": "type here your backup code", + "button": "Next" } }, "backup-account": { diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js index 2eec96ba..9f13b498 100644 --- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js +++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js @@ -18,9 +18,15 @@ import React from 'react'; import { translate } from 'react-i18next'; +import InputField from 'src/common/input_field/input_field'; +import SubmitButton from 'src/common/submit_button/submit_button'; + export const UserRecoveryCodeForm = ({ t }) => ( <form> <h1>{t('account-recovery.user-form.title')}</h1> + <p>{t('account-recovery.user-form.description')}</p> + <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} /> + <SubmitButton buttonText={t('account-recovery.user-form.button')} /> </form> ); diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js index ade96f9c..c950e305 100644 --- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js +++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js @@ -16,4 +16,16 @@ describe('UserRecoveryCodeForm', () => { it('renders title for user recovery code', () => { expect(userRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.user-form.title'); }); + + it('renders description', () => { + expect(userRecoveryCodeForm.find('p').text()).toEqual('account-recovery.user-form.description'); + }); + + it('renders input for user code', () => { + expect(userRecoveryCodeForm.find('InputField').props().label).toEqual('account-recovery.user-form.input-label'); + }); + + it('renders submit button', () => { + expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.user-form.button'); + }); }); |