From ac7e9f1a2206c21c473a04fbee27e9ec01c6c647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= Date: Sun, 5 May 2024 16:32:58 +0200 Subject: [PATCH] Start to read the api --- docker-compose.dev.yml | 12 +++ web/Dockerfile.dev | 12 +++ web/src/lib/server/api.ts | 37 ++++++++ web/src/lib/types/post.type.ts | 2 +- web/src/routes/+page.server.ts | 6 +- web/src/routes/auth/+page.server.ts | 37 ++++++++ web/src/routes/auth/+page.svelte | 129 +++++++++++++++++++++++++--- 7 files changed, 219 insertions(+), 16 deletions(-) create mode 100644 web/Dockerfile.dev create mode 100644 web/src/lib/server/api.ts create mode 100644 web/src/routes/auth/+page.server.ts diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 124215d..ef11bbd 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -31,5 +31,17 @@ services: timeout: 5s retries: 5 + web: + build: + context: ./web + dockerfile: Dockerfile.dev + restart: on-failure + volumes: + - ./web:/app + ports: + - 5173:5173 + environment: + - API_URL=http://api:1597 + volumes: db: diff --git a/web/Dockerfile.dev b/web/Dockerfile.dev new file mode 100644 index 0000000..be94c3e --- /dev/null +++ b/web/Dockerfile.dev @@ -0,0 +1,12 @@ +FROM node:22-alpine + +WORKDIR /app + +COPY package.json . +COPY package-lock.json . + +RUN npm install + +COPY . . + +CMD ["npm", "run", "dev", "--", "--host"] \ No newline at end of file diff --git a/web/src/lib/server/api.ts b/web/src/lib/server/api.ts new file mode 100644 index 0000000..91ddce1 --- /dev/null +++ b/web/src/lib/server/api.ts @@ -0,0 +1,37 @@ +import { env } from '$env/dynamic/private'; +import type { Post } from '$lib/types'; + +export async function login(email: string, password: string) { + const r = await fetch(env.API_URL + '/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ email, password }) + }); + const j = await r.json(); + return j.token as string; +} + +export async function register(email: string, username: string, password: string) { + const r = await fetch(env.API_URL + '/register', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ email, password, name: username }) + }); + const j = await r.json(); + return j.token as string; +} + +export async function getPosts(token?: string) { + const opts = { + headers: { + Authorization: `Bearer ${token}` + } + } + const r = await fetch(env.API_URL + '/entries', token ? opts : undefined); + const j = await r.json(); + return j.posts as Post[]; +} \ No newline at end of file diff --git a/web/src/lib/types/post.type.ts b/web/src/lib/types/post.type.ts index 95a2d49..a49b6ed 100644 --- a/web/src/lib/types/post.type.ts +++ b/web/src/lib/types/post.type.ts @@ -7,7 +7,7 @@ export type Post = { link: string; date: Date; - author?: string; + authors?: string[]; isRead: boolean; isBookmarked: boolean; isIgnored: boolean; diff --git a/web/src/routes/+page.server.ts b/web/src/routes/+page.server.ts index ccc0aad..ba57e3d 100644 --- a/web/src/routes/+page.server.ts +++ b/web/src/routes/+page.server.ts @@ -1,4 +1,6 @@ import type { Post, Feed } from "$lib/types"; +import { getPosts } from "$lib/server/api"; +import { get } from "svelte/store"; const feeds: Feed[] = [ { @@ -41,7 +43,7 @@ const posts: Post[] = [ isBookmarked: false, isIgnored: false, isReadLater: false, - author: "John Doe", + authors: ["John Doe"], feed: feeds[0], }, { @@ -60,7 +62,7 @@ const posts: Post[] = [ export function load() { return { - posts, + posts: getPosts(), feeds }; } diff --git a/web/src/routes/auth/+page.server.ts b/web/src/routes/auth/+page.server.ts new file mode 100644 index 0000000..104289a --- /dev/null +++ b/web/src/routes/auth/+page.server.ts @@ -0,0 +1,37 @@ +import { fail } from '@sveltejs/kit'; +import { login, register } from '$lib/server/api.js'; + + +export const actions = { + connect: async ({ cookies, request }) => { + const data = await request.formData(); + const email = data.get('email'); + const password = data.get('password'); + const token = await login(email as any, password as any); + return { + token + }; + }, + register: async ({ cookies, request }) => { + const data = await request.formData(); + const email = data.get('email'); + const username = data.get('username'); + const password = data.get('password'); + const passwordRepeat = data.get('password-repeat'); + console.log("register", email, username, password, passwordRepeat); + if (password !== passwordRepeat) { + return fail(400, { + data: { + email + }, + errors: { + password: 'Passwords do not match' + } + }) + } + const token = await register(email as any, username as any, password as any); + return { + token + }; + }, +} \ No newline at end of file diff --git a/web/src/routes/auth/+page.svelte b/web/src/routes/auth/+page.svelte index 01aec28..5bba7e1 100644 --- a/web/src/routes/auth/+page.svelte +++ b/web/src/routes/auth/+page.svelte @@ -8,9 +8,19 @@ Heading, Secondary, P, + Helper, Span, + Spinner, } from "flowbite-svelte"; - import { EnvelopeOutline, LockOutline } from "flowbite-svelte-icons"; + import { + EnvelopeOutline, + LockOutline, + UserOutline, + } from "flowbite-svelte-icons"; + import { enhance } from "$app/forms"; + export let form; + let registering = false; + let connecting = false;
@@ -21,10 +31,20 @@ > Welcome to Vex -

The best place to share your thoughts with the world

+

The best place to gather your feeds

-
+ { + connecting = true; + return async ({ update }) => { + await update(); + connecting = false; + }; + }} + > Login
@@ -32,7 +52,13 @@ - +
@@ -41,44 +67,121 @@ - +
- +
-
+ { + registering = true; + return async ({ update }) => { + await update(); + registering = false; + }; + }} + > Welcome +
+ + + + + + + +
- +
- + - +
- + - + + {#if form?.errors?.password} + Invalid!: Passwords do not match + {/if}
- +