RanchiMall/flowallet-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added retrieve FLO ID feature

Browse Source
This commit is contained in:
sairaj mote 2022-03-10 15:57:06 +05:30
parent 2d5194d98a
commit 29e31eae9b
4 changed files with 87 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -672,13 +672,13 @@ textarea {
margin-bottom: 1rem !important;
}
#get_private_key_field label {
.password-field label {
display: flex;
}
#get_private_key_field label input:checked ~ .visible {
.password-field label input:checked ~ .visible {
display: none;
}
#get_private_key_field label input:not(:checked) ~ .invisible {
.password-field label input:not(:checked) ~ .invisible {
display: none;
}
@ -1056,8 +1056,9 @@ textarea {
bottom: auto;
}
#create_flo_id_popup {
--width: 28rem;
#create_flo_id_popup,
#retrieve_flo_id_popup {
--width: 26rem;
}
#send sm-form::part(form) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
css/main.scss
View File

@ -632,7 +632,7 @@ textarea {
margin-bottom: 1rem !important;
}
#get_private_key_field {
.password-field {
label {
display: flex;
input:checked ~ .visible {
@ -988,8 +988,9 @@ textarea {
bottom: auto;
}
}
#create_flo_id_popup {
--width: 28rem;
#create_flo_id_popup,
#retrieve_flo_id_popup {
--width: 26rem;
}
#send {
sm-form::part(form) {

84
index.html
View File

@ -77,7 +77,7 @@
<div id="home" class="page flex h-100">
<div class="flex direction-column gap-2 h-100">
<section class="flex">
<button id="GenNewAddrBtn" class="button primary-action interact">
<button id="gen_new_addr_btn" class="button primary-action interact">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
@ -92,6 +92,16 @@
</svg>
Generate FLO ID
</button>
<button id="retrieve_addr_btn" class="button primary-action interact"
onclick="showPopup('retrieve_flo_id_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" />
</svg>
Retrieve FLO ID
</button>
</section>
<section class="flex direction-column h-100">
<div class="grid align-center gap-0-5">
@ -503,6 +513,53 @@
<div id="created_flo_id"></div>
</div>
</sm-popup>
<sm-popup id="retrieve_flo_id_popup">
<header slot="header" class="popup__header">
<div class="flex align-center">
<button class="popup__header__close" onclick="hidePopup()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</svg>
</button>
</div>
</header>
<section class="grid gap-1-5">
<div class="grid gap-0-5">
<h4>Forgot FLO ID?</h4>
<p>In case of FLO ID being lost and you have the private key associated with it. You can recover it.</p>
</div>
<sm-form>
<div id="recovered_flo_id_wrapper" class="hide">
<h5>Recovered FLO ID</h5>
<sm-copy id="recovered_flo_id"></sm-copy>
</div>
<sm-input id="retrieve_flo_id_field" class="password-field" type="password"
error-text="Invalid private key" placeholder="Private key" required autofocus>
<label slot="right" class="interact">
<input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<title>Hide password</title>
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
<path
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
</svg>
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<title>Show password</title>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
</svg>
</label>
</sm-input>
<button class="button button--primary cta" type="submit" onclick="retrieveFloId()">Recover</button>
</sm-form>
</section>
</sm-popup>
<sm-popup id="saved_ids_popup">
<header slot="header" class="popup__header">
<div class="grid gap-1">
@ -551,8 +608,7 @@
<sm-form>
<sm-input id="get_private_key_field" type="password" required autofocus>
<label slot="right" class="interact">
<input type="checkbox" id="private_key_visibility" class="hide" readonly
onchange="togglePrivateKeyVisibility()">
<input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<title>Hide password</title>
@ -597,7 +653,7 @@
</div>
</sm-popup>
<template id="saved_id_template">
<li class="saved-id grid interact">
<li class="saved-id grid interact" tabindex="0">
<button class="interact edit-saved icon-only" title="Edit name">
<div class="saved-id__initial"></div>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@ -757,6 +813,9 @@
getRef('confirm_transaction_button').classList.remove('hide')
getRef('confirm_transaction_button').nextElementSibling.classList.add('hide')
break;
case 'retrieve_flo_id_popup':
getRef('recovered_flo_id_wrapper').classList.add('hide')
break;
}
})
@ -1354,7 +1413,7 @@
})
})
getRef('GenNewAddrBtn').addEventListener('click', () => {
getRef('gen_new_addr_btn').addEventListener('click', () => {
const { floID, privKey } = floCrypto.generateNewID(),
card = createElement('div', {
className: 'generated-id-card',
@ -1512,9 +1571,18 @@
})
}
function togglePrivateKeyVisibility() {
getRef('get_private_key_field').type = getRef('get_private_key_field').type === 'password' ? 'text' : 'password';
getRef('get_private_key_field').focusIn()
function togglePrivateKeyVisibility(input) {
const target = input.closest('sm-input')
target.type = target.type === 'password' ? 'text' : 'password';
target.focusIn()
}
function retrieveFloId() {
const privKey = getRef('retrieve_flo_id_field').value.trim()
floWebWallet.recoverAddr(privKey).then(({ floID }) => {
getRef('recovered_flo_id_wrapper').classList.remove('hide')
getRef('recovered_flo_id').value = floID
})
}
function sendMessage() {