qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added auth modal to q-apps

Browse Source
This commit is contained in:
Justin Ferrari 2023-02-24 17:46:43 -05:00
parent 353943cbf9
commit 21951f3ebe
5 changed files with 103 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

16
qortal-ui-core/src/redux/app/actions/app-core.js
View File

@ -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,

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

@ -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'

20
qortal-ui-core/src/redux/app/app-reducer.js
View File

@ -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,

69
qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
View File

@ -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(
actions.GET_USER_ACCOUNT
);
if (res1.action === 'accept') {
let skip = false;
if (window.parent.reduxStore.getState().app.qAPPAutoAuth) {
skip = true;
}
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;