From caa7ef429c6f707189bcea236dffeeb419d9194b Mon Sep 17 00:00:00 2001 From: Craig Raw Date: Wed, 13 Jan 2021 15:43:39 +0200 Subject: [PATCH] add backup confirmation overlay to bip39 list generation process --- .../control/MnemonicKeystoreImportPane.java | 53 ++++++++++++++++--- .../com/sparrowwallet/sparrow/darktheme.css | 8 +++ .../com/sparrowwallet/sparrow/general.css | 5 ++ 3 files changed, 60 insertions(+), 6 deletions(-) diff --git a/src/main/java/com/sparrowwallet/sparrow/control/MnemonicKeystoreImportPane.java b/src/main/java/com/sparrowwallet/sparrow/control/MnemonicKeystoreImportPane.java index 20467e9c..01df9ba3 100644 --- a/src/main/java/com/sparrowwallet/sparrow/control/MnemonicKeystoreImportPane.java +++ b/src/main/java/com/sparrowwallet/sparrow/control/MnemonicKeystoreImportPane.java @@ -24,6 +24,7 @@ import org.controlsfx.control.textfield.AutoCompletionBinding; import org.controlsfx.control.textfield.CustomTextField; import org.controlsfx.control.textfield.TextFields; import org.controlsfx.glyphfont.Glyph; +import org.controlsfx.tools.Borders; import org.controlsfx.validation.ValidationResult; import org.controlsfx.validation.ValidationSupport; import org.controlsfx.validation.Validator; @@ -48,6 +49,7 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { private Label invalidLabel; private Button calculateButton; private Button backButton; + private Button nextButton; private Button confirmButton; private List generatedMnemonicCode; @@ -197,9 +199,7 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { confirmButton.managedProperty().bind(confirmButton.visibleProperty()); confirmButton.setVisible(false); confirmButton.setDefaultButton(true); - confirmButton.setTooltip(new Tooltip("Write down the words above as a backup - you will need to re-enter them to confirm your backup is correct")); - buttonPane.getChildren().add(confirmButton); - AnchorPane.setRightAnchor(confirmButton, 0.0); + confirmButton.setTooltip(new Tooltip("Re-enter the generated word list to confirm your backup is correct")); calculateButton = new Button("Calculate Seed"); calculateButton.setDisable(true); @@ -218,6 +218,15 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { backButton.setTooltip(new Tooltip("Go back to the generated word list")); backButton.setVisible(false); + nextButton = new Button("Confirm Backup..."); + nextButton.setOnAction(event -> { + confirmRecord(); + }); + nextButton.managedProperty().bind(nextButton.visibleProperty()); + nextButton.setTooltip(new Tooltip("Confirm you have recorded the generated word list")); + nextButton.setVisible(false); + nextButton.setDefaultButton(true); + wordEntriesProperty.addListener((ListChangeListener) c -> { boolean empty = true; boolean validWords = true; @@ -249,7 +258,7 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { HBox rightBox = new HBox(); rightBox.setSpacing(10); - rightBox.getChildren().addAll(backButton, calculateButton); + rightBox.getChildren().addAll(backButton, nextButton, confirmButton, calculateButton); buttonPane.getChildren().add(rightBox); AnchorPane.setRightAnchor(rightBox, 0.0); @@ -257,7 +266,9 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { vBox.getChildren().add(buttonPane); } - return vBox; + StackPane stackPane = new StackPane(); + stackPane.getChildren().add(vBox); + return stackPane; } private void generateNew() { @@ -275,7 +286,7 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { showHideLink.setVisible(false); calculateButton.setVisible(false); - confirmButton.setVisible(true); + nextButton.setVisible(true); backButton.setVisible(false); if(generatedMnemonicCode.size() != wordsPane.getChildren().size()) { @@ -287,6 +298,36 @@ public class MnemonicKeystoreImportPane extends TitledDescriptionPane { wordEntry.getEditor().setText(generatedMnemonicCode.get(i)); wordEntry.getEditor().setEditable(false); } + + StackPane wordsStackPane = (StackPane)getContent(); + if(wordsStackPane.getChildren().size() > 1) { + wordsStackPane.getChildren().remove(1); + confirmButton.setVisible(false); + } + } + + private void confirmRecord() { + setDescription("Confirm words have been recorded"); + showHideLink.setVisible(false); + + StackPane wordsPane = (StackPane)getContent(); + StackPane confirmPane = new StackPane(); + confirmPane.setMaxWidth(300); + confirmPane.setMaxHeight(100); + Region region = new Region(); + region.setMinWidth(confirmPane.getMaxWidth()); + region.setMinHeight(confirmPane.getMaxHeight()); + confirmPane.getStyleClass().add("box-overlay"); + Node wrappedRegion = Borders.wrap(region).lineBorder().innerPadding(0).outerPadding(0).buildAll(); + Label label = new Label("Have these " + wordEntriesProperty.get().size() + " words been written down?\nIn the next step, you will need to re-enter them."); + confirmPane.getChildren().addAll(wrappedRegion, label); + wordsPane.getChildren().add(confirmPane); + + setExpanded(true); + backButton.setVisible(true); + nextButton.setVisible(false); + confirmButton.setVisible(true); + generateButton.setVisible(false); } private void confirmBackup() { diff --git a/src/main/resources/com/sparrowwallet/sparrow/darktheme.css b/src/main/resources/com/sparrowwallet/sparrow/darktheme.css index 70b0a847..08f318ae 100644 --- a/src/main/resources/com/sparrowwallet/sparrow/darktheme.css +++ b/src/main/resources/com/sparrowwallet/sparrow/darktheme.css @@ -172,3 +172,11 @@ .root .placeholder .hyperlink { -fx-text-fill: derive(#1e88cf, 20%); } + +.root .box-overlay { + -fx-effect: dropshadow(three-pass-box, black, 14, 0, 0, 0); +} + +.root .box-overlay .label { + -fx-text-fill: white; +} diff --git a/src/main/resources/com/sparrowwallet/sparrow/general.css b/src/main/resources/com/sparrowwallet/sparrow/general.css index 8a10fdfa..34d9f17d 100644 --- a/src/main/resources/com/sparrowwallet/sparrow/general.css +++ b/src/main/resources/com/sparrowwallet/sparrow/general.css @@ -159,3 +159,8 @@ .root .header-panel { -fx-background-color: -fx-box-border, derive(-fx-background, 10%); } + +.box-overlay { + -fx-background-color: -fx-box-border, derive(-fx-background, 10%); + -fx-effect: dropshadow(three-pass-box, #a0a1a7, 14, 0, 0, 0); +} \ No newline at end of file