fine-tuning the create-capsul experience

This commit is contained in:
forest 2020-05-16 23:02:02 -05:00
parent 321a46d77b
commit e3a2e8eee4
5 changed files with 44 additions and 23 deletions

View File

@ -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,

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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 %}