133 lines
4.2 KiB
JavaScript
133 lines
4.2 KiB
JavaScript
const html = require('choo/html');
|
|
const raw = require('choo/html/raw');
|
|
const assets = require('../../common/assets');
|
|
|
|
const REPORTABLES = ['Malware', 'Pii', 'Abuse'];
|
|
|
|
module.exports = function(state, emit) {
|
|
let submitting = false;
|
|
const file = state.fileInfo;
|
|
if (!file) {
|
|
return html`
|
|
<main class="main">
|
|
<section
|
|
class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
|
|
>
|
|
<p class="mb-4 leading-normal">
|
|
${state.translate('reportUnknownDescription')}
|
|
</p>
|
|
</section>
|
|
</main>
|
|
`;
|
|
}
|
|
if (file.reported) {
|
|
return html`
|
|
<main class="main">
|
|
<section
|
|
class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
|
|
>
|
|
<h1 class="text-center text-3xl font-bold my-2">
|
|
${state.translate('reportedTitle')}
|
|
</h1>
|
|
<p class="max-w-md text-center text-grey-80 leading-normal">
|
|
${state.translate('reportedDescription')}
|
|
</p>
|
|
<img src="${assets.get('notFound.svg')}" class="my-12" />
|
|
<p class="my-5">
|
|
<a href="/" class="btn rounded-lg flex items-center" role="button"
|
|
>${state.translate('okButton')}</a
|
|
>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
`;
|
|
}
|
|
return html`
|
|
<main class="main">
|
|
<section
|
|
class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
|
|
>
|
|
<div
|
|
class="flex flex-col w-full max-w-sm h-full mx-auto items-center justify-center"
|
|
>
|
|
<h1 class="text-2xl font-bold mb-4">
|
|
${state.translate('reportFile')}
|
|
</h1>
|
|
<p class="mb-4 leading-normal font-semibold">
|
|
${state.translate('reportDescription')}
|
|
</p>
|
|
<form onsubmit="${report}" data-no-csrf>
|
|
<fieldset onchange="${optionChanged}">
|
|
<ul
|
|
class="list-none p-4 mb-6 rounded-sm bg-grey-10 dark:bg-black"
|
|
>
|
|
${REPORTABLES.map(
|
|
reportable =>
|
|
html`
|
|
<li class="mb-2 leading-normal">
|
|
<label
|
|
for="${reportable.toLowerCase()}"
|
|
class="flex items-center"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="reason"
|
|
id="${reportable.toLowerCase()}"
|
|
value="${reportable.toLowerCase()}"
|
|
class="mr-2 my-2 w-4 h-4"
|
|
/>
|
|
${state.translate(`reportReason${reportable}`)}
|
|
</label>
|
|
</li>
|
|
`
|
|
)}
|
|
<li class="mt-4 mb-2 leading-normal">
|
|
${raw(
|
|
replaceLinks(state.translate('reportReasonCopyright'), [
|
|
'https://www.mozilla.org/about/legal/report-infringement/'
|
|
])
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</fieldset>
|
|
<input
|
|
type="submit"
|
|
disabled
|
|
class="btn rounded-lg w-full flex-shrink-0 focus:outline"
|
|
title="${state.translate('reportButton')}"
|
|
value="${state.translate('reportButton')}"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
`;
|
|
|
|
function optionChanged(event) {
|
|
event.stopPropagation();
|
|
const button = event.currentTarget.nextElementSibling;
|
|
button.disabled = false;
|
|
}
|
|
|
|
function report(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
if (submitting) {
|
|
return;
|
|
}
|
|
submitting = true;
|
|
state.fileInfo.reported = true;
|
|
const form = event.target;
|
|
emit('report', { reason: form.reason.value });
|
|
}
|
|
|
|
function replaceLinks(str, urls) {
|
|
let i = 0;
|
|
const s = str.replace(
|
|
/<a>([^<]+)<\/a>/g,
|
|
(m, v) => `<a class="text-blue" href="${urls[i++]}">${v}</a>`
|
|
);
|
|
return `<p>${s}</p>`;
|
|
}
|
|
};
|