fox-send/app/ui/report.js

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>`;
}
};