Merge pull request #14 from djangocon/add-invitation

Starts in on invitation page

src/assets/css/main.css

@@ -38,6 +38,24 @@
     @apply text-sm text-center mt-3;
   }
 
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    @apply w-full;
+    @apply px-3 py-2;
+    @apply border border-gray-400 rounded;
+    @apply shadow-sm;
+    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-bull-blue;
+  }
+
+  label {
+    @apply block mb-2 font-medium;
+  }
+
+  ::placeholder {
+    @apply text-gray-500;
+  }
+
   .link {
     @apply underline;
   }
@@ -92,6 +110,27 @@
   .photo-effect img {
     @apply rounded;
   }
+
+
+  #loader {
+    width: 2rem;
+    height: 2rem;
+    border: 5px solid #f3f3f3;
+    border-top: 6px solid theme('colors.bull-blue');
+    border-radius: 100%;
+    margin: auto;
+    animation: spin 1s infinite linear;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }
 
 @layer components {

src/assets/js/invitation.js

@@ -0,0 +1,114 @@
+const form = document.getElementById("inviteForm");
+form.addEventListener("submit", start);
+
+const loader = document.getElementById("loader");
+
+function displayLoading() {
+  loader.hidden = false;
+}
+
+function hideLoading() {
+  loader.hidden = true;
+}
+
+async function start(ev) {
+  ev.preventDefault();
+
+  console.log("start form");
+
+  // Show in progress message
+  const inProgressMsg = document.getElementById("inProgressMsg");
+  inProgressMsg.hidden = false;
+
+  const form = new FormData(ev.target);;
+
+  const {
+    fullname,
+    address,
+    email,
+    dob,
+    letterselection: lettertype,
+    og,
+    talk: speaker,
+    passport_no
+  } = Object.fromEntries(form);
+
+  let data;
+
+  displayLoading();
+
+  if (lettertype == "none") {
+    data = {
+      "fullname": fullname,
+      "address": address,
+      "email": email,
+      "dob": dob,
+      "passport_no": passport_no
+    }
+  } else if (lettertype == "og") {
+    data = {
+      "fullname": fullname,
+      "address": address,
+      "email": email,
+      "dob": dob,
+      "passport_no": passport_no,
+      "letteropt": {
+        "key": "og",
+        "value": og
+      }
+    };
+  } else if (lettertype == "speaker") {
+    data = {
+      "fullname": fullname,
+      "address": address,
+      "email": email,
+      "dob": dob,
+      "passport_no": passport_no,
+      "letteropt": {
+        "key": "speaker",
+        "value": speaker
+      }
+    };
+  }
+
+  displayLoading();
+
+  const formElem = document.getElementById("inviteForm");
+  formElem.hidden = true;
+
+  await fetch('https://djc-invitation-letter-api-noahalorwu.vercel.app/invitation', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data)
+  }).then(res => res.json()).then(data => {
+    hideLoading();
+    console.log(data);
+    inProgressMsg.hidden = true;
+    document.getElementById("readyMsg").hidden = false;
+  });
+}
+
+// Update fields shown dependent upon attendee type
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById("letterselection").addEventListener("change", function() {
+    let selected = this.value;
+
+    const ogElem = document.getElementById("og");
+    const speakerElem = document.getElementById("speaker");
+
+    if (selected == "none") {
+      ogElem.hidden = true;
+      speakerElem.hidden = true;
+    }
+    else if (selected == "og") {
+      ogElem.hidden = false;
+      speakerElem.hidden = true;
+    }
+    else if (selected == "speaker") {
+      ogElem.hidden = true;
+      speakerElem.hidden = false;
+    }
+  });
+});

src/visa-invitation.html

@@ -0,0 +1,74 @@
+---
+layout: default
+
+description: >
+  Request your visa invitation letter for DjangoCon US 2024 here.
+
+title: Visa Invitation Letter
+
+permalink: /invitation/
+---
+
+<div class="bg-gray-100 block-container">
+  <div class="wrapper">
+    <h1 class="mb-6 text-center pageheading">{{ title }}</h1>
+    <form
+      class="max-w-2xl p-4 mx-auto bg-white rounded lg:p-12"
+      id="inviteForm"
+      method="POST"
+      enctype="multipart/form-data">
+      <ul class="space-y-8">
+        <li>
+          <label for="fullname">Full name (as it appears on your passport)</label>
+          <input type="text" name="fullname" id="fullname" placeholder="Noah Doe" required>
+        </li>
+        <li>
+          <label for="address">Address</label>
+          <input type="text" name="address" id="address" placeholder="125 32nd Street, Durham, North Carolina, USA" required>
+        </li>
+        <li>
+          <label for="dob">Date of Birth</label>
+          <input type="text" name="dob" id="dob" placeholder="July 09 1990" required>
+        </li>
+        <li>
+          <label for="email">Email</label>
+          <input type="email" name="email" id="email" placeholder="[email protected]" required>
+        </li>
+        <li>
+          <label for="passport_no">Passport Number</label>
+          <input type="text" name="passport_no" id="passport_no" placeholder="A01923459B" required>
+        </li>
+        <li>
+          <label for="letterselection">Are you a Speaker, an Opportunity Grant recipient, or a general attendee?</label>
+          <select name="letterselection" id="letterselection" required>
+        <option value="none">Attendee</option>
+        <option value="og">Opportunity Grant recipient</option>
+        <option value="speaker">Speaker</option>
+          </select>
+        </li>
+        <li id="og" hidden>
+          <label for="og">Grant Amount (if applicable)</label>
+          <input type="number" name="og" id="og" placeholder="2000.00">
+        </li>
+        <li id="speaker" hidden>
+          <label for="talk">Talk/Tutorial Title</label>
+          <input type="text" name="talk" id="talk" placeholder="DjangoCon US is the best!">
+        </li>
+      </ul>
+
+      <div class="mt-8">
+        <button id="submit" type="submit" class="button bg-mosaic-blue">Submit</button>
+      </div>
+    </form>
+
+    <div>
+      <div id="loader" hidden></div>
+      <p id="inProgressMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">
+        Thank you for your interest in DjangoCon US 2024! We're generating your invitation letter.
+      </p>
+      <p id="readyMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">Your invitation letter has been sent to the DjangoCon US organizers for review. Once they approve it, they will email it to you. Thanks for your interest!</p>
+    </div>
+  </div>
+</div>
+
+<script src="/assets/js/invitation.js"></script>