Add pocketbase js SDK and typings

README.md

@@ -1,2 +1,8 @@
 # getstuffdone
 
+## update types
+
+```
+npx pocketbase-typegen --db ./pb_data/data.db --out app/src/lib/pocketbase-types.ts
+```
+

app/package-lock.json

@@ -11,7 +11,8 @@
 				"@capacitor/core": "^5.5.1",
 				"@ionic/core": "^7.2.1",
 				"ionic-svelte": "^0.5.82",
-				"ionicons": "^7.2.1"
+				"ionicons": "^7.2.1",
+				"pocketbase": "^0.19.0"
 			},
 			"devDependencies": {
 				"@capacitor/cli": "^5.5.1",
@@ -3277,6 +3278,11 @@
 				"node": ">=10.4.0"
 			}
 		},
+		"node_modules/pocketbase": {
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.19.0.tgz",
+			"integrity": "sha512-bUVZfVdD17K8GnwbeDMZPEdREVg2YE0F8uHPDC0zer4VtwXUqoPCCeudTy3fhUE7pfuKnfpuPxeBSYsBY3AGIQ=="
+		},
 		"node_modules/postcss": {
 			"version": "8.4.32",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",

app/package.json

@@ -39,6 +39,7 @@
 		"@capacitor/core": "^5.5.1",
 		"@ionic/core": "^7.2.1",
 		"ionic-svelte": "^0.5.82",
-		"ionicons": "^7.2.1"
+		"ionicons": "^7.2.1",
+		"pocketbase": "^0.19.0"
 	}
 }

app/src/lib/api.ts

@@ -0,0 +1,4 @@
+import PocketBase from "pocketbase";
+import type { TypedPocketBase } from "./pocketbase-types"
+
+export const pb = new PocketBase('http://127.0.0.1:8090') as TypedPocketBase

app/src/lib/pocketbase-types.ts

@@ -0,0 +1,92 @@
+/**
+* This file was @generated using pocketbase-typegen
+*/
+
+import type PocketBase from 'pocketbase'
+import type { RecordService } from 'pocketbase'
+
+export enum Collections {
+	Completions = "completions",
+	Lists = "lists",
+	Tasks = "tasks",
+	Users = "users",
+}
+
+// Alias types for improved usability
+export type IsoDateString = string
+export type RecordIdString = string
+export type HTMLString = string
+
+// System fields
+export type BaseSystemFields<T = never> = {
+	id: RecordIdString
+	created: IsoDateString
+	updated: IsoDateString
+	collectionId: string
+	collectionName: Collections
+	expand?: T
+}
+
+export type AuthSystemFields<T = never> = {
+	email: string
+	emailVisibility: boolean
+	username: string
+	verified: boolean
+} & BaseSystemFields<T>
+
+// Record types for each collection
+
+export type CompletionsRecord = {
+	task?: RecordIdString
+	user?: RecordIdString
+}
+
+export type ListsRecord = {
+	name?: string
+	parent?: RecordIdString
+}
+
+export type TasksRecord = {
+	cooldown?: number
+	description?: HTMLString
+	list: RecordIdString
+	name?: string
+	schedule?: IsoDateString
+}
+
+export type UsersRecord = {
+	avatar?: string
+	name?: string
+}
+
+// Response types include system fields and match responses from the PocketBase API
+export type CompletionsResponse<Texpand = unknown> = Required<CompletionsRecord> & BaseSystemFields<Texpand>
+export type ListsResponse<Texpand = unknown> = Required<ListsRecord> & BaseSystemFields<Texpand>
+export type TasksResponse<Texpand = unknown> = Required<TasksRecord> & BaseSystemFields<Texpand>
+export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
+
+// Types containing all Records and Responses, useful for creating typing helper functions
+
+export type CollectionRecords = {
+	completions: CompletionsRecord
+	lists: ListsRecord
+	tasks: TasksRecord
+	users: UsersRecord
+}
+
+export type CollectionResponses = {
+	completions: CompletionsResponse
+	lists: ListsResponse
+	tasks: TasksResponse
+	users: UsersResponse
+}
+
+// Type for usage with type asserted PocketBase instance
+// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
+
+export type TypedPocketBase = PocketBase & {
+	collection(idOrName: 'completions'): RecordService<CompletionsResponse>
+	collection(idOrName: 'lists'): RecordService<ListsResponse>
+	collection(idOrName: 'tasks'): RecordService<TasksResponse>
+	collection(idOrName: 'users'): RecordService<UsersResponse>
+}

app/src/routes/login/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { pb } from "$lib/api";
+
+	let email = '';
+	let password = '';
+
+	const handleLogin = async (event: Event) => {
+		// Prevent the form from submitting normally
+		event.preventDefault();
+
+        email = email.trim();
+        password = password.trim();
+
+		// Replace with your own login logic
+		if (email && password) {
+			console.log('Login submitted:', email, password);
+            const resp = await pb.collection("users").authWithPassword(email, password);
+            console.log('Logged in:', resp);
+		}
+	};
+
+	// Event handlers for ionic-input
+	const handleEmailInput = (event: { target: HTMLIonInputElement }) => {
+		email = event.target.value as string;
+	};
+
+	const handlePasswordInput = (event: { target: HTMLIonInputElement }) => {
+		password = event.target.value as string;
+	};
+</script>
+
+<ion-app>
+	<ion-header>
+		<ion-toolbar>
+			<ion-title>Login</ion-title>
+		</ion-toolbar>
+	</ion-header>
+
+	<ion-content class="ion-padding">
+		<form on:submit={handleLogin}>
+			<ion-item>
+				<ion-label position="stacked">Email</ion-label>
+				<ion-input
+					type="email"
+					placeholder="Enter your email"
+					value={email}
+					on:ionInput={handleEmailInput}
+					required
+				>
+				</ion-input>
+			</ion-item>
+
+			<ion-item>
+				<ion-label position="stacked">Password</ion-label>
+				<ion-input
+					type="password"
+					placeholder="Enter your password"
+					value={password}
+					on:ionInput={handlePasswordInput}
+					required
+				>
+				</ion-input>
+			</ion-item>
+
+			<ion-button type="submit" expand="block" class="ion-margin-top"> Login </ion-button>
+		</form>
+	</ion-content>
+</ion-app>
+
+<style>
+	/* Additional styles if necessary */
+</style>