Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed login and create-account section to vaadin

Browse Source
This commit is contained in:
AlphaX-Projects 2022-02-05 06:24:19 -08:00 committed by GitHub
parent ee340d84e4
commit 58f50d3d2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,8 +12,6 @@ import { checkApiKey } from '../../apiKeyUtils.js'
import snackbar from '../../functional-components/snackbar.js' import snackbar from '../../functional-components/snackbar.js'
import '@cwmr/paper-password-input/paper-password-input.js'
import '@material/mwc-button' import '@material/mwc-button'
import '@material/mwc-checkbox' import '@material/mwc-checkbox'
import '@material/mwc-icon' import '@material/mwc-icon'
@ -21,6 +19,8 @@ import '@material/mwc-icon'
import '@polymer/iron-pages' import '@polymer/iron-pages'
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 '@vaadin/vaadin-text-field/vaadin-text-field.js'
import '@vaadin/vaadin-text-field/vaadin-password-field.js'
import 'random-sentence-generator' import 'random-sentence-generator'
@ -381,38 +381,32 @@ class CreateAccountSection extends connect(store)(LitElement) {
></paper-icon-button> ></paper-icon-button>
</div> </div>
</div> </div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align: right; vertical-align: top; line-height: 40px; margin:0;">
<label <label for="hasSavedSeedphraseCheckbox" @click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()} >I'm an advanced user, show my seed phrase</label>
for="hasSavedSeedphraseCheckbox" <mwc-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
@click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()}
>I'm an advanced user, show my seed phrase</label>
<mwc-checkbox id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
</div> </div>
</div> </div>
<div page="password"> <div page="password">
<div id="saveContent" class="section-content"> <div id="saveContent" class="section-content">
<h3>Save in browser</h3> <h3 style="text-align: center;">Save in browser</h3>
<p style="text-align: justify;">Your account is now ready to be created. It will be saved in this browser. If you do not want your new account to be saved in your browser, you can uncheck the box below. <p style="text-align: justify;">Your account is now ready to be created. It will be saved in this browser. If you do not want your new account to be saved in your browser, you can uncheck the box below.
You will still be able to login with your new account(after logging out), using your wallet backup file that you MUST download once you create your account.</p> You will still be able to login with your new account(after logging out), using your wallet backup file that you MUST download once you create your account.</p>
<div style="display:flex; margin-bottom: -1.4rem;" ?hidden="${!this.saveAccount}"> <div style="display:flex;" ?hidden="${!this.saveAccount}">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">perm_identity</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">perm_identity</mwc-icon>
<paper-input style="width:100%;" label="Name" id="nameInput"></paper-input> <vaadin-text-field style="width:100%;" label="Name" id="nameInput"></vaadin-text-field>
</div> </div>
<div style="display:flex;"> <div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<paper-password-input style="width:100%;" label="Password" id="password"></paper-password-input> <vaadin-password-field style="width:100%;" label="Password" id="password"></vaadin-password-field>
</div> </div>
<div style="display:flex;"> <div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<paper-password-input style="width:100%;" label="Confirm Password" id="rePassword"></paper-password-input> <vaadin-password-field style="width:100%;" label="Confirm Password" id="rePassword"></vaadin-password-field>
</div> </div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label <label for="saveInBrowserCheckbox" @click=${() => this.shadowRoot.getElementById('saveInBrowserCheckbox').click()}>Save in this browser</label>
for="saveInBrowserCheckbox" <mwc-checkbox style="display: inline; id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox>
@click=${() => this.shadowRoot.getElementById('saveInBrowserCheckbox').click()}
>Save in this browser</label>
<mwc-checkbox id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox>
</div> </div>
</div> </div>
</div> </div>
@ -433,11 +427,8 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div> </div>
</div> </div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label <label for="downloadBackupCheckbox" @click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}>Done saving your wallet backup ?</label>
for="downloadBackupCheckbox" <mwc-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
@click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}
>Done saving your wallet backup ?</label>
<mwc-checkbox id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
</div> </div>
</div> </div>
</div> </div>

