From f8b69f258e70a1d4f91e1eccbfc9d002fb2ff401 Mon Sep 17 00:00:00 2001
From: Zarak Khan <zarakkhan209@gmail.com>
Date: Mon, 8 Jan 2024 15:06:03 +0500
Subject: [PATCH] commit message

---
 .../templates/baseTemplate/newBase.html       |   2 +-
 .../userManagment/userProfileV2.html          |  72 ++++
 userManagment/urls.py                         |   1 +
 userManagment/views.py                        |  16 +
 .../websiteFunctions/websiteFunctionsV2.js    | 245 ++++++-----
 .../websiteFunctions/WPsiteHome.html          |   6 +
 .../websiteFunctions/WPsiteHomeV2.html        | 396 ++++++++++++++++--
 .../websiteFunctions/WPsitesListV2.html       |   8 +-
 .../websiteFunctions/deleteWebsiteV2.html     |  21 +
 9 files changed, 610 insertions(+), 157 deletions(-)
 create mode 100644 userManagment/templates/userManagment/userProfileV2.html

diff --git a/baseTemplate/templates/baseTemplate/newBase.html b/baseTemplate/templates/baseTemplate/newBase.html
index a3cd283bf..d167aa549 100644
--- a/baseTemplate/templates/baseTemplate/newBase.html
+++ b/baseTemplate/templates/baseTemplate/newBase.html
@@ -222,7 +222,7 @@
                     </div>
                     <ul id="dropdown-example" class="hidden py-2 space-y-2">
                         <li>
-                            <a href="#"
+                            <a href="{% url 'viewProfileV2' %}"
                                class="flex items-center w-full text-base font-normal text-white transition duration-75 rounded-lg group hover:bg-cyan-400 dark:text-white dark:hover:bg-gray-700 pl-11">•
                                 View
                                 Profile</a>
diff --git a/userManagment/templates/userManagment/userProfileV2.html b/userManagment/templates/userManagment/userProfileV2.html
new file mode 100644
index 000000000..46bb9c788
--- /dev/null
+++ b/userManagment/templates/userManagment/userProfileV2.html
@@ -0,0 +1,72 @@
+{% extends "baseTemplate/newBase.html" %}
+{% load i18n %}
+{% block titleNew %}{% trans "Home - CyberPanel" %}{% endblock %}
+{% block newContent %}
+
+    {% load static %}
+
+    <div ng-controller="createPackage" class="p-8">
+        <div>
+            <p class="text-4xl font-bold">Account Details</p>
+            <p class="text-xs text-gray-600 py-2 font-semibold">List the account details for the currently logged in
+                user.</p>
+        </div>
+        <div>
+            <div class="py-4">
+                <p class="text-xl font-bold">General Information</p>
+            </div>
+            <hr>
+            <div>
+                <div class="flex mt-4 py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">First Name</p>
+                    </div>
+                    <div>
+                        <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ firstName }}</p>
+                    </div>
+                </div>
+                <div class="flex py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">Last Name</p>
+                    </div>
+                    <div>
+                       <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ lastName }}</p>
+                    </div>
+                </div>
+                <div class="flex py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">Username</p>
+                    </div>
+                    <div>
+                         <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ userName }}</p>
+                    </div>
+                </div>
+                <div class="flex py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">Email</p>
+                    </div>
+                    <div>
+                       <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ email }}</p>
+                    </div>
+                </div>
+                <div class="flex py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">Account ACL</p>
+                    </div>
+                    <div>
+                        <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ accountACL }}</p>
+                    </div>
+                </div>
+                <div class="flex py-2 px-6">
+                    <div>
+                        <p class="font-semibold w-60">Website Limit</p>
+                    </div>
+                    <div>
+                        <p class="w-80 bg-gray-100 rounded px-2 py-1">{{ websitesLimit }} {% trans "( 0 = Unlimited )" %}</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/userManagment/urls.py b/userManagment/urls.py
index d203dde4f..ee2dd7b58 100755
--- a/userManagment/urls.py
+++ b/userManagment/urls.py
@@ -5,6 +5,7 @@ urlpatterns = [
 
     url(r'^$', views.loadUserHome, name='loadUsersHome'),
     url(r'^viewProfile', views.viewProfile, name='viewProfile'),
+    url(r'^viewProfileV2', views.viewProfileV2, name='viewProfileV2'),
     url(r'^createUser', views.createUser, name='createUser'),
 
 
diff --git a/userManagment/views.py b/userManagment/views.py
index 47dbba044..4c8df4c82 100755
--- a/userManagment/views.py
+++ b/userManagment/views.py
@@ -47,6 +47,22 @@ def viewProfile(request):
                     AdminData)
     return proc.render()
 
+def viewProfileV2(request):
+    userID = request.session['userID']
+    admin = Administrator.objects.get(pk=userID)
+
+    AdminData = {}
+
+    AdminData['userName'] = admin.userName
+    AdminData['firstName'] = admin.firstName
+    AdminData['lastName'] = admin.lastName
+    AdminData['websitesLimit'] = admin.initWebsitesLimit
+    AdminData['email'] = admin.email
+    AdminData['accountACL'] = admin.acl.name
+
+    proc = httpProc(request, 'userManagment/userProfileV2.html',
+                    AdminData)
+    return proc.render()
 
 def createUser(request):
     userID = request.session['userID']
