diff options
| -rw-r--r-- | docker-compose.yml | 6 | ||||
| -rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 115 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.css | 31 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | ui/app/components/mascot.js | 6 |
5 files changed, 108 insertions, 52 deletions
diff --git a/docker-compose.yml b/docker-compose.yml index 58c046c32..9a57617dd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,8 +4,8 @@ metamascara: ports: - "9001" environment: - MASCARA_ORIGIN: "https://zero.metamask.io" + MASCARA_ORIGIN: "https://wallet.metamask.io" VIRTUAL_PORT: "9001" - VIRTUAL_HOST: "zero.metamask.io" - LETSENCRYPT_HOST: "zero.metamask.io" + VIRTUAL_HOST: "wallet.metamask.io" + LETSENCRYPT_HOST: "wallet.metamask.io" LETSENCRYPT_EMAIL: "admin@metamask.io"
\ No newline at end of file diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 2f4b81e7c..21d29d72b 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,8 +1,10 @@ +import EventEmitter from 'events' 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' +import Mascot from '../../../../ui/app/components/mascot' class CreatePasswordScreen extends Component { static propTypes = { @@ -18,6 +20,11 @@ class CreatePasswordScreen extends Component { confirmPassword: '' } + constructor () { + super() + this.animationEventEmitter = new EventEmitter() + } + isValid() { const {password, confirmPassword} = this.state; @@ -50,52 +57,70 @@ class CreatePasswordScreen extends Component { return isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> : ( - <div className="create-password"> - <div className="create-password__title"> - Create Password + <div> + <h2 className="alpha-warning">Warning This is Experemental software and is a Developer BETA </h2> + <div className="first-view-main"> + <div className="mascara-info"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="info"> + MetaMask is a secure identity vault for Ethereum. + </div> + <div className="info"> + It allows you to hold ether & tokens, and interact with decentralized applications. + </div> + </div> + <div className="create-password"> + <div className="create-password__title"> + Create Password + </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + goToImportWithSeedPhrase() + }} + > + Import with seed phrase + </a> + { /* } + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + goToImportAccount() + }} + > + Import an account + </a> + { */ } + <Breadcrumbs total={3} currentIndex={0} /> + </div> </div> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - <input - className="first-time-flow__input create-password__confirm-input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> - <button - className="first-time-flow__button" - disabled={!this.isValid()} - onClick={this.createAccount} - > - Create - </button> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - </a> - { /* } - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - </a> - { */ } - <Breadcrumbs total={3} currentIndex={0} /> </div> ) } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 2248c0438..f91c72f0e 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,3 +1,4 @@ + .first-time-flow { height: 100vh; width: 100vw; @@ -5,6 +6,36 @@ overflow: auto; } +.alpha-warning { + background: #f7861c; + color: #fff; + line-height: 2em; + padding-left: 2em; +} + +.first-view-main { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; +} + +.mascara-info { + display: flex; + flex-flow: column; + margin-top: 70px; + margin-right: 10vw; + width: 35vw; + max-width: 550px; +} + +.mascara-info :first-child { + align-self: flex-end; +} + +.info { + font-size: 19px; +} + .create-password, .unique-image, .tou, diff --git a/package.json b/package.json index 5c56d2e1b..4469263cc 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "watch": "mocha watch --recursive \"test/unit/**/*.js\"", - "mascara": "METAMASK_DEBUG=true node ./mascara/example/server", + "mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server", "dist": "npm run dist:clear && npm install && gulp dist", "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect", "test": "npm run lint && npm run test:coverage && npm run test:integration", diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js index 973ec2cad..3b0d3e31b 100644 --- a/ui/app/components/mascot.js +++ b/ui/app/components/mascot.js @@ -7,13 +7,13 @@ const debounce = require('debounce') module.exports = Mascot inherits(Mascot, Component) -function Mascot () { +function Mascot ({width = '200', height = '200'}) { Component.call(this) this.logo = metamaskLogo({ followMouse: true, pxNotRatio: true, - width: 200, - height: 200, + width, + height, }) this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000) |