Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues 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 '@cwmr/paper-password-input/paper-password-input.js'
import '@material/mwc-button'
import '@material/mwc-checkbox'
import '@material/mwc-icon'
@ -21,6 +19,8 @@ import '@material/mwc-icon'
import '@polymer/iron-pages'
import '@polymer/paper-input/paper-input-container.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'
@ -381,38 +381,32 @@ class CreateAccountSection extends connect(store)(LitElement) {
></paper-icon-button>
</div>
</div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label
for="hasSavedSeedphraseCheckbox"
@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 style="text-align: right; vertical-align: top; line-height: 40px; margin:0;">
<label for="hasSavedSeedphraseCheckbox" @click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()} >I'm an advanced user, show my seed phrase</label>
<mwc-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
</div>
</div>
<div page="password">
<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.
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}">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">perm_identity</mwc-icon>
<paper-input style="width:100%;" label="Name" id="nameInput"></paper-input>
<div style="display:flex;" ?hidden="${!this.saveAccount}">
<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 style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon>
<paper-password-input style="width:100%;" label="Password" id="password"></paper-password-input>
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<vaadin-password-field style="width:100%;" label="Password" id="password"></vaadin-password-field>
</div>
<div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon>
<paper-password-input style="width:100%;" label="Confirm Password" id="rePassword"></paper-password-input>
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<vaadin-password-field style="width:100%;" label="Confirm Password" id="rePassword"></vaadin-password-field>
</div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label
for="saveInBrowserCheckbox"
@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>
<label for="saveInBrowserCheckbox" @click=${() => this.shadowRoot.getElementById('saveInBrowserCheckbox').click()}>Save in this browser</label>
<mwc-checkbox style="display: inline; id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox>
</div>
</div>
</div>
@ -433,11 +427,8 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div>
</div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label
for="downloadBackupCheckbox"
@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>
<label for="downloadBackupCheckbox" @click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}>Done saving your wallet backup ?</label>
<mwc-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
</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/iron-collapse'
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 { doStoreWallet, doRemoveWallet } from '../../redux/user/user-actions.js'
import { createWallet } from '../../../../qortal-ui-crypto/api/createWallet.js'
import snackbar from '../../functional-components/snackbar.js'
import '../../custom-elements/frag-file-input.js'
import ripple from '../../functional-components/loading-ripple.js'
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-stroke-width: 2px;
}
#loginPages{
overflow:visible;
}
#walletsPage {
/*min-width: 500px;*/
}
#wallets {
max-height: 50vh;
border-bottom: 1px solid #eee;
@ -121,21 +122,23 @@ class LoginSection extends connect(store)(LitElement) {
background: rgb(253 253 253 / 50%);
margin: 2vh;
}
.wallet {
/* max-width: 300px; */
position: relative;
padding: 15px 60px 15px 15px;
cursor: pointer;
display: flex;
border-bottom: solid 1px #dedede;
}
.wallet .wallet-details {
float: left;
width: auto;
height: 60px;
display: block;
}
.wallet .wallet-details p{
.wallet .wallet-details p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -144,26 +147,30 @@ class LoginSection extends connect(store)(LitElement) {
font-size: 15px;
line-height: 20px;
}
.wallet .walletAddress{
.wallet .walletAddress {
height: 40px !important;
line-height: 40px !important;
}
.wallet .walletName{
.wallet .walletName {
}
.wallet p span{
.wallet p span {
color: #888;
font-size: 12px;
width: 50px;
display: inline-block;
}
.removeWallet{
.removeWallet {
position: absolute;
right: 5px;
top: 20px;
color: tomato;
--mdc-icon-size: 30px;
}
.login-option {
max-width: 300px;
position: relative;
@ -171,15 +178,17 @@ class LoginSection extends connect(store)(LitElement) {
cursor: pointer;
display: flex;
}
.loginIcon {
/* font-size:42px; */
padding-right: 12px;
margin-top: -2px;
}
*[hidden] {
display:none !important;
visibility: hidden;
}
h1 {
padding: 24px;
padding-top:0;
@ -187,6 +196,7 @@ class LoginSection extends connect(store)(LitElement) {
font-size:24px;
font-weight:100;
}
.accountIcon {
font-size:42px;
padding-top:8px;
@ -195,6 +205,7 @@ class LoginSection extends connect(store)(LitElement) {
#unlockStoredPage {
padding: 24px;
}
#unlockStoredPage mwc-icon {
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')}) {
/* Mobile */
#wallets {
/* max-height: calc(var(--window-height) - 180px);
min-height: calc(var(--window-height) - 180px); */
height:100%;
overflow-y:auto;
overflow-x:hidden;
}
#loginSection {
height: calc(var(--window-height) - 56px);
}
.wallet {
max-width: 100%;
}
}
.backButton {
padding:14px;
text-align:left;
}
#pagesContainer {
max-height: calc(var(--window-height) - 184px);
}
.checkboxLabel:hover{
cursor: pointer;
}
@ -246,7 +260,7 @@ class LoginSection extends connect(store)(LitElement) {
</div>
<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>
<p style="margin:0; padding: 0 0 12px 0;">Click your account to login with it</p>
</div>
@ -259,7 +273,6 @@ class LoginSection extends connect(store)(LitElement) {
<div class="selectWallet" @click=${() => this.selectWallet(wallet[1])}>
<paper-ripple></paper-ripple>
<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="walletAddress"><span>Address</span>${wallet[1].address0}</p>
</div>
@ -273,8 +286,8 @@ class LoginSection extends connect(store)(LitElement) {
<div page="phrase" id="phrasePage">
<div style="padding:0;">
<div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">short_text</mwc-icon>
<paper-password-input style="width:100%;" label="Seedphrase" id="existingSeedPhraseInput"></paper-password-input>
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">short_text</mwc-icon>
<vaadin-password-field style="width:100%;" label="Seedphrase" id="existingSeedPhraseInput"></vaadin-password-field>
</div>
</div>
</div>
@ -282,8 +295,8 @@ class LoginSection extends connect(store)(LitElement) {
<div page="seed" id="seedPage">
<div>
<div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">clear_all</mwc-icon>
<paper-password-input style="width:100%;" label="Qora address seed" id="v1SeedInput"></paper-password-input>
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">clear_all</mwc-icon>
<vaadin-password-field style="width:100%;" label="Qora address seed" id="v1SeedInput"></vaadin-password-field>
</div>
</div>
</div>
@ -312,13 +325,14 @@ class LoginSection extends connect(store)(LitElement) {
</iron-pages>
<iron-collapse style="" ?opened=${this.showName(this.selectedPage)} id="passwordCollapse">
<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>
</iron-collapse>
<iron-collapse style="" ?opened=${this.showPassword(this.selectedPage)} id="passwordCollapse">
<div style="display:flex;">
<mwc-icon style="padding: 20px; padding-left:0; padding-top: 28px;">vpn_key</mwc-icon>
<paper-password-input style="width:100%;" label="Password" id="password" @keyup=${e => this.keyupEnter(e, e => this.emitNext(e))}></paper-password-input>
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<vaadin-password-field style="width:100%;" label="Password" id="password" @keyup=${e => this.keyupEnter(e, e => this.emitNext(e))}></vaadin-password-field>
</div>
</iron-collapse>
@ -326,15 +340,9 @@ class LoginSection extends connect(store)(LitElement) {
${this.loginErrorMessage}
</div>
${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html`
<div style="text-align:right; min-height:40px;">
<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>
<mwc-checkbox id="storeCheckbox" style="margin-bottom:-12px;" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
</p>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label for="storeCheckbox" class="checkboxLabel" @click=${() => this.shadowRoot.getElementById('storeCheckbox').click()}>Save in this browser</label>
<mwc-checkbox style="display: inline;" id="storeCheckbox" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
</div>
` : ''}
</div>
@ -345,7 +353,6 @@ class LoginSection extends connect(store)(LitElement) {
firstUpdated() {
this.loadingRipple = ripple
const pages = this.shadowRoot.querySelector('#loginPages')
pages.addEventListener('selected-item-changed', () => {
if (!pages.selectedItem) {
@ -370,7 +377,7 @@ class LoginSection extends connect(store)(LitElement) {
this.wallets = store.getState().user.storedWallets
store.dispatch(
doRemoveWallet(walletAddress)
)//.catch(err => console.error(err))
)
this.cleanup()
}
}
@ -570,7 +577,6 @@ class LoginSection extends connect(store)(LitElement) {
// clicks next for parent
clickNext() {
}
updateNext() {