From 7a6419d1628db465ebd543fac187012e58b67138 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Mon, 27 Mar 2017 15:57:42 -0300 Subject: [#932] Adds admin code form --- web-ui/app/locales/en_US/translation.json | 10 ++++- .../forms/admin_recovery_code_form.js | 44 ++++++++++++++++++++++ .../forms/admin_recovery_code_form.scss | 0 .../forms/admin_recovery_code_form.spec.js | 29 ++++++++++++++ web-ui/src/account_recovery/page.js | 9 ++++- web-ui/src/account_recovery/page.scss | 2 + web-ui/src/account_recovery/page.spec.js | 16 ++++++++ 7 files changed, 107 insertions(+), 3 deletions(-) create mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.js create mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.scss create mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js (limited to 'web-ui') diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 7d24a728..275e8d91 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -82,7 +82,15 @@ "tags": "Tags" }, "account-recovery": { - "page-title": "Pixelated Account Recovery" + "page-title": "Pixelated Account Recovery", + "admin-form": { + "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.", + "tip3": "Don't ever ask for it via email.", + "input-label": "type here admin's backup code", + "button": "Next" + } }, "backup-account": { "page-title": "Pixelated Backup Account", 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 new file mode 100644 index 00000000..68889e40 --- /dev/null +++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js @@ -0,0 +1,44 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ + +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'; + +import './admin_recovery_code_form.scss'; + + +export const AdminRecoveryCodeForm = ({ t }) => ( +
+

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

+
    +
  • {t('account-recovery.admin-form.tip1')}
    • +
  • {t('account-recovery.admin-form.tip2')}
    • +
  • {t('account-recovery.admin-form.tip3')}
    • +
+ + +
+); + +AdminRecoveryCodeForm.propTypes = { + t: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(AdminRecoveryCodeForm); diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.scss b/web-ui/src/account_recovery/forms/admin_recovery_code_form.scss new file mode 100644 index 00000000..e69de29b diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js new file mode 100644 index 00000000..6df392fa --- /dev/null +++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js @@ -0,0 +1,29 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { AdminRecoveryCodeForm } from 'src/account_recovery/forms/admin_recovery_code_form'; + +describe('AdminRecoveryCodeForm', () => { + let adminRecoveryCodeForm; + + beforeEach(() => { + const mockTranslations = key => key; + adminRecoveryCodeForm = shallow(); + }); + + it('renders title for admin recovery code', () => { + expect(adminRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.admin-form.title'); + }); + + it('renders tips for retrieving recovery code', () => { + expect(adminRecoveryCodeForm.find('li').length).toEqual(3); + }); + + it('renders input field for admin code', () => { + expect(adminRecoveryCodeForm.find('InputField').props().name).toEqual('admin-code'); + }); + + it('renders button for next step', () => { + expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.admin-form.button'); + }); +}); diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js index c77da0b6..2a2f6fe6 100644 --- a/web-ui/src/account_recovery/page.js +++ b/web-ui/src/account_recovery/page.js @@ -18,8 +18,9 @@ import React from 'react'; import { translate } from 'react-i18next'; import DocumentTitle from 'react-document-title'; -import Footer from 'src/common/footer/footer'; import Header from 'src/common/header/header'; +import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form'; +import Footer from 'src/common/footer/footer'; import 'font-awesome/scss/font-awesome.scss'; import './page.scss'; @@ -29,7 +30,11 @@ export const Page = ({ t }) => (
-
+
+
+ +
+
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss index 71e3f074..a5d62e01 100644 --- a/web-ui/src/account_recovery/page.scss +++ b/web-ui/src/account_recovery/page.scss @@ -35,6 +35,8 @@ a { background: $white; margin: 3% auto; box-shadow: 0 2px 3px 0 $shadow; + width: 84%; + padding: 6% 5%; } .page { diff --git a/web-ui/src/account_recovery/page.spec.js b/web-ui/src/account_recovery/page.spec.js index b34f0f32..2d8559d6 100644 --- a/web-ui/src/account_recovery/page.spec.js +++ b/web-ui/src/account_recovery/page.spec.js @@ -1,7 +1,11 @@ import { shallow } from 'enzyme'; import expect from 'expect'; import React from 'react'; + import { Page } from 'src/account_recovery/page'; +import Header from 'src/common/header/header'; +import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form'; +import Footer from 'src/common/footer/footer'; describe('Account Recovery Page', () => { let page; @@ -14,4 +18,16 @@ describe('Account Recovery Page', () => { it('renders account recovery page title', () => { expect(page.props().title).toEqual('account-recovery.page-title'); }); + + it('renders header', () => { + expect(page.find(Header).length).toEqual(1); + }); + + it('renders admin recovery code form', () => { + expect(page.find(AdminRecoveryCodeForm).length).toEqual(1); + }); + + it('renders footer', () => { + expect(page.find(Footer).length).toEqual(1); + }); }); -- cgit v1.2.3