Adding Auth for q-apps

qortal-ui-core/src/components/settings-view/security-view.js

@@ -1,8 +1,10 @@
 import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../../store.js'
+import { allowQAPPAutoAuth, removeQAPPAutoAuth } from '../../redux/app/app-actions.js'
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
+import '@material/mwc-checkbox'
 import '@material/mwc-textfield'
 import '@material/mwc-icon'
 import '@vaadin/password-field/vaadin-password-field.js'
@@ -27,6 +29,10 @@ class SecurityView extends connect(store)(LitElement) {
                 --lumo-body-text-color: var(--black);
                 --lumo-secondary-text-color: var(--sectxt);
                 --lumo-contrast-60pct: var(--vdicon);
+                --mdc-checkbox-unchecked-color: var(--black);
+                --mdc-theme-on-surface: var(--black);
+                --mdc-checkbox-disabled-color: var(--black);
+                --mdc-checkbox-ink-color: var(--black);
             }
 
             .center-box {
@@ -37,6 +43,16 @@ class SecurityView extends connect(store)(LitElement) {
                 text-align: center;
             }
 
+	      .checkbox-row {
+                position: relative;
+		    display: flex;
+		    align-items: center;
+		    align-content: center;
+		    font-family: Montserrat, sans-serif;
+		    font-weight: 600;
+		    color: var(--black);
+	      }
+
             .q-button {
                 display: inline-flex;
                 flex-direction: column;
@@ -92,6 +108,13 @@ class SecurityView extends connect(store)(LitElement) {
                             <div @click=${() => this.checkForDownload()} class="q-button"> ${translate("settings.download")} </div>
                         </div>
                     </div>
+                    <hr style="margin-top: 20px;">
+                        <div class="checkbox-row">
+                            <label for="authButton" id="authButtonLabel" style="color: var(--black);">
+                                ${get('browserpage.bchange26')}
+                            </label>
+                            <mwc-checkbox style="margin-right: -15px;" id="authButton" @click=${(e) => this.checkForAuth(e)} ?checked=${store.getState().app.qAPPAutoAuth}></mwc-checkbox>
+                    </div>
                 </div>
         `
     }
@@ -99,6 +122,14 @@ class SecurityView extends connect(store)(LitElement) {
     stateChanged(state) {
     }
 
+    checkForAuth(e) {
+        if (e.target.checked) {
+           store.dispatch(removeQAPPAutoAuth(false))
+        } else {
+           store.dispatch(allowQAPPAutoAuth(true))
+        }
+    }
+
     checkForDownload() {
         const checkPass = this.shadowRoot.getElementById('downloadBackupPassword').value
         if (checkPass === '') {