hcaptcha, address randomization

pizzavolus/static/style.css

@@ -76,7 +76,7 @@ body {
     border: 1px solid #2a79a2;
     box-shadow: none;
     height: 2.5em;
-    margin: 1em;
+    margin: 0.5em;
     color: #fff;
 }
 .pure-form input[type=text],
@@ -218,6 +218,7 @@ div.g-recaptcha div div {
 
 
 
+
 #page {
     text-align: center;
 }
@@ -228,6 +229,9 @@ div.g-recaptcha div div {
     .content {
         padding-right: 2em;
     }
+    div.h-captcha {
+        padding-left: 11em;
+    }
 }
 
 @media (max-width: 48em) {
@@ -235,5 +239,3 @@ div.g-recaptcha div div {
         margin-left: 0;
     }
 }
-
-

pizzavolus/templates/root.mako

@@ -1,15 +1,14 @@
 <%inherit file="layout.mako" />
 
+<script src="https://hcaptcha.com/1/api.js" async defer></script>
 <div id="page" class="pure-g">
-    <div class="pure-u-1">
-        <h3>Register an Address</h3>
-        <form class="pure-form pure-form-aligned pure-u-lg-1-2" action="" method="post">
+    <div class="pure-u-1 pure-u-lg-1-2">
+        <h3>Register an Inbox</h3>
+        <form class="pure-form pure-form-aligned" id="inbox" action="" method="post">
             <fieldset>
                 % if domains_reg:
-                    <script src="https://hcaptcha.com/1/api.js" async defer></script>
-                    
                     <div class="pure-control-group">
-                        <label for="local_part">Name</label>
+                        <label for="local_part">Name <a href="#" onclick="randomize()">⚄</a></label>
                         <input type="text" id="local_part" name="local_part" required
                                pattern="${lname_pattern}"
                                class="pure-input-1-4 half-left" /><!--
@@ -52,6 +51,26 @@
 </div><!-- div#page -->
 
 <script>
+function randomLocalPart() {
+    const charsetOuter = "abcdefghijklmnopqrstuvwxyz";
+    const charsetInner = "abcdefghijklmnopqrstuvwxyz0123456789";
+    const lenMin = 7;
+    const lenMax = 12;
+
+    const lr = crypto.getRandomValues(new Uint8Array(1))[0];
+    const len = lenMin + Math.round((lenMax - lenMin) * (lr / 255));
+
+    let value = "";
+    for (let i=0; i<len; i++) {
+        const charset = (i > 0 && i < (len - 1)) ? charsetInner : charsetOuter;
+        const r = crypto.getRandomValues(new Uint8Array(1))[0];
+        value += charset[r%charset.length];
+    }
+    return value;
+}
+function randomize() {
+    document.forms.inbox.local_part.value = randomLocalPart();
+}
 (function(){
     var local_part = document.getElementById("local_part");
     var domain_select = document.getElementById("domain");