Add google sign-in

Also, try to be a bit more correct with CSRF and CORS.
It works on my machine.

frontend/zetikettes.js

@@ -8,6 +8,28 @@ const params = {
 
 var tikats;
 
+function getCookie(name) {
+    const cookies = document.cookie.split(';');
+    for (let cookie of cookies) {
+        cookie = cookie.trim();
+        if (cookie.startsWith(name + '=')) {
+            return cookie.substring(name.length + 1);
+        }
+    }
+    return null;
+}
+
+function post(url, data) {
+    const csrf_token = getCookie('csrftoken');
+    return $.ajax({
+        url,
+        data: JSON.stringify(data),
+        method: 'POST',
+        xhrFields: { withCredentials: true },
+        headers: { 'X-CSRFToken': csrf_token },
+    });
+}
+
 function addProduct(tikette) {
     const zett = tikette;
     const appbody = $("#appbody");
@@ -38,7 +60,7 @@ function addProduct(tikette) {
                 loader.show();
                 $('.btn').addClass("disabled");
 
-                $.post(backend_api + 'generate', JSON.stringify(req))
+                post(backend_api + 'generate', req)
                     .then(data => {
                         const pdfbtn = $(`<a class="btn" href="${backend_api}data/${data.file}" target="_blank">open pdf</a>`);
                         action.append(pdfbtn);
@@ -58,7 +80,7 @@ function addProduct(tikette) {
         const req = {
             id: zett.id,
         };
-        $.post(backend_api + 'deletetikette', JSON.stringify(req)).then(reload);
+        post(backend_api + 'deletetikette', req).then(reload);
 
         return false;
     });
@@ -115,7 +137,7 @@ function loadAll(zetikettes) {
             color,
             ab,
         };
-        $.post(backend_api + 'newtikette', JSON.stringify(req)).then(reload);
+        post(backend_api + 'newtikette', req).then(reload);
     });
 }
 
@@ -134,22 +156,45 @@ function konami() {
     });
 }
 
+async function googleCred(creds) {
+    const token = creds.credential;
+    await post(backend_api + 'signin', {token});
+    $('#signin-prompt').hide();
+    reload();
+}
+
 async function reload() {
     try {
         const resp = await $.ajax({
             url: backend_api + 'list',
             timeout: 1000,
+            xhrFields: { withCredentials: true },
         });
         tikats = (await $.ajax({
             url: backend_api + 'categories',
             timeout: 1000,
+            xhrFields: { withCredentials: true },
         })).tikats.sort((a, b) => a.name > b.name ? 1 : -1);
         loadAll(resp.tikettes.sort((a, b) => (a.title < b.title) ? -1 : 1));
     } catch(e) {
+        if (e.status === 403) {
+            $("#signin-prompt").show();
+            google.accounts.id.prompt(); // also display the One Tap dialog
+            return;
+        }
         const appbody = $("#appbody");
         appbody.append(`<li>Could not reach backend server`);
-        throw e;
     }
 }
 
-$(document).ready(reload);
+$(document).ready(() => {
+    google.accounts.id.initialize({
+        client_id: google_oauth_client_id,
+        callback: googleCred,
+    });
+    google.accounts.id.renderButton(
+        document.getElementById("signin-prompt"),
+        { theme: "outline", size: "large" }  // customization attributes
+    );
+    reload();
+});