Skip to content
Snippets Groups Projects
Commit 0962044f authored by Benjamin's avatar Benjamin
Browse files

Changement du front

parent 93cb95d2
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 28 additions and 1588 deletions
frontend/index.html
+ 28
− 5
View file @ 0962044f
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LookAtMyClaim</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LookMyClaim</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<header>
<h1>LookMyClaim!</h1>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="petitions.html">Pétitions</a></li>
<li><a href="registration.html">S'enregistrer</a></li>
<li><a href="login.html">Se connecter</a></li>
</ul>
</nav>
</header>
<main id="home">
<section>
<h2>Bienvenue</h2>
<p>Signez des pétitions et changez le monde !</p>
</section>
</main>
<footer>
<p>&copy; 2025 LookMyClaim. Tous droits réservés.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
frontend/package-lock.json deleted 100644 → 0
+ 0
− 1169
View file @ 93cb95d2
This diff is collapsed.
frontend/package.json deleted 100644 → 0
+ 0
− 23
View file @ 93cb95d2
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"axios": "^1.7.9",
"bootstrap": "^5.3.3",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"vite": "^6.0.3"
}
}
frontend/src/App.vue deleted 100644 → 0
+ 0
− 18
View file @ 93cb95d2
<template>
<Navbar />
<router-view></router-view>
</template>
<script>
import Navbar from "./components/Navbar.vue";
import Footer from "./components/Footer.vue";
export default {
name: "App",
components: {
Navbar,
Footer,
},
};
</script>
\ No newline at end of file
frontend/src/App.vue.save deleted 100644 → 0
+ 0
− 1
View file @ 93cb95d2
frontend/src/assets/css/App.css deleted 100644 → 0
+ 0
− 32
View file @ 93cb95d2
/* App.css */
.navbar {
background-color: #007bff;
color: white;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
}
ul {
list-style: none;
display: flex;
gap: 20px;
}
li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
li a:hover {
text-decoration: underline;
}
\ No newline at end of file
frontend/src/components/Footer.vue deleted 100644 → 0
+ 0
− 6
View file @ 93cb95d2
<!-- Footer -->
<template>
<footer class="bg-primary text-white text-center py-3 mt-5">
&copy; 2024 LookAtMyClaim! Tous droits réservés.
</footer>
</template>
\ No newline at end of file
frontend/src/components/Navbar.vue deleted 100644 → 0
+ 0
− 64
View file @ 93cb95d2
<template>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="/home">LookAtMyClaim!</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/home">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pétitions</a>
</li>
<!-- Bouton "Créer une pétition" et "Mon compte" uniquement si l'utilisateur est connecté -->
<li class="nav-item" v-if="isLoggedIn">
<a class="nav-link" href="#">Créer une pétition</a>
</li>
<li class="nav-item" v-if="isLoggedIn">
<a class="nav-link" href="#">Mon compte</a>
</li>
<li class="nav-item" v-if="isLoggedIn">
<a class="btn btn-danger nav-link" @click="logout">Se déconnecter</a>
</li>
<!-- Boutons "Se connecter" et "S'enregistrer" si l'utilisateur n'est pas connecté -->
<li class="nav-item" v-if="!isLoggedIn">
<a class="nav-link" href="/login">Se connecter</a>
</li>
<li class="nav-item" v-if="!isLoggedIn">
<a class="nav-link" href="/register">S'enregistrer</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
token: localStorage.getItem("token") || null, // Par défaut, l'utilisateur est non connecté
};
},
computed: {
isLoggedIn() {
return !!this.token;
}
},
methods: {
logout() {
localStorage.removeItem("token");
this.token = null;
this.$router.push("/");
}
}
}
</script>
\ No newline at end of file
frontend/src/main.js deleted 100644 → 0
+ 0
− 7
View file @ 93cb95d2
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import './assets/css/App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
createApp(App).use(router).mount("#app");
\ No newline at end of file
frontend/src/router.js deleted 100644 → 0
+ 0
− 18
View file @ 93cb95d2
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import Register from "./views/Register.vue";
const routes = [
{ path : "/", component: Home},
{ path : "/home", component: Home},
{ path : "/login", component: Login},
{ path : "/register", component: Register}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
\ No newline at end of file
frontend/src/views/Home.vue deleted 100644 → 0
+ 0
− 61
View file @ 93cb95d2
<template>
<!-- Nav Facile -->
<div class="container mt-5">
<h1 class="text-center">Bienvenue sur LookAtMyClaim!</h1>
<p class="text-center">Rejoignez-nous pour soutenir des causes importantes.</p>
<div class="row mt-4">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Voir les pétitions</h5>
<p class="card-text">Explorez les pétitions existantes et signez-les.</p>
<a href="#" class="btn btn-primary">Voir</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Créer une pétition</h5>
<p class="card-text">Défendez vos idées et démarrez une pétition.</p>
<a href="#" class="btn btn-primary">Créer</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Mon compte</h5>
<p class="card-text">Gérez votre comptes, vos pétitions et vos signatures.</p>
<a href="#" class="btn btn-primary">Mon compte</a>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div>
<h1>Pétitions populaires</h1>
<ul>
<li v-for="petition in petitions" :key="petition.id">
<router-link :to="`/petition/${petition.id}`">{{ petition.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return { petitions: [] };
},
async created() {
const response = await fetch(import.meta.env.VITE_BACK_PATH + "/petitions");
this.petitions = await response.json();
},
};
</script>
\ No newline at end of file
frontend/src/views/Login.vue deleted 100644 → 0
+ 0
− 79
View file @ 93cb95d2
<template>
<div class="container mt-5">
<h2 class="text-center">Connexion</h2>
<form @submit.prevent="login" class="p-4 border rounded shadow-sm bg-light col-md-6 col-lg-6 mx-auto">
<!-- Nom d'utilisateur -->
<div class="mb-3">
<label for="username" class="form-label">Nom d'utilisateur :</label>
<input
type="text"
id="username"
class="form-control"
v-model="username"
required
/>
</div>
<!-- Mot de passe -->
<div class="mb-3">
<label for="password" class="form-label">Mot de passe :</label>
<input
type="password"
id="password"
class="form-control"
v-model="password"
required
/>
</div>
<!-- Message d'erreur -->
<p v-if="errorMessage" class="text-danger">{{ errorMessage }}</p>
<!-- Bouton de soumission -->
<button type="submit" class="btn btn-primary w-100">Se connecter</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
username: '',
password: '',
errorMessage: ''
};
},
methods: {
async login() {
try {
const response = await axios.post(import.meta.env.VITE_BACK_PATH + "/users/login", {
//const response = await axios.post("http://localhost:8000/users/login", {
username: this.username,
password: this.password,
});
if (response.status === 200) {
localStorage.setItem('token', response.data.token); // Sauvegarde du token
this.token = response.data.token;
this.$router.push('/'); // Redirection
} else {
this.errorMessage = response.data.message || "Nom d'utilisateur ou mot de passe incorrect.";
}
} catch (error) {
this.errorMessage = "Erreur de connexion. Veuillez réessayer.";
console.error(error);
}
}
}
};
</script>
<style scoped>
.text-center {
text-align: center;
}
</style>
\ No newline at end of file
frontend/src/views/Register.vue deleted 100644 → 0
+ 0
− 99
View file @ 93cb95d2
<template>
<div class="container mt-5">
<h2 class="text-center">Inscription</h2>
<form @submit.prevent="register" class="p-4 border rounded shadow-sm bg-light col-md-6 col-lg-6 mx-auto">
<!-- Email -->
<div class="mb-2">
<label for="email" class="form-label">Adresse e-mail :</label>
<input
type="email"
id="email"
class="form-control"
v-model="email"
required
/>
</div>
<!-- Age -->
<div class="mb-2">
<label for="username" class="form-label">Nom d'utilisateur :</label>
<input
type="text"
id="username"
class="form-control"
v-model="username"
min="0"
/>
</div>
<!-- Age -->
<div class="mb-2">
<label for="age" class="form-label">Âge :</label>
<input
type="number"
id="age"
class="form-control"
v-model="age"
min="0"
/>
</div>
<!-- Password -->
<div class="mb-2">
<label for="password" class="form-label">Mot de passe :</label>
<input
type="password"
id="password"
class="form-control"
v-model="password"
required
/>
</div>
<!-- Message -->
<p v-if="message" class="text-danger">{{ message }}</p>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary w-100">S'inscrire</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
email: "",
username: "",
password: "",
age: "",
message: "",
};
},
methods: {
async register() {
try {
const response = await axios.post(import.meta.env.VITE_BACK_PATH + "/users/register", {
//const response = await axios.post("http://localhost:8000/users/register", {
email: this.email,
username: this.username,
age: this.age,
password: this.password,
});
this.message = "Inscription réussie!";
this.$router.push("/login");
} catch (error) {
this.message = "Erreur d'inscription. Veuillez réessayer.";
}
},
},
};
</script>
<style scoped>
.text-center {
text-align: center;
}
</style>
\ No newline at end of file
frontend/vite.config.js deleted 100644 → 0
+ 0
− 6
View file @ 93cb95d2
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()]
});
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment