fine-tuning the create-capsul experience

capsulflask/console.py

@@ -8,6 +8,8 @@ from flask import g
 from flask import request
 from flask import session
 from flask import render_template
+from flask import redirect
+from flask import url_for
 from flask_mail import Message
 from werkzeug.exceptions import abort
 from nanoid import generate
@@ -42,6 +44,9 @@ def double_check_capsul_address(id, ipv4):
 @account_required
 def index():
   vms = get_vms()
+  created = request.args.get('created')
+  if not re.match(r"^(cvm|capsul)-[a-z0-9]{10}$", created):
+    created = '___________'
 
   # for now we are going to check the IP according to the virt model
   # on every request. this could be done by a background job and cached later on...
@@ -60,7 +65,7 @@ def index():
     list(filter(lambda x: not x['deleted'], vms))
   ))
 
-  return render_template("capsuls.html", vms=vms, has_vms=len(vms) > 0)
+  return render_template("capsuls.html", vms=vms, has_vms=len(vms) > 0, created=created)
 
 @bp.route("/<string:id>", methods=("GET", "POST"))
 @account_required
@@ -111,7 +116,6 @@ def create():
   account_balance = get_account_balance(get_vms(), get_payments(), datetime.utcnow())
   capacity_avaliable = current_app.config["VIRTUALIZATION_MODEL"].capacity_avaliable(512*1024*1024)
   errors = list()
-  created_os = None
 
   if request.method == "POST":
 
@@ -172,7 +176,8 @@ def create():
         memory_mb=vm_sizes[size]['memory_mb'],
         ssh_public_keys=list(map(lambda x: x["content"], posted_keys))
       )
-      created_os = os
+      
+      return redirect(f"{url_for('console.index')}?created={id}")
   
   affordable_vm_sizes = dict()
   for key, vm_size in vm_sizes.items():
@@ -187,7 +192,6 @@ def create():
 
   return render_template(
     "create-capsul.html",
-    created_os=created_os,
     capacity_avaliable=capacity_avaliable,
     account_balance=format(account_balance, '.2f'),
     ssh_public_keys=ssh_public_keys,

capsulflask/static/style.css

@@ -45,6 +45,15 @@ a:hover, a:active, a:visited {
   padding: 1em;
 }
 
+.flash.green {
+  color: rgb(8, 173, 137);
+  border-color: rgb(8, 173, 137);
+}
+
+.display-none {
+  display: none;
+}
+
 h1, h2, h3, h4, h5 {
   font-size:calc(0.40rem + 1vmin);
   margin: initial;
@@ -63,6 +72,8 @@ main {
   align-items: center;
 }
 
+
+
 .full-margin {
   width: 100%;
   margin: 3rem 0;

capsulflask/templates/base.html

@@ -39,6 +39,7 @@
 {% for message in get_flashed_messages() %}
   <div class="flash">{{ message }}</div>
 {% endfor %}
+{% block custom_flash %}{% endblock %}
 <main>
   {% block content %}{% endblock %}
 </main>

capsulflask/templates/capsuls.html

@@ -2,6 +2,12 @@
 
 {% block title %}Capsuls{% endblock %}
 
+{% block custom_flash %}
+{% if created  %} 
+  <div class="flash green">{{ created }} successfully created!</div>
+{% endif %}
+{% endblock %}
+
 {% block content %}
 <div class="row third-margin">
   <h1>Capsuls</h1>

capsulflask/templates/create-capsul.html

@@ -6,21 +6,10 @@
 <div class="row third-margin">
   <h1>Create Capsul</h1>
 </div>
-<div class="row third-margin"><div>
-  
-{% if created_os  %} 
-  <p>
-    Your Capsul was successfully created! You should already see it listed on the 
-    <a href="/console/">Capsuls page</a>, but it may not have obtained an IP address yet.
-    Its IP address should become visible once the machine has booted and taken a DHCP lease.
-  </p> 
-  {% if created_os == 'debian10' %}
-    <p>
-      Note: because Debian delays fully booting until after entropy has been generated, Debian Capsuls 
-      may take an extra-long time to obtain an IP address, like up to 10 minutes. Be patient.
-    </p> 
-  {% endif %}
-{% else %}
+<div class="row third-margin">
+  <div>
+    
+
   {% if cant_afford  %} 
     <p>
       Your account does not have sufficient funds to create a Capsul.
@@ -79,14 +68,24 @@
         </div>
       </div>
       <div class="row justify-end">
-        <input type="submit" value="Create">
+        <input id="submit-button" type="submit" value="Create">
+        <span  id="submit-button-clicked" class="display-none">..Creating...</span>
       </div>
+      <script>
+        window.addEventListener('DOMContentLoaded', function(event) {
+            var submitButton = document.getElementById('submit-button');
+            var submitButtonClicked = document.getElementById('submit-button-clicked');
+            document.getElementById('submit-button').onclick = function() {
+              submitButton.className = "display-none";
+              submitButtonClicked.className = "waiting-pulse";
+            }
+        });
+      </script>
     </form>
-  </div>
   {% endif %}
 
-{% endif %}
-</div></div>
+  </div>
+</div>
 {% endblock %}
 
 {% block subcontent %}