[#932] Adds images in account recovery flow

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>

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;
+  }
+}

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'

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')} />

web-ui/test/integration/translations.spec.js

@@ -16,15 +16,15 @@ describe('Translations', () => {
 
     it('translates all keys on second step', () => {
       const app = mount(<App i18n={testI18n} child={<AccountRecoveryPage />} />);
-      app.find('form.admin-code-form').simulate('submit');
+      app.find('form.admin-code').simulate('submit');
 
       expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text());
     });
 
     it('translates all keys on third step', () => {
       const app = mount(<App i18n={testI18n} child={<AccountRecoveryPage />} />);
-      app.find('form.admin-code-form').simulate('submit');
-      app.find('form.user-code-form').simulate('submit');
+      app.find('form.admin-code').simulate('submit');
+      app.find('form.user-code').simulate('submit');
 
       expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text());
     });