standardizing key generation

css/main.css

@@ -534,39 +534,37 @@ sm-copy {
   max-width: 100%;
 }
 
-#sign_in,
+#sign_in {
-#sign_up {
   grid-template-rows: auto 1fr;
   align-items: center;
 }
-#sign_in section,
+#sign_in section {
-#sign_up section {
   margin-top: -6rem;
   justify-self: center;
   width: min(24rem, 100%);
 }
-#sign_in sm-form,
+#sign_in sm-form {
-#sign_up sm-form {
   margin: 2rem 0;
 }
-#sign_in header,
+#sign_in header {
-#sign_up 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%);

css/main.scss

@@ -500,8 +500,7 @@ sm-copy {
   }
 }
 
-#sign_in,
+#sign_in {
-#sign_up {
   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%);
     }

index.html

@@ -99,25 +99,7 @@
                 </div>
             </div>
         </header>
-        <section class="grid">
+        <keys-generator id="keys_generator"></keys-generator>
-            <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>
     </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('keys_generator').generateKeys()
-                    getRef('generated_flo_id').value = floID
-                    getRef('generated_private_key').value = privKey
                     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())
+                    resolve(getRef('keys_generator').keys.privKey);
-                    getRef('generated_private_key').value = ''
+                    getRef('keys_generator').clearKeys();
                     showPage('loading')
                 }
             })