standardizing key generation
This commit is contained in:
sairaj mote
parent
eaca2bebbc
commit
293c38d162
45
css/main.css
45
css/main.css
@ -820,44 +820,32 @@ ul {
|
|||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sign_in,
|
#sign_in {
|
||||||
|
justify-items: center;
|
||||||
|
align-content: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#sign_in section {
|
||||||
|
margin-top: -8rem;
|
||||||
|
width: min(26rem, 100%);
|
||||||
|
}
|
||||||
|
#sign_in sm-form {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
#sign_up {
|
#sign_up {
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
#sign_in section,
|
#sign_up keys-generator {
|
||||||
#sign_up section {
|
|
||||||
margin-top: -8rem;
|
|
||||||
width: min(26rem, 100%);
|
width: min(26rem, 100%);
|
||||||
|
margin-top: -4rem;
|
||||||
}
|
}
|
||||||
#sign_in sm-form,
|
|
||||||
#sign_up sm-form {
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sign_up .h2 {
|
#sign_up .h2 {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
#task_details {
|
#task_details {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1107,6 +1095,7 @@ ul {
|
|||||||
.active-task .assigned-intern {
|
.active-task .assigned-intern {
|
||||||
background-color: rgba(var(--text-color), 0.03);
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
border: solid 1px rgba(var(--text-color), 0.2);
|
border: solid 1px rgba(var(--text-color), 0.2);
|
||||||
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding {
|
.padding {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -783,11 +783,11 @@ ul {
|
|||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
#sign_in,
|
#sign_in {
|
||||||
#sign_up {
|
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
section {
|
section {
|
||||||
margin-top: -8rem;
|
margin-top: -8rem;
|
||||||
width: min(26rem, 100%);
|
width: min(26rem, 100%);
|
||||||
@ -799,27 +799,16 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#sign_up {
|
#sign_up {
|
||||||
|
justify-items: center;
|
||||||
|
align-content: center;
|
||||||
|
keys-generator {
|
||||||
|
width: min(26rem, 100%);
|
||||||
|
margin-top: -4rem;
|
||||||
|
}
|
||||||
.h2 {
|
.h2 {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.generated-keys-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: rgba(var(--foreground-color), 1);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
#flo_id_warning {
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
.icon {
|
|
||||||
height: 3rem;
|
|
||||||
width: 3rem;
|
|
||||||
padding: 0.8rem;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #ffc107;
|
|
||||||
border-radius: 3rem;
|
|
||||||
fill: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#task_details {
|
#task_details {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -1075,6 +1064,7 @@ ul {
|
|||||||
.assigned-intern {
|
.assigned-intern {
|
||||||
background-color: rgba(var(--text-color), 0.03);
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
border: solid 1px rgba(var(--text-color), 0.2);
|
border: solid 1px rgba(var(--text-color), 0.2);
|
||||||
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
112
index.html
112
index.html
@ -163,37 +163,7 @@
|
|||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
<article id="sign_up" class="inner-page hidden">
|
<article id="sign_up" class="inner-page hidden">
|
||||||
<section class="grid gap-1-5">
|
<keys-generator id="keys_generator"></keys-generator>
|
||||||
<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>
|
|
||||||
</article>
|
</article>
|
||||||
<div id="loading" class="inner-page hidden">
|
<div id="loading" class="inner-page hidden">
|
||||||
<cube-loader></cube-loader>
|
<cube-loader></cube-loader>
|
||||||
@ -1186,9 +1156,7 @@
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'sign_up':
|
case 'sign_up':
|
||||||
const { floID, privKey } = floCrypto.generateNewID()
|
getRef('keys_generator').generateKeys()
|
||||||
getRef('generated_flo_address').value = floID
|
|
||||||
getRef('generated_private_key').value = privKey
|
|
||||||
break;
|
break;
|
||||||
case 'dashboard_page': {
|
case 'dashboard_page': {
|
||||||
let renderedAssignedTasks = []
|
let renderedAssignedTasks = []
|
||||||
@ -1787,6 +1755,78 @@
|
|||||||
floGlobals.prefersReducedMotion = reduceMotionQuery.matches
|
floGlobals.prefersReducedMotion = reduceMotionQuery.matches
|
||||||
});
|
});
|
||||||
floGlobals.prefersReducedMotion = reduceMotionQuery.matches
|
floGlobals.prefersReducedMotion = reduceMotionQuery.matches
|
||||||
|
|
||||||
|
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>
|
||||||
<script id="app_ui">
|
<script id="app_ui">
|
||||||
"use strict";
|
"use strict";
|
||||||
@ -3839,8 +3879,8 @@
|
|||||||
getRef("notification_drawer").remove(floGlobals.signInNotification)
|
getRef("notification_drawer").remove(floGlobals.signInNotification)
|
||||||
};
|
};
|
||||||
getRef('sign_up_button').onclick = () => {
|
getRef('sign_up_button').onclick = () => {
|
||||||
resolve(getRef('generated_private_key').value);
|
resolve(getRef('keys_generator').keys.privKey);
|
||||||
getRef('generated_private_key').value = '';
|
getRef('keys_generator').clearKeys();
|
||||||
routeTo('loading');
|
routeTo('loading');
|
||||||
getRef("notification_drawer").remove(floGlobals.signInNotification)
|
getRef("notification_drawer").remove(floGlobals.signInNotification)
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user