Added warning for no support of IDB
This commit is contained in:
sairaj mote
parent
b7ca2e1519
commit
419ab86089
141
index.html
141
index.html
@ -18,7 +18,6 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
||||||
<script src="scripts/lib.js"></script>
|
<script src="scripts/lib.js"></script>
|
||||||
<script src="scripts/floCrypto.js"></script>
|
<script src="scripts/floCrypto.js"></script>
|
||||||
<script src="scripts/btcOperator.js"></script>
|
<script src="scripts/btcOperator.js"></script>
|
||||||
@ -60,6 +59,8 @@
|
|||||||
let isBrave = navigator.brave !== undefined
|
let isBrave = navigator.brave !== undefined
|
||||||
if (error === 'Cloud offline') {
|
if (error === 'Cloud offline') {
|
||||||
document.body.prepend(document.createElement('adblocker-warning'))
|
document.body.prepend(document.createElement('adblocker-warning'))
|
||||||
|
} else if (error === "App database initiation failed") {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
notify(error, "error")
|
notify(error, "error")
|
||||||
}
|
}
|
||||||
@ -70,6 +71,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-theme="dark" onload="onLoadStartUp()" class="hidden">
|
<body data-theme="dark" onload="onLoadStartUp()" class="hidden">
|
||||||
|
<idb-support></idb-support>
|
||||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||||
<sm-popup id="confirmation_popup">
|
<sm-popup id="confirmation_popup">
|
||||||
<h4 id="confirm_title"></h4>
|
<h4 id="confirm_title"></h4>
|
||||||
@ -2336,143 +2338,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('keys-generator', class extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.innerHTML = `
|
|
||||||
<style>
|
|
||||||
:host{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.generated-keys-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: rgba(var(--foreground-color), 1);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
#flo_id_warning{
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
#flo_id_warning .icon {
|
|
||||||
height: 3rem;
|
|
||||||
width: 3rem;
|
|
||||||
padding: 0.8rem;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #ffc107;
|
|
||||||
border-radius: 3rem;
|
|
||||||
fill: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<section class="grid gap-1-5">
|
|
||||||
<div id="flo_id_warning" class="flex gap-1">
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<strong>
|
|
||||||
<h3> Keep your keys safe! </h3>
|
|
||||||
</strong>
|
|
||||||
<p>Don't share with anyone. Once lost private key can't be recovered.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-1-5 generated-keys-wrapper">
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<h5>FLO address</h5>
|
|
||||||
<sm-copy id="generated_flo_address"></sm-copy>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<h5>Private key</h5>
|
|
||||||
<sm-copy id="generated_private_key"></sm-copy>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>
|
|
||||||
<p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>
|
|
||||||
</section>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
get keys() {
|
|
||||||
return {
|
|
||||||
floID: this.querySelector('#generated_flo_address').value,
|
|
||||||
privKey: this.querySelector('#generated_private_key').value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
generateKeys() {
|
|
||||||
const { floID, privKey } = floCrypto.generateNewID()
|
|
||||||
this.querySelector('#generated_flo_address').value = floID
|
|
||||||
this.querySelector('#generated_private_key').value = privKey
|
|
||||||
}
|
|
||||||
clearKeys() {
|
|
||||||
this.querySelector('#generated_flo_address').value = ''
|
|
||||||
this.querySelector('#generated_private_key').value = ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const adBlockerWarning = document.createElement('template')
|
|
||||||
adBlockerWarning.innerHTML = `
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
:host{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-content: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 50;
|
|
||||||
background-color: rgba(var(--foreground-color), 1);
|
|
||||||
}
|
|
||||||
#adblocker_warning {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
h1{
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
font-size: 0.9rem;
|
|
||||||
max-width: 65ch;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: rgba(var(--text-color), 0.9);
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
height: 4rem;
|
|
||||||
width: 4rem;
|
|
||||||
fill: #ffc107;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<article id="adblocker_warning"></article>
|
|
||||||
`;
|
|
||||||
window.customElements.define('adblocker-warning', class extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.attachShadow({ mode: 'open' });
|
|
||||||
this.shadowRoot.appendChild(adBlockerWarning.content.cloneNode(true));
|
|
||||||
}
|
|
||||||
connectedCallback() {
|
|
||||||
const isBrave = navigator.brave !== undefined
|
|
||||||
this.shadowRoot.querySelector('#adblocker_warning').innerHTML = `
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
|
|
||||||
<h1>Ad-Blocker Detected!</h1>
|
|
||||||
<p>
|
|
||||||
Please disable your ad-blocker for optimal experience. Our app doesn't show ads or track activity.
|
|
||||||
</p>
|
|
||||||
${isBrave ? `<strong>If you have enabled Brave shield then disable it also.</strong>` : ''}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -163,3 +163,225 @@ customElements.define('color-grid',
|
|||||||
this.container.removeEventListener('change', this.handleChange)
|
this.container.removeEventListener('change', this.handleChange)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
window.customElements.define('keys-generator', class extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.innerHTML = `
|
||||||
|
<style>
|
||||||
|
:host{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.generated-keys-wrapper {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
#flo_id_warning{
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
#flo_id_warning .icon {
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
padding: 0.8rem;
|
||||||
|
overflow: visible;
|
||||||
|
background-color: #ffc107;
|
||||||
|
border-radius: 3rem;
|
||||||
|
fill: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<section class="grid gap-1-5">
|
||||||
|
<div id="flo_id_warning" class="flex gap-1">
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>
|
||||||
|
<div class="grid gap-0-5">
|
||||||
|
<strong>
|
||||||
|
<h3> Keep your keys safe! </h3>
|
||||||
|
</strong>
|
||||||
|
<p>Don't share with anyone. Once lost private key can't be recovered.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-1-5 generated-keys-wrapper">
|
||||||
|
<div class="grid gap-0-5">
|
||||||
|
<h5>FLO address</h5>
|
||||||
|
<sm-copy id="generated_flo_address"></sm-copy>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-0-5">
|
||||||
|
<h5>Private key</h5>
|
||||||
|
<sm-copy id="generated_private_key"></sm-copy>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>
|
||||||
|
<p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
get keys() {
|
||||||
|
return {
|
||||||
|
floID: this.querySelector('#generated_flo_address').value,
|
||||||
|
privKey: this.querySelector('#generated_private_key').value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
generateKeys() {
|
||||||
|
const { floID, privKey } = floCrypto.generateNewID()
|
||||||
|
this.querySelector('#generated_flo_address').value = floID
|
||||||
|
this.querySelector('#generated_private_key').value = privKey
|
||||||
|
}
|
||||||
|
clearKeys() {
|
||||||
|
this.querySelector('#generated_flo_address').value = ''
|
||||||
|
this.querySelector('#generated_private_key').value = ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const adBlockerWarning = document.createElement('template')
|
||||||
|
adBlockerWarning.innerHTML = `
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
|
}
|
||||||
|
#adblocker_warning {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.9rem;
|
||||||
|
max-width: 65ch;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba(var(--text-color), 0.9);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
fill: #ffc107;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<article id="adblocker_warning"></article>
|
||||||
|
`;
|
||||||
|
window.customElements.define('adblocker-warning', class extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({ mode: 'open' });
|
||||||
|
this.shadowRoot.appendChild(adBlockerWarning.content.cloneNode(true));
|
||||||
|
}
|
||||||
|
connectedCallback() {
|
||||||
|
const isBrave = navigator.brave !== undefined
|
||||||
|
this.shadowRoot.querySelector('#adblocker_warning').innerHTML = `
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
|
||||||
|
<h1>Ad-Blocker Detected!</h1>
|
||||||
|
<p>
|
||||||
|
Please disable your ad-blocker for optimal experience. Our app doesn't show ads or track activity.
|
||||||
|
</p>
|
||||||
|
${isBrave ? `<strong>If you have enabled Brave shield then disable it also.</strong>` : ''}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const IDBsupport = document.createElement('template')
|
||||||
|
IDBsupport.innerHTML = `
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
|
}
|
||||||
|
#idb_support {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.9rem;
|
||||||
|
max-width: 65ch;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba(var(--text-color), 0.9);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
fill: #ffc107;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<article id="idb_support">
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
|
||||||
|
<h1>Your browser doesn't support IndexedDB</h1>
|
||||||
|
<p>
|
||||||
|
This app uses IndexedDB to store your data locally. Without IndexedDB support this app won't work.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Please use browsers like Chrome, Firefox, Opera, Edge, Safari, Brave, etc.
|
||||||
|
</p>
|
||||||
|
<strong> If you are using Firefox TOR then consider using brave TOR instead. </strong>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
window.customElements.define('idb-support', class extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({ mode: 'open' });
|
||||||
|
this.shadowRoot.appendChild(IDBsupport.content.cloneNode(true));
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
const thisComponent = this;
|
||||||
|
if ('indexedDB' in window) {
|
||||||
|
const request = window.indexedDB.open('testDB', 1);
|
||||||
|
request.onerror = function (event) {
|
||||||
|
// IndexedDB is not allowed or an error occurred
|
||||||
|
console.log('IndexedDB is not allowed or encountered an error.');
|
||||||
|
};
|
||||||
|
request.onsuccess = function (event) {
|
||||||
|
// IndexedDB is allowed and successfully opened the database
|
||||||
|
// thisComponent.remove();
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// IndexedDB is not supported in this browser
|
||||||
|
console.log('IndexedDB is not supported.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user