76
qortal-ui-core/src/components/login-view/login-section.js
View File

@ -16,16 +16,15 @@ import '@polymer/paper-input/paper-input.js'
import '@polymer/paper-ripple' import '@polymer/paper-ripple'
import '@polymer/iron-collapse' import '@polymer/iron-collapse'
import '@polymer/paper-spinner/paper-spinner-lite.js' import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@cwmr/paper-password-input/paper-password-input.js' import '@vaadin/vaadin-text-field/vaadin-text-field.js'
import '@vaadin/vaadin-text-field/vaadin-password-field.js'
import { doLogin, doSelectAddress } from '../../redux/app/app-actions.js' import { doLogin, doSelectAddress } from '../../redux/app/app-actions.js'
import { doStoreWallet, doRemoveWallet } from '../../redux/user/user-actions.js' import { doStoreWallet, doRemoveWallet } from '../../redux/user/user-actions.js'
import { createWallet } from '../../../../qortal-ui-crypto/api/createWallet.js' import { createWallet } from '../../../../qortal-ui-crypto/api/createWallet.js'
import snackbar from '../../functional-components/snackbar.js' import snackbar from '../../functional-components/snackbar.js'
import '../../custom-elements/frag-file-input.js' import '../../custom-elements/frag-file-input.js'
import ripple from '../../functional-components/loading-ripple.js' import ripple from '../../functional-components/loading-ripple.js'
class LoginSection extends connect(store)(LitElement) { class LoginSection extends connect(store)(LitElement) {
@ -106,12 +105,14 @@ class LoginSection extends connect(store)(LitElement) {
--paper-spinner-color: var(--mdc-theme-primary); --paper-spinner-color: var(--mdc-theme-primary);
--paper-spinner-stroke-width: 2px; --paper-spinner-stroke-width: 2px;
} }
#loginPages{ #loginPages{
overflow:visible; overflow:visible;
} }
#walletsPage { #walletsPage {
/*min-width: 500px;*/
} }
#wallets { #wallets {
max-height: 50vh; max-height: 50vh;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -121,21 +122,23 @@ class LoginSection extends connect(store)(LitElement) {
background: rgb(253 253 253 / 50%); background: rgb(253 253 253 / 50%);
margin: 2vh; margin: 2vh;
} }
.wallet { .wallet {
/* max-width: 300px; */
position: relative; position: relative;
padding: 15px 60px 15px 15px; padding: 15px 60px 15px 15px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
border-bottom: solid 1px #dedede; border-bottom: solid 1px #dedede;
} }
.wallet .wallet-details { .wallet .wallet-details {
float: left; float: left;
width: auto; width: auto;
height: 60px; height: 60px;
display: block; display: block;
} }
.wallet .wallet-details p{
.wallet .wallet-details p {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -144,26 +147,30 @@ class LoginSection extends connect(store)(LitElement) {
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
} }
.wallet .walletAddress{
.wallet .walletAddress {
height: 40px !important; height: 40px !important;
line-height: 40px !important; line-height: 40px !important;
} }
.wallet .walletName{
.wallet .walletName {
} }
.wallet p span{
.wallet p span {
color: #888; color: #888;
font-size: 12px; font-size: 12px;
width: 50px; width: 50px;
display: inline-block; display: inline-block;
} }
.removeWallet{
.removeWallet {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 20px; top: 20px;
color: tomato; color: tomato;
--mdc-icon-size: 30px; --mdc-icon-size: 30px;
} }
.login-option { .login-option {
max-width: 300px; max-width: 300px;
position: relative; position: relative;
@ -171,15 +178,17 @@ class LoginSection extends connect(store)(LitElement) {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
} }
.loginIcon { .loginIcon {
/* font-size:42px; */
padding-right: 12px; padding-right: 12px;
margin-top: -2px; margin-top: -2px;
} }
*[hidden] { *[hidden] {
display:none !important; display:none !important;
visibility: hidden; visibility: hidden;
} }
h1 { h1 {
padding: 24px; padding: 24px;
padding-top:0; padding-top:0;
@ -187,6 +196,7 @@ class LoginSection extends connect(store)(LitElement) {
font-size:24px; font-size:24px;
font-weight:100; font-weight:100;
} }
.accountIcon { .accountIcon {
font-size:42px; font-size:42px;
padding-top:8px; padding-top:8px;
@ -195,6 +205,7 @@ class LoginSection extends connect(store)(LitElement) {
#unlockStoredPage { #unlockStoredPage {
padding: 24px; padding: 24px;
} }
#unlockStoredPage mwc-icon { #unlockStoredPage mwc-icon {
font-size:48px; font-size:48px;
} }
@ -202,26 +213,29 @@ class LoginSection extends connect(store)(LitElement) {
@media only screen and (max-width: ${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-tablet')}) { @media only screen and (max-width: ${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-tablet')}) {
/* Mobile */ /* Mobile */
#wallets { #wallets {
/* max-height: calc(var(--window-height) - 180px);
min-height: calc(var(--window-height) - 180px); */
height:100%; height:100%;
overflow-y:auto; overflow-y:auto;
overflow-x:hidden; overflow-x:hidden;
} }
#loginSection { #loginSection {
height: calc(var(--window-height) - 56px); height: calc(var(--window-height) - 56px);
} }
.wallet { .wallet {
max-width: 100%; max-width: 100%;
} }
} }
.backButton { .backButton {
padding:14px; padding:14px;
text-align:left; text-align:left;
} }
#pagesContainer { #pagesContainer {
max-height: calc(var(--window-height) - 184px); max-height: calc(var(--window-height) - 184px);
} }
.checkboxLabel:hover{ .checkboxLabel:hover{
cursor: pointer; cursor: pointer;
} }
@ -246,7 +260,7 @@ class LoginSection extends connect(store)(LitElement) {
</div> </div>
<div page="storedWallet" id="walletsPage"> <div page="storedWallet" id="walletsPage">
<div style="padding-left:0;"> <div style="text-align: center; padding-left:0;">
<h1 style="padding:0;">Your accounts</h1> <h1 style="padding:0;">Your accounts</h1>
<p style="margin:0; padding: 0 0 12px 0;">Click your account to login with it</p> <p style="margin:0; padding: 0 0 12px 0;">Click your account to login with it</p>
</div> </div>
@ -259,7 +273,6 @@ class LoginSection extends connect(store)(LitElement) {
<div class="selectWallet" @click=${() => this.selectWallet(wallet[1])}> <div class="selectWallet" @click=${() => this.selectWallet(wallet[1])}>
<paper-ripple></paper-ripple> <paper-ripple></paper-ripple>
<div class='wallet-details'> <div class='wallet-details'>
<!--h3 class='walletName'><span>Name : </span>${wallet[1].name || wallet[1].address0.substring(0, 5)}</h3-->
<p class='walletName'><span>Name</span>${wallet[1].name || "No saved name"}</p> <p class='walletName'><span>Name</span>${wallet[1].name || "No saved name"}</p>
<p class="walletAddress"><span>Address</span>${wallet[1].address0}</p> <p class="walletAddress"><span>Address</span>${wallet[1].address0}</p>
</div> </div>
@ -273,8 +286,8 @@ class LoginSection extends connect(store)(LitElement) {
<div page="phrase" id="phrasePage"> <div page="phrase" id="phrasePage">
<div style="padding:0;"> <div style="padding:0;">
<div style="display:flex;"> <div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">short_text</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">short_text</mwc-icon>
<paper-password-input style="width:100%;" label="Seedphrase" id="existingSeedPhraseInput"></paper-password-input> <vaadin-password-field style="width:100%;" label="Seedphrase" id="existingSeedPhraseInput"></vaadin-password-field>
</div> </div>
</div> </div>
</div> </div>
@ -282,8 +295,8 @@ class LoginSection extends connect(store)(LitElement) {
<div page="seed" id="seedPage"> <div page="seed" id="seedPage">
<div> <div>
<div style="display:flex;"> <div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">clear_all</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">clear_all</mwc-icon>
<paper-password-input style="width:100%;" label="Qora address seed" id="v1SeedInput"></paper-password-input> <vaadin-password-field style="width:100%;" label="Qora address seed" id="v1SeedInput"></vaadin-password-field>
</div> </div>
</div> </div>
</div> </div>
@ -312,13 +325,14 @@ class LoginSection extends connect(store)(LitElement) {
</iron-pages> </iron-pages>
<iron-collapse style="" ?opened=${this.showName(this.selectedPage)} id="passwordCollapse"> <iron-collapse style="" ?opened=${this.showName(this.selectedPage)} id="passwordCollapse">
<div style="display:flex;"> <div style="display:flex;">
<mwc-textfield icon="perm_identity" style="width:100%;" label="Name" id="nameInput"></mwc-textfield> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">perm_identity</mwc-icon>
<vaadin-text-field style="width:100%;" label="Name" id="nameInput"></vaadin-text-field>
</div> </div>
</iron-collapse> </iron-collapse>
<iron-collapse style="" ?opened=${this.showPassword(this.selectedPage)} id="passwordCollapse"> <iron-collapse style="" ?opened=${this.showPassword(this.selectedPage)} id="passwordCollapse">
<div style="display:flex;"> <div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<paper-password-input style="width:100%;" label="Password" id="password" @keyup=${e => this.keyupEnter(e, e => this.emitNext(e))}></paper-password-input> <vaadin-password-field style="width:100%;" label="Password" id="password" @keyup=${e => this.keyupEnter(e, e => this.emitNext(e))}></vaadin-password-field>
</div> </div>
</iron-collapse> </iron-collapse>
@ -326,15 +340,9 @@ class LoginSection extends connect(store)(LitElement) {
${this.loginErrorMessage} ${this.loginErrorMessage}
</div> </div>
${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html` ${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html`
<div style="text-align:right; min-height:40px;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<p style="vertical-align: top; line-height: 40px; margin:0;"> <label for="storeCheckbox" class="checkboxLabel" @click=${() => this.shadowRoot.getElementById('storeCheckbox').click()}>Save in this browser</label>
<label <mwc-checkbox style="display: inline;" id="storeCheckbox" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
for="storeCheckbox"
class="checkboxLabel"
@click=${() => this.shadowRoot.getElementById('storeCheckbox').click()}
>Save in this browser</label>
<mwc-checkbox id="storeCheckbox" style="margin-bottom:-12px;" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
</p>
</div> </div>
` : ''} ` : ''}
</div> </div>
@ -345,7 +353,6 @@ class LoginSection extends connect(store)(LitElement) {
firstUpdated() { firstUpdated() {
this.loadingRipple = ripple this.loadingRipple = ripple
const pages = this.shadowRoot.querySelector('#loginPages') const pages = this.shadowRoot.querySelector('#loginPages')
pages.addEventListener('selected-item-changed', () => { pages.addEventListener('selected-item-changed', () => {
if (!pages.selectedItem) { if (!pages.selectedItem) {
@ -370,7 +377,7 @@ class LoginSection extends connect(store)(LitElement) {
this.wallets = store.getState().user.storedWallets this.wallets = store.getState().user.storedWallets
store.dispatch( store.dispatch(
doRemoveWallet(walletAddress) doRemoveWallet(walletAddress)
)//.catch(err => console.error(err)) )
this.cleanup() this.cleanup()
} }
} }
@ -570,7 +577,6 @@ class LoginSection extends connect(store)(LitElement) {
// clicks next for parent // clicks next for parent
clickNext() { clickNext() {
} }
updateNext() { updateNext() {