Skip to content

Commit

Permalink
update the whole domain system in company dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@JisanAR03
JisanAR03 committed Jul 17, 2024
1 parent 2e60585 commit 0a8a700
Show file tree
Hide file tree
Showing 6 changed files with 731 additions and 209 deletions.
115 changes: 84 additions & 31 deletions company/templates/company/add_domain.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,18 @@ <h2 class="text-base font-semibold leading-7 text-gray-900">Domain Information</
<label for="webshot"
class="relative cursor-pointer rounded-md bg-white font-semibold text-red-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-red-600 focus-within:ring-offset-2 hover:text-red-500">
<span class="text-red-600">Upload a webshot</span>
<input id="webshot" name="webshot" type="file" class="sr-only" />
<input id="webshot"
name="webshot"
type="file"
class="sr-only"
onchange="displayWebshotPreview()" />
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
<div id="webshotPreview" class="mt-4"></div>
</div>
</div>
</div>
Expand All @@ -152,13 +157,13 @@ <h2 class="text-base font-semibold leading-7 text-gray-900">Domain Managers</h2>
Add Emails which will be allowed to start hunts and manage reported bugs.
Email should be domain mail and should be registerd user on BLT.
</p>
<button onclick="add_email_container()"
<button onclick="add_user_selection()"
type="button"
class="w-[120px] h-[40px] bg-red-500 text-white font-bold rounded-md mt-2 hover:bg-red-600 transition-all">
Add Email
Add User
</button>
<div class="sm:col-span-4 mt-5" id="email-container">
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
<div class="sm:col-span-4 mt-5" id="user-selection-container">
<label for="user" class="block text-sm font-medium leading-6 text-gray-900">Select Domain Manager</label>
</div>
</div>
<div class="border-b border-gray-900/10 pb-12 mt-5">
Expand Down Expand Up @@ -199,9 +204,6 @@ <h2 class="text-base font-semibold leading-7 text-gray-900">Notifications</h2>
</div>
</div>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button"
onclick="cancelForm()"
class="text-md font-semibold leading-6 text-gray-900">Cancel</button>
<button type="submit"
class="rounded-md bg-red-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
Save
Expand All @@ -212,38 +214,53 @@ <h2 class="text-base font-semibold leading-7 text-gray-900">Notifications</h2>
{% endblock body %}
{% block js %}
<script>
function remove_email_container(){
let email_container = document.getElementById("email-container");
let lst_child = email_container.lastElementChild;
email_container.removeChild(lst_child);
function remove_user_selection(event) {
let user_container = document.getElementById("user-selection-container");
let parentDiv = event.target.closest('.user-selection');
user_container.removeChild(parentDiv);
updateUserSelections();
}

function add_email_container(){
const email_container_child_html = document.createElement('div');
email_container_child_html.innerHTML = `
<div class="mt-2 flex flex-row items-center w-[50%]">
<input name="email" type="email" autocomplete="email" required class="w-[90%] block rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6" />
<button type="button" onclick="remove_email_container()">
<i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>
</button>
</div>
function add_user_selection() {
const user_selection_child_html = document.createElement('div');
user_selection_child_html.classList.add('mt-2', 'flex', 'flex-row', 'items-center', 'w-[50%]', 'user-selection');
user_selection_child_html.innerHTML = `
<select name="user" class="w-[90%] block rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6" onchange="updateUserSelections()">
${getUserOptions([])}
</select>
<button type="button" onclick="remove_user_selection(event)">
<i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>
</button>
`;

let email_container = document.getElementById("email-container");
email_container.appendChild(email_container_child_html)
let user_container = document.getElementById("user-selection-container");
user_container.appendChild(user_selection_child_html);
updateUserSelections();
}

</script>
<script>
function cancelForm(){
let deleteForm = document.getElementById("deleteForm");
let confirmDelete = confirm("Are you sure you want to cancel, your progress would be lost.");
if (confirmDelete === true){
deleteForm.submit();
}
function getUserOptions(excludeList) {
let optionsHtml = '<option value="" disabled selected>Select a user</option>';
{% for user in users %}
if (!excludeList.includes('{{ user.email }}')) {
optionsHtml += `<option value="{{ user.email }}">{{ user.username }} ({{ user.email }})</option>`;
}
{% endfor %}
return optionsHtml;
}

function updateUserSelections() {
const selects = document.querySelectorAll('#user-selection-container select');
const selectedUsers = Array.from(selects).map(select => select.value);

selects.forEach(select => {
const currentValue = select.value;
select.innerHTML = getUserOptions(selectedUsers.filter(user => user !== currentValue));
select.value = currentValue; // Preserve the current value after options are updated
});
}



function displayLogoPreview() {
var fileInput = document.getElementById("logo");
var previewDiv = document.getElementById("previewLogoDiv");
Expand All @@ -265,5 +282,41 @@ <h2 class="text-base font-semibold leading-7 text-gray-900">Notifications</h2>
}
}

function displayWebshotPreview() {
var fileInput = document.getElementById("webshot");
var previewDiv = document.getElementById("webshotPreview");

if (fileInput.files.length > 0) {
var file = fileInput.files[0];
var reader = new FileReader();

reader.onload = function(event) {
var img = new Image();
img.src = event.target.result;

img.onload = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var maxDim = 300;
var scale = Math.min(maxDim / img.width, maxDim / img.height);

canvas.width = img.width * scale;
canvas.height = img.height * scale;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

previewDiv.innerHTML = "";
previewDiv.style.display = "flex";
previewDiv.style.justifyContent = "center";
previewDiv.appendChild(canvas);
};
};

reader.readAsDataURL(file);
} else {
previewDiv.innerHTML = "";
}
}
</script>
{% endblock js %}
25 changes: 10 additions & 15 deletions company/templates/company/company_manage_domains.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h5 class="text-xl font-bold leading-none text-gray-900">All Domains</h5>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="w-8 h-8 rounded-full"
src="{{ MEDIA_URL }}{{ domain.logo }}"
src="{% if domain.logo %}{{ MEDIA_URL }}{{ domain.logo }}{% else %}https://via.placeholder.com/50?text=No+Logo{% endif %}"
alt="Domain Logo"
width="32px"
height="32px">
Expand All @@ -51,15 +51,21 @@ <h5 class="text-xl font-bold leading-none text-gray-900">All Domains</h5>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">{{ domain.url }}</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
<a href="{% url 'view_domain' domain.id %}">View</a>
<a href="{% url 'edit_domain' company domain.id %}">Edit</a>
<a class="ml-4" href="{% url 'view_domain' domain.id %}">View</a>
<form id="deleteForm"
action="{% url 'add_domain' company %}?domain={{ domain.id }}"
action="{% url 'add_domain' company %}"
method="post"
class="inline">
{% csrf_token %}
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="domain_id" value="{{ domain.id }}">
<button type="submit"
class="ml-4"
onclick="return confirm('Are you sure you want to delete this domain?')">
Delete
</button>
</form>
<button type="button" onclick="deleteDomain()" class="ml-2">Delete</button>
</div>
</div>
</li>
Expand All @@ -69,14 +75,3 @@ <h5 class="text-xl font-bold leading-none text-gray-900">All Domains</h5>
</div>
</div>
{% endblock body %}
{% block js %}
<script>
function deleteDomain(){
let deleteForm = document.getElementById("deleteForm");
let confirmDelete = confirm("this will delete the domain and hunts associated with it.");
if (confirmDelete === true){
deleteForm.submit();
}
}
</script>
{% endblock js %}
Loading

0 comments on commit 0a8a700

Please sign in to comment.