making login work for prod

src/Home/Login.js

@@ -1,4 +1,5 @@
 const env = import.meta.env
+import { Preferences } from '@capacitor/preferences';
 
 class Login extends Shadow {
     inputStyles(el) {
@@ -32,26 +33,44 @@ class Login extends Shadow {
             form(() => {
                 input("Email", "70vw")
                     .attr({name: "email", type: "email"})
-                    .margin(1, em)
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .styles(this.inputStyles)
                 input("Password", "70vw")
                     .attr({name: "password", type: "password"})
-                    .margin(1, em)
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .styles(this.inputStyles)
                 button("==>")
-                    .margin(1, em)                    
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .fontSize(0.9, rem)
                     .borderRadius(12, px)
                     .background("var(--accent)")
                     .color("var(--text)")
                     .border("1px solid var(--accent)")
             })
-            .attr({action: `${env.VITE_API_URL}/login`, method: "POST"})
             .x(50, vw).y(50, vh)
             .center()
+            .onSubmit(async (e) => {
+                e.preventDefault();
+                const data = new FormData(e.target);
+                
+                const res = await fetch(`${env.VITE_API_URL}/login`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", "X-Client": "mobile" },
+                    body: JSON.stringify({
+                        email: data.get("email"),
+                        password: data.get("password")
+                    })
+                });
+
+                if (res.ok) {
+                    const { token } = await res.json();
+                    await Preferences.set({ key: 'auth_token', value: token });
+                    global.onLogin();
+                } else {
+                    const { error } = await res.json();
+                    console.error(error)
+                }
+            })
         })
         .background("var(--main)")
         .width(100, vw)

src/_/code/ws/Connection.js

@@ -1,3 +1,6 @@
+import { Preferences } from '@capacitor/preferences';
+const env = import.meta.env
+
 class Connection {
     connectionTries = 0;
     ws;
@@ -8,10 +11,14 @@ class Connection {
     }
 
     init = async () => {
+        const { value: token } = await Preferences.get({ key: 'auth_token' });
         return new Promise((resolve, reject) => {
-            const url = window.location.hostname.includes("local") 
-                ? "ws://" + window.location.host + "/ws"
-                : "wss://" + window.location.hostname + window.location.pathname + "/ws";
+            let url = ""
+            if(env.VITE_API_URL) {
+                url = "wss://" + env.VITE_API_URL.replace(/^https?:\/\//, '') + "/ws" + `?token=${token}`;
+            } else {
+                url = "ws://" + window.location.host + "/ws"
+            }
 
             this.ws = new WebSocket(url);
 

src/index.js

@@ -2,6 +2,8 @@ import Socket from "/_/code/ws/Socket.js"
 import "./Home/Home.js"
 import "./Home/Login.js"
 import "./Home/ConnectionError.js"
+import util from "./util.js"
+
 const env = import.meta.env
 
 let Global = class {
@@ -38,7 +40,6 @@ let Global = class {
     }
 
     onNavigate = async () => {
-
         let selectedNetwork = this.networkFromPath()
 
         if(!selectedNetwork) {
@@ -117,9 +118,8 @@ let Global = class {
     }
 
     async getProfile() {
-        console.log(env)
         try {
-            const res = await fetch(`${env.VITE_API_URL}/profile`, {
+            const res = await util.authFetch(`${env.VITE_API_URL}/profile`, {
                 method: "GET",
                 credentials: "include",
                 headers: {
@@ -142,6 +142,16 @@ let Global = class {
         }
     }
 
+    async onLogin() {
+        if(!this.profile) {
+            await this.getProfile()
+        }
+        await this.Socket.init()
+        await this.onNavigate()
+        Home()
+        // navigateTo("/")
+    }
+
     constructor() {
         window.addEventListener("navigate", this.onNavigate)
 
@@ -151,10 +161,7 @@ let Global = class {
             } else if(status === 500) {
                 ConnectionError()
             } else {
-                console.log("else")
-                await this.Socket.init()
-                await this.onNavigate()
-                Home()
+                this.onLogin()
             }
         })
     }

src/manifest.json

@@ -4,9 +4,9 @@
   "start_url": "index.html",
   "display": "standalone",
   "icons": [{
-    "src": "_/imgs/logo.png",
+    "src": "_/icons/logo.svg",
     "sizes": "512x512",
-    "type": "image/png"
+    "type": "image/svg"
   }],
   "background_color": "#31d53d",
   "theme_color": "#31d53d"

src/util.js

@@ -1,4 +1,19 @@
+import { Preferences } from '@capacitor/preferences';
+
 export default class util {
+    static async authFetch(url, options = {}) {
+        const { value: token } = await Preferences.get({ key: 'auth_token' });
+        
+        return fetch(url, {
+            ...options,
+            headers: {
+                ...options.headers,
+                'Authorization': `Bearer ${token}`,
+                'X-Client': 'mobile'
+            }
+        });
+    }
+
     static cssVariable(value) {
         return getComputedStyle(document.documentElement)
         .getPropertyValue("--" + value)