diff --git a/qortal-ui-core/config/default.build.options.js b/qortal-ui-core/config/default.build.options.js index 5c3ef43a..361b1f47 100644 --- a/qortal-ui-core/config/default.build.options.js +++ b/qortal-ui-core/config/default.build.options.js @@ -109,6 +109,10 @@ const elementComponents = { file: 'components/settings-view/security-view.js', className: 'SecurityView' }, + 'qr-login-view': { + file: 'components/settings-view/qr-login-view.js', + className: 'QRLoginView' + }, 'notifications-view': { file: 'components/settings-view/notifications-view.js', className: 'NotificationsView' diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index b7f4bec6..cc63254c 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -93,6 +93,11 @@ "settings": "Settings", "account": "Account", "security": "Security", + "qr_login_menu_item": "QR Login", + "qr_login_description_1": "Scan this code to unlock your wallet on other device using the same password which you logged in with.", + "qr_login_description_2": "Choose a password which you will use to unlock your wallet on other device after scanning the QR code.", + "qr_login_button_1": "Show login QR code", + "qr_login_button_2": "Generate login QR code", "notifications": "Notifications", "accountsecurity": "Account Security", "password": "Password", diff --git a/qortal-ui-core/src/components/settings-view/qr-login-view.js b/qortal-ui-core/src/components/settings-view/qr-login-view.js new file mode 100644 index 00000000..606ee323 --- /dev/null +++ b/qortal-ui-core/src/components/settings-view/qr-login-view.js @@ -0,0 +1,140 @@ +import { css, html, LitElement } from 'lit' +import { connect } from 'pwa-helpers' +import { store } from '../../store.js' +import { translate } from 'lit-translate' + +import '@material/mwc-textfield' +import '@material/mwc-icon' +import '@vaadin/password-field/vaadin-password-field.js' +import '../../../../qortal-ui-plugins/plugins/core/components/QortalQrcodeGenerator.js' + +class QRLoginView extends connect(store)(LitElement) { + static get properties() { + return { + theme: { type: String, reflect: true }, + savedWalletDataJson: { type: String }, + translateDescriptionKey: { type: String }, // Description text + translateButtonKey: { type: String }, // Button text + } + } + + static get styles() { + return css` + * { + --lumo-primary-text-color: rgb(0, 167, 245); + --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); + --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); + --lumo-primary-color: hsl(199, 100%, 48%); + --lumo-base-color: var(--white); + --lumo-body-text-color: var(--black); + --lumo-secondary-text-color: var(--sectxt); + --lumo-contrast-60pct: var(--vdicon); + } + + .center-box { + position: relative; + top: 45%; + left: 50%; + transform: translate(-50%, 0%); + text-align: center; + } + + .q-button { + display: inline-flex; + flex-direction: column; + justify-content: center; + align-content: center; + border: none; + border-radius: 20px; + padding-left: 25px; + padding-right: 25px; + color: white; + background: #03a9f4; + width: 50%; + font-size: 17px; + cursor: pointer; + height: 50px; + margin-top: 1rem; + text-transform: uppercase; + text-decoration: none; + transition: all .2s; + position: relative; + } + + .q-button.outlined { + background: unset; + border: 1px solid #03a9f4; + } + + :host([theme="light"]) .q-button.outlined { + color: #03a9f4; + } + + #qr-toggle-button { + margin-left: 12px; + } + + #login-qr-code { + margin: auto; + } + ` + } + + constructor() { + super() + this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + this.translateDescriptionKey = 'settings.qr_login_description_' + (this.isWalletStored() ? '1' : '2') + this.translateButtonKey = 'settings.qr_login_button_' + (this.isWalletStored() ? '1' : '2') + } + + render() { + return html` +
+ ${translate(this.translateDescriptionKey)} +
+