From 9671f7b3e02fc7bba316687d07ec54a494636b1d Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Thu, 11 May 2023 13:34:08 +0300
Subject: [PATCH 1/4] update requirements

---
 conf/requirements.txt | 6 +++---
 dev/requirements.txt  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/conf/requirements.txt b/conf/requirements.txt
index 13d58b5..c227892 100644
--- a/conf/requirements.txt
+++ b/conf/requirements.txt
@@ -1,12 +1,12 @@
-Django==3.2.18
+Django==3.2.19
 django_bootstrap5==23.1
 django-login-required-middleware==0.9.0
 django-otp==1.1.6
-django-icons==23.1
+django-icons==23.2
 django-qr-code==3.1.1
 gunicorn==20.1.0
 libsass==0.22.0
-libvirt-python==9.2.0
+libvirt-python==9.3.0
 lxml==4.9.2
 qrcode==7.4.2
 rwlock==0.0.7
diff --git a/dev/requirements.txt b/dev/requirements.txt
index 78bf6b9..9e2fba3 100644
--- a/dev/requirements.txt
+++ b/dev/requirements.txt
@@ -1,8 +1,8 @@
 -r ../conf/requirements.txt
-coverage==7.2.3
+coverage==7.2.5
 django-debug-toolbar==4.0.0
 pycodestyle==2.10.0
 pyflakes==3.0.1
-pylint==2.17.3
+pylint==2.17.4
 yapf==0.33.0
 black==23.3.0

From 86b03abd59219374792aac669b445f3f987c141e Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Thu, 11 May 2023 15:31:42 +0300
Subject: [PATCH 2/4] reorganize otp_login and login pages

---
 accounts/templates/accounts/otp_login.html | 45 +++++++++++++---------
 accounts/templates/login.html              | 15 ++++----
 static/css/signin.css                      | 15 ++------
 3 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/accounts/templates/accounts/otp_login.html b/accounts/templates/accounts/otp_login.html
index 8b4e654..bd7ce61 100644
--- a/accounts/templates/accounts/otp_login.html
+++ b/accounts/templates/accounts/otp_login.html
@@ -1,30 +1,37 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 {% load i18n %}
 {% load static %}
 {% load django_bootstrap5 %}
 
