Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

Autosave

pull/1/head
AlphaX-Projects 3 years ago committed by GitHub
parent
3257c94025
commit
ce9d23461f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 122
      qortal-ui-core/src/components/login-view/create-account-section.js

122
qortal-ui-core/src/components/login-view/create-account-section.js
Unescape View File

@ -15,8 +15,10 @@ import '@material/mwc-icon'
import '@material/mwc-dialog' import '@material/mwc-dialog'
import '@material/mwc-formfield' import '@material/mwc-formfield'
import '@polymer/iron-pages' 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-container.js'
import '@polymer/paper-input/paper-input.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/text-field/vaadin-text-field.js'
import '@vaadin/password-field/vaadin-password-field.js' import '@vaadin/password-field/vaadin-password-field.js'
import 'random-sentence-generator' 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-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%); --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.nextButtonText = 'Next'
this.saveAccount = true this.saveAccount = true
this.showSeedphrase = false this.showSeedphrase = false
this.isDownloadedBackup = false this.isDownloadedBackup = true
this.createAccountLoading = false this.createAccountLoading = false
const welcomeMessage = 'Welcome to Qortal' const welcomeMessage = 'Welcome to Qortal'
this.welcomeMessage = welcomeMessage this.welcomeMessage = welcomeMessage
@ -149,7 +154,6 @@ class CreateAccountSection extends connect(store)(LitElement) {
})) }))
.then(wallet => { .then(wallet => {
this._wallet = wallet this._wallet = wallet
return ripple.fade() return ripple.fade()
}) })
.then(() => { .then(() => {
@ -175,7 +179,7 @@ class CreateAccountSection extends connect(store)(LitElement) {
next: e => { next: e => {
if (!this.isDownloadedBackup) { if (!this.isDownloadedBackup) {
snackbar.add({ snackbar.add({
labelText: 'Please Download Your Wallet BackUp file!', labelText: 'Your Wallet BackUp file get downloaded!',
dismiss: true dismiss: true
}) })
} else { } else {
@ -238,6 +242,14 @@ class CreateAccountSection extends connect(store)(LitElement) {
flex-direction: column; flex-direction: column;
} }
.horizontal-center {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#createAccountSection { #createAccountSection {
max-height: calc(var(--window-height) - 56px); max-height: calc(var(--window-height) - 56px);
max-width: 440px; max-width: 440px;
@ -319,12 +331,19 @@ class CreateAccountSection extends connect(store)(LitElement) {
paper-icon-button { paper-icon-button {
--paper-icon-button-ink-color: var(--mdc-theme-primary); --paper-icon-button-ink-color: var(--mdc-theme-primary);
} }
paper-button {
color: var(--mdc-theme-primary);
text-transform: none;
margin: 0;
padding: 0;
}
</style> </style>
<div id="createAccountSection" class="flex column"> <div id="createAccountSection" class="flex column">
<iron-pages selected="${this.selectedPage}" attr-for-selected="page" id="createAccountPages"> <iron-pages selected="${this.selectedPage}" attr-for-selected="page" id="createAccountPages">
<div page="info"> <div page="info">
<div id="infoContent" class="section-content" style=""> <div id="infoContent" class="section-content">
<br> <br>
<h3 style="text-align:center; margin-top: 0; font-weight: 100; font-family: 'Roboto Mono', monospace;">Create account</h3> <h3 style="text-align:center; margin-top: 0; font-weight: 100; font-family: 'Roboto Mono', monospace;">Create account</h3>
<p> <p>
@ -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. 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.
</p> </p>
<p style="margin-bottom:0;"> <p style="margin-bottom:0;">
Create your QORT account by clicking Next below. A ‘<paper-button id="myseedshow" @click=${() => this.shadowRoot.querySelector('#mySeedDialog').show()}>seedphrase</paper-button><paper-tooltip for="myseedshow" position="top" animation-delay="0">Click to view seedphrase</paper-tooltip>’ will be randomly generated in background. This is used as your private key generator for your blockchain account in QORT.
A ‘seedphrase’ will be randomly generated but not displayed, and this is used as your private key generator for your blockchain account in QORT.
</p> </p>
<p style="margin-bottom:0; text-align:center;">
<div id="seedBox" style="display: none; border-radius: 4px; padding-top: 8px; background: rgba(3,169,244,0.1); margin-top: 24px;"> Create your QORT account by clicking NEXT below.
<div style="display: inline-block; padding:12px; width:calc(100% - 84px);"> </p><br>
<random-sentence-generator </div>
template="adverb verb noun adjective noun adverb verb noun adjective noun adjective verbed adjective noun" <mwc-dialog id="mySeedDialog" heading="Your created Seedphrase">
id="randSentence"></random-sentence-generator> <div style="min-height:250px; min-width: 300px; box-sizing: border-box; position: relative;">
<div style="border-radius: 4px; padding-top: 8px; background: rgba(3,169,244,0.1); margin-top: 24px;">
<div style="display: inline-block; padding:12px; width:calc(100% - 84px);">
<random-sentence-generator
template="adverb verb noun adjective noun adverb verb noun adjective noun adjective verbed adjective noun"
id="randSentence"
>
</random-sentence-generator>
</div>
<!--
--- --- --- --- --- --- --- --- --- --- --- -
Calculations
--- --- --- --- --- --- --- --- --- --- --- -
403 adjectives
60 interjections
243 adverbs
2353 nouns
3387 verbs
--- --- --- --- --- --- --- --- --- --- --- -
sooo 243*3387*403*2353*3387*403*2353*403*2353 ~ 2^92
--- --- --- --- --- --- --- --- --- --- --- -
-->
</div><br>
<div class="horizontal-center">
<mwc-button raised label="Save Seedphrase" icon="save" @click=${() => this.downloadSeedphrase()}></mwc-button>
</div> </div>
<!--
--- --- --- --- --- --- --- --- --- --- --- -
Calculations
--- --- --- --- --- --- --- --- --- --- --- -
403 adjectives
60 interjections
243 adverbs
2353 nouns
3387 verbs
--- --- --- --- --- --- --- --- --- --- --- -
sooo 243*3387*403*2353*3387*403*2353*403*2353 ~ 2^92
--- --- --- --- --- --- --- --- --- --- --- -
-->
<paper-icon-button
icon="icons:autorenew"
style="top:-12px; margin:8px;"
@click=${() => this.shadowRoot.getElementById('randSentence').generate()}
></paper-icon-button>
</div> </div>
</div> <mwc-button slot="primaryAction" dialogAction="cancel" class="red">Close</mwc-button>
<div style="display: none; text-align: right; vertical-align: top; line-height: 40px; margin:0;"> </mwc-dialog>
<mwc-formfield alignEnd label="I'm an advanced user, show my seed phrase.">
<label for="hasSavedSeedphraseCheckbox" @click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()} ></label>
<mwc-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
</mwc-formfield>
</div>
</div> </div>
<div page="password"> <div page="password">
@ -399,25 +418,11 @@ class CreateAccountSection extends connect(store)(LitElement) {
<div page="backup"> <div page="backup">
<div id="downloadBackup" class="section-content"> <div id="downloadBackup" class="section-content">
<h3>Download Wallet BackUp File</h3> <h3 style="text-align: center;">Save Wallet BackUp File</h3>
<p style="text-align: justify;">Your account is now created${this.saveAccount ? ' and will be saved in this browser.' : '.'}</p> <p style="text-align: justify;">Your account is now created${this.saveAccount ? ' and will be saved in this browser.' : '.'}</p>
<p style="margin:0;"> <p style="margin:0;">
This file is the <strong>ONLY</strong> way to access your account on a system that doesn't have it saved to the app/browser. <strong>BE SURE TO BACKUP THIS FILE IN MULTIPLE PLACES.</strong> 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. This file is the <strong>ONLY</strong> way to access your account on a system that doesn't have it saved to the app/browser. <strong>BE SURE TO BACKUP THIS FILE IN MULTIPLE PLACES.</strong> 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.
</p> </p>
<div id="download-area">
<div style="line-height:40px;">
<span style="padding-top:6px; margin-right: 10px;">Download Wallet BackUp File</span>
<slot id="trigger" name="inputTrigger" @click=${() => this.downloadBackup(this._wallet)} style="dispay:inline;">
<mwc-button><mwc-icon>cloud_download</mwc-icon>&nbsp; Save</mwc-button>
</slot>
</div>
</div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<mwc-formfield alignEnd label="Done saving your wallet backup ?">
<label for="downloadBackupCheckbox" @click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}></label>
<mwc-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
</mwc-formfield>
</div>
</div> </div>
</div> </div>
</iron-pages> </iron-pages>
@ -429,6 +434,7 @@ class CreateAccountSection extends connect(store)(LitElement) {
this.shadowRoot.getElementById('randSentence').generate() this.shadowRoot.getElementById('randSentence').generate()
this.shadowRoot.getElementById('nameInput').value = '' this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('password').value = '' this.shadowRoot.getElementById('password').value = ''
this.shadowRoot.getElementById('rePassword').value = ''
this.showSeedphrase = false this.showSeedphrase = false
this.selectPage('info') this.selectPage('info')
this.error = false this.error = false
@ -436,7 +442,7 @@ class CreateAccountSection extends connect(store)(LitElement) {
this.nextButtonText = 'Next' this.nextButtonText = 'Next'
this.createAccountLoading = false this.createAccountLoading = false
this.saveAccount = true this.saveAccount = true
this.isDownloadedBackup = false this.isDownloadedBackup = true
this._wallet = '' this._wallet = ''
this._pass = '' this._pass = ''
this._name = '' this._name = ''
@ -474,11 +480,11 @@ class CreateAccountSection extends connect(store)(LitElement) {
this.nextDisabled = false this.nextDisabled = false
this.nextText = 'Create Account' this.nextText = 'Create Account'
} else if (this.selectedPage === 'backup') { } else if (this.selectedPage === 'backup') {
this.nextDisabled = !this.isDownloadedBackup this.downloadBackup(this._wallet)
this.nextDisabled = false
this.backHidden = true this.backHidden = true
this.nextText = 'Continue' this.nextText = 'Continue'
} }
this.updatedProperty() this.updatedProperty()
} }
@ -520,6 +526,12 @@ class CreateAccountSection extends connect(store)(LitElement) {
const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' })
FileSaver.saveAs(blob, `qortal_backup_${wallet.addresses[0].address}.json`) 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) window.customElements.define('create-account-section', CreateAccountSection)

Write Preview
Loading…
Cancel
Save