From 17638c308c0fc54f9fe19d777bb5602769f31e34 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 19:37:21 -0300 Subject: [PATCH 1/8] Add required attr to form --- my-app/src/routes/login/+page.svelte | 4 ++-- my-app/src/routes/recover/+page.svelte | 2 +- my-app/src/routes/register/+page.svelte | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/my-app/src/routes/login/+page.svelte b/my-app/src/routes/login/+page.svelte index 1a30d55..c07159e 100644 --- a/my-app/src/routes/login/+page.svelte +++ b/my-app/src/routes/login/+page.svelte @@ -18,11 +18,11 @@
diff --git a/my-app/src/routes/recover/+page.svelte b/my-app/src/routes/recover/+page.svelte index e3dd57f..c7163e7 100644 --- a/my-app/src/routes/recover/+page.svelte +++ b/my-app/src/routes/recover/+page.svelte @@ -2,7 +2,7 @@
diff --git a/my-app/src/routes/register/+page.svelte b/my-app/src/routes/register/+page.svelte index 009d8b3..305f7b7 100644 --- a/my-app/src/routes/register/+page.svelte +++ b/my-app/src/routes/register/+page.svelte @@ -18,15 +18,15 @@
From 7f123d9dd2b028b9f791ce5bfdca35946f60dac6 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 21:49:08 -0300 Subject: [PATCH 2/8] Copy .env.example to .env --- Makefile | 3 +++ README.md | 1 + my-app/.env.example | 3 ++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/Makefile b/Makefile index cd8d26e..e2acfad 100644 --- a/Makefile +++ b/Makefile @@ -5,6 +5,9 @@ NPM := cd $(DIR) && npm install: $(NPM) install +env: + cp $(DIR)/.env.example $(DIR)/.env + dev: install $(NPM) run dev -- --open diff --git a/README.md b/README.md index 47fe1bb..3e46abe 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ Open `Makefile` to see useful commands. - `make install`: install dependencies +- `make env`: create .env file with env vars - `make dev`: start development server - `make test`: run tests - `make format`: format files diff --git a/my-app/.env.example b/my-app/.env.example index 4f136c6..8825d1e 100644 --- a/my-app/.env.example +++ b/my-app/.env.example @@ -1 +1,2 @@ -VITE_API_URL="http://localhost:8000" +# VITE_API_URL="http://127.0.0.1:8000" +VITE_API_URL="http://localhost:8000" \ No newline at end of file From 7aa09d54000a66ab783fb4790b1e555c7cb7ff93 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 22:49:58 -0300 Subject: [PATCH 3/8] Pass headers to requests --- my-app/src/lib/api.ts | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/my-app/src/lib/api.ts b/my-app/src/lib/api.ts index 6ec08f7..5894610 100644 --- a/my-app/src/lib/api.ts +++ b/my-app/src/lib/api.ts @@ -1,26 +1,28 @@ import { error } from '@sveltejs/kit'; +type Method = 'GET' | 'POST' | 'DELETE' | 'PUT'; +type Headers = { [key: string]: string }; type Request = { - method: 'GET' | 'POST' | 'DELETE' | 'PUT'; path: string; data?: object; - token?: string; + headers?: Headers; +}; +type Opts = { + method: Method; + headers: Headers; + body?: string; }; const base = import.meta.env.VITE_API_URL; -async function send({ method, path, data, token }: Request) { - const opts = { method, headers: {} }; +async function send(method: Method, { path, data, headers = {} }: Request) { + const opts: Opts = { method, headers }; if (data) { opts.headers['Content-Type'] = 'application/json'; opts.body = JSON.stringify(data); } - if (token) { - opts.headers['Authorization'] = `Token ${token}`; - } - const res = await fetch(`${base}/${path}`, opts); if (res.ok) { const text = await res.text(); @@ -30,18 +32,18 @@ async function send({ method, path, data, token }: Request) { throw error(res.status); } -export function get(path: string, token?: string) { - return send({ method: 'GET', path, token }); +export function get(path: string, headers?: Headers) { + return send('GET', { path, headers }); } -export function del(path: string, token?: string) { - return send({ method: 'DELETE', path, token }); +export function del(path: string, headers?: Headers) { + return send('DELETE', { path, headers }); } -export function post(path: string, data: object, token?: string) { - return send({ method: 'POST', path, data, token }); +export function post(path: string, data: object, headers?: Headers) { + return send('POST', { path, data, headers }); } -export function put(path: string, data: object, token?: string) { - return send({ method: 'PUT', path, data, token }); +export function put(path: string, data: object, headers?: Headers) { + return send('PUT', { path, data, headers }); } From 1aa7ce5a486b671f1ad25f12072fc5c8e05b10cd Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 22:50:52 -0300 Subject: [PATCH 4/8] Create and list groups --- my-app/src/routes/groups/+page.server.ts | 11 +++++ my-app/src/routes/groups/+page.svelte | 42 +++++++++++++++++++ .../groups/details/[[id]]/+page.server.ts | 39 +++++++++++++++++ .../routes/groups/details/[[id]]/+page.svelte | 31 ++++++++++++++ my-app/src/types.d.ts | 10 +++++ 5 files changed, 133 insertions(+) create mode 100644 my-app/src/routes/groups/+page.server.ts create mode 100644 my-app/src/routes/groups/+page.svelte create mode 100644 my-app/src/routes/groups/details/[[id]]/+page.server.ts create mode 100644 my-app/src/routes/groups/details/[[id]]/+page.svelte create mode 100644 my-app/src/types.d.ts diff --git a/my-app/src/routes/groups/+page.server.ts b/my-app/src/routes/groups/+page.server.ts new file mode 100644 index 0000000..87fada3 --- /dev/null +++ b/my-app/src/routes/groups/+page.server.ts @@ -0,0 +1,11 @@ +import { get } from '$lib/api'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async ({ cookies }) => { + const token = cookies.get('jwt')!; + const headers = { + 'x-user': token + }; + const groups: Group[] = await get('group', headers); + return { groups }; +}; diff --git a/my-app/src/routes/groups/+page.svelte b/my-app/src/routes/groups/+page.svelte new file mode 100644 index 0000000..733ea4d --- /dev/null +++ b/my-app/src/routes/groups/+page.svelte @@ -0,0 +1,42 @@ + + + + {title} - Grupos + + +
+

Grupos

+ Nuevo grupo +
+
+ {#if !data.groups.length} + + {/if} + {#each data.groups as group} + + {/each} +
+ + diff --git a/my-app/src/routes/groups/details/[[id]]/+page.server.ts b/my-app/src/routes/groups/details/[[id]]/+page.server.ts new file mode 100644 index 0000000..af7bfda --- /dev/null +++ b/my-app/src/routes/groups/details/[[id]]/+page.server.ts @@ -0,0 +1,39 @@ +import { error, fail } from '@sveltejs/kit'; +import type { Actions } from './$types'; +import { post } from '$lib/api'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async ({ params }) => { + let group: Group = { name: '', description: '', id: 0, owner_id: 0 }; + const id = params.id; + if (id) { + // TODO: load real group + } + return { group }; +}; + +export const actions: Actions = { + default: async ({ cookies, request, params }) => { + const data = await request.formData(); + const name = data.get('name'); + const description = data.get('description'); + + if (!name) { + throw error(400, 'Name is required'); + } + if (!description) { + throw error(400, 'Description is required'); + } + + const token = cookies.get('jwt')!; + const body = await post('group', { name, description }, { 'x-user': token }); + + if (body.errors) { + throw fail(400, body); + } + + const value = body.id; + + return { success: true }; + } +}; diff --git a/my-app/src/routes/groups/details/[[id]]/+page.svelte b/my-app/src/routes/groups/details/[[id]]/+page.svelte new file mode 100644 index 0000000..8c2e378 --- /dev/null +++ b/my-app/src/routes/groups/details/[[id]]/+page.svelte @@ -0,0 +1,31 @@ + + + + {title} - Nuevo Grupo + + +
+
+ + + + +
+
diff --git a/my-app/src/types.d.ts b/my-app/src/types.d.ts new file mode 100644 index 0000000..f8fc15f --- /dev/null +++ b/my-app/src/types.d.ts @@ -0,0 +1,10 @@ +declare global { + type Group = { + id: number; + owner_id: number; + name: String; + description: String; + }; +} + +export {}; From f6e688b6f6b6aac10c8fbf0b987893e2e3c31804 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 22:51:11 -0300 Subject: [PATCH 5/8] Redirect from login to groups --- my-app/src/routes/login/+page.server.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/my-app/src/routes/login/+page.server.ts b/my-app/src/routes/login/+page.server.ts index 47c894e..1a056c0 100644 --- a/my-app/src/routes/login/+page.server.ts +++ b/my-app/src/routes/login/+page.server.ts @@ -1,4 +1,4 @@ -import { error, fail } from '@sveltejs/kit'; +import { error, fail, redirect } from '@sveltejs/kit'; import type { Actions } from './$types'; import { post } from '$lib/api'; @@ -23,9 +23,9 @@ export const actions: Actions = { } // save JWT in cookie - const value = body.id; + const value = body.token; cookies.set('jwt', value, { path: '/' }); - return { success: true }; + return redirect(302, '/groups'); } }; From 0775fa8bb973d37f322fefa0394216d607f9accf Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 22:51:27 -0300 Subject: [PATCH 6/8] Format --- my-app/src/app.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/my-app/src/app.html b/my-app/src/app.html index 64ff50f..a635905 100644 --- a/my-app/src/app.html +++ b/my-app/src/app.html @@ -2,7 +2,10 @@ - + %sveltekit.head% From b4f868e8c1143f81a9f451107f13465a5b0b17d2 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 23:14:05 -0300 Subject: [PATCH 7/8] Update roadmap --- roadmap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/roadmap b/roadmap index b6393ce..0579779 100644 --- a/roadmap +++ b/roadmap @@ -1,13 +1,13 @@ [x] setup account: -[ ] register -[ ] login +[x] register +[x] login [ ] recover groups: -[ ] list -[ ] create +[x] list +[x] create [ ] details -expenses: +spendings: [ ] list [ ] details budget: From b1f9d5b90b1c6dbeef694f3c1f284d32525d1c71 Mon Sep 17 00:00:00 2001 From: Borja Garibotti Date: Sun, 12 May 2024 23:43:02 -0300 Subject: [PATCH 8/8] Add param match for ids --- my-app/src/params/integer.ts | 5 +++++ .../details/{[[id]] => [[id=integer]]}/+page.server.ts | 0 .../groups/details/{[[id]] => [[id=integer]]}/+page.svelte | 1 + 3 files changed, 6 insertions(+) create mode 100644 my-app/src/params/integer.ts rename my-app/src/routes/groups/details/{[[id]] => [[id=integer]]}/+page.server.ts (100%) rename my-app/src/routes/groups/details/{[[id]] => [[id=integer]]}/+page.svelte (97%) diff --git a/my-app/src/params/integer.ts b/my-app/src/params/integer.ts new file mode 100644 index 0000000..acba385 --- /dev/null +++ b/my-app/src/params/integer.ts @@ -0,0 +1,5 @@ +import type { ParamMatcher } from '@sveltejs/kit'; + +export const match: ParamMatcher = (param) => { + return /^\d+$/.test(param); +}; diff --git a/my-app/src/routes/groups/details/[[id]]/+page.server.ts b/my-app/src/routes/groups/details/[[id=integer]]/+page.server.ts similarity index 100% rename from my-app/src/routes/groups/details/[[id]]/+page.server.ts rename to my-app/src/routes/groups/details/[[id=integer]]/+page.server.ts diff --git a/my-app/src/routes/groups/details/[[id]]/+page.svelte b/my-app/src/routes/groups/details/[[id=integer]]/+page.svelte similarity index 97% rename from my-app/src/routes/groups/details/[[id]]/+page.svelte rename to my-app/src/routes/groups/details/[[id=integer]]/+page.svelte index 8c2e378..8f02cc9 100644 --- a/my-app/src/routes/groups/details/[[id]]/+page.svelte +++ b/my-app/src/routes/groups/details/[[id=integer]]/+page.svelte @@ -9,6 +9,7 @@ {title} - Nuevo Grupo +

Nuevo Grupo