aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--docker-compose.yml6
-rw-r--r--mascara/src/app/first-time/create-password-screen.js115
-rw-r--r--mascara/src/app/first-time/index.css31
-rw-r--r--package.json2
-rw-r--r--ui/app/components/mascot.js6
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)