diff --git a/ios/App/Podfile b/ios/App/Podfile index 57a42a9..de304d2 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -15,6 +15,7 @@ def capacitor_pods pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation' pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps' pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics' + pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences' pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen' end diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock index 941fc6e..9b3f1b4 100644 --- a/ios/App/Podfile.lock +++ b/ios/App/Podfile.lock @@ -13,6 +13,8 @@ PODS: - GoogleMaps (~> 8.4) - CapacitorHaptics (7.0.3): - Capacitor + - CapacitorPreferences (7.0.4): + - Capacitor - CapacitorSplashScreen (7.0.3): - Capacitor - Google-Maps-iOS-Utils (5.0.0): @@ -31,6 +33,7 @@ DEPENDENCIES: - "CapacitorGeolocation (from `../../node_modules/@capacitor/geolocation`)" - "CapacitorGoogleMaps (from `../../node_modules/@capacitor/google-maps`)" - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)" + - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)" - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)" SPEC REPOS: @@ -52,6 +55,8 @@ EXTERNAL SOURCES: :path: "../../node_modules/@capacitor/google-maps" CapacitorHaptics: :path: "../../node_modules/@capacitor/haptics" + CapacitorPreferences: + :path: "../../node_modules/@capacitor/preferences" CapacitorSplashScreen: :path: "../../node_modules/@capacitor/splash-screen" @@ -62,11 +67,12 @@ SPEC CHECKSUMS: CapacitorGeolocation: b96474c3259dd4a294227ea8ec19140b1837cceb CapacitorGoogleMaps: 20b5445a532f80dbb120fa99941fd094bcc88af6 CapacitorHaptics: d17da7dd984cae34111b3f097ccd3e21f9feec62 + CapacitorPreferences: d82a7e3b95fcab43a553268b803356522910d153 CapacitorSplashScreen: d06ae8804808e9f649a08e7bb7f283c77b688084 Google-Maps-iOS-Utils: 66d6de12be1ce6d3742a54661e7a79cb317a9321 GoogleMaps: 8939898920281c649150e0af74aa291c60f2e77d IONGeolocationLib: 20f9d0248a0b5264511fb57a37e25dd2badf797a -PODFILE CHECKSUM: 5fb01647092bb2f97342e333eedc70aeba99b283 +PODFILE CHECKSUM: 4f01ce5c2aa76ddcb757b8ad50c993f40e6aeb33 COCOAPODS: 1.15.2 diff --git a/package.json b/package.json index 60af171..ace5952 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@capacitor/google-maps": "^7.2.0", "@capacitor/haptics": "^7.0.3", "@capacitor/ios": "^7.4.4", + "@capacitor/preferences": "^7.0.4", "@capacitor/splash-screen": "^7.0.3" }, "devDependencies": { diff --git a/readme.md b/readme.md index ccbc51f..9fdabee 100644 --- a/readme.md +++ b/readme.md @@ -2,8 +2,7 @@ ```npm run start``` -### Build and Run iOS App - +### Build and Run (iOS App) https://capacitorjs.com/docs/ios#adding-the-ios-platform To Install: @@ -16,10 +15,13 @@ npx cap open ios To Rerun: npm run build && npx cap copy ios -### Build and run (hitting prod server) +### Build and run (In Browser, hitting prod server) vite build npx serve dist +If you need to login again: +run "localStorage.clear() in the browser dev tools console and then refresh the page. + ### Architecture In Development, API routes are routed using the vite.config.js. diff --git a/src/Home/Login.js b/src/Home/Login.js index 87a7739..9de9015 100644 --- a/src/Home/Login.js +++ b/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) diff --git a/src/_/code/ws/Connection.js b/src/_/code/ws/Connection.js index 51057e2..93fefee 100644 --- a/src/_/code/ws/Connection.js +++ b/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); diff --git a/src/index.js b/src/index.js index dffa6a7..ccc0758 100644 --- a/src/index.js +++ b/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() } }) } diff --git a/src/manifest.json b/src/manifest.json index ba9383e..0cb2709 100644 --- a/src/manifest.json +++ b/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" diff --git a/src/util.js b/src/util.js index f9ba0b6..faec59b 100644 --- a/src/util.js +++ b/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)