diff options
| -rw-r--r-- | mascara/src/app/first-time/index.css | 28 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.js | 15 | ||||
| -rw-r--r-- | mascara/src/app/first-time/notice-screen.js | 68 | ||||
| -rw-r--r-- | ui/app/actions.js | 28 |
4 files changed, 119 insertions, 20 deletions
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 5193b412f..c10d4f9ce 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -7,15 +7,21 @@ $primary } .create-password, -.unique-image { +.unique-image, +.tou { display: flex; flex-flow: column nowrap; margin: 67px 0 0 146px; max-width: 35rem; } +.tou { + max-width: 46rem; +} + .create-password__title, -.unique-image__title { +.unique-image__title, +.tou__title { width: 280px; color: #1B344D; font-size: 40px; @@ -32,7 +38,8 @@ $primary margin-bottom: 54px; } -.unique-image__title { +.unique-image__title, +.tou__title { margin-top: 24px; } @@ -49,6 +56,21 @@ $primary margin-top: 24px; } +.tou__body { + border: 1px solid #979797; + border-radius: 8px; + background-color: #FFFFFF; + margin: 0 142px 0 0; + height: 334px; + overflow-y: auto; + color: #757575; + font-family: Montserrat UltraLight; + font-size: 12px; + line-height: 15px; + text-align: justify; + padding: 22px 30px; +} + .first-time-flow__input { width: 350px; font-size: 18px; diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 4bc03c09c..a81c4c11d 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux'; import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' +import NoticeScreen from './notice-screen' class FirstTimeFlow extends Component { @@ -20,7 +21,7 @@ class FirstTimeFlow extends Component { static SCREEN_TYPE = { CREATE_PASSWORD: 'create_password', UNIQUE_IMAGE: 'unique_image', - TERM_OF_USE: 'term_of_use', + NOTICE: 'notice', BACK_UP_PHRASE: 'back_up_phrase', CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase', BUY_ETHER: 'buy_ether' @@ -41,14 +42,14 @@ class FirstTimeFlow extends Component { const {isInitialized, seedWords, noActiveNotices} = this.props; const {SCREEN_TYPE} = FirstTimeFlow - return SCREEN_TYPE.UNIQUE_IMAGE + // return SCREEN_TYPE.UNIQUE_IMAGE if (!isInitialized) { return SCREEN_TYPE.CREATE_PASSWORD } if (!noActiveNotices) { - return SCREEN_TYPE.TERM_OF_USE + return SCREEN_TYPE.NOTICE } if (seedWords) { @@ -69,7 +70,13 @@ class FirstTimeFlow extends Component { case SCREEN_TYPE.UNIQUE_IMAGE: return ( <UniqueImageScreen - next={() => this.setScreenType(SCREEN_TYPE.TERM_OF_USE)} + next={() => this.setScreenType(SCREEN_TYPE.NOTICE)} + /> + ) + case SCREEN_TYPE.NOTICE: + return ( + <NoticeScreen + next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)} /> ) default: diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js new file mode 100644 index 000000000..d6502a6b2 --- /dev/null +++ b/mascara/src/app/first-time/notice-screen.js @@ -0,0 +1,68 @@ +import React, {Component, PropTypes} from 'react' +import Markdown from 'react-markdown' +import {connect} from 'react-redux'; +import {markNoticeRead} from '../../../../ui/app/actions' +import Identicon from '../../../../ui/app/components/identicon' +import Breadcrumbs from './breadcrumbs' + +class NoticeScreen extends Component { + static propTypes = { + address: PropTypes.string.isRequired, + lastUnreadNotice: PropTypes.shape({ + title: PropTypes.string, + date: PropTypes.string, + body: PropTypes.string + }), + next: PropTypes.func.isRequired + }; + + static defaultProps = { + lastUnreadNotice: {} + }; + + acceptTerms = () => { + const { markNoticeRead, lastUnreadNotice, next } = this.props; + const defer = markNoticeRead(lastUnreadNotice) + + if ((/terms/gi).test(lastUnreadNotice.title)) { + defer.then(next) + } + } + + render() { + const { + address, + lastUnreadNotice: { title, body } + } = this.props; + + return ( + <div className="tou"> + <Identicon address={address} diameter={70} /> + <div className="tou__title">{title}</div> + <Markdown + className="tou__body" + source={body} + skipHtml + /> + <button + className="first-time-flow__button" + onClick={this.acceptTerms} + > + Accept + </button> + <Breadcrumbs total={3} currentIndex={2} /> + </div> + ) + } +} + +export default connect( + ({ metamask: { identities, lastUnreadNotice } }) => ({ + lastUnreadNotice, + address: Object.entries(identities) + .map(([key]) => key)[0] + }), + dispatch => ({ + markNoticeRead: notice => dispatch(markNoticeRead(notice)) + }) +)(NoticeScreen) diff --git a/ui/app/actions.js b/ui/app/actions.js index 11cd14c16..f026fd0ab 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -696,21 +696,23 @@ function goBackToInitView () { function markNoticeRead (notice) { return (dispatch) => { - dispatch(this.showLoadingIndication()) + dispatch(actions.showLoadingIndication()) log.debug(`background.markNoticeRead`) - background.markNoticeRead(notice, (err, notice) => { - dispatch(this.hideLoadingIndication()) - if (err) { - return dispatch(actions.displayWarning(err)) - } - if (notice) { - return dispatch(actions.showNotice(notice)) - } else { - dispatch(this.clearNotices()) - return { - type: actions.SHOW_ACCOUNTS_PAGE, + return new Promise((resolve, reject) => { + background.markNoticeRead(notice, (err, notice) => { + dispatch(actions.hideLoadingIndication()) + if (err) { + dispatch(actions.displayWarning(err)) + return reject(err) } - } + if (notice) { + dispatch(actions.showNotice(notice)) + resolve() + } else { + dispatch(actions.clearNotices()) + resolve() + } + }) }) } } |