profanity filtering front end

This commit is contained in:
durn
2026-04-23 17:22:42 -06:00
parent ac435d4792
commit e768523efc
@@ -8,6 +8,7 @@
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<script th:src="@{/js/bad-words-list.js}"></script>
</head>
<body>
@@ -111,6 +112,11 @@
<script>
// ---- DOM refs ----
function isProfane(str) {
const lower = str.toLowerCase();
return bannedWords.some(word => lower.includes(word));
}
const ingredientContainer = document.getElementById('ingredients-container');
const stepsContainer = document.getElementById('steps-container');
const dropZone = document.getElementById('drop-zone');
@@ -236,10 +242,11 @@ document.getElementById('add-tag-btn').addEventListener('click', function (e) {
function addTag() {
const input = document.getElementById('tag-input');
const val = input.value.trim().toLowerCase().replace(/\s+/g, '-');
if (!val || tags.includes(val)) {
if (!val || tags.includes(val) || isProfane(val)) {
input.value = '';
return;
}
tags.push(val);
input.value = '';
renderTags();
@@ -360,11 +367,21 @@ function validateForm() {
showError(title, 'Title is required');
valid = false;
}
if (isProfane(title.value)) {
showError(title, 'Title contains inappropriate language');
valid = false;
}
if (!desc.value.trim()) {
showError(desc, 'Description is required');
valid = false;
}
if (isProfane(desc.value)) {
showError(desc, 'Description contains inappropriate language');
valid = false;
}
if (!prep.value.trim() || isNaN(Number(prep.value)) || Number(prep.value) <= 0) {
showError(prep, 'Enter a valid prep time');
@@ -397,6 +414,9 @@ function validateForm() {
filledIngredientRows.forEach(row => {
const nameInput = row.querySelector('.ing-name');
const qtyInput = row.querySelector('.ing-qty');
const unitInput = row.querySelector('.ing-unit');
const noteInput = row.querySelector('.ing-notes');
clearError(nameInput);
clearError(qtyInput);
@@ -405,6 +425,21 @@ function validateForm() {
showError(nameInput, 'Ingredient name is required');
valid = false;
}
if (isProfane(nameInput.value.trim())) {
showError(nameInput, 'Ingredient name contains inappropriate language');
valid = false;
}
if (isProfane(unitInput.value.trim())) {
showError(noteInput, 'Ingredient unit contains inappropriate language');
valid = false;
}
if (isProfane(noteInput.value.trim())) {
showError(noteInput, 'Ingredient note contains inappropriate language');
valid = false;
}
const qtyVal = qtyInput.value.trim();
if (!isValidQuantity(qtyVal)) {
@@ -419,7 +454,14 @@ function validateForm() {
showError(stepAreas[0], 'Add at least one instruction step');
valid = false;
}
filledSteps.forEach(textarea => {
if (isProfane(textarea.value)) {
showError(textarea, 'Step contains inappropriate language');
valid = false;
}
});
if (!valid) {
document.querySelector('.invalid')?.scrollIntoView({
behavior: 'smooth',