add: added projectsHEADmain

1 files changed, 149 insertions, 0 deletions

diff --git a/ping/frontend/src/routes/login/+page.svelte b/ping/frontend/src/routes/login/+page.svelte
new file mode 100644
index 0000000..0d66f8d
--- /dev/null
+++ b/ping/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { addToast } from '$lib/stores/toast';
+	import { json } from '@sveltejs/kit';
+
+	let isConnecting = $state(false);
+
+	function onSubmit(event: Event) {
+		event.preventDefault();
+
+		isConnecting = true;
+		const fd = new FormData(event.target as HTMLFormElement);
+		const { login, password } = Object.fromEntries(fd.entries());
+
+		fetch('/api/user/login', {
+			body: JSON.stringify({
+				login,
+				password
+			}),
+			headers: {
+				Accept: '*/*',
+				'Content-Type': 'application/json'
+			},
+			method: 'POST'
+		})
+			.then(async (res) => {
+				const jsonData = await res.json();
+
+				if (!res.ok) {
+					isConnecting = false;
+					addToast({ message: jsonData.message });
+					return;
+				}
+
+				const { token } = jsonData;
+				localStorage.setItem('token', token);
+				window.location.href = '/dashboard';
+			})
+			.catch((err) => {
+				isConnecting = false;
+				console.error('Error during login:', err);
+				addToast({
+					message: "Une erreur est survenue lors de la connexion. (Plus d'infos dans la console)"
+				});
+			});
+	}
+
+	function createDebugUsers() {
+		fetch('/api/dbdebuguser')
+			.then((res) => {
+				if (res.ok) {
+					res.json().then((data) => {
+						if (data.created) {
+							addToast({
+								message: 'Utilisateurs de debug créés avec succès.',
+								color: 'green',
+								title: 'Succès'
+							});
+							return data;
+						} else {
+							addToast({
+								message: 'Utilisateurs de debug déjà créés.',
+								color: 'green',
+								title: 'Succès'
+							});
+						}
+					});
+				} else {
+					addToast({ message: 'Il semblerait que les utilisateurs de debug soient déjà crées.' });
+				}
+			})
+			.catch((err) => {
+				console.error('Erreur lors de la création des utilisateurs de debug:', err);
+				addToast({
+					message:
+						"Erreur lors de la création des utilisateurs de debug. (Plus d'infos dans la console)"
+				});
+			});
+	}
+</script>
+
+<div class="bg">
+	<div class="card">
+		<h1>Connectez-vous</h1>
+		<form onsubmit={onSubmit}>
+			<label for="login">Nom d'utilisateur</label>
+			<input type="text" id="login" name="login" placeholder="lirili.larila" required />
+			<label for="password">Mot de passe</label>
+			<input type="password" id="password" name="password" placeholder="Mot de passe" required />
+			<button class="btn" type="submit" disabled={isConnecting}>Connexion</button>
+		</form>
+	</div>
+</div>
+<button id="fab" class="btn" onclick={createDebugUsers}
+	><img src="/icons/debug.svg" width="100%" alt="+" /></button
+>
+
+<style>
+	.card {
+		width: auto;
+	}
+
+	.bg {
+		background-image: url('/img/header-bg.jpg');
+		height: 100vh;
+		background-size: cover;
+		background-position: center;
+		position: relative;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	h1 {
+		color: var(--text-lime);
+		font-size: 36px;
+		text-align: center;
+		margin: 0;
+		font-weight: 600;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		color: white;
+		gap: 8px;
+		min-width: 360px;
+	}
+
+	#fab {
+		position: fixed;
+		bottom: 20px;
+		right: 20px;
+		z-index: 1000;
+		border-radius: 50%;
+		width: 56px;
+		height: 56px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-weight: bolder;
+		font-size: 32px;
+	}
+
+	#fab img {
+		transform: scale(2);
+	}
+</style>