Base for rest api utilisation (#53)

The restConsumer will be the base, then I will create a js file per
"object" (for instance there will be users.js with all endpoints for
users using the restConsumer.js)

Reviewed-on: #53
Reviewed-by: Wal <karpinskiwal@gmail.com>
Reviewed-by: Maxime <231026@umons.ac.be>
Co-authored-by: Anthony Debucquoy <debucquoy.anthony@gmail.com>
Co-committed-by: Anthony Debucquoy <debucquoy.anthony@gmail.com>

frontend/src/i18n.js

@@ -9,6 +9,8 @@
  *
  */
 
+import { getCookie } from './utils.js';
+
 const default_lang = "EN";
 let langs;
 
@@ -36,22 +38,6 @@ export default function i18n(key, options) {
 // Those functions are utility functions use by previous exported functions.
 //
 
-/**
- * Return the content of a cookie with specified key
- * @param key cookie name
- */
-function getCookie(key){
-	key = key + "="
-	let cookies = decodeURIComponent(document.cookie).split(";");
-	for (let el of cookies) {
-		el = el.trimStart();
-		if(el.indexOf(key) == 0){
-			return el.substr(key.length, el.length);
-		}
-	}
-	return "";
-}
-
 /**
  * Function that load the file with translation from the specified lang and return a dictionnary
  * @param select the language to load. could be null to fetch the cookies for an answer

frontend/src/login.js

@@ -1,4 +1,5 @@
 import './assets/main.css'
+import 'vue3-toastify/dist/index.css';
 
 import { createApp } from 'vue'
 import App from './Login.vue'

frontend/src/rest/restConsumer.js

@@ -0,0 +1,45 @@
+import { getCookie } from '../utils.js'
+import { toast } from 'vue3-toastify'
+
+const restURL = import.meta.env.PROD ? "https://clyde.herisson.ovh/api" : "http://localhost:8080"
+
+export async function restGet(endPoint) {
+	return await _rest(endPoint, {method: "GET"});
+}
+
+export async function restPost(endPoint, data) {
+	return await _rest(endPoint, {method: "POST", body: data});
+}
+
+export async function restDelete(endPoint, data) {
+	return await _rest(endPoint, {method: "DELETE", body: data});
+}
+
+export async function restPatch(endPoint, data) {
+	return await _rest(endPoint, {method: "PATCH", body: data});
+}
+
+/**
+ * backbone for the request made by the frontend
+ *
+ * specification
+ *  - If the user has "session_token" cookie set, it will use it in the authorization field of the http request
+ *  - The result will be returned as a json to access fields easily ( the backend should send json response )
+ *
+ *  @Example _rest("/ping", {user: data}) -> {id:0, txt:"pong"}
+ */
+async function _rest(endPoint, config){
+	endPoint.at(0) != "/" ? console.error("Carefull, you certainly should put a / at the begenning of your endPoint ") : true;
+	let session_token = getCookie("session_token");
+	let headers = new Headers({'Authorization': session_token});
+	config['headers'] = headers;
+	return toast.promise(fetch(restURL + endPoint, config),
+		{
+			pending: config['pending'] != null ? config['pending'] : 'pending',
+			error: config['error'] != null ? config['error'] : 'Network Failure...',
+			success: config['success'] != null ? config['success'] : {render(res){
+				return res.ok ? "Success" : "error";
+			}},
+		})
+		.then( e => e.json()).catch( e => e );
+}

frontend/src/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Return the content of a cookie with specified key
+ * @param key cookie name
+ */
+function getCookie(key){
+	key = key + "="
+	let cookies = decodeURIComponent(document.cookie).split(";");
+	for (let el of cookies) {
+		el = el.trimStart();
+		if(el.indexOf(key) == 0){
+			return el.substr(key.length, el.length);
+		}
+	}
+	return "";
+}
+
+export {getCookie};