Skip to content

Commit

Permalink
Task: API for saving images OWASP-BLT#1206
Browse files Browse the repository at this point in the history
  • Loading branch information
@kr-2003
kr-2003 committed Jan 29, 2024
1 parent 3ca9642 commit 63114d2
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 58 deletions.
8 changes: 8 additions & 0 deletions website/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ body {
border-bottom-width: 1px;
}

.section-heading {
font-weight: 400;
font-size: 30px;
padding: 30px;
margin: 20px 0;
border-bottom-width: 1px;
}

.chrome-plugin {
color: #dd4252;
}
Expand Down
131 changes: 78 additions & 53 deletions website/templates/includes/md_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ <h1 class="text-gray-700 text-2xl font-semibold">BUG DESCRIPTION</h1>
</div>
</div>
<div class="flex">
<textarea id="markdownInput" name="markdown_description" class="flex-1 h-[200px] bg-gray-200 text-2xl resize-none border border-gray-300 rounded-md p-5" placeholder="Enter your markdown here..."></textarea>
<textarea id="markdownInput" name="markdown_description"
class="flex-1 h-[200px] bg-gray-200 text-2xl resize-none border border-gray-300 rounded-md p-5"
placeholder="Enter your markdown here..."></textarea>
<div id="previewContainer" class="h-[200px] flex-1 bg-white rounded-md p-4 hidden">
<div id="markdownPreview"></div>
</div>
Expand All @@ -26,65 +28,88 @@ <h1 class="text-gray-700 text-2xl font-semibold">BUG DESCRIPTION</h1>



<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js" integrity="sha384-KpuxVjTC2hfOkg5KV3jSdx1eA6xy0PGS0wNfDrwf4sZBnZdzlIsnkH+LzLkavmH7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"
integrity="sha384-KpuxVjTC2hfOkg5KV3jSdx1eA6xy0PGS0wNfDrwf4sZBnZdzlIsnkH+LzLkavmH7" crossorigin="anonymous"></script>
<script>
const converter = new showdown.Converter();
const converter = new showdown.Converter({ parseImgDimensions: true });

const markdownInput = document.getElementById('markdownInput');
const previewButton = document.getElementById('previewButton');
const editButton = document.getElementById('editButton');
const previewContainer = document.getElementById('previewContainer');
const markdownPreview = document.getElementById('markdownPreview');
const boldButton = document.getElementById('boldButton');
const italicButton = document.getElementById('italicButton');
const imageButton = document.getElementById('imageButton');
const linkButton = document.getElementById('linkButton');
const markdownInput = document.getElementById('markdownInput');
const previewButton = document.getElementById('previewButton');
const editButton = document.getElementById('editButton');
const previewContainer = document.getElementById('previewContainer');
const markdownPreview = document.getElementById('markdownPreview');
const boldButton = document.getElementById('boldButton');
const italicButton = document.getElementById('italicButton');
const imageButton = document.getElementById('imageButton');
const linkButton = document.getElementById('linkButton');

const createIssueForm = document.getElementById('createIssueForm');

previewButton.addEventListener('click', () => {
const markdownText = markdownInput.value;
const markdownHTML = converter.makeHtml(markdownText);
console.log(markdownHTML)
markdownPreview.innerHTML = markdownHTML;
previewContainer.classList.remove('hidden');
markdownInput.classList.add('hidden');
previewButton.classList.add('hidden');
editButton.classList.remove('hidden');
});
const embedded_image_markdown = (markdownText) => {
const image = /\$\[img[1-5]\]/g;
const screenshotDiv = document.querySelectorAll("#files_manage img");
let screenshots = [];
screenshotDiv.forEach((element) => {
screenshots.push(element.attributes.src.value);
});
if (image.test(markdownText)) {
const matches = markdownText.match(image);
matches.forEach(element => {
const index = element.replace(/\D/g, '');
const image = screenshots[index - 1];
if (image !== undefined) {
markdownText = markdownText.replace(element, `![img${index}](${image} =100x80)`);
}
});
}
return markdownText;
};

editButton.addEventListener('click', () => {
markdownInput.classList.remove('hidden');
previewContainer.classList.add('hidden');
previewButton.classList.remove('hidden');
editButton.classList.add('hidden');
});
previewButton.addEventListener('click', () => {
let markdownText = markdownInput.value;
markdownText = embedded_image_markdown(markdownText);
const markdownHTML = converter.makeHtml(markdownText);
markdownPreview.innerHTML = markdownHTML;
previewContainer.classList.remove('hidden');
markdownInput.classList.add('hidden');
previewButton.classList.add('hidden');
editButton.classList.remove('hidden');
});

