feat: add browser permission modal
This commit is contained in:
parent
10f8eb854b
commit
4d2a845eda
|
@ -0,0 +1,191 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtQuick.Controls 2.13
|
||||||
|
import QtQuick.Layouts 1.13
|
||||||
|
import "../../../shared"
|
||||||
|
import "../../../imports"
|
||||||
|
|
||||||
|
Popup {
|
||||||
|
property var currentTab
|
||||||
|
property var request: ({"hostname": "", "title": "", "permission": ""})
|
||||||
|
property string currentAddress: ""
|
||||||
|
|
||||||
|
id: root
|
||||||
|
modal: true
|
||||||
|
Overlay.modal: Rectangle {
|
||||||
|
color: "#60000000"
|
||||||
|
}
|
||||||
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||||
|
width: 360
|
||||||
|
height: 480
|
||||||
|
background: Rectangle {
|
||||||
|
color: Style.current.background
|
||||||
|
radius: 8
|
||||||
|
}
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
function postMessage(isAllowed){
|
||||||
|
request.isAllowed = isAllowed;
|
||||||
|
provider.web3Response(web3Provider.postMessage(JSON.stringify(request)));
|
||||||
|
}
|
||||||
|
|
||||||
|
onClosed: {
|
||||||
|
root.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: design required
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Style.current.smallPadding
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Style.current.smallPadding
|
||||||
|
spacing: Style.current.bigPadding
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 90
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
property int imgSize: 40
|
||||||
|
|
||||||
|
id: logoHeader
|
||||||
|
spacing: Style.current.halfPadding
|
||||||
|
width: 176
|
||||||
|
height: imgSize
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||||
|
|
||||||
|
FaviconImage {
|
||||||
|
id: siteImg
|
||||||
|
width: logoHeader.imgSize
|
||||||
|
height: logoHeader.imgSize
|
||||||
|
}
|
||||||
|
|
||||||
|
SVGImage {
|
||||||
|
id: dots1
|
||||||
|
source: "../../img/dots-icon.svg"
|
||||||
|
width: 20
|
||||||
|
height: 4
|
||||||
|
}
|
||||||
|
|
||||||
|
RoundedIcon {
|
||||||
|
source: "../../img/check.svg"
|
||||||
|
iconColor: Style.current.primary
|
||||||
|
color: Style.current.secondaryBackground
|
||||||
|
width: 24
|
||||||
|
height: 24
|
||||||
|
}
|
||||||
|
|
||||||
|
SVGImage {
|
||||||
|
id: dots2
|
||||||
|
source: "../../img/dots-icon.svg"
|
||||||
|
width: 20
|
||||||
|
height: 4
|
||||||
|
}
|
||||||
|
|
||||||
|
RoundedIcon {
|
||||||
|
source: "../../img/walletIcon.svg"
|
||||||
|
iconHeight: 18
|
||||||
|
iconWidth: 18
|
||||||
|
iconColor: Style.current.primary // TODO use wallet color
|
||||||
|
color: Style.current.background
|
||||||
|
width: logoHeader.imgSize
|
||||||
|
height: logoHeader.imgSize
|
||||||
|
border.width: 1
|
||||||
|
border.color: Style.current.border
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: titleText
|
||||||
|
text: qsTr('"%1" woudl like to connect to').arg(request.title)
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
font.weight: Font.Bold
|
||||||
|
font.pixelSize: 17
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
AccountSelector {
|
||||||
|
id: accountSelector
|
||||||
|
label: ""
|
||||||
|
width: 190
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||||
|
showAccountDetails: false
|
||||||
|
accounts: walletModel.accounts
|
||||||
|
selectedAccount: walletModel.currentAccount
|
||||||
|
currency: walletModel.defaultCurrency
|
||||||
|
reset: function() {
|
||||||
|
accounts = Qt.binding(function() { return walletModel.accounts })
|
||||||
|
selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
|
||||||
|
}
|
||||||
|
onSelectedAccountChanged: {
|
||||||
|
if (!root.currentAddress) {
|
||||||
|
// We just set the account for the first time. Nothing to do here
|
||||||
|
root.currentAddress = selectedAccount.address
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (root.currentAddress === selectedAccount.address) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
root.currentAddress = selectedAccount.address
|
||||||
|
web3Provider.dappsAddress = selectedAccount.address;
|
||||||
|
web3Provider.clearPermissions();
|
||||||
|
if (selectField.menu.currentIndex !== -1) {
|
||||||
|
walletModel.setCurrentAccountByIndex(selectField.menu.currentIndex-1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: infoText
|
||||||
|
text: {
|
||||||
|
switch(request.permission){
|
||||||
|
case Constants.permission_web3: return qsTr("Allowing authorizes this DApp to retrieve your wallet address and enable Web3");
|
||||||
|
case Constants.permission_contactCode: return qsTr("Granting access authorizes this DApp to retrieve your chat key");
|
||||||
|
default: return qsTr("Unknown permission: " + request.permission);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Layout.fillWidth: true
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||||
|
font.pixelSize: 15
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
color: Style.current.secondaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
Row {
|
||||||
|
width: childrenRect.width
|
||||||
|
spacing: Style.current.padding
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||||
|
|
||||||
|
StyledButton {
|
||||||
|
btnColor: Utils.setColorAlpha(Style.current.danger, 0.1)
|
||||||
|
textColor: Style.current.danger
|
||||||
|
width: 155
|
||||||
|
label: qsTr("Deny")
|
||||||
|
onClicked: {
|
||||||
|
postMessage(false);
|
||||||
|
root.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledButton {
|
||||||
|
btnColor: Utils.setColorAlpha(Style.current.success, 0.1)
|
||||||
|
textColor: Style.current.success
|
||||||
|
width: 155
|
||||||
|
label: qsTr("Allow")
|
||||||
|
onClicked: {
|
||||||
|
postMessage(true);
|
||||||
|
root.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*##^##
|
||||||
|
Designer {
|
||||||
|
D{i:0;formeditorColor:"#ffffff"}
|
||||||
|
}
|
||||||
|
##^##*/
|
|
@ -43,92 +43,10 @@ Rectangle {
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
property Component accessDialogComponent: ModalPopup {
|
property Component accessDialogComponent: BrowserConnectionModal {
|
||||||
id: accessDialog
|
currentTab: tabs.getTab(tabs.currentIndex) && tabs.getTab(tabs.currentIndex).item
|
||||||
|
x: browserWindow.width - width - Style.current.halfPadding
|
||||||
property var request: ({"hostname": "", "title": "", "permission": ""})
|
y: browserHeader.y + browserHeader.height + Style.current.halfPadding
|
||||||
property bool interactedWith: false
|
|
||||||
|
|
||||||
function postMessage(isAllowed){
|
|
||||||
interactedWith = true
|
|
||||||
request.isAllowed = isAllowed;
|
|
||||||
provider.web3Response(_web3Provider.postMessage(JSON.stringify(request)));
|
|
||||||
}
|
|
||||||
|
|
||||||
onClosed: {
|
|
||||||
if(!interactedWith){
|
|
||||||
postMessage(false);
|
|
||||||
}
|
|
||||||
accessDialog.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: design required
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: siteName
|
|
||||||
text: request.title
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: Style.current.padding
|
|
||||||
width: parent.width
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: hostName
|
|
||||||
text: request.hostname
|
|
||||||
anchors.top: siteName.bottom
|
|
||||||
anchors.topMargin: Style.current.padding
|
|
||||||
width: parent.width
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: permission
|
|
||||||
text: qsTr("Permission requested: %1").arg(request.permission)
|
|
||||||
anchors.top: hostName.bottom
|
|
||||||
anchors.topMargin: Style.current.padding
|
|
||||||
width: parent.width
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: description
|
|
||||||
anchors.top: permission.bottom
|
|
||||||
anchors.topMargin: Style.current.padding
|
|
||||||
width: parent.width
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
text: {
|
|
||||||
switch(request.permission){
|
|
||||||
case Constants.permission_web3: return qsTr("Allowing authorizes this DApp to retrieve your wallet address and enable Web3");
|
|
||||||
case Constants.permission_contactCode: return qsTr("Granting access authorizes this DApp to retrieve your chat key");
|
|
||||||
default: return qsTr("Unknown permission: " + request.permission);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledButton {
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: Style.current.padding
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: Style.current.padding
|
|
||||||
label: qsTr("Allow")
|
|
||||||
onClicked: {
|
|
||||||
postMessage(true);
|
|
||||||
accessDialog.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledButton {
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: Style.current.padding
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: Style.current.padding
|
|
||||||
label: qsTr("Deny")
|
|
||||||
onClicked: {
|
|
||||||
postMessage(false);
|
|
||||||
accessDialog.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO we'll need a new dialog at one point because this one is not using the same call, but it's good for now
|
// TODO we'll need a new dialog at one point because this one is not using the same call, but it's good for now
|
||||||
|
@ -528,19 +446,12 @@ Rectangle {
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
FaviconImage {
|
||||||
id: faviconImage
|
id: faviconImage
|
||||||
|
currentTab: tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
|
||||||
anchors.verticalCenter: parent.verticalCenter;
|
anchors.verticalCenter: parent.verticalCenter;
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.leftMargin: Style.current.halfPadding
|
anchors.leftMargin: Style.current.halfPadding
|
||||||
width: 24
|
|
||||||
height: 24
|
|
||||||
sourceSize: Qt.size(width, height)
|
|
||||||
// TODO find a better default favicon
|
|
||||||
source: {
|
|
||||||
const thisTab = tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
|
|
||||||
return thisTab && !!thisTab.icon.toString() ? thisTab.icon : "../../img/globe.svg"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
|
|
|
@ -122,6 +122,9 @@ Popup {
|
||||||
accountSelectorRow.currentAddress = selectedAccount.address
|
accountSelectorRow.currentAddress = selectedAccount.address
|
||||||
web3Provider.dappsAddress = selectedAccount.address;
|
web3Provider.dappsAddress = selectedAccount.address;
|
||||||
web3Provider.clearPermissions();
|
web3Provider.clearPermissions();
|
||||||
|
if (selectField.menu.currentIndex !== -1) {
|
||||||
|
walletModel.setCurrentAccountByIndex(selectField.menu.currentIndex-1)
|
||||||
|
}
|
||||||
for (let i = 0; i < tabs.count; ++i){
|
for (let i = 0; i < tabs.count; ++i){
|
||||||
tabs.getTab(i).item.reload();
|
tabs.getTab(i).item.reload();
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import "../../../shared"
|
||||||
|
import "../../../imports"
|
||||||
|
|
||||||
|
Image {
|
||||||
|
property var currentTab
|
||||||
|
|
||||||
|
id: faviconImage
|
||||||
|
width: 24
|
||||||
|
height: 24
|
||||||
|
sourceSize: Qt.size(width, height)
|
||||||
|
// TODO find a better default favicon
|
||||||
|
source: faviconImage.currentTab && !!faviconImage.currentTab.icon.toString() ? faviconImage.currentTab.icon : "../../img/globe.svg"
|
||||||
|
}
|
|
@ -121,9 +121,11 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
|
||||||
!isEmpty(target.path): INSTALLS += target
|
!isEmpty(target.path): INSTALLS += target
|
||||||
|
|
||||||
DISTFILES += \
|
DISTFILES += \
|
||||||
|
app/AppLayouts/Browser/BrowserConnectionModal.qml \
|
||||||
app/AppLayouts/Browser/BrowserHeader.qml \
|
app/AppLayouts/Browser/BrowserHeader.qml \
|
||||||
app/AppLayouts/Browser/BrowserTabs.qml \
|
app/AppLayouts/Browser/BrowserTabs.qml \
|
||||||
app/AppLayouts/Browser/BrowserWalletMenu.qml \
|
app/AppLayouts/Browser/BrowserWalletMenu.qml \
|
||||||
|
app/AppLayouts/Browser/FaviconImage.qml \
|
||||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
|
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
|
||||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \
|
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \
|
||||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml \
|
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml \
|
||||||
|
|
|
@ -12,6 +12,7 @@ Item {
|
||||||
property var accounts
|
property var accounts
|
||||||
property var selectedAccount
|
property var selectedAccount
|
||||||
property string currency: "usd"
|
property string currency: "usd"
|
||||||
|
property alias selectField: select
|
||||||
height: select.height +
|
height: select.height +
|
||||||
(selectedAccountDetails.visible ? selectedAccountDetails.height : 0)
|
(selectedAccountDetails.visible ? selectedAccountDetails.height : 0)
|
||||||
// set to asset symbol to display asset's balance top right
|
// set to asset symbol to display asset's balance top right
|
||||||
|
|
Loading…
Reference in New Issue