From 193cf173f934b209579611a0a7f0b9b6969db0de Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Tue, 13 Mar 2018 17:17:44 +0100 Subject: [PATCH 01/36] Add some strings to common.json --- i18n/locales/en/common.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 00fdf510a1..05be4b2958 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -40,6 +40,7 @@ "Create Lisk ID": "Create Lisk ID", "Create a Lisk ID to gain access to all services.": "Create a Lisk ID to gain access to all services.", "Create your Lisk ID": "Create your Lisk ID", + "Create your second passphrase": "Create your second passphrase", "Current version is up-to-date.": "Current version is up-to-date.", "Currently we speaking english and german.": "Currently we speaking english and german.", "Custom Node": "Custom Node", @@ -154,6 +155,7 @@ "Search for Lisk ID or Transaction ID": "Search for Lisk ID or Transaction ID", "Search for a delegate": "Search for a delegate", "Second Signature Creation": "Second Signature Creation", + "Secure the use of your Lisk ID with a second passphrase.": "Secure the use of your Lisk ID with a second passphrase.", "Security": "Security", "See all transactions": "See all transactions", "Select a network": "Select a network", @@ -221,10 +223,14 @@ "You can vote for up to {{count}} delegates in total.": "You can vote for up to {{count}} delegates in total.", "You can vote for up to {{count}} delegates in total._plural": "You can vote for up to {{count}} delegates in total.", "You have already registered as a delegate.": "You have already registered as a delegate.", + "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.": "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.", "You've received {{value}} LSK.": "You've received {{value}} LSK.", "Your favorite Lisk IDs": "Your favorite Lisk IDs", + "Your passphrase is used to access your Lisk ID.": "Your passphrase is used to access your Lisk ID.", "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.", "Zero not allowed": "Zero not allowed", + "by moving your mouse.": "by moving your mouse.", + "by tilting your device.": "by tilting your device.", "more": "more", "set second passphrase": "set second passphrase", "your second passphrase will be required for all transactions sent from this account": "your second passphrase will be required for all transactions sent from this account", From e20585f835f68012b108a4f64d961f41b72c9cb1 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Tue, 13 Mar 2018 17:19:21 +0100 Subject: [PATCH 02/36] Use header and message in safekeeping component --- src/components/passphrase/safekeeping/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js index 61a7aca9f2..38929d700b 100644 --- a/src/components/passphrase/safekeeping/index.js +++ b/src/components/passphrase/safekeeping/index.js @@ -28,11 +28,11 @@ class SafeKeeping extends React.Component { this.setState({ step: 'done-step' }); setTimeout(() => { this.props.nextStep({ passphrase: this.props.passphrase }); - }, 400); + }, 600); } render() { - const { t, passphrase, prevStep } = this.props; + const { t, passphrase, prevStep, header, message } = this.props; return (
@@ -40,7 +40,7 @@ class SafeKeeping extends React.Component {

- Your passphrase is used to access your Lisk ID. + { header || '' }

@@ -54,7 +54,7 @@ class SafeKeeping extends React.Component {
-
{t('I am responsible for keeping my passphrase safe. No one can reset it, not even Lisk.')}
+
{ message || ''}
 Date: Tue, 13 Mar 2018 17:21:09 +0100 Subject: [PATCH 03/36] Create a new theme for react-toolbar progressBar --- .../passphrase/createSecond/progressBar.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/passphrase/createSecond/progressBar.css diff --git a/src/components/passphrase/createSecond/progressBar.css b/src/components/passphrase/createSecond/progressBar.css new file mode 100644 index 0000000000..16e1efc5d0 --- /dev/null +++ b/src/components/passphrase/createSecond/progressBar.css @@ -0,0 +1,14 @@ +@import '../../app/variables.css'; + +.linear { + width: 450px; + height: 23px; + border-radius: 48px; + max-width: 80%; + background: var(--color-primary-dark); + margin: 40px auto; +} + +.value { + background: var(--gradient-action-orange); +} From a8376bdd6848b5e3a2923dd03330c6427f76d8b1 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Tue, 13 Mar 2018 17:21:30 +0100 Subject: [PATCH 04/36] Add secondPassphrase class to create.css --- src/components/passphrase/create/create.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/passphrase/create/create.css b/src/components/passphrase/create/create.css index f468a0f474..e9928f76d7 100644 --- a/src/components/passphrase/create/create.css +++ b/src/components/passphrase/create/create.css @@ -195,6 +195,11 @@ hr { } } +.secondPassphrase { + height: auto !important; + width: 100%; +} + @media (--large-viewport) { .generation aside.description { padding-top: 150px; From de43df78084e2d6ad1057dc73290d8acb1fa7ff8 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Tue, 13 Mar 2018 17:22:07 +0100 Subject: [PATCH 05/36] Create createSecond component --- .../passphrase/createSecond/index.js | 195 ++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 src/components/passphrase/createSecond/index.js diff --git a/src/components/passphrase/createSecond/index.js b/src/components/passphrase/createSecond/index.js new file mode 100644 index 0000000000..2bfe3c3835 --- /dev/null +++ b/src/components/passphrase/createSecond/index.js @@ -0,0 +1,195 @@ +import React from 'react'; +import ProgressBar from 'react-toolbox/lib/progress_bar'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import { generateSeed, generatePassphrase } from '../../../utils/passphrase'; +import styles from '../create/create.css'; +import ProgressBarTheme from './progressBar.css'; +import TransitionWrapper from '../../toolbox/transitionWrapper'; + +class Create extends React.Component { + constructor() { + super(); + this.state = { + step: 'generate', + showHint: false, + address: null, + lastCaptured: { + x: 0, + y: 0, + }, + headingClass: '', + }; + this.isTouchDevice = false; + this.lastCaptured = { + x: 0, + y: 0, + time: new Date(), + }; + this.count = 0; + this.eventNormalizer = this._eventNormalizer.bind(this); + } + + componentDidMount() { + this.container = document.getElementById('generatorContainer'); + this.isTouchDevice = this.checkDevice(this.props.agent); + const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove'; + + window.addEventListener(eventName, this.eventNormalizer, true); + } + + + moveTitle() { + setTimeout(() => { + const { percentage } = this.state.data; + if (percentage > 15 && percentage < 18) { + this.setState({ + headingClass: styles.goToTop, + }); + } + }, 10); + } + + // eslint-disable-next-line class-methods-use-this + hideShapeRandomly(list) { + const result = []; + const min = 0; + const max = 9; + let randomNumber; + while (result.length < 4) { + randomNumber = Math.floor((Math.random() * (max - min)) + min); + if (result.indexOf(randomNumber) === -1) { + result.push(randomNumber); + } + } + result.forEach((item) => { list[item] = 0; }); + return list; + } + + componentDidUpdate() { + if (this.state.data) { + this.moveTitle(); + } + } + + componentWillUnmount() { + const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove'; + document.removeEventListener(eventName, this.seedGeneratorBoundToThis, true); + } + + /** + * Tests useragent with a regexp and defines if the account is mobile device + * it is on class so that we can mock it in unit tests + * + * @param {String} [agent] - The useragent string, This parameter is used for + * unit testing purpose + * @returns {Boolean} - whether the agent represents a mobile device or not + */ + // eslint-disable-next-line class-methods-use-this + checkDevice(agent, os) { + let reg = /iPad|iPhone|iPod/i; + if (!os) { + reg = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i; + } else if (os === 'android') { + reg = /android/i; + } + return (reg.test(agent || navigator.userAgent || navigator.vendor || window.opera)); + } + + _eventNormalizer(e) { + let x = 0; + let y = 0; + let ratio = 1; + if (this.isTouchDevice) { + if (this.checkDevice(this.props.agent, 'android')) { + ratio = 10; + } + x = e.rotationRate.alpha * ratio; + y = e.rotationRate.beta * ratio; + + this.count += 1; + + const deltaX = Math.abs(x - this.lastCaptured.x); + const deltaY = Math.abs(y - this.lastCaptured.y); + const time = new Date(); + + if ((Math.abs(x) > 10 || Math.abs(y)) && (deltaX > 10 || deltaY > 10) + && (time - this.lastCaptured.time > Math.random() * 500)) { + this.lastCaptured = { x, y, time }; + this.seedGenerator.call(this, x / 10, y / 10); + } + } else { + x = e.pageX; + y = e.pageY; + + if (typeof nativeEvent === 'string' || Math.sqrt(((x - this.state.lastCaptured.x) ** 2) + + ((y - this.state.lastCaptured.y) ** 2)) > 120) { + this.seedGenerator.call(this, x, y); + } + } + } + + seedGenerator(pageX, pageY) { + const { t, nextStep } = this.props; + if (!this.state.data || this.state.data.percentage < 100) { + this.setState({ + lastCaptured: { + x: pageX, + y: pageY, + }, + }); + + // defining diffSeed to use for animating HEX numbers + // note: in the first iteration data is undefined + const data = generateSeed(this.state.data); + this.setState({ data }); + } else if (this.state.data && this.state.data.percentage >= 100 && !this.state.passphrase) { + // also change the step here + const passphrase = generatePassphrase(this.state.data); + this.setState({ passphrase }); + setTimeout(() => { + nextStep({ + passphrase, + step: 'info', + header: t('Secure the use of your Lisk ID with a second passphrase.'), + message: t('You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.'), + }); + }, 300); + } + } + + showHint() { + this.setState({ showHint: !this.state.showHint }); + } + + render() { + const { t } = this.props; + const percentage = this.state.data ? this.state.data.percentage : 0; + const hintTitle = this.isTouchDevice ? + t('by tilting your device.') : + t('by moving your mouse.'); + + return ( +
+ +
{ this.pageRoot = pageRoot; } }> +
+

+ {t('Create your second passphrase')} +
+ {hintTitle} +

+
+ +
+ +
+ ); + } +} + +export default Create; From 50a26113744cfeeb8a9d87059d5ca9b77455eda1 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Tue, 13 Mar 2018 17:23:02 +0100 Subject: [PATCH 06/36] Pass header and message to next step in create component --- src/components/passphrase/create/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/passphrase/create/index.js b/src/components/passphrase/create/index.js index ac2a388f52..950e869218 100644 --- a/src/components/passphrase/create/index.js +++ b/src/components/passphrase/create/index.js @@ -275,7 +275,11 @@ class Create extends React.Component { theme={styles} label='Get passphrase' className="get-passphrase-button" - onClick={() => nextStep({ passphrase: this.state.passphrase })} + onClick={() => nextStep({ + passphrase: this.state.passphrase, + header: t('Your passphrase is used to access your Lisk ID.'), + message: t('I am responsible for keeping my passphrase safe. No one can reset it, not even Lisk.'), + })} /> : ''} From ad72432ccede322e39c5a74ab3a4de30e4039393 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:43:16 +0100 Subject: [PATCH 07/36] Add some translation strings to common.json --- i18n/locales/en/common.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 05be4b2958..de3108a8ea 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -30,6 +30,7 @@ "Coming soon.": "Coming soon.", "Confirm": "Confirm", "Confirm (Fee: 1 LSK)": "Confirm (Fee: 1 LSK)", + "Confirm to register your second passphrase on the blockchain.": "Confirm to register your second passphrase on the blockchain.", "Confirm transfer": "Confirm transfer", "Confirmation in the next step.": "Confirmation in the next step.", "Confirmations": "Confirmations", @@ -69,9 +70,12 @@ "Fee: {{fee}} LSK": "Fee: {{fee}} LSK", "Final confirmation": "Final confirmation", "Get to your Dashboard": "Get to your Dashboard", + "Go back to Dashboard": "Go back to Dashboard", "Got it": "Got it", + "Great!\nYou’re almost finished": "Great!\nYou’re almost finished", "Help": "Help", "Hide passphrase": "Hide passphrase", + "I Confirm (Fee: 5 LSK)": "I Confirm (Fee: 5 LSK)", "I am responsible for keeping my passphrase safe. No one can reset it, not even Lisk.": "I am responsible for keeping my passphrase safe. No one can reset it, not even Lisk.", "I understand": "I understand", "In": "In", @@ -131,6 +135,7 @@ "Please click Next, then move around your mouse randomly to generate a random passphrase.": "Please click Next, then move around your mouse randomly to generate a random passphrase.", "Please go back and check your passphrase again.": "Please go back and check your passphrase again.", "Please keep it safe!": "Please keep it safe!", + "Please sign in with your first passphrase": "Please sign in with your first passphrase", "Price data currently not available": "Price data currently not available", "Processing delegate names: ": "Processing delegate names: ", "Productivity": "Productivity", @@ -177,12 +182,14 @@ "Start here": "Start here", "Submit": "Submit", "Success": "Success", + "Success!": "Success!", "Testnet": "Testnet", "Thank you": "Thank you", "The Wallet will show your recent transactions.": "The Wallet will show your recent transactions.", "The download was started. Depending on your internet speed it can take up to several minutes. You will be informed then it is finished and prompted to restart the app.": "The download was started. Depending on your internet speed it can take up to several minutes. You will be informed then it is finished and prompted to restart the app.", "There are no {{filterName}} transactions.": "There are no {{filterName}} transactions.", "There is a new version ({{version}}) available, do you want to update now?": "There is a new version ({{version}}) available, do you want to update now?", + "This is not reversible.": "This is not reversible.", "This is your Lisk ID": "This is your Lisk ID", "Toggle full screen": "Toggle full screen", "Total": "Total", @@ -227,12 +234,12 @@ "You've received {{value}} LSK.": "You've received {{value}} LSK.", "Your favorite Lisk IDs": "Your favorite Lisk IDs", "Your passphrase is used to access your Lisk ID.": "Your passphrase is used to access your Lisk ID.", + "Your registration is secured on the blockchain.": "Your registration is secured on the blockchain.", "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.", "Zero not allowed": "Zero not allowed", "by moving your mouse.": "by moving your mouse.", "by tilting your device.": "by tilting your device.", "more": "more", - "set second passphrase": "set second passphrase", "your second passphrase will be required for all transactions sent from this account": "your second passphrase will be required for all transactions sent from this account", "{{count}} delegate names were successfully resolved for unvoting.": "{{count}} delegate name successfully resolved to remove vote from.", "{{count}} delegate names were successfully resolved for unvoting._plural": "{{count}} delegate names were successfully resolved for unvoting.", From fa0eb86a073278677f9100c50397ec19d2cc3141 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:47:25 +0100 Subject: [PATCH 08/36] Create confirmSecond component --- .../ConfirmSecond/confirmSecond.css | 76 +++++++++++ .../passphrase/ConfirmSecond/confirmSecond.js | 124 ++++++++++++++++++ 2 files changed, 200 insertions(+) create mode 100644 src/components/passphrase/ConfirmSecond/confirmSecond.css create mode 100644 src/components/passphrase/ConfirmSecond/confirmSecond.js diff --git a/src/components/passphrase/ConfirmSecond/confirmSecond.css b/src/components/passphrase/ConfirmSecond/confirmSecond.css new file mode 100644 index 0000000000..befbaf6aef --- /dev/null +++ b/src/components/passphrase/ConfirmSecond/confirmSecond.css @@ -0,0 +1,76 @@ +.wrapper { + position: absolute; + height: calc(100% - 85px) !important; + background: #fff; + width: 100%; + bottom: 0; + z-index: 3; + + &.hidden { + display: none; + } + + & header { + height: 50%; + width: 100%; + display: flex; + justify-content: space-around; + flex-direction: column; + } + + & h5 { + line-height: 38px; + } +} + +.content { + position: absolute; + height: 50%; + border-top: solid 1px #f6f8fb; + background: #f6f8fb; + box-sizing: border-box; + width: 100%; + bottom: 0; + display: flex; + justify-content: space-around; + flex-direction: column; + + &.done { + background: #fff; + border: none; + justify-content: baseline; + } +} + +.innerContent { + margin-top: 45px; + padding: 0 50px; +} + +.confirmSlider { + width: 250px; + margin: 48px auto; +} + +.sliderInput label { + width: 275px; + margin: 48px auto; + + & div > span { + text-indent: 75px; + } +} + +.headerIcon { + font-size: 68px; + color: #ff6236; + margin-bottom: 30px; +} + +.resultHeader { + margin: 0 auto 30px !important; +} + +.resultButton { + margin: 0 auto; +} diff --git a/src/components/passphrase/ConfirmSecond/confirmSecond.js b/src/components/passphrase/ConfirmSecond/confirmSecond.js new file mode 100644 index 0000000000..eebf0f005c --- /dev/null +++ b/src/components/passphrase/ConfirmSecond/confirmSecond.js @@ -0,0 +1,124 @@ +import React from 'react'; +import { Button } from '../../toolbox/buttons/button'; +import styles from './confirmSecond.css'; +import { passphraseIsValid } from '../../../utils/form'; +import TransitionWrapper from '../../toolbox/transitionWrapper'; +import { FontIcon } from '../../fontIcon'; +// eslint-disable-next-line import/no-named-as-default +import SliderCheckbox from '../../toolbox/sliderCheckbox'; +// eslint-disable-next-line import/no-named-as-default +import PassphraseInput from '../../passphraseInput'; + +class confirmSecond extends React.Component { + constructor() { + super(); + this.state = { + step: 'login', + passphrase: { + value: '', + error: '', + }, + }; + } + onChange(name, value, error) { + this.setState({ + [name]: { + value, + error: typeof error === 'string' ? error : undefined, + }, + }); + } + login() { + this.setState({ + step: 'confirm', + }); + } + + componentDidMount() { + if (this.props.account.passphrase) { + this.setState({ step: 'confirm' }); + } + } + confirm() { + const { finalCallback, account } = this.props; + const passphrase = this.state.passphrase.value || account.passphrase; + finalCallback(passphrase); + this.setState({ + step: 'done', + }); + } + render() { + const { hidden, t, history } = this.props; + const status = hidden ? styles.hidden : ''; + const doneClass = this.state.step === 'done' ? styles.done : ''; + return (
+
+ +

+ {t('Please sign in with your first passphrase')} +

+ + +

+ {t('Great!\nYou’re almost finished')} +

+ + +
+ +

+ {t('Success!')} +

+
{t('Your registration is secured on the blockchain.')}
+
+ +
+
+ +
+ +
+
+
+ + +
+
+ {t('Confirm to register your second passphrase on the blockchain.')} +
{t('This is not reversible.')}
+
+ +
+ + +
+
); + } +} +export default confirmSecond; From 486d62029fe60f0f08b9bc6a83925c5cc4546102 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:48:30 +0100 Subject: [PATCH 09/36] Add second passphrase route to app component --- src/components/app/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/app/index.js b/src/components/app/index.js index d67b8b6ce5..7cc5f50f19 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -6,6 +6,7 @@ import Sidechains from '../sidechains'; import Header from '../header'; import Login from '../login'; import Register from '../register'; +import SecondPassphrase from '../secondPassphrase'; import Search from '../search'; import SearchResult from '../search/searchResult'; import TransactionDashboard from '../transactionDashboard'; @@ -46,6 +47,7 @@ class App extends React.Component { + From 4e445f6a4b63637efad16cb6d5ff2a9709c11247 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:48:54 +0100 Subject: [PATCH 10/36] Add secondPassphrase path to routes --- src/constants/routes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/constants/routes.js b/src/constants/routes.js index 78a3106a86..d252e447ef 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -13,4 +13,5 @@ export default { voting: { path: '/voting' }, main: { path: '/main' }, explorer: { path: '/explorer' }, + secondPassphrase: { path: '/second-passphrase' }, }; From 57f4203d622f42aba7fcf58274525d7352cd190c Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:49:25 +0100 Subject: [PATCH 11/36] Create confirmSecond HOC --- src/components/passphrase/ConfirmSecond/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/passphrase/ConfirmSecond/index.js diff --git a/src/components/passphrase/ConfirmSecond/index.js b/src/components/passphrase/ConfirmSecond/index.js new file mode 100644 index 0000000000..fa7058c01f --- /dev/null +++ b/src/components/passphrase/ConfirmSecond/index.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux'; +import { translate } from 'react-i18next'; +import { withRouter } from 'react-router'; +import ConfirmSecond from './confirmSecond'; + +const mapStateToProps = state => ({ + account: state.account, +}); + +export default withRouter(connect( + mapStateToProps, +)(translate()(ConfirmSecond))); From 1e2c08fceacd231dbccd52da8d031eab69c70a18 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:49:57 +0100 Subject: [PATCH 12/36] Compelete SecondPassphrase component --- .../secondPassphrase/secondPassphrase.css | 29 ++++++++++++++ .../secondPassphrase/secondPassphrase.js | 40 +++++++++++-------- 2 files changed, 52 insertions(+), 17 deletions(-) diff --git a/src/components/secondPassphrase/secondPassphrase.css b/src/components/secondPassphrase/secondPassphrase.css index f4d336fdf7..e071aa1f52 100644 --- a/src/components/secondPassphrase/secondPassphrase.css +++ b/src/components/secondPassphrase/secondPassphrase.css @@ -1,3 +1,32 @@ +@import '../app/variables.css'; + +:root { + --padding-top: 40px; +} + +.register { + & > div { + height: 100%; + overflow: hidden; + } +} + +.hasPaddingTop { + padding-top: var(--padding-top); +} + +@media (--medium-viewport) { + .hasPaddingTop { + height: 100vh; /* stylelint-disable-line */ + } +} + +@media (--small-viewport) { + .hasPaddingTop { + padding-top: var(--box-padding); + } +} + .hidden { display: none; } diff --git a/src/components/secondPassphrase/secondPassphrase.js b/src/components/secondPassphrase/secondPassphrase.js index 166fd317dc..18b249c929 100644 --- a/src/components/secondPassphrase/secondPassphrase.js +++ b/src/components/secondPassphrase/secondPassphrase.js @@ -1,36 +1,42 @@ import React from 'react'; -import Fees from '../../constants/fees'; -import Authenticate from '../authenticate'; +// import Fees from '../../constants/fees'; import MultiStep from '../multiStep'; -import Info from '../passphrase/info'; -import Create from '../passphrase/create'; +// import Info from '../passphrase/info'; +import CreateSecond from '../passphrase/createSecond'; import Safekeeping from '../passphrase/safekeeping'; import Confirm from '../passphrase/confirm'; +import Box from '../box'; +import styles from './secondPassphrase.css'; const SecondPassphrase = ({ - passphrase, account, peers, registerSecondPassphrase, closeDialog, t, + account, peers, registerSecondPassphrase, t, }) => { - const onPassphraseRegister = (secondPassphrase) => { + const onPassphraseRegister = (secondPassphrase, passphrase) => { registerSecondPassphrase({ activePeer: peers.data, secondPassphrase, + passphrase, account, }); }; - const useCaseNote = t('your second passphrase will be required for all transactions sent from this account'); - const securityNote = t('Losing access to this passphrase will mean no funds can be sent from this account.'); + // const useCaseNote = + // t('your second passphrase will be required for all transactions sent from this account'); + // const securityNote = + // t('Losing access to this passphrase will mean no funds can be sent from this account.'); return ( - typeof passphrase === 'string' && passphrase.length > 0 ? - - - - - - : - ); + + + + + + + ); }; export default SecondPassphrase; From b6e76678285fb40196370faff1ea463405a3f8b2 Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:52:43 +0100 Subject: [PATCH 13/36] Add SecondPassphraseSteps to passphrase component --- src/components/passphrase/confirm/index.js | 41 +++++++++++++--------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/passphrase/confirm/index.js b/src/components/passphrase/confirm/index.js index fe529322f1..5412f87e71 100644 --- a/src/components/passphrase/confirm/index.js +++ b/src/components/passphrase/confirm/index.js @@ -5,6 +5,7 @@ import { PrimaryButton } from '../../toolbox/buttons/button'; import { extractAddress } from '../../../utils/api/account'; import TransitionWrapper from '../../toolbox/transitionWrapper'; import AccountVisual from '../../accountVisual'; +import SecondPassphraseSteps from '../ConfirmSecond'; class Confirm extends React.Component { constructor() { @@ -197,9 +198,9 @@ class Confirm extends React.Component {

{this.props.t('Choose the correct phrases to confirm.')}

 - + {!this.props.secondPassConfirmation ?

{this.props.t('Perfect! You’re all set.')}

- + : null}
{this.props.t('Please go back and check your passphrase again.')}
@@ -243,21 +244,27 @@ class Confirm extends React.Component {
-
-
-
- -
-

{this.address}

- this.props.finalCallback(words.join(' '))} - /> -
-
+ { + this.props.secondPassConfirmation ? +
); } From c2b4f21e78e740a182b569591e611aad327e080f Mon Sep 17 00:00:00 2001 From: yasharAyari Date: Thu, 15 Mar 2018 17:53:20 +0100 Subject: [PATCH 14/36] enable secondPassphrase slide in setting --- src/components/setting/setting.css | 1 + src/components/setting/setting.js | 42 ++++++++++++++++-------------- 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/components/setting/setting.css b/src/components/setting/setting.css index 10a044d11e..4bcba86f17 100644 --- a/src/components/setting/setting.css +++ b/src/components/setting/setting.css @@ -115,6 +115,7 @@ .secondPassphraseEnabled { color: var(--secondPassphrase-background-color); background: var(--secondPassphrase-color); + cursor: default; } @media (--medium-viewport) { diff --git a/src/components/setting/setting.js b/src/components/setting/setting.js index 0a06b92762..96ad1f0156 100644 --- a/src/components/setting/setting.js +++ b/src/components/setting/setting.js @@ -1,11 +1,13 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import ReactSwipe from 'react-swipe'; import styles from './setting.css'; import Checkbox from '../toolbox/sliderCheckbox'; import i18n from '../../i18n'; import accountConfig from '../../constants/account'; +import routes from '../../constants/routes'; +import { FontIcon } from '../fontIcon'; // TODO: will be re-enabled when the functionality is updated -// import RelativeLink from '../relativeLink'; // import languageSwitcherTheme from './languageSwitcher.css'; class Setting extends React.Component { @@ -43,7 +45,7 @@ class Setting extends React.Component { render() { this.language = (i18n.language === 'de'); const showSetting = this.props.showSetting ? styles.active : ''; - const { t, settings, settingsUpdated } = this.props; + const { t, settings, settingsUpdated, hasSecondPassphrase } = this.props; return