Add google sign-in

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

frontend/config.js

@@ -1 +1,2 @@
 const backend_api = '/zetikettes/srv/'
+const google_oauth_client_id = '634510965520-c5l7f15fn4koraqhpqfe01ssn8v0q2qk.apps.googleusercontent.com';

frontend/index.html

@@ -14,6 +14,7 @@
 
         <!-- Compiled and minified JavaScript -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+        <script src="https://accounts.google.com/gsi/client"></script>
 
         <script src="jscolor.min.js"></script>
         <script src="config.js"></script>
@@ -46,6 +47,7 @@ main {
         </nav>
         <main class="container row">
             <p></p>
+            <div class="col s4 offset-s4" id="signin-prompt" style="display: none"></div>
             <div class="col m6 offset-m3 s12">
                 <a class="modal-trigger btn orange hide-on-large-only" href="#newproduct"><i class="material-icons left">add</i>Nouveau produit</a>
                 <ul class="collapsible" id="appbody">

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();
+});