diff options
author | Anike Arni <aarni@thoughtworks.com> | 2017-03-28 16:20:08 -0300 |
---|---|---|
committer | Anike Arni <aarni@thoughtworks.com> | 2017-03-28 18:06:43 -0300 |
commit | 595c218d19f504d4b8c82423b47ff60fc0fb2680 (patch) | |
tree | 9b7f94a1975feb22320eaa31365231d99d4a9c14 /web-ui/src/account_recovery/forms | |
parent | eacd59f75a388c33b73b5eb61a2e22a24685badd (diff) |
[#932] Adds images in account recovery flow
Diffstat (limited to 'web-ui/src/account_recovery/forms')
4 files changed, 31 insertions, 3 deletions
diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js index 75cf6ea5..e4d335bb 100644 --- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js +++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js @@ -24,13 +24,17 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import './forms.scss'; export const AdminRecoveryCodeForm = ({ t, next }) => ( - <form className='admin-code-form' onSubmit={next}> + <form className='account-recovery-form admin-code' onSubmit={next}> <img className='account-recovery-progress' src='/public/images/account-recovery/step_1.svg' alt={t('account-recovery.admin-form.image-description')} /> <h1>{t('account-recovery.admin-form.title')}</h1> + <img + src='/public/images/account-recovery/admins_contact.svg' + alt='' + /> <ul> <li>{t('account-recovery.admin-form.tip1')}</li> <li>{t('account-recovery.admin-form.tip2')}</li> diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss index 1ef0e8d3..73d971b2 100644 --- a/web-ui/src/account_recovery/forms/forms.scss +++ b/web-ui/src/account_recovery/forms/forms.scss @@ -18,3 +18,23 @@ .account-recovery-progress { width: 100%; } + +.account-recovery-form { + display: flex; + flex-direction: column; + + img { + margin: 7px 0; + align-self: center; + } + + .input-field-group { + margin-top: 0; + } +} + +.new-password { + .input-field-group:first-of-type { + margin-bottom: 0; + } +} diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js index ccc66326..114366b3 100644 --- a/web-ui/src/account_recovery/forms/new_password_form.js +++ b/web-ui/src/account_recovery/forms/new_password_form.js @@ -23,7 +23,7 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import BackLink from 'src/common/back_link/back_link'; export const NewPasswordForm = ({ t, previous }) => ( - <form> + <form className='account-recovery-form new-password'> <img className='account-recovery-progress' src='/public/images/account-recovery/step_3.svg' 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 008fa64f..0438b002 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 @@ -25,13 +25,17 @@ import BackLink from 'src/common/back_link/back_link'; import './forms.scss'; export const UserRecoveryCodeForm = ({ t, previous, next }) => ( - <form className='user-code-form' onSubmit={next}> + <form className='account-recovery-form user-code' onSubmit={next}> <img className='account-recovery-progress' src='/public/images/account-recovery/step_2.svg' alt={t('account-recovery.user-form.image-description')} /> <h1>{t('account-recovery.user-form.title')}</h1> + <img + src='/public/images/account-recovery/codes.svg' + alt='' + /> <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')} /> |