1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
metamask-extension/ui/app/components/pages/unlock-page/unlock-page.component.js
Dan J Miller c757366355
Metametrics (#6171)
* Add metametrics provider and util.

* Add backend api and state for participating in metametrics.

* Add frontend action for participating in metametrics.

* Add metametrics opt-in screen.

* Add metametrics events to first time flow.

* Add metametrics events for route changes

* Add metametrics events for send and confirm screens

* Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen

* Ensures each log in is measured as a new visit by metametrics.

* Ensure metametrics is called with an empty string for dimensions params if specified

* Adds opt in metametrics modal after unlock for existing users

* Adds settings page toggle for opting in and out of MetaMetrics

* Switch metametrics dimensions to page level scope

* Lint, test and translation fixes for metametrics.

* Update design for metametrics opt-in screen

* Complete responsive styling of metametrics-opt-in modal

* Use new chart image on metrics opt in screens

* Incorporate the metametrics opt-in screen into the new onboarding flow

* Update e2e tests to accomodate metametrics changes

* Mock out metametrics network requests in integration tests

* Fix tx-list integration test to support metametrics provider.

* Send number of tokens and accounts data with every metametrics event.

* Update metametrics event descriptor schema and add new events.

* Fix import tos bug and send gas button bug due to metametrics changes.

* Various small fixes on the metametrics branch.

* Add origin custom variable type to metametrics.util

* Fix names of onboarding complete actions (metametrics).

* Fix names of Metrics Options actions (metametrics).

* Clean up code related to metametrics.

* Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base

* Don't send a second metrics event if user has gone back during first time flow.

* Collect metametrics on going back from onboarding create/import.

* Add missing custom variable constants for metametrics

* Fix metametrics provider

* Make height of opt-in modal responsive.

* Adjust text content for opt-in modal.

* Update metametrics event names and clean up code in opt-in-modal

* Put phishing warning step next to last in onboarding flow

* Link terms of service on create and import screens of first time flow

* Add subtext to options on the onboarding select action screen.

* Fix styling of bullet points on end of onboarding screen.

* Combine phishing warning and congratulations screens.

* Fix placement of users if unlocking after an incomplete onboarding import flow.

* Fix capitalization in opt-in screen

* Fix last onboarding screen translations

* Add link to 'Learn More' on the last screen of onboarding

* Code clean up: metametrics branch

* Update e2e tests for phishing warning step removal

* e2e tests passing on metametrics branch

* Different tracking urls for metametrics on development and prod
2019-03-05 12:15:01 -03:30

190 lines
4.9 KiB
JavaScript

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from '@material-ui/core/Button'
import TextField from '../../text-field'
import getCaretCoordinates from 'textarea-caret'
import { EventEmitter } from 'events'
import Mascot from '../../mascot'
import { DEFAULT_ROUTE } from '../../../routes'
export default class UnlockPage extends Component {
static contextTypes = {
metricsEvent: PropTypes.func,
t: PropTypes.func,
}
static propTypes = {
history: PropTypes.object,
isUnlocked: PropTypes.bool,
onImport: PropTypes.func,
onRestore: PropTypes.func,
onSubmit: PropTypes.func,
}
constructor (props) {
super(props)
this.state = {
password: '',
error: null,
}
this.submitting = false
this.animationEventEmitter = new EventEmitter()
}
componentWillMount () {
const { isUnlocked, history } = this.props
if (isUnlocked) {
history.push(DEFAULT_ROUTE)
}
}
handleSubmit = async event => {
event.preventDefault()
event.stopPropagation()
const { password } = this.state
const { onSubmit, forceUpdateMetamaskState, showOptInModal } = this.props
if (password === '' || this.submitting) {
return
}
this.setState({ error: null })
this.submitting = true
try {
await onSubmit(password)
const newState = await forceUpdateMetamaskState()
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Unlock',
name: 'Success',
},
isNewVisit: true,
})
if (newState.participateInMetaMetrics === null || newState.participateInMetaMetrics === undefined) {
showOptInModal()
}
} catch ({ message }) {
if (message === 'Incorrect password') {
const newState = await forceUpdateMetamaskState()
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Unlock',
name: 'Incorrect Passowrd',
},
customVariables: {
numberOfTokens: newState.tokens.length,
numberOfAccounts: Object.keys(newState.accounts).length,
},
})
}
this.setState({ error: message })
this.submitting = false
}
}
handleInputChange ({ target }) {
this.setState({ password: target.value, error: null })
// tell mascot to look at page action
const element = target
const boundingRect = element.getBoundingClientRect()
const coordinates = getCaretCoordinates(element, element.selectionEnd)
this.animationEventEmitter.emit('point', {
x: boundingRect.left + coordinates.left - element.scrollLeft,
y: boundingRect.top + coordinates.top - element.scrollTop,
})
}
renderSubmitButton () {
const style = {
backgroundColor: '#f7861c',
color: 'white',
marginTop: '20px',
height: '60px',
fontWeight: '400',
boxShadow: 'none',
borderRadius: '4px',
}
return (
<Button
type="submit"
style={style}
disabled={!this.state.password}
fullWidth
variant="raised"
size="large"
onClick={this.handleSubmit}
disableRipple
>
{ this.context.t('login') }
</Button>
)
}
render () {
const { password, error } = this.state
const { t } = this.context
const { onImport, onRestore } = this.props
return (
<div className="unlock-page__container">
<div className="unlock-page">
<div className="unlock-page__mascot-container">
<Mascot
animationEventEmitter={this.animationEventEmitter}
width="120"
height="120"
/>
</div>
<h1 className="unlock-page__title">
{ t('welcomeBack') }
</h1>
<div>{ t('unlockMessage') }</div>
<form
className="unlock-page__form"
onSubmit={this.handleSubmit}
>
<TextField
id="password"
label={t('password')}
type="password"
value={password}
onChange={event => this.handleInputChange(event)}
error={error}
autoFocus
autoComplete="current-password"
material
fullWidth
/>
</form>
{ this.renderSubmitButton() }
<div className="unlock-page__links">
<div
className="unlock-page__link"
onClick={() => onRestore()}
>
{ t('restoreFromSeed') }
</div>
<div
className="unlock-page__link unlock-page__link--import"
onClick={() => onImport()}
>
{ t('importUsingSeed') }
</div>
</div>
</div>
</div>
)
}
}