Add invitations

roc_fnb/website/templates/new_invite.html

@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+<div></div>
+{% block content %}
+<script>
+  let inviteCode
+  function inviteElements() {
+    return {
+      doneView: document.getElementById('done-view'),
+      inviteDisplay: document.getElementById('invite-code'),
+    }
+  }
+  function copyInviteCodeToClipboard() {
+    navigator.clipboard
+      .writeText(inviteCode)
+      .then(() => alert('invite code copied to clipboard'))
+  }
+  async function newInviteCode() {
+    const { doneView, inviteDisplay } = inviteElements()
+    const response = await fetch('/invite', {
+      headers: { Accept: 'application/json' },
+    })
+    if (response.ok) {
+      const { invite } = await response.json()
+      inviteDisplay.innerText = inviteCode = invite
+      doneView.style.display = 'inherit'
+    } else {
+      console.dir('response')
+      alert('error creating new invite code')
+    }
+  }
+  async function deleteInvite() {
+    const { doneView, inviteDisplay } = inviteElements()
+    const response = await fetch('/invite', {
+      method: 'DELETE',
+      body: JSON.stringify({ invite_code: inviteCode }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+    if (response.ok) {
+      inviteCode = null
+      inviteDisplay.innerText = ""
+      doneView.display = 'none'
+    }
+  }
+  document.addEventListener('readystatechange', () => {
+    if (document.readyState === 'complete') {
+      const doneView = inviteElements()
+      doneView.style.display = 'none'
+    }
+  })
+</script>
+<img
+  id="biglogo"
+  class="spinny"
+  onclick="start_animation()"
+  src="logo.png"
+  alt="logo"
+/>
+<h1>Rochester Food Not Bombs!</h1>
+
+<div>
+  <div>
+    <label for="invite-description"
+      >Describe the invitation for future reference</label
+    >
+  </div>
+  <button>Click here to generate a new invite code</button>
+</div>
+<div id="done-view">
+  <p>
+    Tell the new user to visit
+    <a href="/new-user">https://{{app_hostname}}/new-user</a>.
+  </p>
+
+  <p>They will need this invite code:</p>
+  <pre id="invite-code"></pre>
+  <button onclick="copyInviteCodeToClipboard()">Click here to copy it</button>
+  <button onclick="deleteInvite()">Delete invite</button>
+</div>
+
+{% endblock %}