From 54c6c6b7c932ea7fe600592a861f7b46391b494d Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Wed, 15 Mar 2017 14:09:42 -0300 Subject: [#971] Add backup account confirmation page with @tuliocasagrande --- web-ui/app/images/sent-mail.svg | 18 +++++++++ web-ui/app/locales/en_US/translation.json | 7 ++++ web-ui/app/locales/pt_BR/translation.json | 7 ++++ web-ui/package.json | 1 + .../backup_account/backup_email/backup_email.js | 12 +++++- .../backup_email/backup_email.spec.js | 13 ++++++- .../backup_account/confirmation/confirmation.js | 43 +++++++++++++++++++++ .../backup_account/confirmation/confirmation.scss | 44 ++++++++++++++++++++++ .../confirmation/confirmation.spec.js | 29 ++++++++++++++ web-ui/src/backup_account/page.js | 14 ++++++- web-ui/src/backup_account/page.spec.js | 17 +++++++++ 11 files changed, 201 insertions(+), 4 deletions(-) create mode 100644 web-ui/app/images/sent-mail.svg create mode 100644 web-ui/src/backup_account/confirmation/confirmation.js create mode 100644 web-ui/src/backup_account/confirmation/confirmation.scss create mode 100644 web-ui/src/backup_account/confirmation/confirmation.spec.js (limited to 'web-ui') diff --git a/web-ui/app/images/sent-mail.svg b/web-ui/app/images/sent-mail.svg new file mode 100644 index 00000000..311f81d8 --- /dev/null +++ b/web-ui/app/images/sent-mail.svg @@ -0,0 +1,18 @@ + + + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 25d406b2..d69b7472 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -91,6 +91,13 @@ "error": { "invalid-email": "Please enter a valid email address" } + }, + "confirmation": { + "title1": "Success!", + "title2": "A message was sent to your backup account", + "paragraph": "Save this message, it is really important.", + "button": "Got it! I'm ready!", + "retry-button": "Hey, I didn't received it" } }, "back-to-inbox": "Back to my inbox", diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json index ec353ff1..4e179363 100644 --- a/web-ui/app/locales/pt_BR/translation.json +++ b/web-ui/app/locales/pt_BR/translation.json @@ -91,6 +91,13 @@ "error": { "invalid-email": "Por favor informe um e-mail válido" } + }, + "confirmation": { + "title1": "Sucesso!", + "title2": "Uma mensagem foi enviada para seu e-mail de recuperação", + "paragraph": "Salve esse e-mail, ele é bem importante.", + "button": "Recebi! Pronto!", + "retry-button": "Ei, eu não recebi" } }, "back-to-inbox": "Voltar", diff --git a/web-ui/package.json b/web-ui/package.json index 5a5375e6..efb026ad 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -72,6 +72,7 @@ "react-tap-event-plugin": "^2.0.1", "requirejs": "2.2.0", "sass-loader": "^4.1.1", + "sinon": "^2.0.0", "style-loader": "^0.13.1", "typeahead.js": "^0.11.1", "url-loader": "^0.5.7", diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js index 3d5df1b0..2ef76ecf 100644 --- a/web-ui/src/backup_account/backup_email/backup_email.js +++ b/web-ui/src/backup_account/backup_email/backup_email.js @@ -39,6 +39,13 @@ export class BackupEmail extends React.Component { }); } + submitHandler = (event) => { + event.preventDefault(); + if (typeof this.props.onSubmit === 'function') { + this.props.onSubmit(); + } + } + render() { const t = this.props.t; return ( @@ -48,7 +55,7 @@ export class BackupEmail extends React.Component { src='/public/images/forgot-my-password.svg' alt={t('backup-account.backup-email.image-description')} /> -
+

{t('backup-account.backup-email.title')}

{t('backup-account.backup-email.paragraph1')}

{t('backup-account.backup-email.paragraph2')}

@@ -68,7 +75,8 @@ export class BackupEmail extends React.Component { BackupEmail.propTypes = { - t: React.PropTypes.func.isRequired + t: React.PropTypes.func.isRequired, + onSubmit: React.PropTypes.func.isRequired }; export default translate('', { wait: true })(BackupEmail); diff --git a/web-ui/src/backup_account/backup_email/backup_email.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js index b2b297f4..d6e3e4e7 100644 --- a/web-ui/src/backup_account/backup_email/backup_email.spec.js +++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js @@ -1,13 +1,15 @@ import { shallow } from 'enzyme'; import expect from 'expect'; +import sinon from 'sinon'; import React from 'react'; import { BackupEmail } from 'src/backup_account/backup_email/backup_email'; describe('BackupEmail', () => { let page; + let mockTranslations; beforeEach(() => { - const mockTranslations = key => key; + mockTranslations = key => key; page = shallow(); }); @@ -23,6 +25,15 @@ describe('BackupEmail', () => { expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button'); }); + it('form submit should call parameter custom submit', () => { + const mockOnSubmit = sinon.spy(); + const event = { preventDefault() {} }; + page = shallow(); + + page.instance().submitHandler(event); + sinon.assert.calledOnce(mockOnSubmit); + }); + describe('Email validation', () => { let pageInstance; diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js new file mode 100644 index 00000000..324d46ba --- /dev/null +++ b/web-ui/src/backup_account/confirmation/confirmation.js @@ -0,0 +1,43 @@ +/* + * 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 SubmitButton from 'src/common/submit_button/submit_button'; + +import './confirmation.scss'; + +export const Confirmation = ({ t }) => ( +
+

{t('backup-account.confirmation.title1')}
{t('backup-account.confirmation.title2')}

+

{t('backup-account.confirmation.paragraph')}

+ Sent mail + +