boldButton.addEventListener('click', () => {
insertMarkdownSyntax('**', '**');
});
editButton.addEventListener('click', () => {
markdownInput.classList.remove('hidden');
previewContainer.classList.add('hidden');
previewButton.classList.remove('hidden');
editButton.classList.add('hidden');
});

italicButton.addEventListener('click', () => {
insertMarkdownSyntax('_', '_');
});
boldButton.addEventListener('click', () => {
insertMarkdownSyntax('**', '**');
});

imageButton.addEventListener('click', () => {
const imageURL = prompt('Enter the URL of the image:');
if (imageURL) {
insertMarkdownSyntax('![alt text]', `(${imageURL})`);
}
});
italicButton.addEventListener('click', () => {
insertMarkdownSyntax('_', '_');
});

linkButton.addEventListener('click', () => {
const linkURL = prompt('Enter the URL:');
if (linkURL) {
insertMarkdownSyntax('[link text]', `(${linkURL})`);
}
});
imageButton.addEventListener('click', () => {
const imageURL = prompt('Enter the URL of the image:');
if (imageURL) {
insertMarkdownSyntax('![alt text]', `(${imageURL})`);
}
});

function insertMarkdownSyntax(startTag, endTag) {
const startPos = markdownInput.selectionStart;
const endPos = markdownInput.selectionEnd;
const selectedText = markdownInput.value.substring(startPos, endPos);
const modifiedText = `${startTag}${selectedText}${endTag}`;
markdownInput.value = markdownInput.value.substring(0, startPos) + modifiedText + markdownInput.value.substring(endPos);
}
linkButton.addEventListener('click', () => {
const linkURL = prompt('Enter the URL:');
if (linkURL) {
insertMarkdownSyntax('[link text]', `(${linkURL})`);
}
});

function insertMarkdownSyntax(startTag, endTag) {
const startPos = markdownInput.selectionStart;
const endPos = markdownInput.selectionEnd;
const selectedText = markdownInput.value.substring(startPos, endPos);
const modifiedText = `${startTag}${selectedText}${endTag}`;
markdownInput.value = markdownInput.value.substring(0, startPos) + modifiedText + markdownInput.value.substring(endPos);
}
</script>
37 changes: 33 additions & 4 deletions website/templates/issue.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,10 +372,12 @@ <h4>OS Version: {{ os_version }}</h4>
</div>
</div>
</div>
<h1 class="section-heading">Description</h1>
<div id="markdown-content"></div>

<div class="row">
<div class="col-md-6">
<h4>Screenshot:</h4>
<div id="screenshot-wrapper" class="col-md-6">
<h4 class="section-heading">Screenshots:</h4>
<hr>
{% if object.screenshot %}
<a href="{{ object.screenshot.url }}" data-lightbox="image">
Expand Down Expand Up @@ -426,14 +428,41 @@ <h3>Comments:</h3>
{% endif %}
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script type="text/javascript">

function embedded_image_markdown(markdownText) {
const image = /\$\[img[1-5]\]/g;
const screenshotDiv = document.querySelectorAll("#screenshot-wrapper img");
let screenshots = [];
screenshotDiv.forEach((element) => {
screenshots.push(element.attributes.src.value);
});
console.log(screenshots);
if (image.test(markdownText)) {
const matches = markdownText.match(image);
matches.forEach(element => {
const index = element.replace(/\D/g, '');
const image = screenshots[index - 1];
if (image !== undefined) {
markdownText = markdownText.replace(element, `![img${index}](${image} =300x100)`);
}
});
}
return markdownText;
};

function sanitizeURL(url) {
var a = document.createElement('a');
a.href = encodeURI(url);
return a.href;
}


var markdownText = '{{ object.markdown_description|escapejs }}';
markdownText = embedded_image_markdown(markdownText);
var converter = new showdown.Converter();
var htmlContent = converter.makeHtml(markdownText);
document.getElementById('markdown-content').innerHTML = htmlContent;
var label = "{{object.label}}";

$(document).on('click', '.edit-issue', function (e) {
Expand Down
2 changes: 1 addition & 1 deletion website/templates/report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ <h3 class="text-xl font-bold leading-none text-red-500">Latest Issues</h3>

<div class="bg-[#F3F5F7] flex flex-col items-center">

<form method='POST' action="#" enctype="multipart/form-data" class="w-[96%] bg-white rounded-2xl p-10 my-10 shadow-md">
<form id="createIssueForm" method='POST' action="#" enctype="multipart/form-data" class="w-[96%] bg-white rounded-2xl p-10 my-10 shadow-md">
{% csrf_token %}
<div class="w-full pb-12">
<p class="text-5xl font-semibold leading-7 text-gray-900">
Expand Down

0 comments on commit 63114d2

Please sign in to comment.