1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/unlock-page/unlock-page.component.js
Ariella Vu 78f4684b2a
MetaMetrics: Add EVENT.CATEGORIES const (#14474)
* MetaMetrics: add EVENT.CATEGORIES const

* MetaMetrics: add EVENT.CATEGORIES.INPAGE_PROVIDER

* MetaMetrics: add EVENT.CATEGORIES.AUTH

* MetaMetrics: add EVENT.CATEGORIES.ACCOUNTS pt. 1

* MetaMetrics: add EVENT.CATEGORIES.ACCOUNTS pt. 2
confirm we want to use 'Accounts' instead of 'Account'

* MetaMetrics: add EVENT.CATEGORIES.MESSAGES

* MetaMetrics: add EVENT.CATEGORIES.RETENTION const

* MetaMetrics: add EVENT.CATEGORIES.SETTINGS

* MetaMask: add missing EVENT.CATEGORIES.SNAPS

* MetaMetrics: add EVENT.CATEGORIES.WALLET const

* MetaMetrics: add EVENT.CATEGORIES.ONBOARDING const

* MetaMetrics: add EVENT.CATEGORIES.ONBOARDING
& EVENT.CATEGORIES.TRANSACTIONS consts

* MetaMetrics: use EVENT.CATEGORIES

* ducks/swaps: revert slice name

* MetaMetrics: add missing EVENT.CATEGORIES.NETWORK
2022-04-22 13:09:10 -03:00

218 lines
5.8 KiB
JavaScript

import { EventEmitter } from 'events';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import getCaretCoordinates from 'textarea-caret';
import Button from '../../components/ui/button';
import TextField from '../../components/ui/text-field';
import Mascot from '../../components/ui/mascot';
import { SUPPORT_LINK } from '../../helpers/constants/common';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import { EVENT } from '../../../shared/constants/metametrics';
export default class UnlockPage extends Component {
static contextTypes = {
trackEvent: PropTypes.func,
t: PropTypes.func,
};
static propTypes = {
/**
* History router for redirect after action
*/
history: PropTypes.object.isRequired,
/**
* If isUnlocked is true will redirect to most recent route in history
*/
isUnlocked: PropTypes.bool,
/**
* onClick handler for "Forgot password?" link
*/
onRestore: PropTypes.func,
/**
* onSumbit handler when form is submitted
*/
onSubmit: PropTypes.func,
/**
* Force update metamask data state
*/
forceUpdateMetamaskState: PropTypes.func,
/**
* Event handler to show metametrics modal
*/
showOptInModal: PropTypes.func,
};
state = {
password: '',
error: null,
};
submitting = false;
animationEventEmitter = new EventEmitter();
UNSAFE_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.trackEvent(
{
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Success',
properties: {
action: 'Unlock',
legacy_event: true,
},
},
{
isNewVisit: true,
},
);
if (
newState.participateInMetaMetrics === null ||
newState.participateInMetaMetrics === undefined
) {
showOptInModal();
}
} catch ({ message }) {
if (message === 'Incorrect password') {
const newState = await forceUpdateMetamaskState();
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Incorrect Password',
properties: {
action: 'Unlock',
legacy_event: true,
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
if (target.getBoundingClientRect) {
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: 'var(--color-primary-default)',
color: 'var(--color-primary-inverse)',
marginTop: '20px',
height: '60px',
fontWeight: '400',
boxShadow: 'none',
borderRadius: '100px',
};
return (
<Button
type="submit"
style={style}
disabled={!this.state.password}
variant="contained"
size="large"
onClick={this.handleSubmit}
>
{this.context.t('unlock')}
</Button>
);
}
render() {
const { password, error } = this.state;
const { t } = this.context;
const { 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"
theme="material"
fullWidth
/>
</form>
{this.renderSubmitButton()}
<div className="unlock-page__links">
<Button
type="link"
key="import-account"
className="unlock-page__link"
onClick={() => onRestore()}
>
{t('forgotPassword')}
</Button>
</div>
<div className="unlock-page__support">
{t('needHelp', [
<a
href={SUPPORT_LINK}
target="_blank"
rel="noopener noreferrer"
key="need-help-link"
>
{t('needHelpLinkText')}
</a>,
])}
</div>
</div>
</div>
);
}
}