retspen · catborise · Jul 7, 2021 · Jul 7, 2021
diff --git a/accounts/templates/account.html b/accounts/templates/account.html
@@ -23,11 +23,15 @@
 
 {% block content %}
     <ul class="nav nav-tabs">
-        <li class="nav-item">
-            <a class="nav-link active" data-toggle="tab" href="#instances">{% trans "Instances" %}</a>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#instances" type="button" role="tab" aria-controls="instances" aria-selected="true">
+                {% trans "Instances" %}
+            </button>
         </li>
-        <li class="nav-item">
-            <a class="nav-link" data-toggle="tab" href="#public-keys">{% trans "Public Keys" %}</a>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#public-keys" type="button" role="tab" aria-controls="public-keys" aria-selected="false">
+                {% trans "Public Keys" %}
+            </button>
         </li>
     </ul>
 

diff --git a/accounts/templates/accounts/change_password_form.html b/accounts/templates/accounts/change_password_form.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 {% load icons %}
 
@@ -20,7 +20,7 @@ <h4 class="card-title">{%trans "Change Password" %}: {{ user }}</h4>
                 </form>
             </div>
             <div class="card-footer">
-                <div class="float-right">
+                <div class="float-end">
                     <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %}
                         {% trans "Cancel" %}</a>
                     <button type="submit" form="password-change" class="btn btn-success">

diff --git a/accounts/templates/accounts/email_otp_form.html b/accounts/templates/accounts/email_otp_form.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load icons %}
 {% load i18n %}
 
@@ -21,7 +21,7 @@
         </form>
     </div>
     <div class="card-footer">
-        <div class="form-group mb-0 float-right">
+        <div class="mb-0 float-end">
             <a class="btn btn-primary" href="javascript:history.back()">{% icon 'arrow-left' %} {% trans "Cancel" %}</a>
             <button type="submit" form="create-update" class="btn btn-success">
                 {% icon 'envelope-o' %} {% trans "Send" %}

diff --git a/accounts/templates/accounts/otp_login.html b/accounts/templates/accounts/otp_login.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 
 {% block title %}WebVirtCloud{% endblock title %}
 
@@ -20,7 +20,7 @@
                     {% 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-right mb-2">{% trans "I do not have/lost my OTP!" %}</a>
+                    <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>

diff --git a/accounts/templates/login.html b/accounts/templates/login.html
@@ -15,7 +15,7 @@
 <div class="col-12" role="main">
     {% if form.errors %}
         <div class="alert alert-danger">
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
             {% trans "Incorrect username or password." %}
         </div>
     {% endif %}
@@ -24,7 +24,9 @@ <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="hidden" name="next" value="{{ next }}">
-        <button class="btn btn-lg btn-success btn-block" type="submit">{% trans "Sign In" %}</button>
+        <div class="d-grid">
+            <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+        </div>
     </form>
 </div>
 {% endblock %}
diff --git a/accounts/templates/profile.html b/accounts/templates/profile.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load icons %}
 {% load tags_fingerprint %}
 
@@ -10,15 +10,19 @@
 
 {% block content %}
 <ul class="nav nav-tabs">
-    <li class="nav-item">
-        <a class="nav-link active" data-toggle="tab" href="#edit-profile">{% trans "Edit Profile" %}</a>
+    <li class="nav-item" role="presentation">
+        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#editprofile" type="button" role="tab" aria-controls="editprofile" aria-selected="true">
+            {% trans "Edit Profile" %}
+        </button>
     </li>
-    <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#ssh-keys">{% trans "SSH Keys" %}</a>
+    <li class="nav-item" role="presentation">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sshkeys" type="button" role="tab" aria-controls="sshkeys" aria-selected="false">
+            {% trans "SSH Keys" %}
+        </button>
     </li>
 </ul>
 <div class="tab-content">
-    <div class="tab-pane tab-pane-bordered active" id="edit-profile">
+    <div class="tab-pane tab-pane-bordered active" id="editprofile">
         <div class="card">
             <div class="card-body">
                 <form method="post" action="" role="form" aria-label="Edit user info form">
@@ -29,7 +33,7 @@
                             {% icon 'lock' %} {% trans "Change Password" %}
                         </a>
                     {% endif %}
-                    <div class="form-group mb-0 float-right">
+                    <div class="mb-0 float-end">
                         <button type="submit" class="btn btn-primary">
                             {% icon 'pencil' %} {% trans "Update" %}
                         </button>
@@ -38,7 +42,7 @@
             </div>
         </div>
     </div>
-    <div class="tab-pane tab-pane-bordered fade" id="ssh-keys">
+    <div class="tab-pane tab-pane-bordered fade" id="sshkeys">
         {% if publickeys %}
         <div class="col-lg-12">
             <div class="table-responsive">
@@ -67,7 +71,7 @@
                 <form method="post" action="{% url 'accounts:ssh_key_create' %}" role="form" aria-label="Add key to user form">
                     {% csrf_token %}
                     {% bootstrap_form ssh_key_form layout='horizontal' %}
-                    <div class="form-group mb-0 float-right">
+                    <div class="mb-0 float-end">
                         <button type="submit" class="btn btn-primary">
                             {% icon 'plus' %} {% trans "Add" %}
                         </button>

diff --git a/admin/templates/admin/group_list.html b/admin/templates/admin/group_list.html
@@ -6,7 +6,7 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12">
-        <a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-right">
+        <a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-end">
             {% icon 'plus' %}
         </a>
         {% include 'search_block.html' %}
@@ -16,8 +16,7 @@ <h1 class="page-header">{% trans "Groups" %}</h1>
 <div class="row">
     {% if not groups %}
         <div class="col-lg-12">
-            <div class="alert alert-warning alert-dismissable">
-                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <div class="alert alert-warning shadow-sm">
                 {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any groups" %}
             </div>
         </div>
@@ -37,7 +36,7 @@ <h1 class="page-header">{% trans "Groups" %}</h1>
                             <a href=""><strong>{{ group.name }}</strong></a>
                         </td>
                         <td>
-                            <div class="float-right btn-group">
+                            <div class="float-end btn-group">
                                 <a class="btn btn-primary" href="{% url 'admin:group_update' group.id %}" title="{%trans "Edit" %}">
                                     {% icon 'pencil' %}
                                 </a>
@@ -56,5 +55,5 @@ <h1 class="page-header">{% trans "Groups" %}</h1>
 {% endblock content %}
 
 {% block script %}
-<script src="{% static "js/filter-table.js" %}"></script>
+<script src="{% static 'js/filter-table.js' %}"></script>
 {% endblock script %}
diff --git a/admin/templates/admin/logs.html b/admin/templates/admin/logs.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 
 {% block title %}{% trans "Logs" %}{% endblock %}
 
@@ -11,8 +11,7 @@
     <div class="col-lg-12">
         {% if not logs %}
             <div class="col-lg-12">
-                <div class="alert alert-warning alert-dismissable">
-                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                <div class="alert alert-warning shadow-sm">
                     <i class="fa fa-exclamation-triangle"></i> <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any Logs" %}
                 </div>
             </div>

diff --git a/admin/templates/admin/user_form.html b/admin/templates/admin/user_form.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load icons %}
 {% load i18n %}
 
@@ -15,7 +15,7 @@
             {% bootstrap_form user_form layout='horizontal' %}
             {% bootstrap_form attributes_form layout='horizontal' %}
         </form>
-        <div class="form-group float-right">
+        <div class="float-end">
             <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a>
             <button type="submit" form="create-update" class="btn btn-success">
                 {% icon 'check' %} {% trans "Save" %}

diff --git a/admin/templates/admin/user_list.html b/admin/templates/admin/user_list.html
@@ -9,7 +9,7 @@
 {% block page_heading %}{{ title }}{% endblock page_heading %}
 
 {% block page_heading_extra %}
-<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-right">
+<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-end">
     {% icon 'plus' %}
 </a>
 {% include 'search_block.html' %}
@@ -19,8 +19,7 @@
 <div class="row">
     {% if not users %}
         <div class="col-lg-12">
-            <div class="alert alert-warning alert-dismissable">
-                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <div class="alert alert-warning shadow-sm">
                 {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any user" %}
             </div>
         </div>
@@ -55,7 +54,7 @@
                         <td>{% if user.is_superuser %}{% icon 'check' %}</span>{% endif %}</td>
                         <td>{% if can_clone %}{% icon 'check' %}{% endif %}</td>
                         <td>
-                            <div class="float-right btn-group">
+                            <div class="float-end btn-group">
                                 <a class="btn btn-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% icon 'eye' %}</a>
                                 <a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% icon 'pencil' %}</a>
                                 {% if user.is_active %}

diff --git a/appsettings/templates/appsettings.html b/appsettings/templates/appsettings.html
@@ -10,7 +10,7 @@
     <div class="col-lg-12">
         <h3 class="page-header">{% trans "App Settings" %}</h3>
         <form action="{% url 'set_language' %}" method="post" style="display:inline" aria-label="Edit language.name_local settings form">{% csrf_token %}
-            <div class="form-group row">
+            <div class="row mb-1">
                 <input name="next" type="hidden" value="{{ redirect_to }}">
                 <label class="col-sm-3 col-form-label">{% trans "Language" %}</label>
                 <div class="col-sm-6">
@@ -29,18 +29,18 @@ <h3 class="page-header">{% trans "App Settings" %}</h3>
         </form>
         {% if request.user.is_superuser %}
         <form method="post" action="" role="form" aria-label="Edit sass directory settings form">{% csrf_token %}
-            <div class="form-group row">
+            <div class="row mb-1">
                 <label class="col-sm-3 col-form-label">{% trans sass_dir.name %}</label>
                 <div class="col-sm-6">
                     <input class="form-control" name="{{ sass_dir.key }}" value="{{ sass_dir.value }}" onchange="this.form.submit()" title="{% trans sass_dir.description %}"/>
                 </div>
             </div>
         </form>
         <form method="post" action="" role="form" aria-label="Edit theme settings form">{% csrf_token %}
-            <div class="form-group row">
+            <div class="row mb-1">
                 <label class="col-sm-3 col-form-label">{% trans bootstrap_theme.name %}</label>
                 <div class="col-sm-6">
-                    <select class="form-control" name="{{ bootstrap_theme.key }}" onchange="this.form.submit()" title="{% trans bootstrap_theme.description %}">
+                    <select class="form-select" name="{{ bootstrap_theme.key }}" onchange="this.form.submit()" title="{% trans bootstrap_theme.description %}">
                     {% for theme in themes_list %}
                         <option {% if bootstrap_theme.value == theme %}selected{% endif %} value="{{ theme }}">{{ theme }}</option>
                     {% endfor %}
@@ -53,11 +53,11 @@ <h3 class="page-header">{% trans "App Settings" %}</h3>
             <h3 class="page-header">{% trans "Other Settings" %}</h3>
         {% for setting in appsettings %}
             <form method="post" action="" role="form" aria-label="{{setting.name}} form">{% csrf_token %}
-                <div class="form-group row">
+                <div class="row mb-1">
                     <label class="col-sm-3 col-form-label">{% trans setting.name %}</label>
                     <div class="col-sm-6">
                     {% if setting.choices %}
-                        <select class="form-control" name="{{ setting.key }}"  onchange="this.form.submit()" title="{% trans setting.description %}">
+                        <select class="form-select" name="{{ setting.key }}"  onchange="this.form.submit()" title="{% trans setting.description %}">
                             {% for choice in setting.choices_as_list %}
                                 <option {% if setting.value == choice %} selected {% endif %} value={{ choice }}>{% trans choice %}</option>
                             {% endfor %}

diff --git a/appsettings/views.py b/appsettings/views.py
@@ -47,8 +47,11 @@ def appsettings(request):
         if "BOOTSTRAP_THEME" in request.POST:
             theme = request.POST.get("BOOTSTRAP_THEME", "")
             scss_var = f"@import '{sass_dir.value}/wvc-theme/{theme}/variables';"
-            scss_bootswatch = f"@import '{sass_dir.value}/wvc-theme/{theme}/bootswatch';"
+            #scss_boot = f"@import '{sass_dir.value}/bootstrap/bootstrap.scss';"
             scss_boot = f"@import '{sass_dir.value}/bootstrap-overrides.scss';"
+            scss_bootswatch = f"@import '{sass_dir.value}/wvc-theme/{theme}/bootswatch';"
+
+
 
             try:
                 with open(sass_dir.value + "/wvc-main.scss", "w") as main:

diff --git a/computes/templates/computes/form.html b/computes/templates/computes/form.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load icons %}
 {% load i18n %}
 
@@ -17,7 +17,7 @@ <h2 class="page-header">{% trans "Create Compute" %}</h2>
             {% csrf_token %}
             {% bootstrap_form form layout='horizontal' %}
         </form>
-        <div class="form-group float-right">
+        <div class="float-end">
             <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a>
             <button type="submit" form="create-update" class="btn btn-success">
                 {% icon 'check' %} {% trans "Save" %}

diff --git a/computes/templates/computes/instances.html b/computes/templates/computes/instances.html
@@ -10,7 +10,7 @@
 
 {% block page_heading_extra %}
 <a href="{% url 'instances:create_instance_select_type' compute.id %}"
-    class="btn btn-success btn-header float-right">
+    class="btn btn-success btn-header float-end">
     {% icon 'plus' %}
 </a>
 {% if instances %}
@@ -22,12 +22,12 @@
 <div class="row">
     <div class="col-lg-12">
         <nav aria-label="breadcrumb">
-            <ol class="breadcrumb bg-light shadow-sm">
-                <li class="breadcrumb-item active">
+            <ol class="breadcrumb shadow-sm">
+                <li class="breadcrumb-item">
                     <a href="{% url 'overview' compute.id %}">{% icon 'dashboard' %} {% trans "Overview" %}</a>
                 </li>
                 <li class="breadcrumb-item">
-                    <span class="font-weight-bold">{% icon 'server' %} {% trans "Instances" %}</span>
+                    <span class="fw-bold">{% icon 'server' %} {% trans "Instances" %}</span>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a>
@@ -51,10 +51,9 @@
 <div class="row">
     <div class="col-lg-12">
         {% if not instances %}
-            <div class="alert alert-warning alert-dismissable fade show">
+            <div class="alert alert-warning shadow-sm fade show">
                 {% icon 'exclamation-triangle' %} <strong>{% trans "Warning" %}:</strong>
                 {% trans "Hypervisor doesn't have any Instances" %}
-                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
             </div>
         </div>
         {% else %}
@@ -73,7 +72,7 @@
                     {% for instance in instances  %}
                     <tr>
                         <td>
-                            <a class="text-secondary" href="{% url 'instances:instance' instance.id %}">
+                            <a class="link-primary" href="{% url 'instances:instance' instance.id %}">
                                 {{ instance.name }}
                             </a>
                         </td>

diff --git a/computes/templates/computes/list.html b/computes/templates/computes/list.html
@@ -15,8 +15,7 @@ <h3 class="page-header">{% trans "Computes" %}</h3>
 <div class="row">
     {% if not computes %}
         <div class="col-lg-12">
-            <div class="alert alert-warning alert-dismissable">
-                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <div class="alert alert-warning shadow-sm">
                 {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
             </div>
         </div>
@@ -44,7 +43,7 @@ <h3 class="page-header">{% trans "Computes" %}</h3>
                             {{ compute.details|default:"" }}
                         </td>
                         <td class="col-sm-2">
-                            <div class="float-right btn-group">
+                            <div class="float-end btn-group">
                                 {% if compute.status is True %}
                                     <a class="btn btn-success" title="{%trans "Overview" %}" href="{% url 'overview' compute.id %}">{% icon 'eye' %}</a>
                                 {% else %}

diff --git a/computes/templates/create_comp_block.html b/computes/templates/create_comp_block.html
@@ -1,7 +1,7 @@
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load icons %}
-<div class="btn-group float-right mt-1" role="group" aria-label="Add host button group">
+<div class="btn-group float-end mt-1" role="group" aria-label="Add host button group">
     <a href="{% url 'add_tcp_host' %}" class="btn btn-success">{% trans "TCP" %}</a>
     <a href="{% url 'add_ssh_host' %}" class="btn btn-success">{% trans "SSH" %}</a>
     <a href="{% url 'add_tls_host' %}" class="btn btn-success">{% trans "TLS" %}</a>