From ce9d23461ff891648f3deece0ef8f207a0e3838a Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Wed, 23 Feb 2022 08:26:19 +0100 Subject: [PATCH] Autosave --- .../login-view/create-account-section.js | 122 ++++++++++-------- 1 file changed, 67 insertions(+), 55 deletions(-) diff --git a/qortal-ui-core/src/components/login-view/create-account-section.js b/qortal-ui-core/src/components/login-view/create-account-section.js index a0daf99d..11384704 100644 --- a/qortal-ui-core/src/components/login-view/create-account-section.js +++ b/qortal-ui-core/src/components/login-view/create-account-section.js @@ -15,8 +15,10 @@ import '@material/mwc-icon' import '@material/mwc-dialog' import '@material/mwc-formfield' import '@polymer/iron-pages' +import '@polymer/paper-button/paper-button.js' import '@polymer/paper-input/paper-input-container.js' import '@polymer/paper-input/paper-input.js' +import '@polymer/paper-tooltip/paper-tooltip.js' import '@vaadin/text-field/vaadin-text-field.js' import '@vaadin/password-field/vaadin-password-field.js' import 'random-sentence-generator' @@ -58,6 +60,9 @@ class CreateAccountSection extends connect(store)(LitElement) { --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); --lumo-primary-color: hsl(199, 100%, 48%); } + .red { + --mdc-theme-primary: red; + } ` ] } @@ -73,7 +78,7 @@ class CreateAccountSection extends connect(store)(LitElement) { this.nextButtonText = 'Next' this.saveAccount = true this.showSeedphrase = false - this.isDownloadedBackup = false + this.isDownloadedBackup = true this.createAccountLoading = false const welcomeMessage = 'Welcome to Qortal' this.welcomeMessage = welcomeMessage @@ -149,7 +154,6 @@ class CreateAccountSection extends connect(store)(LitElement) { })) .then(wallet => { this._wallet = wallet - return ripple.fade() }) .then(() => { @@ -175,7 +179,7 @@ class CreateAccountSection extends connect(store)(LitElement) { next: e => { if (!this.isDownloadedBackup) { snackbar.add({ - labelText: 'Please Download Your Wallet BackUp file!', + labelText: 'Your Wallet BackUp file get downloaded!', dismiss: true }) } else { @@ -238,6 +242,14 @@ class CreateAccountSection extends connect(store)(LitElement) { flex-direction: column; } + .horizontal-center { + margin: 0; + position: absolute; + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + #createAccountSection { max-height: calc(var(--window-height) - 56px); max-width: 440px; @@ -319,12 +331,19 @@ class CreateAccountSection extends connect(store)(LitElement) { paper-icon-button { --paper-icon-button-ink-color: var(--mdc-theme-primary); } + + paper-button { + color: var(--mdc-theme-primary); + text-transform: none; + margin: 0; + padding: 0; + }
-
+

Create account

@@ -333,42 +352,42 @@ class CreateAccountSection extends connect(store)(LitElement) { giving you both more of the QORT block reward and also larger influence over the network in terms of voting on decisions for the platform.

- Create your QORT account by clicking Next below. - A ‘seedphrase’ will be randomly generated but not displayed, and this is used as your private key generator for your blockchain account in QORT. + A ‘ this.shadowRoot.querySelector('#mySeedDialog').show()}>seedphraseClick to view seedphrase’ will be randomly generated in background. This is used as your private key generator for your blockchain account in QORT.

- - -
- - - { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}> - -
+ Close +
@@ -399,25 +418,11 @@ class CreateAccountSection extends connect(store)(LitElement) {
-

Download Wallet BackUp File

+

Save Wallet BackUp File

Your account is now created${this.saveAccount ? ' and will be saved in this browser.' : '.'}

This file is the ONLY way to access your account on a system that doesn't have it saved to the app/browser. BE SURE TO BACKUP THIS FILE IN MULTIPLE PLACES. The file is encrypted very securely and decrypted with your local password you created in the previous step. You can save it anywhere securely, but be sure to do that in multiple locations.

-
-
- Download Wallet BackUp File - this.downloadBackup(this._wallet)} style="dispay:inline;"> - cloud_download  Save - -
-
-
- - - { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}> - -
@@ -429,6 +434,7 @@ class CreateAccountSection extends connect(store)(LitElement) { this.shadowRoot.getElementById('randSentence').generate() this.shadowRoot.getElementById('nameInput').value = '' this.shadowRoot.getElementById('password').value = '' + this.shadowRoot.getElementById('rePassword').value = '' this.showSeedphrase = false this.selectPage('info') this.error = false @@ -436,7 +442,7 @@ class CreateAccountSection extends connect(store)(LitElement) { this.nextButtonText = 'Next' this.createAccountLoading = false this.saveAccount = true - this.isDownloadedBackup = false + this.isDownloadedBackup = true this._wallet = '' this._pass = '' this._name = '' @@ -474,11 +480,11 @@ class CreateAccountSection extends connect(store)(LitElement) { this.nextDisabled = false this.nextText = 'Create Account' } else if (this.selectedPage === 'backup') { - this.nextDisabled = !this.isDownloadedBackup + this.downloadBackup(this._wallet) + this.nextDisabled = false this.backHidden = true this.nextText = 'Continue' } - this.updatedProperty() } @@ -520,6 +526,12 @@ class CreateAccountSection extends connect(store)(LitElement) { const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' }) FileSaver.saveAs(blob, `qortal_backup_${wallet.addresses[0].address}.json`) } + + downloadSeedphrase() { + const seed = this.shadowRoot.getElementById('randSentence').parsedString + const blob = new Blob([seed], { type: 'text/plain;charset=utf-8' }) + FileSaver.saveAs(blob, `qortal_seedphrase.txt`) + } } window.customElements.define('create-account-section', CreateAccountSection)