Update Input Validation

hasher-matcher-actioner/src/OpenMediaMatch/blueprints/curation.py

@@ -285,7 +285,7 @@ def exchange_create():
  api_type_name = data.get("api")
 
  if not re.match("^[A-Z0-9_]+$", bank):
- abort(400, "Field `bank` must match /^[A-Z0-9_]$/")
+ abort(400, "Field `bank` must match /^[A-Z0-9_]+$/")
 
  if not isinstance(api_json, dict):
  abort(400, "Field `api_json` must be object")

hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2

@@ -1,11 +1,12 @@
 {# Copyright (c) Meta Platforms, Inc. and affiliates. #}
 <h3> Banks </h3>
 <div class="w-50 my-1">
- <form action="/ui/create_bank" method="post" enctype="multipart/form-data">
+ <form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
  <div class="input-group mb-3">
- <input type="text" class="form-control" name="bank_name" placeholder="Name" required>
- <button type="submit" class="btn btn-outline-success">Create New Bank</button>
+ <input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
+ <button type="submit" class="btn btn-outline-success" id="create_bank_submit">Create New Bank</button>
  </div>
+ <span id="bank-name-error" class="text-danger"></span>
  </form>
 </div>
 <div class="row row-cols-1 row-cols-md-4 g-4">
@@ -21,4 +22,49 @@
  </div>
  </div>
  {% endfor %}
-</div>
+</div>
+<script>
+ document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
+ const bankNameField = this;
+ // auto uppercase and trim input
+ bankNameField.value = bankNameField.value.trim().toUpperCase();
+ const submitButton = document.getElementById('create_bank_submit');
+ submitButton.disabled = true;
+ const errorSpan = document.getElementById('bank-name-error');
+ errorSpan.textContent = ''; // Clear previous error message
+ const regex = /^[A-Z0-9_]+$/;
+
+ // Validate the input
+ if (!regex.test(bankNameField.value)) {
+ errorSpan.textContent = 'Bank name must be all uppercase and snake cased';
+ bankNameField.classList.remove("is-valid");
+ bankNameField.classList.add("is-invalid");
+ } else {
+ submitButton.disabled = false;
+ bankNameField.classList.remove("is-invalid");
+ bankNameField.classList.add("is-valid");
+ }
+ });
+
+ document.getElementById("banks_grid_form").addEventListener("submit", async event => {
+ event.preventDefault();
+
+ fetch(`/c/banks`, {
+ method: 'POST',
+ body: JSON.stringify({name: document.getElementById('create_bank_bank_name').value}),
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ })
+ .then(async response => {
+ if (response.ok) {
+ window.location.reload();
+ } else {
+ json = await response.json()
+ alert("Create Bank failed! " + response.statusText + " : " + (json['message'] ?? '<no message>)'))
+ }
+ });
+ })
+
+</script>

hasher-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2

@@ -27,35 +27,69 @@
  <label for="exchange_create_form_bank" class="form-label">New bank name</label>
  <input type="text" class="form-control" name="bank" id="exchange_create_form_bank"
  placeholder="BANK_NAME" required>
+ <span id="bank-name-error" class="text-danger"></span>
  </div>
  <div class="mb-3">
  <label for="exchange_create_form_json" class="form-label">Type-specific JSON</label>
  <textarea type="text" class="form-control" name="api_json" id="exchange_create_form_json" rows=5
  placeholder="{}" onblur="validatePrettyFormJSON(this)"></textarea>
+ <span id="json-error" class="text-danger"></span>
  </div>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
- <button type="submit" class="btn btn-primary">Create</button>
+ <button type="submit" class="btn btn-primary" id="exchange_create_form_submit">Create</button>
  </div>
  </form>
  </div>
  </div>
 </div>
 <script>
  function validatePrettyFormJSON(elem) {
+ const errorSpan = document.getElementById('json-error');
+ errorSpan.textContent = ''; // Clear previous error message
  try {
  const obj = JSON.parse(elem.value || "{}");
  const pretty = JSON.stringify(obj, undefined, 4);
  elem.value = pretty;
  elem.classList.remove("is-invalid");
  elem.classList.add("is-valid");
+ submitButton.disabled = false;
  } catch (e) {
+ errorSpan.textContent = 'Invalid JSON';
  elem.classList.remove("is-valid");
  elem.classList.add("is-invalid");
+ submitButton.disabled = true;
  }
  }
 
+ document.getElementById('exchange_create_form_bank').addEventListener('blur', function() {
+ const bankNameField = this;
+ // auto uppercase and trim input
+ bankNameField.value = bankNameField.value.trim().toUpperCase();
+ const submitButton = document.getElementById('exchange_create_form_submit');
+ submitButton.disabled = true;
+ const errorSpan = document.getElementById('bank-name-error');
+ errorSpan.textContent = ''; // Clear previous error message
+
+ const regex = /^[A-Z0-9_]+$/;
+
+ // Validate the input
+ if (bankNameField.value.trim() === '') {
+ errorSpan.textContent = 'This field is required!';
+ bankNameField.classList.remove("is-valid");
+ bankNameField.classList.add("is-invalid");
+ } else if (!regex.test(bankNameField.value)) {
+ errorSpan.textContent = 'Bank name must be all uppercase and snake cased';
+ bankNameField.classList.remove("is-valid");
+ bankNameField.classList.add("is-invalid");
+ } else {
+ submitButton.disabled = false;
+ bankNameField.classList.remove("is-invalid");
+ bankNameField.classList.add("is-valid");
+ }
+ });
+
  document.getElementById("exchange_create_form").addEventListener("submit", async event => {
  event.preventDefault();
  const data = new FormData(event.target);