Merge branch 'main' of gitlab.com:etc404/software-engineering-project

2026-05-10 20:52:58 +00:00 · 2026-04-23 23:58:05 -06:00
parent bd8ca28556 246f045c2a
commit 05a4775444
7 changed files with 313 additions and 343 deletions
@@ -420,3 +420,35 @@ a {
  flex-shrink: 0;
  width: 50%;
 }
+
+/* =========================
+   Top Row (My Recipes + Feedback)
+========================= */
+.profile-top-row {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.profile-top-row h2 {
+  margin: 0;
+}
+
+/* =========================
+   Feedback Button
+========================= */
+.feedback-btn {
+  background: var(--dark);
+  color: var(--dark-yellow) !important;
+  border-radius: 8px;
+  padding: 6px 14px;
+  font-weight: 700;
+  font-size: 0.7em;
+  text-decoration: none !important;
+  display: inline-block;
+}
+
+.feedback-btn:hover {
+  background: var(--dusty-red-hover);
+}
@@ -8,6 +8,7 @@
    <title>Create Thyme Crunch Account</title>
    <link rel="stylesheet" th:href="@{css/create-account.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">
+    <script th:src="@{/js/bad-words-list.js}"></script>
 </head>
 <body>

@@ -58,6 +59,28 @@
 </html>

 <script>
+
+	function isProfane(str) {
+	  	const lower = str.toLowerCase();
+	  	return bannedWords.some(word => lower.includes(word));
+	}
+	
+	function showError(input, message) {
+		  input.classList.add('invalid');
+
+		  let error = input.parentElement.querySelector('.error-message');
+		  if (!error) {
+		    error = document.createElement('p');
+		    error.className = 'error-message';
+		    error.style.color = 'red';
+		    error.style.fontSize = '0.9em';
+		    error.style.marginTop = '6px';
+		    input.parentElement.appendChild(error);
+		  }
+
+		  error.textContent = message;
+		}
+	
    document.addEventListener("DOMContentLoaded", function () {

        const form = document.getElementById("createUserForm");
@@ -68,9 +91,10 @@
        function checkPasswords() {
            if (confirmPasswordField.value === "") {
                confirmPasswordField.classList.remove("invalid");
-                passwordError.textContent = "";
+                passwordError.textContent = "Password cannot be blank";
                return;
            }
+            

            if (passwordField.value !== confirmPasswordField.value) {
                confirmPasswordField.classList.add("invalid");
@@ -89,12 +113,21 @@

            const password = passwordField.value;
            const confirmPassword = confirmPasswordField.value;
+            const name = document.getElementById("username").value;
+            const email = document.getElementById("email").value;

            if (password !== confirmPassword) {
                confirmPasswordField.classList.add("invalid");
                passwordError.textContent = "Passwords do not match.";
                return;
            }
+            
+            if (isProfane(document.getElementById("username").value)) {
+        	    showError(username, 'Username contains inappropriate language');
+        	    return;
+          	}
+            
+

            const userData = {
                username: document.getElementById("username").value,
@@ -7,6 +7,7 @@
    <title>My Profile - Thyme Crunch</title>
    <link rel="stylesheet" th:href="@{css/my-profile.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">
+	<script th:src="@{/js/bad-words-list.js}"></script>
 </head>
 <body>

@@ -45,7 +46,13 @@
    <!-- Main Content — recipes -->
    <main class="main-content">

-        <h2>My Recipes</h2>
+        <div class="profile-top-row">
+            <h2>My Recipes</h2>
+            <a href="https://forms.gle/qUx73EL7vjBDBXde7"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="feedback-btn">Give Feedback</a>
+        </div>

        <p th:if="${#lists.isEmpty(profile.recipes)}">You have not created any recipes yet.</p>

@@ -88,7 +95,7 @@
                    <label for="bio">Bio</label>
                    <textarea id="bio" th:field="*{bio}" rows="6" maxlength="1000"></textarea>
                </div>
-                <button type="submit">Save</button>
+                <button type="submit" value='submit request' onclick='return btnClick();'>Save</button>
            </form>

        </div>
@@ -97,6 +104,56 @@
 </div>

 <script>
+function isProfane(str) {
+	  const lower = str.toLowerCase();
+	  return bannedWords.some(word => lower.includes(word));
+}
+</script>
+<script>
+function btnClick() {
+    const displayNameEl = document.getElementById('displayName');
+    const bioEl = document.getElementById('bio');
+    
+    clearError(displayNameEl);
+    clearError(bioEl);
+
+    if (isProfane(displayNameEl.value)) {
+        showError(displayNameEl, "Display name contains inappropriate language.");
+        return false;
+    }
+    if (isProfane(bioEl.value)) {
+        showError(bioEl, "Bio contains inappropriate language.");
+        return false;
+    }
+    return true;
+
+    function showError(input, message) {
+        input.classList.add('invalid');
+
+        let error = input.parentElement.querySelector('.error-message');
+        if (!error) {
+            error = document.createElement('p');
+            error.className = 'error-message';
+            error.style.color = 'red';
+            error.style.fontSize = '0.9em';
+            error.style.marginTop = '6px';
+            input.parentElement.appendChild(error);
+        }
+
+        error.textContent = message;
+    }
+    
+    function clearError(input) {
+    	  input.classList.remove('invalid');
+    	  const error = input.parentElement.querySelector('.error-message');
+    	  if (error) error.remove();
+    	}
+}
+</script>
+
+<script>
+	
+	
    // For cost display <!-- Cost change -->
 	function renderCost(cost) {
    const num = parseInt(cost, 10);
@@ -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>

@@ -115,6 +116,13 @@

 <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');
@@ -241,16 +249,16 @@ 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)) {
-    input.value = '';
-    return;
-  }
-  tags.push(val);
-  input.value = '';
-  renderTags();
-}
+	  const input = document.getElementById('tag-input');
+	  const val = input.value.trim().toLowerCase().replace(/\s+/g, '-');
+	  if (!val || tags.includes(val) || isProfane(val)) {
+		    input.value = '';
+		    return;
+		  }
+	  tags.push(val);
+	  input.value = '';
+	  renderTags();
+	}

 function removeTag(t) {
  tags.splice(tags.indexOf(t), 1);
@@ -381,11 +389,22 @@ 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');
@@ -409,17 +428,85 @@ function validateForm() {

  const ingredientRows = [...document.querySelectorAll('#ingredients-container .dynamic-row')];
  const hasIngredient = ingredientRows.some(row => row.querySelector('.ing-name').value.trim() !== '');
+  const filledIngredientRows = ingredientRows.filter(row => row.querySelector('.ing-name').value.trim() !== '');
  if (!hasIngredient && ingredientRows.length > 0) {
    showError(ingredientRows[0].querySelector('.ing-name'), 'Add at least one ingredient');
    valid = false;
  }
+  
+  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);
+
+	    if (!nameInput.value.trim()) {
+	      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)) {
+	      showError(qtyInput, 'Enter a valid quantity (e.g. 2, 1.5, 1/2, 1 1/2) or leave blank');
+	      valid = false;
+	    }
+	  });
+  
+  function isValidQuantity(val) {
+	  const cleaned = String(val ?? '').replace(/\s+/g, ' ').trim();
+
+	  if (cleaned === '') return true;
+
+	  if (/^\d+(\.\d+)?$/.test(cleaned)) {
+	    return true;
+	  }
+
+	  if (/^\d+\/\d+$/.test(cleaned)) {
+	    const [numerator, denominator] = cleaned.split('/');
+	    return Number(numerator) >= 0 && Number(denominator) > 0;
+	  }
+
+	  if (/^\d+\s\d+\/\d+$/.test(cleaned)) {
+	    const [whole, fraction] = cleaned.split(' ');
+	    const [numerator, denominator] = fraction.split('/');
+	    return Number(whole) >= 0 && Number(numerator) >= 0 && Number(denominator) > 0;
+	  }
+
+	  return false;
+	}

  const stepAreas = [...document.querySelectorAll('#steps-container textarea')];
+  const filledSteps = stepAreas.filter(textarea => textarea.value.trim() !== '');
  const hasStep = stepAreas.some(textarea => textarea.value.trim() !== '');
  if (!hasStep && stepAreas.length > 0) {
    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({