diff --git a/websiteFunctions/static/websiteFunctions/websiteFunctionsV2.js b/websiteFunctions/static/websiteFunctions/websiteFunctionsV2.js
index 38bf3fef0..fbf3f8bf2 100644
--- a/websiteFunctions/static/websiteFunctions/websiteFunctionsV2.js
+++ b/websiteFunctions/static/websiteFunctions/websiteFunctionsV2.js
@@ -227,6 +227,15 @@ newapp.controller('createWebsiteV2', function ($scope, $http, $timeout, $window)
     }
 
 });
+var FurlDeleteWP;
+
+function DeleteWPNow(url) {
+    FurlDeleteWP = url;
+}
+
+function FinalDeleteWPNow() {
+    window.location.href = FurlDeleteWP;
+}
 
 newapp.controller('listWebsitesV2', function ($scope, $http) {
 
@@ -434,6 +443,30 @@ newapp.controller('listWebsitesV2', function ($scope, $http) {
 
 
 });
+var modalDeleteWPList = document.getElementById('deleteWPList');
+var openDeleteWPList = document.getElementById('openDeleteWPList');
+var closeDeleteWPList = document.getElementById('closeDeleteWPList');
+
+// Function to open the modal
+function openModalDeleteWPList() {
+    modalDeleteWPList.style.display = 'block';
+}
+
+// Function to close the modal
+function closeModelDeleteWPList() {
+    modalDeleteWPList.style.display = 'none';
+}
+
+// Event listeners for opening and closing the modal
+openDeleteWPList.addEventListener('click', openModalDeleteWPList);
+closeDeleteWPList.addEventListener('click', closeModelDeleteWPList);
+
+// Close the modal if the user clicks outside of it
+window.addEventListener('click', function (event) {
+    if (event.target === modalDeleteWPList) {
+        closeModal();
+    }
+});
 
 newapp.controller('websitePagesV2', function ($scope, $http, $timeout, $window) {
 
@@ -2932,6 +2965,7 @@ newapp.controller('deleteWebsiteControlV2', function ($scope, $http) {
 
 });
 
+
 newapp.controller('createWordpressV2', function ($scope, $http, $timeout, $compile, $window) {
     $scope.webSiteCreationLoading = true;
     $scope.installationDetailsForm = false;
@@ -3824,25 +3858,25 @@ newapp.controller('WPsiteHomeV2', function ($scope, $http, $timeout, $compile, $
 
     function AddPlugins(value, index, array) {
         var FinalMarkup = '<tr>'
-        FinalMarkup = FinalMarkup + '<td><input onclick="AddPluginToArray(this,\'' + value.name + '\')" type="checkbox" id="' + value.name + '"><label for="' + value.name + '"></label></td>';
+        FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><input onclick="AddPluginToArray(this,\'' + value.name + '\')" type="checkbox" id="' + value.name + '"><label for="' + value.name + '"></label></td>';
         for (let x in value) {
             if (x === 'status') {
                 if (value[x] === 'inactive') {
-                    FinalMarkup = FinalMarkup + '<td><div ng-click="ChangeStatus(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State"><label for="' + value.name + 'State"></label></div></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><div ng-click="ChangeStatus(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State"><label for="' + value.name + 'State"></label></div></td>';
                 } else {
-                    FinalMarkup = FinalMarkup + '<td><div ng-click="ChangeStatus(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State" checked=""><label for="' + value.name + 'State"></label></div></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><div ng-click="ChangeStatus(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State" checked=""><label for="' + value.name + 'State"></label></div></td>';
                 }
             } else if (x === 'update') {
                 if (value[x] === 'none') {
-                    FinalMarkup = FinalMarkup + '<td><span class="label label-success">Upto Date</span></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><span class="label label-success">Upto Date</span></td>';
                 } else {
-                    FinalMarkup = FinalMarkup + '<td><button ng-click="UpdatePlugins(\'' + value.name + '\')" aria-label="" type="button" class="btn btn-outline-danger">Update</button></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><button ng-click="UpdatePlugins(\'' + value.name + '\')" aria-label="" type="button" class="btn btn-outline-danger">Update</button></td>';
                 }
             } else {
-                FinalMarkup = FinalMarkup + '<td>' + value[x] + "</td>";
+                FinalMarkup = FinalMarkup + '<td class="px-6 py-3">' + value[x] + "</td>";
             }
         }
-        FinalMarkup = FinalMarkup + '<td><button ng-click="DeletePlugins(\'' + value.name + '\')" aria-label="" class="btn btn-danger btn-icon-left m-b-10" type="button">Delete</button></td>'
+        FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><button ng-click="DeletePlugins(\'' + value.name + '\')" aria-label="" class="bg-red-600 px-2 py-1 text-white" type="button">Delete</button></td>'
         FinalMarkup = FinalMarkup + '</tr>'
         var temp = $compile(FinalMarkup)($scope)
         AppendToTable('#PluginBody', temp)
@@ -4005,25 +4039,25 @@ newapp.controller('WPsiteHomeV2', function ($scope, $http, $timeout, $compile, $
 
     function AddThemes(value, index, array) {
         var FinalMarkup = '<tr>'
-        FinalMarkup = FinalMarkup + '<td><input onclick="AddThemeToArray(this,\'' + value.name + '\')" type="checkbox" id="' + value.name + '"><label for="' + value.name + '"></label></td>';
+        FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><input onclick="AddThemeToArray(this,\'' + value.name + '\')" type="checkbox" id="' + value.name + '"><label for="' + value.name + '"></label></td>';
         for (let x in value) {
             if (x === 'status') {
                 if (value[x] === 'inactive') {
-                    FinalMarkup = FinalMarkup + '<td><div ng-click="ChangeStatusThemes(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State"><label for="' + value.name + 'State"></label></div></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><div ng-click="ChangeStatusThemes(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State"><label for="' + value.name + 'State"></label></div></td>';
                 } else {
-                    FinalMarkup = FinalMarkup + '<td><div ng-click="ChangeStatusThemes(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State" checked=""><label for="' + value.name + 'State"></label></div></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><div ng-click="ChangeStatusThemes(\'' + value.name + '\')" class="form-check form-check-inline switch"><input type="checkbox" id="' + value.name + 'State" checked=""><label for="' + value.name + 'State"></label></div></td>';
                 }
             } else if (x === 'update') {
                 if (value[x] === 'none') {
-                    FinalMarkup = FinalMarkup + '<td><span class="label label-success">Upto Date</span></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><span class="label label-success">Upto Date</span></td>';
                 } else {
-                    FinalMarkup = FinalMarkup + '<td><button ng-click="UpdateThemes(\'' + value.name + '\')" aria-label="" type="button" class="btn btn-outline-danger">Update</button></td>';
+                    FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><button ng-click="UpdateThemes(\'' + value.name + '\')" aria-label="" type="button" class="btn btn-outline-danger">Update</button></td>';
                 }
             } else {
-                FinalMarkup = FinalMarkup + '<td>' + value[x] + "</td>";
+                FinalMarkup = FinalMarkup + '<td class="px-6 py-3">' + value[x] + "</td>";
             }
         }
-        FinalMarkup = FinalMarkup + '<td><button ng-click="DeleteThemes(\'' + value.name + '\')" aria-label="" class="btn btn-danger btn-icon-left m-b-10" type="button">Delete</button></td>'
+        FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><button ng-click="DeleteThemes(\'' + value.name + '\')" aria-label="" class="bg-red-600 px-2 py-1 text-white" type="button">Delete</button></td>'
         FinalMarkup = FinalMarkup + '</tr>'
         var temp = $compile(FinalMarkup)($scope)
         AppendToTable('#ThemeBody', temp)
@@ -4346,13 +4380,13 @@ newapp.controller('WPsiteHomeV2', function ($scope, $http, $timeout, $compile, $
         var FinalMarkup = '<tr>'
         for (let x in value) {
             if (x === 'name') {
-                FinalMarkup = FinalMarkup + '<td><a href=/websites/WPHome?ID=' + value.id + '>' + value[x] + '</a></td>';
+                FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><a href=/websites/WPHome?ID=' + value.id + '>' + value[x] + '</a></td>';
             } else if (x !== 'url' && x !== 'deleteURL' && x !== 'id') {
-                FinalMarkup = FinalMarkup + '<td>' + value[x] + "</td>";
+                FinalMarkup = FinalMarkup + '<td class="px-6 py-3">' + value[x] + "</td>";
             }
         }
-        FinalMarkup = FinalMarkup + '<td><button onclick="DeployToProductionInitial(' + value.id + ')" data-toggle="modal" data-target="#DeployToProduction" style="margin-bottom: 2%; display: block" aria-label="" type="button" class="btn btn-outline-primary">Deploy to Production</button>' +
-            '<a href="' + value.deleteURL + '"> <button aria-label="" class="btn btn-danger btn-icon-left m-b-10" type="button">Delete</button></a></td>'
+        FinalMarkup = FinalMarkup + '<td class="px-6 py-3"><button onclick="DeployToProductionInitial(' + value.id + ')" data-toggle="modal" data-target="#DeployToProduction" style="margin-bottom: 2%; display: block" aria-label="" type="button" class="bg-gray-200 px-2 py-1 text-black font-semibold">Deploy to Production</button>' +
+            '<a href="' + value.deleteURL + '"> <button aria-label="" class="bg-red-600 text-white px-2 py-1" type="button">Delete</button></a></td>'
         FinalMarkup = FinalMarkup + '</tr>'
         AppendToTable('#StagingBody', FinalMarkup);
     }
@@ -4589,6 +4623,41 @@ newapp.controller('WPsiteHomeV2', function ($scope, $http, $timeout, $compile, $
 
 });
 
+var PluginsList = [];
+
+
+function AddPluginToArray(cBox, name) {
+    if (cBox.checked) {
+        PluginsList.push(name);
+        alert(PluginsList);
+    } else {
+        const index = PluginsList.indexOf(name);
+        if (index > -1) {
+            PluginsList.splice(index, 1);
+        }
+        alert(PluginsList);
+    }
+}
+
+var ThemesList = [];
+
+function AddThemeToArray(cBox, name) {
+    if (cBox.checked) {
+        ThemesList.push(name);
+        alert(ThemesList);
+    } else {
+        const index = ThemesList.indexOf(name);
+        if (index > -1) {
+            ThemesList.splice(index, 1);
+        }
+        alert(ThemesList);
+    }
+}
+
+function AppendToTable(table, markup) {
+    $(table).append(markup);
+}
+
 newapp.controller('WPAddNewPluginV2', function ($scope, $http, $timeout, $window, $compile) {
     $scope.webSiteCreationLoading = true;
 
@@ -4812,96 +4881,58 @@ function selectpluginJsV2(val) {
 
 var domain_check = 0;
 
-// function checkbox_function() {
-//
-//     var checkBox = document.getElementById("myCheck");
-//     // Get the output text
-//
-//
-//     // If the checkbox is checked, display the output text
-//     if (checkBox.checked == true) {
-//         domain_check = 0;
-//         document.getElementById('Test_Domain').style.display = "block";
-//         document.getElementById('Own_Domain').style.display = "none";
-//
-//     } else {
-//         document.getElementById('Test_Domain').style.display = "none";
-//         document.getElementById('Own_Domain').style.display = "block";
-//         domain_check = 1;
-//     }
-//
-//     // alert(domain_check);
-// }
+// Get the modal element and the buttons to open and close it
+var modalAutoupdateConfiguration = document.getElementById('autoupdateConfiguration');
+var openAutoupdateConfiguration = document.getElementById('openAutoupdateConfiguration');
+var closeAutoupdateConfiguration = document.getElementById('closeAutoupdateConfiguration');
+
+// Function to open the modal
+function openModalAutoupdateConfiguration() {
+    modalAutoupdateConfiguration.style.display = 'block';
+}
+
+// Function to close the modal
+function closeModalAutoupdateConfiguration() {
+    modalAutoupdateConfiguration.style.display = 'none';
+}
+
+// Event listeners for opening and closing the modal
+openAutoupdateConfiguration.addEventListener('click', openModalAutoupdateConfiguration);
+closeAutoupdateConfiguration.addEventListener('click', closeModalAutoupdateConfiguration);
+
+// Close the modal if the user clicks outside of it
+window.addEventListener('click', function (event) {
+    if (event.target === modalAutoupdateConfiguration) {
+        closeModal();
+    }
+});
+var modalSecurity = document.getElementById('security');
+var openSecurity = document.getElementById('openSecurity');
+var closeSecurity = document.getElementById('closeSecurity');
+
+// Function to open the modal
+function openModalSecurity() {
+    modalSecurity.style.display = 'block';
+}
+
+// Function to close the modal
+function closeModalSecurity() {
+    modalSecurity.style.display = 'none';
+}
+
+// Event listeners for opening and closing the modal
+openSecurity.addEventListener('click', openModalSecurity);
+closeSecurity.addEventListener('click', closeModalSecurity);
+
+// Close the modal if the user clicks outside of it
+window.addEventListener('click', function (event) {
+    if (event.target === modalSecurity) {
+        closeModal();
+    }
+});
 
 
-// function DeleteWPNow(url) {
-//     FurlDeleteWP = url;
-// }
-
-// function FinalDeleteWPNow() {
-//     window.location.href = FurlDeleteWP;
-// }
-
-// function openModal() {
-//     const modal = document.getElementById("myModal");
-//     modal.classList.remove("hidden");
-// }
-//
-// function closeModal() {
-//     const modal = document.getElementById("myModal");
-//     modal.classList.add("hidden");
-// }
-//
-// document.addEventListener("DOMContentLoaded", function () {
-//     const openModalButton = document.getElementById("openModalButton");
-//     const closeModalButton = document.getElementById("closeModalButton");
-//
-//     openModalButton.addEventListener("click", openModal);
-//     closeModalButton.addEventListener("click", closeModal);
-// });
-
-// function openModalDelete() {
-//         var modal = document.getElementById('popup-modal');
-//         modal.classList.remove('hidden');
-//     }
-//
-//     function closeModalDelete() {
-//         var modal = document.getElementById('popup-modal');
-//         modal.classList.add('hidden');
-//     }
-//
-//     document.addEventListener("DOMContentLoaded", function () {
-//         var deleteButton = document.querySelector('[data-modal-toggle="popup-modal"]');
-//         var closeButton = document.querySelector('[data-modal-hide="popup-modal"]');
-//
-//         deleteButton.addEventListener("click", openModalDelete);
-//         closeButton.addEventListener("click", closeModalDelete);
-//     });
-//
-//
-// function openModal() {
-//     document.getElementById('settings').classList.remove('hidden');
-// }
-//
-// function closeModal() {
-//     document.getElementById('settings').classList.add('hidden');
-// }
-// function openModal() {
-//         document.getElementById('modal').classList.remove('hidden');
-//     }
-//
-//     function closeModal() {
-//         document.getElementById('modal').classList.add('hidden');
-//     }
-//
-//     function deleteChildDomain() {
-//         // Implement your delete logic here
-//         console.log('Deleting child domain...');
-//         closeModal();
-//     }
-
-
-function showTab(tabId) {
+function showTab(tabId,tabColour) {
     // Hide all tabs
     var tabs = document.getElementsByClassName('tab-content');
     for (var i = 0; i < tabs.length; i++) {
@@ -4915,3 +4946,5 @@ function showTab(tabId) {
     }
 }
 
+
+
diff --git a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
index 65032cdb6..4db6f6cf0 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
@@ -390,6 +390,9 @@
                                                type="text" class="form-control" id="stagingName">
                                     </div>
                                 </div>
+
+
+
                                 <div ng-hide="stagingDetailsForm" class="form-group">
 
                                     <div ng-hide="installationDetailsForm" class="form-group">
@@ -488,6 +491,9 @@
                                     </div>
                                 </div>
                                 {#                                end my work#}
+
+
+
                                 <div ng-hide="stagingDetailsForm" class="center-div mt-5 ">
                                     <button ng-click="CreateStagingNow()"
                                             style="margin-bottom: 2%!important;margin-top: 50px"
diff --git a/websiteFunctions/templates/websiteFunctions/WPsiteHomeV2.html b/websiteFunctions/templates/websiteFunctions/WPsiteHomeV2.html
index 30e1a02bb..62f303f8f 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsiteHomeV2.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsiteHomeV2.html
@@ -22,7 +22,7 @@
         <div class="p-8 border shadow-lg mt-6">
             <p class="text-2xl font-bold">WORDPRESS MANAGER</p>
             <div>
-                <ul class="flex mt-4 text-xl font-semibold text-gray-600 px-2 justify-between">
+                <ul class="flex mt-4 text-xl font-semibold text-gray-600 px-2 gap-8">
                     <li class="hover:text-orange-600 active"><a href="#" onclick="showTab('tab1')" aria-selected="true">General</a>
                     </li>
                     <li class="hover:text-orange-600"><a href="#" ng-click="GetCurrentPlugins()"
@@ -121,7 +121,6 @@
                 </div>
                 <div class="mt-2">
                     <p class="font-semibold">WordPress Version</p>
-                    <p id="WPVersion" class="text-sm lh-150"></p>
                     <p id="WPVersion" class="font-bold text-orange-600"></p>
                 </div>
                 <div class="mt-2">
@@ -218,6 +217,8 @@
                     <table class="w-full text-sm text-left rtl:text-right text-gray-500 mt-6">
                         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                         <tr>
+                            <th scope="col" class="px-6 py-3">
+                            </th>
                             <th scope="col" class="px-6 py-3">
                                 Plugin
                             </th>
@@ -238,6 +239,9 @@
                         <tbody id="PluginBody">
                         </tbody>
                     </table>
+                    <div class="mt-4">
+                        <hr>
+                    </div>
                 </div>
             </div>
             <div id="tab3" class="tab-content" style="display: none;">
@@ -275,6 +279,8 @@
                     <table class="w-full text-sm text-left rtl:text-right text-gray-500 mt-6">
                         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                         <tr>
+                            <th scope="col" class="px-6 py-3">
+                            </th>
                             <th scope="col" class="px-6 py-3">
                                 Theme
                             </th>
@@ -292,9 +298,12 @@
                             </th>
                         </tr>
                         </thead>
-                        <tbody id="PluginBody">
+                        <tbody id="ThemeBody">
                         </tbody>
                     </table>
+                    <div class="mt-4">
+                        <hr>
+                    </div>
                 </div>
             </div>
             <div id="tab4" class="tab-content" style="display: none;">
@@ -302,22 +311,189 @@
                     <div>
                         <p class="text-xl font-bold">Create Staging site</p>
                     </div>
-                    <div class="flex mt-3">
+                    <div ng-hide="stagingDetailsForm" class="flex mt-3">
                         <p class="w-40 font-semibold">Name</p>
                         <input id="stagingName" class="w-full border" type="text">
                     </div>
-                    <div class="flex mt-3">
+
+                    <div ng-hide="stagingDetailsForm" class="flex mt-3">
                         <p class="w-40 font-semibold">Domain Name</p>
-                        <input class="w-full border" type="text"
-                               placeholder=" Do not enter WWW, it will be auto created!">
+                        <input id="TestDomainNameCreate" class="w-full border" type="text">
                     </div>
-                    <div class="flex justify-center mt-3">
-                        <button class="bg-orange-600 px-2 py-2 text-white font-semibold">Create Now</button>
+
+{#                    <div ng-hide="stagingDetailsForm" class="form-group">#}
+{##}
+{#                        <div ng-hide="installationDetailsForm" class="form-group">#}
+{#                            <label class="col-sm-2 control-label" style="margin-top: 10px; display: none"#}
+{#                                   style="margin-bottom: 15px; display: none">{% trans "Test Domain" %}</label>#}
+{#                            <label style="display: none" class="switch ">#}
+{#                                <input type="checkbox" id="Create_Staging_Check"#}
+{#                                       onclick="create_staging_checkbox_function()"#}
+{#                                       style="margin-top: 10px">#}
+{#                                <span class="slider"></span>#}
+{#                            </label>#}
+{##}
+{#                            <label style=" display: none" id="help">#}
+{#                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"#}
+{#                                     style="padding-top: 10px"#}
+{#                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">#}
+{#                                    <path fill="currentColor"#}
+{#                                          d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 0 0-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793c.15-.15.339-.3.535-.458c.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0 0 12 6zm-1 10h2v2h-2z"/>#}
+{#                                    <path fill="currentColor"#}
+{#                                          d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8s8 3.589 8 8s-3.589 8-8 8z"/>#}
+{#                                </svg>#}
+{##}
+{#                            </label>#}
+{#                            <label class="help_test_domain">#}
+{#                                The test domain allows you to deploy websites without the need to add DNS#}
+{#                                records, it#}
+{#                                allows you to create staging environments, deploy test websites, and much#}
+{#                                more...#}
+{##}
+{#                            </label>#}
+{#                            <br><br>#}
+{##}
+{##}
+{#                            <div id="Website_Create_Test_Domain" class="tabcontent"#}
+{#                                 style="border: none">#}
+{#                                <div ng-hide="installationDetailsForm" class="form-group"#}
+{#                                     ng-if="{{ test_domain_data }} == 1 ">#}
+{#                                    <label class="col-sm-2 control-label">{% trans "Domain Name" %}</label>#}
+{#                                    <div class="col-sm-10">#}
+{#                                        <div class="input-group bootstrap-touchspin">#}
+{#                                    <span#}
+{#                                            class="input-group-addon bootstrap-touchspin-prefix"#}
+{#                                            style="display: none;"></span>#}
+{#                                            <input id="TestDomainNameCreate"#}
+{#                                                   class="form-control"#}
+{#                                                   type="text" value=""#}
+{#                                                   name="touchspin-demo-1"#}
+{#                                                   style="display: block;"#}
+{#                                                   placeholder="{% trans "Enter Subdomain Here" %}">#}
+{##}
+{#                                            <span style="width: 48%" class="input-group-btn">#}
+{#                                        <input id="Part2_domainNameCreate" class="form-control"#}
+{#                                               type="text" name="Part2_domainNameCreate"#}
+{#                                               style="display: block;color: black;font-weight: bold;color: black;opacity: 1"#}
+{#                                               placeholder=".{{ Randam_String }}.cyberpanel.website"#}
+{#                                               value=".{{ Randam_String }}.cyberpanel.website" readonly></span>#}
+{#                                        </div>#}
+{#                                    </div>#}
+{#                                    <div ng-show="websiteCreationForm.dom.$error.pattern"#}
+{#                                         class="current-pack">{% trans "Invalid Domain (Note: You don't need to add 'http' or 'https')" %}</div>#}
+{#                                </div>#}
+{#                                <div ng-if="{{ test_domain_data }} == 0 ">#}
+{#                                    <center>Looks like you have not subscribed to temporary domain feature,#}
+{#                                        <a#}
+{#                                                href="https://go.cyberpanel.net/TempDomain">click here</a>#}
+{#                                        for more details.#}
+{#                                    </center>#}
+{#                                </div>#}
+{#                            </div>#}
+{##}
+{#                            <div id="Website_Create_Own_Domain" class="tabcontent"#}
+{#                                 style="border: none;display: none">#}
+{##}
+{#                                <div ng-hide="installationDetailsForm" class="form-group">#}
+{#                                    <label class="col-sm-2 control-label">{% trans "Domain Name" %}</label>#}
+{#                                    <div class="col-sm-10">#}
+{#                                        <div class="input-group bootstrap-touchspin">#}
+{#                                    <span#}
+{#                                            class="input-group-addon bootstrap-touchspin-prefix"#}
+{#                                            style="display: none;"></span>#}
+{#                                            <input ng-model="own_domainNameCreate" id="touchspin-demo-1"#}
+{#                                                   class="col-sm-10 form-control"#}
+{#                                                   type="text" value=""#}
+{#                                                   name="touchspin-demo-1"#}
+{#                                                   style="display: block;"#}
+{#                                                   placeholder="{% trans "Do not enter WWW, it will be auto created!" %}">#}
+{##}
+{#                                            <span style="width: 25%" class="input-group-btn">#}
+{#                                       </span></div>#}
+{#                                    </div>#}
+{#                                    <div ng-show="websiteCreationForm.dom.$error.pattern"#}
+{#                                         class="current-pack">{% trans "Invalid Domain (Note: You don't need to add 'http' or 'https')" %}</div>#}
+{#                                </div>#}
+{#                            </div>#}
+{##}
+{#                        </div>#}
+{#                    </div>#}
+
+
+                    <div ng-hide="stagingDetailsForm" class="flex justify-center mt-3">
+                        <button ng-click="CreateStagingNow()" class="bg-orange-600 px-2 py-2 text-white font-semibold">
+                            Create Now
+                            <i class="glyph-icon icon-arrow-right"></i></button>
+                    </div>
+
+
+                    <div style="margin-top: 1%" ng-hide="installationProgress" class="form-group">
+                        <label class="col-sm-2 control-label"></label>
+                        <div class="col-sm-7">
+
+                            <div class="alert alert-success text-center">
+                                <h2>{$ currentStatus $}</h2>
+                            </div>
+
+                            <div class="progress">
+                                <div class="w-full bg-gray-100 rounded-full mt-3">
+                                    <div id="installProgress"
+                                         class="bg-green-600 text-xs font-medium text-white text-center p-2 leading-none rounded-full"
+                                         style="width:0%">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div ng-hide="errorMessageBox" class="alert alert-danger">
+                                <p>{% trans "Error message:" %} {$ errorMessage $}</p>
+                            </div>
+
+                            <div ng-hide="success" class="alert alert-success">
+                                <p>{% trans "Website succesfully created." %}</p>
+                            </div>
+
+
+                            <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
+                            </div>
+
+
+                        </div>
+                    </div>
+                    <div ng-hide="installationProgress" class="flex justify-center mt-3">
+                        <button ng-disabled="goBackDisable"
+                                ng-click="goBack()"
+                                class="bg-blue-500 px-3 py-2 rounded-lg text-xl font-semibold text-white">
+                            Go Back
+                        </button>
+                    </div>
+                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 mt-6">
+                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3">
+                                Name
+                            </th>
+                            <th scope="col" class="px-6 py-3">
+                                Domain
+                            </th>
+                            <th scope="col" class="px-6 py-3">
+                                Path
+                            </th>
+                            <th scope="col" class="px-6 py-3">
+                                Action
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody id="StagingBody">
+                        </tbody>
+                    </table>
+                    <div class="mt-4">
+                        <hr>
                     </div>
                 </div>
             </div>
             <div id="tab5" class="tab-content" style="display: none;">
-                <div class="p-8">
+                <div name="websiteCreationForm" action="/" id="createPackages" class="p-8">
                     <div class="flex items-center">
                         <p class="text-xl font-bold">Create Backup</p>
                         <a class="ml-3" href="{% url 'RestoreBackups' %}">{% trans "Restore Backups " %}></a>
@@ -325,7 +501,7 @@
                     <div class="mt-3">
                         <hr>
                     </div>
-                    <div class="flex mt-3">
+                    <div ng-hide="installationDetailsForm" class="flex mt-3">
                         <p class="w-40 font-semibold">Select Backup Type</p>
                         <select id="backuptype" class="form-control border">
                             <option value="1">Website and Database Both</option>
@@ -336,7 +512,7 @@
                     <div class="mt-3">
                         <hr>
                     </div>
-                    <div class="flex justify-center mt-3">
+                    <div ng-hide="installationDetailsForm" id="createbackupbutton" class="flex justify-center mt-3">
                         <button ng-click="CreateBackup()" class="bg-orange-600 px-2 py-2 text-white font-semibold">
                             Create Backup
                         </button>
@@ -344,6 +520,47 @@
                              ng-hide="wordpresshomeloading"
                              src="{% static 'images/loading.gif' %}">
                     </div>
+                    <div style="margin-top: 1%" ng-hide="installationProgress"
+                         class="form-group">
+                        <label class="col-sm-2 control-label"></label>
+                        <div class="col-sm-7">
+
+                            <div class="alert alert-success text-center">
+                                <h2>{$ currentStatus $}</h2>
+                            </div>
+
+                            <div class="progress">
+                                <div class="w-full bg-gray-100 rounded-full mt-3">
+                                    <div id="installProgressbackup"
+                                         class="bg-green-600 text-xs font-medium text-white text-center p-2 leading-none rounded-full"
+                                         style="width:0%">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div ng-hide="errorMessageBox" class="alert alert-danger">
+                                <p>{% trans "Error message:" %} {$ errorMessage $}</p>
+                            </div>
+
+                            <div ng-hide="success" class="alert alert-success">
+                                <p>{% trans "Backup succesfully created." %}</p>
+                            </div>
+
+
+                            <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
+                            </div>
+
+
+                        </div>
+                    </div>
+                    <div ng-hide="installationProgress" class="flex justify-center mt-3">
+                        <button ng-disabled="goBackDisable"
+                                ng-click="goBack()"
+                                class="bg-blue-500 px-3 py-2 rounded-lg text-xl font-semibold text-white">
+                            Go Back
+                        </button>
+                    </div>
                 </div>
             </div>
             <div id="tab6" class="tab-content" style="display: none;">
@@ -358,7 +575,7 @@
                     <div class="flex mt-3">
                         <p class="w-40 font-semibold">Database Name</p>
                         <a target="_blank" href="{% url 'phpMyAdmin' %}">
-                            <div id="DB_Name" class="mb-10 text-bold"></div>
+                            <div id="DB_Name" class="mb-10 font-semibold text-blue-600"></div>
                         </a>
                     </div>
                     <div class="mt-3">
@@ -380,9 +597,11 @@
                     </div>
                 </div>
             </div>
+
+
             <div class="mt-4 px-4">
                 <ul class="flex gap-10">
-                    <a href="/websites/{{ wpsite.owner.domain }}">
+                    <a href="/websites/V2/{{ wpsite.owner.domain }}">
                         <li class="flex items-center">
                             <div>
                                 <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
@@ -402,41 +621,126 @@
                             <div class="ml-2">Manage Applications</div>
                         </li>
                     </a>
-                    <li class="flex items-center">
-                        <div>
-                            <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
-                                 xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                        d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
-                                        fill="#FF9A00"/>
-                                <path
-                                        d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
-                                        fill="#FF9A00"/>
-                                <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
-                                      stroke-miterlimit="10"/>
-                                <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
-                                      stroke-miterlimit="10"/>
-                            </svg>
+                    <li>
+                        <div class="flex items-center cursor-pointer" id="openAutoupdateConfiguration">
+                            <div>
+                                <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                            d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
+                                            fill="#FF9A00"/>
+                                    <path
+                                            d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
+                                            fill="#FF9A00"/>
+                                    <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
+                                          stroke-miterlimit="10"/>
+                                    <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
+                                          stroke-miterlimit="10"/>
+                                </svg>
+                            </div>
+                            <div class="ml-2">Autoupdate Configuration</div>
+                        </div>
+                        <!-- Modal -->
+                        <div id="autoupdateConfiguration"
+                             class="modal hidden fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50">
+                            <div class="modal-content relative bg-white mx-auto my-8 p-6 max-w-md rounded shadow-md">
+                                {#                                    <span id="closeAutoupdateConfiguration"#}
+                                {#                                          class="absolute top-0 right-0 mt-4 mr-4 cursor-pointer text-gray-700">&times;</span>#}
+                                <p class="text-xl font-semibold">Updates !</p>
+                                <div class="mt-3">
+                                    <hr>
+                                </div>
+                                <p class="mt-3">Configure Settings For Automatic Updates.</p>
+                                <div>
+                                    <div class="mt-3 flex justify-between">
+                                        <p class="font-semibold w-40">Automatic Updates
+                                            (Currently: {{ wpsite.AutoUpdates }})</p>
+                                        <select class="w-40 border" id="AutomaticUpdates">
+                                            <option>Disabled</option>
+                                            <option>Minor and Security Updates</option>
+                                            <option>All (minor and major)</option>
+                                        </select>
+                                    </div>
+                                    <div class="mt-3 flex justify-between">
+                                        <p class="font-semibold w-40">Plugins
+                                            (Currently: {{ wpsite.PluginUpdates }})</p>
+                                        <select class="w-40 border" id="Plugins">
+                                            <option>Enabled</option>
+                                            <option>Disabled</option>
+                                        </select>
+                                    </div>
+                                    <div class="mt-3 flex justify-between">
+                                        <p class="font-semibold w-40">Themes (Currently: {{ wpsite.ThemeUpdates }})</p>
+                                        <select class="w-40 border" id="Themes">
+                                            <option>Enabled</option>
+                                            <option>Disabled</option>
+                                        </select>
+                                    </div>
+                                    <div class="mt-3">
+                                        <hr>
+                                    </div>
+                                    <div class="flex justify-end gap-2 mt-3">
+                                        <button ng-click="SaveUpdateConfig()" class="bg-blue-500 text-white px-2 py-1">
+                                            Save
+                                        </button>
+                                        <button id="closeAutoupdateConfiguration" ng-disabled="savingSettings"
+                                                class="bg-red-500 text-white px-2 py-1">Close
+                                        </button>
+                                    </div>
+
+                                </div>
+                            </div>
                         </div>
-                        <div class="ml-2">Autoupdate Configuration</div>
                     </li>
-                    <li class="flex items-center">
-                        <div>
-                            <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
-                                 xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                        d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
-                                        fill="#FF9A00"/>
-                                <path
-                                        d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
-                                        fill="#FF9A00"/>
-                                <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
-                                      stroke-miterlimit="10"/>
-                                <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
-                                      stroke-miterlimit="10"/>
-                            </svg>
+                    <li>
+                        <div class="flex items-center cursor-pointer" id="openSecurity">
+                            <div>
+                                <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                            d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
+                                            fill="#FF9A00"/>
+                                    <path
+                                            d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
+                                            fill="#FF9A00"/>
+                                    <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
+                                          stroke-miterlimit="10"/>
+                                    <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
+                                          stroke-miterlimit="10"/>
+                                </svg>
+                            </div>
+                            <div class="ml-2">Security</div>
+                        </div>
+                        <!-- Modal -->
+                        <div id="security"
+                             class="modal hidden fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50">
+                            <div class="modal-content relative bg-white mx-auto my-8 p-6 max-w-md rounded shadow-md">
+                                    <span id="closeSecurity"
+                                          class="absolute top-0 right-0 mt-4 mr-4 cursor-pointer text-gray-700">&times;</span>
+                                <p class="text-xl font-semibold">Security !
+                                    <img style="display: none"
+                                         id="wordpresshomeloadingsec"
+                                         ng-hide="wordpresshomeloading"
+                                         src="{% static 'images/loading.gif' %}"></p>
+                                <div class="mt-3">
+                                    <hr>
+                                </div>
+                                <div class="px-3 py-4">
+                                    <div class="w-full bg-pink-100">
+                                        <h4 class="px-3 py-2 font-semibold">Status</h4>
+                                        <p id="SecurityResult"></p>
+                                    </div>
+                                </div>
+                                <div class="flex justify-center gap-3">
+                                    <button ng-click="dataintegrity()" class="px-2 py-1 bg-blue-500 text-white">DATA
+                                        INTEGRITY
+                                    </button>
+                                    <button ng-click="installwpcore()" class="px-2 py-1 bg-blue-500 text-white">
+                                        RE-INSTALL WP CORE
+                                    </button>
+                                </div>
+                            </div>
                         </div>
-                        <div class="ml-2">Security</div>
                     </li>
                 </ul>
             </div>
diff --git a/websiteFunctions/templates/websiteFunctions/WPsitesListV2.html b/websiteFunctions/templates/websiteFunctions/WPsitesListV2.html
index c4bb3e96f..24b63ebb6 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsitesListV2.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsitesListV2.html
@@ -71,13 +71,13 @@
                                     </th>
                                     <th class="w-52 pt-2 font-semibold text-sm">
                                         <div class="flex items-center justify-center">
-                                            <button id="openModalButton"
-                                                    onclick="DeleteWPNow()"
+                                            <button id="openDeleteWPList"
+                                                    onclick="DeleteWPNow('{% url 'ListWPSitesV2' %}?DeleteID={{ sub.id }}')"
                                                     class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">
                                                 Delete
                                             </button>
 
-                                            <div id="myModal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
+                                            <div id="deleteWPList" class="fixed inset-0 bg-black bg-opacity-50 hidden">
                                                 <div class="flex items-center justify-center h-full">
                                                     <div class="bg-white p-8 rounded max-w-md">
                                                         <h2 class="text-lg font-bold mb-4">Delete WordPress
@@ -87,7 +87,7 @@
                                                                 class="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                                                             Delete
                                                         </button>
-                                                        <button id="closeModalButton"
+                                                        <button id="closeDeleteWPList"
                                                                 class="mt-4 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                                                             Cancel
                                                         </button>
diff --git a/websiteFunctions/templates/websiteFunctions/deleteWebsiteV2.html b/websiteFunctions/templates/websiteFunctions/deleteWebsiteV2.html
index f33225771..e2d110122 100644
--- a/websiteFunctions/templates/websiteFunctions/deleteWebsiteV2.html
+++ b/websiteFunctions/templates/websiteFunctions/deleteWebsiteV2.html
@@ -14,6 +14,7 @@
         <div>
             <div class="py-4">
                 <p class="text-xl font-bold">Delete Website</p>
+                <img id="deleteLoading" src="{% static 'images/loading.gif' %}">
             </div>
             <hr>
             <div>
@@ -38,5 +39,25 @@
                 Delete Website
             </button>
         </div>
+        <div class="mt-3">
+            <hr>
+        </div>
+        <div id="deleteWebsiteButton" class="flex justify-center mt-4">
+            <div>
+                <button type="button" ng-click="deleteWebsiteFinal()"
+                        class="bg-gray-200 px-3 py-1 rounded-lg text-xl font-semibold text-black">{% trans "Are you sure?" %}</button>
+            </div>
+        </div>
+        <div>
+            <div class="flex justify-center mt-4">
+                <div id="websiteDeleteFailure" class="text-red-500 font-semibold">
+                    <p>{% trans "Cannot delete website, Error message: " %} {$ errorMessage $}</p>
+                </div>
+                <div id="websiteDeleteSuccess" class="text-green-500 font-semibold">
+                    <p>{% trans "Website" %} <strong>{$ deletedWebsite $}</strong> {% trans "Successfully Deleted." %}
+                    </p>
+                </div>
+            </div>
+        </div>
     </div>
 {% endblock %}