Password lock screen and delete data screen
Vincent
5 years ago
parent
4a6ed12992
commit
4a7e2dece7
@ -1,72 +0,0 @@
|
|||||||
/* global i18n: false */
|
|
||||||
/* global Whisper: false */
|
|
||||||
|
|
||||||
/* eslint-disable no-new */
|
|
||||||
|
|
||||||
// eslint-disable-next-line func-names
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window.Whisper = window.Whisper || {};
|
|
||||||
const { Logs } = window.Signal;
|
|
||||||
|
|
||||||
const CLEAR_DATA_STEPS = {
|
|
||||||
CHOICE: 1,
|
|
||||||
DELETING: 2,
|
|
||||||
};
|
|
||||||
window.Whisper.ClearDataView = Whisper.View.extend({
|
|
||||||
templateName: 'clear-data',
|
|
||||||
className: 'full-screen-flow overlay',
|
|
||||||
events: {
|
|
||||||
'click .cancel': 'onCancel',
|
|
||||||
'click .delete-all-data': 'onDeleteAllData',
|
|
||||||
},
|
|
||||||
initialize(onClear = null) {
|
|
||||||
this.step = CLEAR_DATA_STEPS.CHOICE;
|
|
||||||
this.onClear = onClear;
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
this.remove();
|
|
||||||
},
|
|
||||||
async onDeleteAllData() {
|
|
||||||
window.log.info('Deleting everything!');
|
|
||||||
this.step = CLEAR_DATA_STEPS.DELETING;
|
|
||||||
this.render();
|
|
||||||
|
|
||||||
await this.clearAllData();
|
|
||||||
},
|
|
||||||
async clearAllData() {
|
|
||||||
if (this.onClear) {
|
|
||||||
this.onClear();
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
await Logs.deleteAll();
|
|
||||||
|
|
||||||
await window.Signal.Data.removeAll();
|
|
||||||
await window.Signal.Data.close();
|
|
||||||
await window.Signal.Data.removeDB();
|
|
||||||
|
|
||||||
await window.Signal.Data.removeOtherData();
|
|
||||||
} catch (error) {
|
|
||||||
window.log.error(
|
|
||||||
'Something went wrong deleting all data:',
|
|
||||||
error && error.stack ? error.stack : error
|
|
||||||
);
|
|
||||||
}
|
|
||||||
window.restart();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render_attributes() {
|
|
||||||
return {
|
|
||||||
isStep1: this.step === CLEAR_DATA_STEPS.CHOICE,
|
|
||||||
header: i18n('deleteAllDataHeader'),
|
|
||||||
body: i18n('deleteAllDataBody'),
|
|
||||||
cancelButton: i18n('cancel'),
|
|
||||||
deleteButton: i18n('deleteAllDataButton'),
|
|
||||||
|
|
||||||
isStep2: this.step === CLEAR_DATA_STEPS.DELETING,
|
|
||||||
deleting: i18n('deleteAllDataProgress'),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
@ -0,0 +1,196 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { SessionIcon, SessionIconType } from './icon';
|
||||||
|
import {
|
||||||
|
SessionButton,
|
||||||
|
SessionButtonColor,
|
||||||
|
SessionButtonType,
|
||||||
|
} from './SessionButton';
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
error: string;
|
||||||
|
errorCount: number;
|
||||||
|
clearDataView: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
error: '',
|
||||||
|
errorCount: 0,
|
||||||
|
clearDataView: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onKeyUp = this.onKeyUp.bind(this);
|
||||||
|
this.initLogin = this.initLogin.bind(this);
|
||||||
|
this.initClearDataView = this.initClearDataView.bind(this);
|
||||||
|
|
||||||
|
window.addEventListener('keyup', this.onKeyUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const showResetElements =
|
||||||
|
this.state.errorCount >= window.CONSTANTS.MAX_LOGIN_TRIES;
|
||||||
|
|
||||||
|
const wrapperClass = this.state.clearDataView
|
||||||
|
? 'clear-data-wrapper'
|
||||||
|
: 'password-prompt-wrapper';
|
||||||
|
const containerClass = this.state.clearDataView
|
||||||
|
? 'clear-data-container'
|
||||||
|
: 'password-prompt-container';
|
||||||
|
const infoAreaClass = this.state.clearDataView
|
||||||
|
? 'warning-info-area'
|
||||||
|
: 'password-info-area';
|
||||||
|
const infoTitle = this.state.clearDataView
|
||||||
|
? window.i18n('clearDataHeader')
|
||||||
|
: window.i18n('passwordViewTitle');
|
||||||
|
const buttonGroup = this.state.clearDataView
|
||||||
|
? this.renderClearDataViewButtons()
|
||||||
|
: this.renderPasswordViewButtons();
|
||||||
|
const featureElement = this.state.clearDataView ? (
|
||||||
|
<p className="text-center">{window.i18n('clearDataExplanation')}</p>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
id="password-prompt-input"
|
||||||
|
type="password"
|
||||||
|
autoFocus={true}
|
||||||
|
placeholder=" "
|
||||||
|
defaultValue=""
|
||||||
|
maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const infoIcon = this.state.clearDataView ? (
|
||||||
|
<SessionIcon
|
||||||
|
iconType={SessionIconType.Warning}
|
||||||
|
iconSize={35}
|
||||||
|
iconColor="#ce0000"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<SessionIcon
|
||||||
|
iconType={SessionIconType.Lock}
|
||||||
|
iconSize={35}
|
||||||
|
iconColor="#00f782"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const errorSection = !this.state.clearDataView && (
|
||||||
|
<div className="password-prompt-error-section">
|
||||||
|
{this.state.error && (
|
||||||
|
<>
|
||||||
|
{showResetElements ? (
|
||||||
|
<div className="session-label warning">
|
||||||
|
{window.i18n('maxPasswordAttempts')}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="session-label primary">{this.state.error}</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={wrapperClass}>
|
||||||
|
<div className={containerClass}>
|
||||||
|
<div className={infoAreaClass}>
|
||||||
|
{infoIcon}
|
||||||
|
|
||||||
|
<h1>{infoTitle}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{featureElement}
|
||||||
|
{errorSection}
|
||||||
|
{buttonGroup}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onKeyUp(event: any) {
|
||||||
|
switch (event.key) {
|
||||||
|
case 'Enter':
|
||||||
|
await this.initLogin();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onLogin(passPhrase: string) {
|
||||||
|
const trimmed = passPhrase ? passPhrase.trim() : passPhrase;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await window.onLogin(trimmed);
|
||||||
|
} catch (e) {
|
||||||
|
// Increment the error counter and show the button if necessary
|
||||||
|
this.setState({
|
||||||
|
errorCount: this.state.errorCount + 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState({ error: e });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async initLogin() {
|
||||||
|
const passPhrase = String($('#password-prompt-input').val());
|
||||||
|
await this.onLogin(passPhrase);
|
||||||
|
}
|
||||||
|
|
||||||
|
private initClearDataView() {
|
||||||
|
this.setState({
|
||||||
|
error: '',
|
||||||
|
errorCount: 0,
|
||||||
|
clearDataView: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderPasswordViewButtons(): JSX.Element {
|
||||||
|
const showResetElements =
|
||||||
|
this.state.errorCount >= window.CONSTANTS.MAX_LOGIN_TRIES;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames(showResetElements && 'button-group')}>
|
||||||
|
{showResetElements && (
|
||||||
|
<>
|
||||||
|
<SessionButton
|
||||||
|
text="Reset Database"
|
||||||
|
buttonType={SessionButtonType.BrandOutline}
|
||||||
|
buttonColor={SessionButtonColor.Danger}
|
||||||
|
onClick={this.initClearDataView}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('unlock')}
|
||||||
|
buttonType={SessionButtonType.BrandOutline}
|
||||||
|
buttonColor={SessionButtonColor.Green}
|
||||||
|
onClick={this.initLogin}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderClearDataViewButtons(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="button-group">
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('cancel')}
|
||||||
|
buttonType={SessionButtonType.Default}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ clearDataView: false });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('deleteAllDataButton')}
|
||||||
|
buttonType={SessionButtonType.Default}
|
||||||
|
buttonColor={SessionButtonColor.Danger}
|
||||||
|
onClick={window.clearLocalData}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue