qowevisa/fin-check-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Everything I have

Browse Source
This commit is contained in:
qowevisa 2024-11-06 19:42:42 +02:00
parent 3be3b83712
commit 4b2fb40d6f
12 changed files with 246 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
package-lock.json generated
View File

@ -1017,6 +1017,19 @@
"node": ">= 8"
}
},
"node_modules/anymatch/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@ -1817,6 +1830,19 @@
"node": ">=8.6"
}
},
"node_modules/micromatch/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@ -2007,13 +2033,15 @@
"license": "ISC"
},
"node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"engines": {
"node": ">=8.6"
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
@ -2698,6 +2726,19 @@
"node": ">= 6"
}
},
"node_modules/tailwindcss/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/tailwindcss/node_modules/postcss-selector-parser": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "test",
"name": "fin-check-front",
"version": "0.0.1",
"type": "module",
"scripts": {

24
src/hooks.server.ts Normal file
View File

@ -0,0 +1,24 @@
// import type { Handle, HandleFetch } from "@sveltejs/kit";
import type { HandleFetch } from "@sveltejs/kit";
// export const handle: Handle = async ({ event, resolve }) => {
// console.log("handle Function")
// return await resolve(event)
// }
console.log("in hooks file: 1")
export const handleFetch: HandleFetch = async ({ request, fetch }) => {
console.log(request)
console.log("handleFetch triggered for URL:", request.url);
console.log("in handleFetch: 2")
if (request.url.startsWith("https://api.fin.qowevisa.click/api")) {
request = new Request(
request.url.replace("https://api.fin.qowevisa.click/api", "http://localhost:3000/api"),
request
)
};
console.log(request)
console.log("in handleFetch: 3")
return fetch(request);
};

4
src/lib/api.ts
View File

@ -1,7 +1,7 @@
// src/lib/api.ts
// Define the base URL of your API
const BASE_API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3111/api';
const BASE_API_URL = import.meta.env.VITE_API_BASE_URL_SERVER || 'http://localhost:3111/api';
// Interface for the login response
interface LoginResponse {
@ -20,6 +20,7 @@ interface UserData {
// Generic function for making API requests
export async function apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
const url = `${BASE_API_URL}${endpoint}`;
console.log("Fetching ", url)
const defaultHeaders = {
'Content-Type': 'application/json',
@ -57,6 +58,7 @@ export async function login(username: string, password: string): Promise<LoginRe
// Get user data function with type annotation for the response
export async function getUserData(token: string): Promise<UserData> {
return apiFetch<UserData>('/user/me', {
credentials: 'include',
headers: { Authorization: `Bearer ${token}` },
});
}

17
src/routes/+layout.svelte
View File

@ -1,6 +1,23 @@
<script lang="ts">
import '../app.css';
let { children } = $props();
import { page } from '$app/stores';
// import { goto } from '$app/navigation';
// $effect(()=>{
// if (!isAuthenticated && $page.url.pathname != "/login"){
// // goto("/login")
// }
// });
</script>
{#if $page.url.pathname != "/login"}
<nav>
<a href="/ping">ping</a>
<a href="/test">test</a>
<a href="/test2">test2</a>
<a href="/login">login</a>
</nav>
{/if}
{@render children()}

7
src/routes/+page.svelte
View File

@ -1,5 +1,6 @@
<h1>Welcome to SvelteKit1</h1>
<p>
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
documentation123213
<a href="/ping">ping</a>
<a href="/test">test</a>
<a href="/test2">test2</a>
<a href="/login">login</a>
</p>

38
src/routes/api/auth/login/+server.js Normal file
View File

@ -0,0 +1,38 @@
// src/routes/api/auth/login/+server.ts
import { json } from '@sveltejs/kit';
import { login } from '$lib/api';
export async function POST({ request, cookies }) {
console.log("in POST1")
const authToken = request.headers.get('App-Token');
console.log("authToken = ", authToken)
console.log("it should be = ", import.meta.env.VITE_AUTH_APP_TOKEN)
if (authToken !== import.meta.env.VITE_AUTH_APP_TOKEN) {
return json({ error: 'Forbidden' }, { status: 403 });
}
console.log("in POST2")
const { username, password } = await request.json();
console.log("in POST3")
try {
console.log("in POST4")
const loginResponse = await login(username, password); // Call the backend login
console.log("loginResponse = ", loginResponse)
const session = loginResponse.headers.get("Set-Cookie");
// Set cookie securely on the server
cookies.set('session', loginResponse.token, {
httpOnly: true, // Prevents JavaScript access
secure: process.env.NODE_ENV === 'production', // Only send over HTTPS in production
sameSite: 'Strict', // Ensures the cookie is only sent in a first-party context
maxAge: 3600 // Expiry time in seconds (e.g., 1 hour)
});
console.log("in POST5")
return json({ id: loginResponse.id, name: loginResponse.name }); // Return necessary data
} catch (error) {
return json({ error: error.message }, { status: 401 });
}
}

15
src/routes/login/+page.svelte
View File

@ -1,5 +1,4 @@
<script>
import { login } from "$lib/api";
import { addSuccessToast } from "$lib/components/store";
import Toasts from "$lib/components/Toasts.svelte";
let username = $state("");
@ -14,8 +13,18 @@
return;
}
try {
const resp = await login(username, password);
const resp = await fetch("/api/auth/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
"App-Token": import.meta.env.VITE_AUTH_APP_TOKEN,
},
body: JSON.stringify({ username, password }),
credentials: "include", // Important to send cookies with requests
});
addSuccessToast("Login successful!");
// setToken(resp.token);
// goto("/test");
console.log(resp);
} catch (err) {
if (err instanceof Error) {
@ -25,8 +34,6 @@
}
}
}
$inspect("username = ", username);
$inspect("password = ", password);
</script>
<Toasts />

47
src/routes/test/+page.svelte Normal file
View File

@ -0,0 +1,47 @@
<script>
import { addSuccessToast } from "$lib/components/store";
import Toasts from "$lib/components/Toasts.svelte";
function testNotification() {
console.log("Tested!");
addSuccessToast("Test string", false);
}
async function test2() {
addSuccessToast("Test string", false);
const resp = await fetch("https://api.fin.qowevisa.click/api/ping");
// const resp = await fetch("http://localhost:3000/api/ping");
if (resp.ok) {
console.log(await resp.json());
}
}
async function test3() {
fetch("http://localhost:3000/api/ping")
.then((response) => response.json())
.then(console.log)
.catch(console.error);
}
</script>
<Toasts />
<div class="flex justify-center items-center min-h-screen bg-gray-100">
<button
onclick={testNotification}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me!
</button>
<button
onclick={test2}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me2!
</button>
<button
onclick={test3}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me3!
</button>
</div>

9
src/routes/test2/+page.server.js Normal file
View File

@ -0,0 +1,9 @@
export async function load({ fetch }) {
const response = await fetch("https://api.fin.qowevisa.click/api/authping", {
credentials: "include",
});
return {
message: await response.json()
};
}

46
src/routes/test2/+page.svelte Normal file
View File

@ -0,0 +1,46 @@
<script>
import { addSuccessToast } from "$lib/components/store";
import Toasts from "$lib/components/Toasts.svelte";
let { data } = $props();
function testNotification() {
console.log("Tested!");
addSuccessToast("Test string", false);
}
async function test2() {
addSuccessToast("Test string", false);
const resp = await fetch("https://api.fin.qowevisa.click/api/ping");
// const resp = await fetch("http://localhost:3000/api/ping");
if (resp.ok) {
console.log(await resp.json());
}
}
async function test3() {
console.log(data);
}
</script>
<Toasts />
<p>{data.message.message}</p>
<div class="flex justify-center items-center min-h-screen bg-gray-100">
<button
onclick={testNotification}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me!
</button>
<button
onclick={test2}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me2!
</button>
<button
onclick={test3}
class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
>
Click Me3!
</button>
</div>

2
vite.config.ts
View File

@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
plugins: [sveltekit()],
});