Merge pull request #2518 from MetaMask/mascara-first-screen

Mascara first screen
feature/default_network_editable
Frankie 7 years ago committed by GitHub
commit aa538c52a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      docker-compose.yml
  2. 115
      mascara/src/app/first-time/create-password-screen.js
  3. 35
      mascara/src/app/first-time/index.css
  4. 2
      package.json
  5. 6
      ui/app/components/mascot.js

@ -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"

@ -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>
)
}

@ -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,
@ -75,7 +106,7 @@
.backup-phrase__tips {
margin: 40px 0 !important;
width: initial !important;
width: initial !important;
}
.backup-phrase__confirm-secret,
@ -337,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
padding: 14px 21px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
cursor: pointer;
}

@ -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",

@ -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)

Loading…
Cancel
Save