Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update the whole domain system in company dashboard #2456

Merged
merged 3 commits into from
Jul 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 84 additions & 31 deletions company/templates/company/add_domain.html
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
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
Loading