Client side puzzle image size validation

app/views/puzzles/_form.html.slim

@@ -20,8 +20,24 @@
       .form-text.mb-1
         = t("puzzles.image_select")
       = form.file_field :image, accept: "image/*", class: "form-control"
+      .form-text.error-message style="display: none;" id="image-error-message"
+        = t("puzzles.form.file_too_big")
+      javascript:
+        function setMaxUploadSize() {
+          const el = document.querySelector('input[type="file"]');
+          el.onchange = function() {
+            if(this.files[0].size > 2 * 1024 * 1024) {
+              document.getElementById('image-error-message').style.display = 'block';
+              this.value = "";
+            } else {
+              document.getElementById('image-error-message').style.display = 'none';
+            }
+          };
+        }
+
+        setMaxUploadSize();
   .row.mt-4
     .col
       - if method == :patch
-        = link_to "Delete", contest_puzzle_path(contest, puzzle), data: { turbo_method: :delete }, class: "btn btn-danger me-2"
+        = link_to t("helpers.buttons.delete"), contest_puzzle_path(contest, puzzle), data: { turbo_method: :delete }, class: "btn btn-danger me-2"
       = form.submit submit_text, class: "btn btn-primary"

config/locales/en.yml

@@ -211,6 +211,7 @@ en:
       title: Edit contest puzzle
     form:
       fake_data_recommendation: It is recommended to first enter a fake name and image, and to use the real ones only once the contest starts.
+      file_too_big: File too big! Maximum allowed size is 2M
     image_select: Select an image
     new:
       notice: Puzzle added

config/locales/fr.yml

@@ -182,6 +182,7 @@ fr:
       title: Modifier le puzzle
     form:
       fake_data_recommendation: Il est recommendé d'entrer de faux noms et images, et de mettre les vrais uniquement quand le concours démarre.
+      file_too_big: La taille de l'image dépasse la taille maximum autorisée de 2M
     image_select: Choisis une image
     new:
       notice: Puzzle ajouté