mirror of
https://github.com/Lemonochrme/service-architecture.git
synced 2025-06-08 13:40: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.SpringApplication;
|
||||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||||
import org.springframework.web.bind.annotation.*;
|
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.*;
|
||||||
import java.util.concurrent.atomic.AtomicLong;
|
import java.util.concurrent.atomic.AtomicLong;
|
||||||
|
|
@ -19,6 +22,18 @@ public class UserServiceApplication {
|
||||||
SpringApplication.run(UserServiceApplication.class, args);
|
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
|
// Create a new user
|
||||||
@PostMapping
|
@PostMapping
|
||||||
public User createUser(@RequestBody User user) {
|
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