Modal additions incl. QR fixup and Seed View
Vincent
5 years ago
parent
2caffa9289
commit
2ede557a74
@ -1,32 +0,0 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionDropdownView = Whisper.View.extend({
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
items: options.items,
|
||||
};
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
render() {
|
||||
this.dropdownView = new Whisper.ReactWrapperView({
|
||||
className: 'session-dropdown-wrapper',
|
||||
Component: window.Signal.Components.SessionDropdown,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.append(this.dropdownView.el);
|
||||
},
|
||||
|
||||
openDropdown() {},
|
||||
|
||||
closeDropdown() {},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,198 @@
|
||||
import React from 'react';
|
||||
|
||||
import { SessionModal } from './SessionModal';
|
||||
import { SessionButton } from './SessionButton';
|
||||
|
||||
interface Props {
|
||||
onClose: any;
|
||||
}
|
||||
|
||||
interface State {
|
||||
error: string;
|
||||
loadingPassword: boolean;
|
||||
loadingSeed: boolean;
|
||||
seed: string;
|
||||
hasPassword: boolean | null;
|
||||
passwordHash: string;
|
||||
passwordValid: boolean;
|
||||
}
|
||||
|
||||
export class SessionSeedModal extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
error: '',
|
||||
loadingPassword: true,
|
||||
loadingSeed: true,
|
||||
seed: '',
|
||||
hasPassword: null,
|
||||
passwordHash: '',
|
||||
passwordValid: false,
|
||||
};
|
||||
|
||||
this.copySeed = this.copySeed.bind(this);
|
||||
this.getSeed = this.getSeed.bind(this);
|
||||
this.confirmPassword = this.confirmPassword.bind(this);
|
||||
this.checkHasPassword = this.checkHasPassword.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const i18n = window.i18n;
|
||||
const { onClose } = this.props;
|
||||
|
||||
const maxPasswordLen = 64;
|
||||
|
||||
this.checkHasPassword();
|
||||
this.getSeed();
|
||||
|
||||
const error = this.state.error;
|
||||
const hasPassword = this.state.hasPassword;
|
||||
const passwordValid = this.state.passwordValid;
|
||||
|
||||
const loading = this.state.loadingPassword || this.state.loadingSeed;
|
||||
|
||||
return (
|
||||
<SessionModal
|
||||
title={i18n('showSeed')}
|
||||
onOk={() => null}
|
||||
onClose={onClose}
|
||||
>
|
||||
{!loading && (
|
||||
<>
|
||||
<div className="spacer-sm" />
|
||||
|
||||
{hasPassword && !passwordValid ? (
|
||||
<div>
|
||||
<p>{i18n('showSeedPasswordRequest')}</p>
|
||||
<input
|
||||
type="password"
|
||||
id="seed-input-password"
|
||||
placeholder={i18n('password')}
|
||||
maxLength={maxPasswordLen}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<>
|
||||
<div className="spacer-xs" />
|
||||
<div className="session-label danger">{error}</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="spacer-lg" />
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton
|
||||
text={i18n('confirm')}
|
||||
onClick={this.confirmPassword}
|
||||
/>
|
||||
|
||||
<SessionButton text={i18n('cancel')} onClick={onClose} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="session-modal__centered text-center">
|
||||
<p className="session-modal__description">
|
||||
{i18n('seedSavePrompt')}
|
||||
</p>
|
||||
<div className="spacer-md" />
|
||||
|
||||
<i className="session-modal__text-highlight">
|
||||
{this.state.seed}
|
||||
</i>
|
||||
</div>
|
||||
<div className="spacer-lg" />
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton text={i18n('ok')} onClick={onClose} />
|
||||
|
||||
<SessionButton
|
||||
text={i18n('copySeed')}
|
||||
onClick={() => {
|
||||
this.copySeed(this.state.seed);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SessionModal>
|
||||
);
|
||||
}
|
||||
|
||||
private confirmPassword() {
|
||||
const passwordHash = this.state.passwordHash;
|
||||
const passwordValue = $('#seed-input-password').val();
|
||||
const isPasswordValid = window.passwordUtil.matchesHash(
|
||||
passwordValue,
|
||||
passwordHash
|
||||
);
|
||||
|
||||
if (!passwordValue) {
|
||||
this.setState({
|
||||
error: window.i18n('noGivenPassword'),
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (passwordHash && !isPasswordValid) {
|
||||
this.setState({
|
||||
error: window.i18n('invalidPassword'),
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
passwordValid: true,
|
||||
error: '',
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
private checkHasPassword() {
|
||||
if (!this.state.loadingPassword) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hashPromise = window.Signal.Data.getPasswordHash();
|
||||
|
||||
hashPromise.then((hash: any) => {
|
||||
this.setState({
|
||||
hasPassword: !!hash,
|
||||
passwordHash: hash,
|
||||
loadingPassword: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private async getSeed() {
|
||||
if (this.state.seed) {
|
||||
return this.state.seed;
|
||||
}
|
||||
|
||||
const manager = await window.getAccountManager();
|
||||
const seed = manager.getCurrentMnemonic();
|
||||
|
||||
this.setState({
|
||||
seed,
|
||||
loadingSeed: false,
|
||||
});
|
||||
|
||||
return seed;
|
||||
}
|
||||
|
||||
private copySeed(seed: string) {
|
||||
window.clipboard.writeText(seed);
|
||||
|
||||
window.pushToast({
|
||||
title: window.i18n('copiedMnemonic'),
|
||||
type: 'success',
|
||||
id: 'copySeedToast',
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue