standardizing key generation
This commit is contained in:
sairaj mote
parent
c46a53debf
commit
3f50ab3454
37
css/main.css
37
css/main.css
@ -534,39 +534,37 @@ sm-copy {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
#sign_in {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in section,
|
||||
#sign_up section {
|
||||
#sign_in section {
|
||||
margin-top: -6rem;
|
||||
justify-self: center;
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
#sign_in sm-form,
|
||||
#sign_up sm-form {
|
||||
#sign_in sm-form {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
#sign_in header,
|
||||
#sign_up header {
|
||||
#sign_in header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_up header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
#sign_up keys-generator {
|
||||
justify-self: center;
|
||||
width: min(26rem, 100%);
|
||||
margin-top: -4rem;
|
||||
}
|
||||
#sign_up .h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#sign_up .card {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
#sign_up h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#sign_up .warning {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#loading {
|
||||
place-content: center;
|
||||
@ -1215,16 +1213,19 @@ sm-copy {
|
||||
}
|
||||
.interact:not([disabled]),
|
||||
.button:not([disabled]),
|
||||
.button:not(.button--primary),
|
||||
button:not(.button--primary):not([disabled]) {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.interact:not([disabled]):hover,
|
||||
.button:not([disabled]):hover,
|
||||
.button:not(.button--primary):hover,
|
||||
button:not(.button--primary):not([disabled]):hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button--primary {
|
||||
transition: filter 0.3s;
|
||||
background-color: var(--accent-color) !important;
|
||||
}
|
||||
.button--primary:hover {
|
||||
filter: brightness(120%);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -500,8 +500,7 @@ sm-copy {
|
||||
}
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
#sign_in {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
section {
|
||||
@ -517,19 +516,19 @@ sm-copy {
|
||||
}
|
||||
}
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
keys-generator {
|
||||
justify-self: center;
|
||||
width: min(26rem, 100%);
|
||||
margin-top: -4rem;
|
||||
}
|
||||
.h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.warning {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
#loading {
|
||||
place-content: center;
|
||||
@ -1160,6 +1159,7 @@ sm-copy {
|
||||
}
|
||||
.interact:not([disabled]),
|
||||
.button:not([disabled]),
|
||||
.button:not(.button--primary),
|
||||
button:not(.button--primary):not([disabled]) {
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
@ -1168,6 +1168,7 @@ sm-copy {
|
||||
}
|
||||
.button--primary {
|
||||
transition: filter 0.3s;
|
||||
background-color: var(--accent-color) !important;
|
||||
&:hover {
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
98
index.html
98
index.html
@ -99,25 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="grid">
|
||||
<h1 class="h2">FLO credentials</h1>
|
||||
<p>Get your FLO credentials to use RanchiMall CC and all RanchiMall FLO apps. </p>
|
||||
<div class="grid gap-1-5 card">
|
||||
<div class="grid gap-0-5">
|
||||
<h5>FLO ID</h5>
|
||||
<sm-copy id="generated_flo_id"></sm-copy>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h5>Private key</h5>
|
||||
<sm-copy id="generated_private_key"></sm-copy>
|
||||
</div>
|
||||
</div>
|
||||
<sm-button id="sign_up_button" variant="primary">Sign in with these credentials</sm-button>
|
||||
<strong class="warning">
|
||||
Keep your private key secure and don't share with anyone.
|
||||
Once lost there is no way to recover private key.
|
||||
</strong>
|
||||
</section>
|
||||
<keys-generator id="keys_generator"></keys-generator>
|
||||
</article>
|
||||
<article id="loading" class="page page-layout">
|
||||
<sm-spinner></sm-spinner>
|
||||
@ -1015,9 +997,7 @@
|
||||
targetPage = 'sign_in'
|
||||
break;
|
||||
case 'sign_up':
|
||||
const { floID, privKey } = floCrypto.generateNewID()
|
||||
getRef('generated_flo_id').value = floID
|
||||
getRef('generated_private_key').value = privKey
|
||||
getRef('keys_generator').generateKeys()
|
||||
targetPage = 'sign_up'
|
||||
break;
|
||||
case 'home':
|
||||
@ -1183,7 +1163,77 @@
|
||||
})
|
||||
return anime
|
||||
}
|
||||
const generateKeys = document.createElement('template')
|
||||
generateKeys.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>
|
||||
`
|
||||
window.customElements.define('keys-generator', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.appendChild(generateKeys.content.cloneNode(true));
|
||||
}
|
||||
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 = ''
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// JS Diff
|
||||
@ -2681,8 +2731,8 @@
|
||||
showPage('loading')
|
||||
}
|
||||
getRef('sign_up_button').onclick = () => {
|
||||
resolve(getRef('generated_private_key').value.trim())
|
||||
getRef('generated_private_key').value = ''
|
||||
resolve(getRef('keys_generator').keys.privKey);
|
||||
getRef('keys_generator').clearKeys();
|
||||
showPage('loading')
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user