-{% block title %}WebVirtCloud{% endblock title %}
+{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In with OTP" %}{% endblock title %}
 
-{% block page_heading %}WebVirtCloud{% endblock page_heading %}
+{% block style %}
+<link href="{% static "css/signin.css" %}" rel="stylesheet">
+{% endblock style %}
 
 {% block content %}
-<div class="row">
-    <div class="col-6 offset-3" role="main">
-        <div class="card">
-            <div class="card-body">
-                {% if form.errors %}
-                    {% bootstrap_form_errors form %}
-                {% endif %}
-                <form class="form-signin" method="post" role="form" aria-label="Login form">
-                    {% csrf_token %}
-                    {% bootstrap_field form.username layout='horizontal' %}
-                    {% bootstrap_field form.password layout='horizontal' %}
-                    {% bootstrap_field form.otp_token layout='horizontal' %}
-                    <a href="{% url 'accounts:email_otp' %}" class="float-end mb-2">{% trans "I do not have/lost my OTP!" %}</a>
-                    <button class="btn btn-lg btn-success btn-block" type="submit">{% trans "Sign In" %}</button>
-                </form>
+<div class="login-box">
+    <div class="page-header">
+        <a href="/"><h1>WebVirtCloud</h1></a>
+    </div>
+    <hr>
+    <div class="col-12" role="main">
+        {% if form.errors %}
+            <div class="alert alert-danger" role="alert">
+                {% bootstrap_form_errors form %}
             </div>
-        </div>
+        {% endif %}
+        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+            <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
+            {% bootstrap_field form.username layout='inline' %}
+            {% bootstrap_field form.password layout='inline' %}
+            {% bootstrap_field form.otp_token layout='inline'%}
+            <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
+            <br>
+            <div class="d-grid">
+                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+            </div>
+        </form>
     </div>
 </div>
 {% endblock content %}
\ No newline at end of file
diff --git a/accounts/templates/login.html b/accounts/templates/login.html
index b81a63e..1a7da2d 100644
--- a/accounts/templates/login.html
+++ b/accounts/templates/login.html
@@ -2,7 +2,8 @@
 {% load i18n %}
 {% load static %}
 
-{% block title %}{% trans "WebVirtCloud" %}  - {% trans "Sign In" %}{% endblock %}
+
+{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In" %}{% endblock title %}
 
 {% block style %}
 <link href="{% static "css/signin.css" %}" rel="stylesheet">
@@ -11,19 +12,20 @@
 {% block content %}
 <div class="login-box">
     <div class="page-header">
-        <a class="" href="/"><h1>WebVirtCloud</h1></a>
+        <a href="/"><h1>WebVirtCloud</h1></a>
     </div>
+    <hr>
     <div class="col-12" role="main">
         {% if form.errors %}
-            <div class="alert alert-danger">
-                <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
+            <div class="alert alert-danger" role="alert">
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                 {% trans "Incorrect username or password." %}
             </div>
         {% endif %}
         <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
-            <input type="text" class="form-control" name="username" placeholder="{% trans "User" %}" autocapitalize="none" autocorrect="off" autofocus>
-            <input type="password" class="form-control" name="password" placeholder="{% trans "Password" %}">
+            <input type="text" class="form-control" name="username" placeholder="{% trans 'User' %}" autocapitalize="none" autocorrect="off" autofocus required>
+            <input type="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
             <input type="hidden" name="next" value="{{ next }}">
             <div class="d-grid">
                 <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
@@ -31,5 +33,4 @@
         </form>
     </div>
 </div>
-
 {% endblock %}
\ No newline at end of file
diff --git a/static/css/signin.css b/static/css/signin.css
index b21906c..d47add7 100644
--- a/static/css/signin.css
+++ b/static/css/signin.css
@@ -6,11 +6,10 @@
     display: block;
     align-content: center;
     align-items: center;
-    box-shadow: 0px 0px 30px black;
-    border-radius: 20px;
-    padding-top: 30px;
-    padding-bottom: 20px;
-    background: linear-gradient(0deg, rgba(203,203,203,1) 0%, rgba(255,255,255,1) 100%);
+    box-shadow: 0px 0px 20px black;
+    border-radius: 5px;
+    padding-top: 5%;
+    padding-bottom: 1%;
 }
 h1 {
     color:#212529;
@@ -60,16 +59,10 @@ h2 {
 }
 
 .btn-success {
-    background: linear-gradient(45deg, rgba(190,120,255,1) 0%, rgba(43,108,173,1) 34%, rgba(38,173,151,1) 68%, rgba(208,144,71,1) 100%);
-    transition-duration: 0.5s;
-    border-color: rgba(11, 12, 13, 0);
     border-width: 2px;
     border-style: solid;
-    color:white;
 }
 .btn-success:hover {
-    transition-duration: 0.5s;
-    border-color: goldenrod;
     border-width: 2px;
     border-style: solid;
 }

From c0513f7c6b729b3a0d7addbc4ce3552ae57df9ab Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Fri, 12 May 2023 11:18:17 +0300
Subject: [PATCH 3/4] change progress bar color & fix typo

---
 instances/templates/create_inst_block.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/instances/templates/create_inst_block.html b/instances/templates/create_inst_block.html
index 0077001..b2b8a06 100644
--- a/instances/templates/create_inst_block.html
+++ b/instances/templates/create_inst_block.html
@@ -12,15 +12,14 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <form method="post" aria-label="Select compute for instance create form">
-                    {% csrf_token %}
+                <form method="post" aria-label="Select compute for instance create form">{% csrf_token %}
                     <div class="row">
                         <table class="table">
                             <thead>
                                 <tr style="cursor:default;pointer-events:none">
                                     <th>{% trans "Name" %}</th>
                                     <th>{% trans "VCPU" %}
-                                    <th>{% trans "Cpu Usage" %}</th>
+                                    <th>{% trans "CPU Usage" %}</th>
                                     <th>{% trans "Memory" %}</th>
                                     <th>{% trans "Mem Usage" %}</th>
                                     <th>{% trans "Action" %}</th>
@@ -29,12 +28,12 @@
                             <tbody>
                                 {% for compute in computes %}
                                     {% if compute.status is True %}
-                                        <tr style="text-decoration: none">
+                                        <tr>
                                             <td>{{ compute.name }}</td>
                                             <td>{{ compute.cpu_count }}</td>
                                             <td>
                                                 <div class="progress">
-                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.cpu_usage }}%"
+                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.cpu_usage }}%"
                                                         aria-valuenow="{{ compute.cpu_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.cpu_usage }}%
                                                     </div>
                                                 </div>
@@ -42,7 +41,7 @@
                                             <td>{{ compute.ram_size|filesizeformat }}</td>
                                             <td>
                                                 <div class="progress">
-                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.ram_usage }}%"
+                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.ram_usage }}%"
                                                         aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
                                                     </div>
                                                 </div>

From 8bf28a4f33a72ef74062154239a9aabe5e2d1443 Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Fri, 12 May 2023 12:01:54 +0300
Subject: [PATCH 4/4] add loading spinner after submit to login pages

---
 accounts/templates/accounts/otp_login.html | 25 +++++++++++++++++++---
 accounts/templates/login.html              | 25 +++++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/accounts/templates/accounts/otp_login.html b/accounts/templates/accounts/otp_login.html
index bd7ce61..9d0803c 100644
--- a/accounts/templates/accounts/otp_login.html
+++ b/accounts/templates/accounts/otp_login.html
@@ -21,7 +21,7 @@
                 {% bootstrap_form_errors form %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             {% bootstrap_field form.username layout='inline' %}
             {% bootstrap_field form.password layout='inline' %}
@@ -29,9 +29,28 @@
             <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
             <br>
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}
diff --git a/accounts/templates/login.html b/accounts/templates/login.html
index 1a7da2d..28e6769 100644
--- a/accounts/templates/login.html
+++ b/accounts/templates/login.html
@@ -22,15 +22,34 @@
                 {% trans "Incorrect username or password." %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             <input type="text" class="form-control" name="username" placeholder="{% trans 'User' %}" autocapitalize="none" autocorrect="off" autofocus required>
             <input type="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
             <input type="hidden" name="next" value="{{ next }}">
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}