Merge pull request #52 from JoelBerglund05/authentication

Authentication

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
-}
+  "liveServer.settings.port": 5501
+}

js/DataBase.js

@@ -1,27 +1,58 @@
-import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 
-class DataBase {
+export default class DataBase {
   constructor() {
     this.supabase = createClient(
       "https://unswumzybkmeifdigbfn.supabase.co",
       "KEY",
     );
-
   }
-  async GetARowFrow(table, idToRow) {
-    try {
-        const { data, error } = await this.supabase
-        .from(table)
-        .select()
-        .eq('id', idToRow);
-        console.log(table, data);
-        return data;
+
+  async GetARowFrom(table, idToRow) {
+    const { data, error } = await this.supabase
+      .from(table)
+      .select()
+      .eq("id", idToRow);
+
+    if (error) {
+      console.log("Kunde inte hämta data: ", error);
+      return;
+    }
+
+    return data;
+  }
+
+  async SignUpUser(email, password) {
+    if (password[0] !== password[1]) {
+      alert("Lösenorden är inte samma");
+      return;
+    }
+
+    const { data, error } = await this.supabase.auth.signInWithOtp({
+      email: email,
+      password: password,
+    });
+
+    if (error) {
+      console.log("kunde inte skapa konto: ", error);
     }
-    catch (e) {
-        console.log("An Error has occured: " + event);
+  }
+
+  async SignInUser(email) {
+    const { data, error } = await this.supabase.auth.signInWithOtp({
+      email: email,
+      password: password,
+    });
+    if (error) {
+      console.log("Kunde inte logga in användaren: ", error);
     }
-
   }
-}
 
-export default DataBase;
+  async LogOutUser() {
+    const { error } = await this.supabase.auth.signOut();
+
+    if (error) {
+      console.log("Kunde inte logga ut användaren: ", error);
+    }
+  }
+}

js/EventManager.js

@@ -0,0 +1,7 @@
+export default class EventManager {
+  EventListener(element, eventType, method) {
+    if (element) {
+      element.addEventListener(eventType, method);
+    }
+  }
+}

js/main.js

@@ -1,10 +1,15 @@
 import DataBase from "./DataBase.js";
+import EventManager from "./EventManager.js";
 
 class Main {
   constructor() {
     this.dataBase = new DataBase();
+    this.eventManager = new EventManager();
     this.btnDBRequest = document.getElementById("btnDBRequest");
     this.displayData = document.getElementById("dBData");
+    this.btnCreateAccount = document.getElementById("createAccount");
+    this.email = document.getElementById("email");
+    this.btnSignIn = document.getElementById("signIn");
   }
   RegisterServiceWorker() {
     if ("serviceWorker" in navigator) {
@@ -13,23 +18,57 @@ class Main {
       });
     }
   }
-  Main() {
-    this.RegisterServiceWorker();
+  async DisplayQuestion(id) {
+    const DBData = await this.dataBase.GetARowFrow("quizz", id);
 
-    this.btnDBRequest.addEventListener("click", async () => {
-      const DBData = await this.dataBase.GetARowFrow('quizz', 1);
-
-      DBData.map(data => {
+    if (DBData !== null) {
+      DBData.map((data) => {
         this.displayData.innerHTML = data.questions;
       });
-    });
+    }
+  }
+  async CreateAccount() {
+    this.dataBase.SignUpUser(this.email);
 
+    const {
+      data: { user },
+    } = await this.dataBase.supabase.auth.getUser();
+
+    console.log(user);
   }
-}
 
+  async SignInUser() {
+    this.dataBase.SignInUser(this.email);
+
+    const {
+      data: { user },
+    } = await this.dataBase.supabase.auth.getUser();
 
+    console.log("HEJJJJJ");
 
+    console.log(user);
+  }
+  Main() {
+    const clickEvent = "click";
+    this.RegisterServiceWorker();
+
+    this.eventManager.EventListener(this.btnDBRequest, clickEvent, () =>
+      this.DisplayQuestion(1),
+    );
 
+    this.eventManager.EventListener(
+      this.btnCreateAccount,
+      clickEvent,
+      this.CreateAccount.bind(this),
+    );
+
+    this.eventManager.EventListener(
+      this.btnSignIn,
+      clickEvent,
+      this.SignInUser.bind(this),
+    );
+  }
+}
 
 const main = new Main();
 main.Main();

sign-up.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <input id="email" type="text" placeholder="Email" />
+    <input id="password1" type="text" placeholder="Lösenord" />
+    <input id="password2" type="text" placeholder="Lösenord" />
+    <button id="createAccount">Skapa konto</button>
+    <button id="signIn">Logga in</button>
+    <script type="module" src="js/main.js"></script>
+  </body>
+</html>