mirror of
https://github.com/Lemonochrme/service-architecture.git
synced 2025-06-08 05:30:50 +02:00
Fixed cors issue with front end hehe
This commit is contained in:
Lemonochrme
parent
49c69016cc
commit
f9c4ca5033
3 changed files with 181 additions and 0 deletions
|
|
@ -3,6 +3,9 @@ package insa.application.helpapp.rest;
|
|||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.web.servlet.config.annotation.CorsRegistry;
|
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||
|
||||
import java.util.*;
|
||||
import java.util.concurrent.atomic.AtomicLong;
|
||||
|
|
@ -19,6 +22,18 @@ public class UserServiceApplication {
|
|||
SpringApplication.run(UserServiceApplication.class, args);
|
||||
}
|
||||
|
||||
@Bean
|
||||
public WebMvcConfigurer corsConfigurer() {
|
||||
return new WebMvcConfigurer() {
|
||||
@Override
|
||||
public void addCorsMappings(CorsRegistry registry) {
|
||||
registry.addMapping("/**").allowedOrigins("*")
|
||||
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
|
||||
.allowedHeaders("*");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Create a new user
|
||||
@PostMapping
|
||||
public User createUser(@RequestBody User user) {
|
||||
|
|
|
|||
97
helpapp-frontend/index.html
Normal file
97
helpapp-frontend/index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HelpApp</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
header {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
section h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
form input, form textarea, form select, form button {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.response {
|
||||
margin-top: 1rem;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>HelpApp</h1>
|
||||
<p>Facilitons l'entraide entre les personnes</p>
|
||||
</header>
|
||||
<main>
|
||||
<section id="user-registration">
|
||||
<h2>Créer un compte utilisateur</h2>
|
||||
<form id="register-form">
|
||||
<input type="text" id="name" placeholder="Nom" required>
|
||||
<input type="email" id="email" placeholder="Email" required>
|
||||
<input type="password" id="password" placeholder="Mot de passe" required>
|
||||
<select id="role" required>
|
||||
<option value="REQUESTER">Demandeur</option>
|
||||
<option value="VOLUNTEER">Volontaire</option>
|
||||
</select>
|
||||
<button type="submit">Créer un compte</button>
|
||||
</form>
|
||||
<div class="response" id="register-response"></div>
|
||||
</section>
|
||||
|
||||
<section id="create-request">
|
||||
<h2>Créer une demande d'aide</h2>
|
||||
<form id="request-form">
|
||||
<input type="number" id="user-id" placeholder="Votre ID utilisateur" required>
|
||||
<textarea id="details" placeholder="Détails de la demande" required></textarea>
|
||||
<button type="submit">Soumettre la demande</button>
|
||||
</form>
|
||||
<div class="response" id="request-response"></div>
|
||||
</section>
|
||||
|
||||
<section id="view-requests">
|
||||
<h2>Voir les demandes d'aide</h2>
|
||||
<button id="fetch-requests">Afficher les demandes</button>
|
||||
<ul id="request-list"></ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
69
helpapp-frontend/script.js
Normal file
69
helpapp-frontend/script.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
const API_BASE = "http://localhost";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// User Registration
|
||||
const registerForm = document.getElementById("register-form");
|
||||
const registerResponse = document.getElementById("register-response");
|
||||
|
||||
registerForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const name = document.getElementById("name").value;
|
||||
const email = document.getElementById("email").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const role = document.getElementById("role").value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}:8083/users`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, email, password, role }),
|
||||
});
|
||||
const result = await response.json();
|
||||
registerResponse.textContent = `Utilisateur créé : ID ${result.id}`;
|
||||
} catch (error) {
|
||||
registerResponse.textContent = "Erreur lors de la création de l'utilisateur.";
|
||||
}
|
||||
});
|
||||
|
||||
// Create Help Request
|
||||
const requestForm = document.getElementById("request-form");
|
||||
const requestResponse = document.getElementById("request-response");
|
||||
|
||||
requestForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const userId = document.getElementById("user-id").value;
|
||||
const details = document.getElementById("details").value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}:8082/requests`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId, details }),
|
||||
});
|
||||
const result = await response.json();
|
||||
requestResponse.textContent = `Demande créée : ID ${result.id}`;
|
||||
} catch (error) {
|
||||
requestResponse.textContent = "Erreur lors de la création de la demande.";
|
||||
}
|
||||
});
|
||||
|
||||
// Fetch Help Requests
|
||||
const fetchRequestsButton = document.getElementById("fetch-requests");
|
||||
const requestList = document.getElementById("request-list");
|
||||
|
||||
fetchRequestsButton.addEventListener("click", async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}:8082/requests`);
|
||||
const requests = await response.json();
|
||||
|
||||
requestList.innerHTML = ""; // Clear existing list
|
||||
requests.forEach((req) => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = `ID: ${req.id}, Détails: ${req.details}, Statut: ${req.status}`;
|
||||
requestList.appendChild(li);
|
||||
});
|
||||
} catch (error) {
|
||||
requestList.innerHTML = "<li>Erreur lors de la récupération des demandes.</li>";
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue