Added auth modal to q-apps

qortal-ui-core/src/components/login-view/login-view.js

@@ -14,14 +14,15 @@ import './login-section.js'
 import '../qort-theme-toggle.js'
 
 import settings from '../../functional-components/settings-page.js'
-import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen } from '../../redux/app/app-actions.js'
+import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth } from '../../redux/app/app-actions.js'
 
 window.reduxStore = store
 window.reduxAction = {
     addAutoLoadImageChat: addAutoLoadImageChat,
     removeAutoLoadImageChat: removeAutoLoadImageChat,
-    addChatLastSeen: addChatLastSeen
+    addChatLastSeen: addChatLastSeen,
-
+    allowQAPPAutoAuth: allowQAPPAutoAuth,
+    removeQAPPAutoAuth: removeQAPPAutoAuth
 }
 
 const animationDuration = 0.7 // Seconds

qortal-ui-core/src/redux/app/actions/app-core.js

@@ -1,5 +1,5 @@
 // Core App Actions here...
-import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from '../app-action-types.js'
 
 export const doUpdateBlockInfo = (blockObj) => {
     return (dispatch, getState) => {
@@ -120,6 +120,20 @@ export const removeAutoLoadImageChat = (payload) => {
     }
 }
 
+export const allowQAPPAutoAuth = (payload) => {
+    return {
+        type: ALLOW_QAPP_AUTO_AUTH,
+        payload
+    }
+}
+
+export const removeQAPPAutoAuth = (payload) => {
+    return {
+        type: REMOVE_QAPP_AUTO_AUTH,
+        payload
+    }
+}
+
 export const setChatLastSeen = (payload) => {
     return {
         type: SET_CHAT_LAST_SEEN,

qortal-ui-core/src/redux/app/app-action-types.js

@@ -22,5 +22,7 @@ export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH'
 export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH'
 export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT'
 export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT'
+export const ALLOW_QAPP_AUTO_AUTH = 'ALLOW_QAPP_AUTO_AUTH'
+export const REMOVE_QAPP_AUTO_AUTH = 'REMOVE_QAPP_AUTO_AUTH'
 export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
 export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'

qortal-ui-core/src/redux/app/app-reducer.js

@@ -1,6 +1,6 @@
 // Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
 import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
-import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from './app-action-types.js'
+import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from './app-action-types.js'
 import { initWorkersReducer } from './reducers/init-workers.js'
 import { loginReducer } from './reducers/login-reducer.js'
 import { setNode, addNode } from './reducers/manage-node.js'
@@ -50,6 +50,7 @@ const INITIAL_STATE = {
         elementId: ''
     },
     autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [],
+    qAPPAutoAuth: loadStateFromLocalStorage('qAPPAutoAuth') || false,
     chatLastSeen: []
 }
 
@@ -175,6 +176,23 @@ export default (state = INITIAL_STATE, action) => {
                 autoLoadImageChats: updatedState
          }
         }
+
+        case ALLOW_QAPP_AUTO_AUTH: {
+            saveStateToLocalStorage("qAPPAutoAuth", true)
+            return {
+                ...state,
+                qAPPAutoAuth: action.payload
+            }
+        }
+
+        case REMOVE_QAPP_AUTO_AUTH: {
+            saveStateToLocalStorage("qAPPAutoAuth", false)
+            return {
+                ...state,
+                qAPPAutoAuth: action.payload
+            }
+        }
+
         case SET_CHAT_LAST_SEEN: {
             return {
                 ...state,

qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js

@@ -15,6 +15,7 @@ registerTranslateConfig({
 
 import '@material/mwc-button';
 import '@material/mwc-icon';
+import '@material/mwc-checkbox'
 import WebWorker from 'web-worker:./computePowWorkerFile.src.js';
 import WebWorkerChat from 'web-worker:./computePowWorker.src.js';
 import { publishData } from '../../../utils/publish-image.js';
@@ -231,7 +232,6 @@ class WebBrowser extends LitElement {
 	}
 
 	render() {
-		console.log(1, "browser page here");
 		return html`
     		<div id="websitesWrapper" style="width:auto; padding:10px; background: var(--white);">
     			<div class="layout horizontal center">
@@ -457,10 +457,21 @@ class WebBrowser extends LitElement {
 			switch (data.action) {
 				case 'GET_USER_ACCOUNT':
 				case actions.GET_USER_ACCOUNT:
-					const res1 = await showModalAndWait(
+					let skip = false;
-						actions.GET_USER_ACCOUNT
+					if (window.parent.reduxStore.getState().app.qAPPAutoAuth) {
-					);
+						skip = true;
-					if (res1.action === 'accept') {
+					}
+					let res1;
+					if (!skip) {
+						 res1 = await showModalAndWait(
+							actions.GET_USER_ACCOUNT,
+							{
+								service: this.service,
+								name: this.name
+							}
+						);
+					};
+					if ((res1 && res1.action === 'accept') || skip) {
 						let account = {};
 						account['address'] = this.selectedAddress.address;
 						account['publicKey'] =
@@ -1439,7 +1450,21 @@ async function showModalAndWait(type, data) {
 			` <div class="modal my-modal-class">
             <div class="modal-content">
                 <div class="modal-body">
-                    ${type === actions.GET_USER_ACCOUNT ? `<p class="modal-paragraph">${get("browserpage.bchange18")}</p>` : ''}
+                    ${type === actions.GET_USER_ACCOUNT ? `
+										<div class="modal-subcontainer">
+											<p class="modal-paragraph">${`${data.service} ${data.name} ${get("browserpage.bchange18")}`}</p>
+											<p class="modal-paragraph">${get("browserpage.bchange24")} ${data.service}</p>
+											<p class="modal-paragraph">${get("browserpage.bchange25")}</p>
+											<div class="checkbox-row">
+											<label for="authButton" id="authButtonLabel">
+												${get('browserpage.bchange26')}
+											</label>
+											<mwc-checkbox style="margin-right: -15px;"  id="authButton" 
+											?checked=${window.parent.reduxStore.getState().app.qAPPAutoAuth}>
+												</mwc-checkbox>
+											</div>
+										</div>
+										` : ''}
                     ${type === actions.PUBLISH_QDN_RESOURCE ? `<p class="modal-paragraph">${get("browserpage.bchange19")}</p>` : ''}
                     ${type === actions.GET_WALLET_BALANCE ? `<p class="modal-paragraph">${get("browserpage.bchange20")}</p>` : ''}
                     ${type === actions.SEND_CHAT_MESSAGE ? `<p class="modal-paragraph">${get("browserpage.bchange22")}</p>` : ''}
@@ -1462,6 +1487,11 @@ async function showModalAndWait(type, data) {
 			}
 			resolve({ action: 'accept', userData });
 		});
+		const modalContent = modal.querySelector('.modal-content');
+		modalContent.addEventListener('click', (e) => {
+			e.stopPropagation();
+			return;
+		});
 		const backdropClick = document.getElementById('backdrop');
 		backdropClick.addEventListener('click', () => {
 			if (modal.parentNode === document.body) {
@@ -1476,6 +1506,18 @@ async function showModalAndWait(type, data) {
 			}
 			resolve({ action: 'reject' });
 		});
+		const labelButton = modal.querySelector('#authButtonLabel');
+		labelButton.addEventListener('click', () => {
+			this.shadowRoot.getElementById('authButton').click();
+		})
+		const checkbox = modal.querySelector('#authButton');
+		checkbox.addEventListener('click', (e) => {
+				if (e.target.checked) {
+					window.parent.reduxStore.dispatch( window.parent.reduxAction.removeQAPPAutoAuth(false))
+					return
+			}
+				window.parent.reduxStore.dispatch( window.parent.reduxAction.allowQAPPAutoAuth(true))
+		})
 	});
 }
 
@@ -1553,6 +1595,13 @@ justify-content: space-between;
 padding: 25px;
 }
 
+.modal-subcontainer {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 15px;
+}
+
 .modal-paragraph {
 font-family: Roboto, sans-serif;
 font-size: 18px;
@@ -1562,6 +1611,14 @@ color: black;
 margin: 0;
 }
 
+.checkbox-row {
+	display: flex;
+	align-items: center;
+	font-family: Montserrat, sans-serif;
+	font-weight: 600;
+	color: black;
+}
+
 .modal-buttons {
 display: flex;
 justify-content: space-between;