From e1497fafa64b5f8e25407611709920dc5e0eaf77 Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Mon, 21 Aug 2017 04:56:09 -0700 Subject: Add UniqueImageScreen --- mascara/src/app/first-time/breadcrumbs.js | 1 + .../src/app/first-time/create-password-screen.js | 112 +++++++++++++++------ mascara/src/app/first-time/index.css | 56 ++++++++++- mascara/src/app/first-time/index.js | 51 ++++++++-- mascara/src/app/first-time/loading-screen.js | 11 ++ mascara/src/app/first-time/spinner.js | 70 +++++++++++++ mascara/src/app/first-time/unique-image-screen.js | 40 ++++++++ 7 files changed, 298 insertions(+), 43 deletions(-) create mode 100644 mascara/src/app/first-time/loading-screen.js create mode 100644 mascara/src/app/first-time/spinner.js create mode 100644 mascara/src/app/first-time/unique-image-screen.js (limited to 'mascara/src/app') diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js index cbd0da1a1..f8460d200 100644 --- a/mascara/src/app/first-time/breadcrumbs.js +++ b/mascara/src/app/first-time/breadcrumbs.js @@ -13,6 +13,7 @@ export default class Breadcrumbs extends Component {
{Array(total).fill().map((_, i) => (
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 4b4cea51d..e4b0425ce 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,46 +1,92 @@ import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux'; +import {createNewVaultAndKeychain} from '../../../../ui/app/actions' +import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' -export default class CreatePasswordScreen extends Component { +class CreatePasswordScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool.isRequired, + createAccount: PropTypes.func.isRequired, + next: PropTypes.func.isRequired + } state = { password: '', confirmPassword: '' } + isValid() { + const {password, confirmPassword} = this.state; + + if (!password || !confirmPassword) { + return false; + } + + if (password.length < 8) { + return false; + } + + return password === confirmPassword; + } + + createAccount = () => { + if (!this.isValid()) { + return; + } + + const {password} = this.state; + const {createAccount, next} = this.props; + + createAccount(password) + .then(next); + } + render() { - return ( -
-
- Create Password + const { isLoading } = this.props + + return isLoading + ? + : ( +
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + e.preventDefault()} + > + Import an account + +
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - e.preventDefault()} - > - Import an account - - -
- ) + ) } +} -} \ No newline at end of file +export default connect( + ({ appState: { isLoading } }) => ({ isLoading }), + dispatch => ({ + createAccount: password => dispatch(createNewVaultAndKeychain(password)) + }) +)(CreatePasswordScreen) diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index dbcde5004..5193b412f 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,18 +1,21 @@ +$primary + .first-time-flow { height: 100vh; width: 100vw; background-color: #FFF; } -.create-password { +.create-password, +.unique-image { display: flex; flex-flow: column nowrap; margin: 67px 0 0 146px; - max-width: 350px; + max-width: 35rem; } -.create-password__title { - height: 102px; +.create-password__title, +.unique-image__title { width: 280px; color: #1B344D; font-size: 40px; @@ -29,6 +32,23 @@ margin-bottom: 54px; } +.unique-image__title { + margin-top: 24px; +} + +.unique-image__body-text { + width: 335px; + color: #1B344D; + font-size: 16px; + line-height: 23px; + font-family: Montserrat UltraLight; +} + +.unique-image__body-text + +.unique-image__body-text { + margin-top: 24px; +} + .first-time-flow__input { width: 350px; font-size: 18px; @@ -57,6 +77,11 @@ transition: 200ms ease-in-out; } +button.first-time-flow__button[disabled] { + background-color: rgba(247, 134, 28, 0.9); + opacity: .6; +} + button.first-time-flow__button:hover { transform: scale(1); background-color: rgba(247, 134, 28, 0.9); @@ -82,4 +107,27 @@ button.first-time-flow__button:hover { .breadcrumb + .breadcrumb { margin-left: 10px; +} + +.loading-screen { + width: 100vw; + height: 100vh; + display: flex; + flex-flow: column nowrap; + align-items: center; + margin-top: 143px; +} + +.loading-screen .spinner { + margin-bottom: 25px; + width: 100px; + height: 100px; +} + +.loading-screen__message { + color: #1B344D; + font-size: 20px; + line-height: 26px; + text-align: center; + font-family: Montserrat UltraLight; } \ No newline at end of file diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 1a9a00eec..4bc03c09c 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,14 +1,20 @@ import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux'; import CreatePasswordScreen from './create-password-screen' +import UniqueImageScreen from './unique-image-screen' -export default class FirstTimeFlow extends Component { +class FirstTimeFlow extends Component { static propTypes = { - screenType: PropTypes.string + isInitialized: PropTypes.bool, + seedWords: PropTypes.string, + noActiveNotices: PropTypes.bool }; static defaultProps = { - screenType: FirstTimeFlow.CREATE_PASSWORD + isInitialized: false, + seedWords: '', + noActiveNotices: false }; static SCREEN_TYPE = { @@ -20,9 +26,23 @@ export default class FirstTimeFlow extends Component { BUY_ETHER: 'buy_ether' }; - static getScreenType = ({isInitialized, noActiveNotices, seedWords}) => { + constructor(props) { + super(props); + this.state = { + screenType: this.getScreenType() + } + } + + setScreenType(screenType) { + this.setState({ screenType }) + } + + getScreenType() { + const {isInitialized, seedWords, noActiveNotices} = this.props; const {SCREEN_TYPE} = FirstTimeFlow + return SCREEN_TYPE.UNIQUE_IMAGE + if (!isInitialized) { return SCREEN_TYPE.CREATE_PASSWORD } @@ -39,9 +59,19 @@ export default class FirstTimeFlow extends Component { renderScreen() { const {SCREEN_TYPE} = FirstTimeFlow - switch (this.props.screenType) { + switch (this.state.screenType) { case SCREEN_TYPE.CREATE_PASSWORD: - return + return ( + this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)} + /> + ) + case SCREEN_TYPE.UNIQUE_IMAGE: + return ( + this.setScreenType(SCREEN_TYPE.TERM_OF_USE)} + /> + ) default: return