From ba8c330e2059e7f9046bf69b2685a5d5f3bfe0eb Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Tue, 28 Mar 2017 13:29:51 -0300 Subject: [PATCH] [#932] Adds mobile progress bar to account recovery flow --- web-ui/app/images/account-recovery/step_1.svg | 52 ++++++++++++++++++ web-ui/app/images/account-recovery/step_2.svg | 53 +++++++++++++++++++ web-ui/app/images/account-recovery/step_3.svg | 53 +++++++++++++++++++ web-ui/app/images/account-recovery/step_4.svg | 52 ++++++++++++++++++ web-ui/app/locales/en_US/translation.json | 2 + .../forms/admin_recovery_code_form.js | 8 ++- .../forms/admin_recovery_code_form.scss | 0 web-ui/src/account_recovery/forms/forms.scss | 20 +++++++ .../forms/user_recovery_code_form.js | 5 ++ 9 files changed, 243 insertions(+), 2 deletions(-) create mode 100644 web-ui/app/images/account-recovery/step_1.svg create mode 100644 web-ui/app/images/account-recovery/step_2.svg create mode 100644 web-ui/app/images/account-recovery/step_3.svg create mode 100644 web-ui/app/images/account-recovery/step_4.svg delete mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.scss create mode 100644 web-ui/src/account_recovery/forms/forms.scss diff --git a/web-ui/app/images/account-recovery/step_1.svg b/web-ui/app/images/account-recovery/step_1.svg new file mode 100644 index 000000000..a3e73b947 --- /dev/null +++ b/web-ui/app/images/account-recovery/step_1.svg @@ -0,0 +1,52 @@ + + + + Group 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web-ui/app/images/account-recovery/step_2.svg b/web-ui/app/images/account-recovery/step_2.svg new file mode 100644 index 000000000..c977aa663 --- /dev/null +++ b/web-ui/app/images/account-recovery/step_2.svg @@ -0,0 +1,53 @@ + + + + Group 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web-ui/app/images/account-recovery/step_3.svg b/web-ui/app/images/account-recovery/step_3.svg new file mode 100644 index 000000000..80bbefdc5 --- /dev/null +++ b/web-ui/app/images/account-recovery/step_3.svg @@ -0,0 +1,53 @@ + + + + Group 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web-ui/app/images/account-recovery/step_4.svg b/web-ui/app/images/account-recovery/step_4.svg new file mode 100644 index 000000000..b94793e89 --- /dev/null +++ b/web-ui/app/images/account-recovery/step_4.svg @@ -0,0 +1,52 @@ + + + + Group 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 97fb720d9..e8072bc39 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -84,6 +84,7 @@ "account-recovery": { "page-title": "Pixelated Account Recovery", "admin-form": { + "image-description": "Admin Recovery Code - Step 1 of 4", "title": "Contact your account administrator and ask for their part of the recovery code", "tip1": "The safest way to do this is in person.", "tip2": "You can call or text if you need to.", @@ -92,6 +93,7 @@ "button": "Next" }, "user-form": { + "image-description": "User Recovery Code - Step 2 of 4", "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", 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 0a28e8b23..75cf6ea58 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 @@ -21,11 +21,15 @@ import { translate } from 'react-i18next'; import InputField from 'src/common/input_field/input_field'; import SubmitButton from 'src/common/submit_button/submit_button'; -import './admin_recovery_code_form.scss'; - +import './forms.scss'; export const AdminRecoveryCodeForm = ({ t, next }) => (
+ {t('account-recovery.admin-form.image-description')}

{t('account-recovery.admin-form.title')}