Merge branch 'dev' into 'features/footer'
# Conflicts: # src/index.css
This commit is contained in:
JOSSERAND GIOVANNI p2405212
Generated
+2864
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
import styles from "./background.module.css";
|
||||
const Background = ({ children, className }) => {
|
||||
return (
|
||||
<div className={`${styles["background-container"]} ${className || ''}`}>
|
||||
<div className={styles["circle"] + " " + styles["circle-1"]}></div>
|
||||
<div className={styles["circle"] + " " + styles["circle-2"]}></div>
|
||||
<div className={styles["circle"] + " " + styles["circle-3"]}></div>
|
||||
<div className={styles["circle"] + " " + styles["circle-4"]}></div>
|
||||
<div className={styles["circle"] + " " + styles["circle-5"]}></div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Background;
|
||||
@@ -0,0 +1,60 @@
|
||||
/* BACKGROUND ////////////////////////////////////////////////////////*/
|
||||
.background-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ff9500, #ffb347);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background-color: rgba(255, 255, 204, 0.6);
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background-color: rgba(255, 255, 153, 0.829);
|
||||
top: 51%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background-color: rgba(255, 255, 204, 0.439);
|
||||
top: 17%;
|
||||
right: 9%;
|
||||
}
|
||||
|
||||
.circle-4 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background-color: rgb(244, 244, 172);
|
||||
bottom: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
.circle-5 {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: rgba(240, 240, 41, 0.827);
|
||||
top: 2%;
|
||||
right: 2%;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useState } from "react";
|
||||
import login from "../../utils/login.js";
|
||||
import getUser from "../../utils/getUser.js";
|
||||
import styles from "./form.module.css";
|
||||
function LoginForm({ className }) {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
await login(email, password);
|
||||
getUser();
|
||||
}
|
||||
return (
|
||||
<div className={`${className} ${"glassCard"}`}>
|
||||
<div className={styles.formgroup}>
|
||||
<input type="email" id="email" value={email} placeholder="Adresse mail" onChange={e => setEmail(e.target.value)} required/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formgroup}>
|
||||
<input type="password" id="password" value={password} placeholder="Adresse mail" onChange={e => setPassword(e.target.value)} required/>
|
||||
<br/>
|
||||
</div>
|
||||
<div className={styles.logButton} >
|
||||
<button className={styles.loginButton} onClick={e => handleSubmit(e)}>Se connecter</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LoginForm;
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 0px 10px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
color: #111;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;
|
||||
}
|
||||
|
||||
input::placeholder{
|
||||
font-size: 20px;
|
||||
color: rgba(0,0,0,0.45);
|
||||
}
|
||||
.logButton{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.formgroup{
|
||||
margin-top:23px;
|
||||
}
|
||||
|
||||
/* style scoped (module) */
|
||||
.loginButton {
|
||||
display: inline-block;
|
||||
padding: 0.55rem 1rem;
|
||||
height: 55px;
|
||||
border-radius: 6px;
|
||||
background-color: #2b6cb0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
box-shadow: 0 2px 6px rgba(43,108,176,0.15);
|
||||
cursor: pointer;
|
||||
transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.loginButton:hover {
|
||||
background-color: #235a9a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 14px rgba(43,108,176,0.18);
|
||||
}
|
||||
|
||||
.loginButton:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 3px 8px rgba(43,108,176,0.12);
|
||||
}
|
||||
|
||||
.loginButton:focus {
|
||||
outline: 2px solid rgba(43,108,176,0.24);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
.loginButton:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 3px 8px rgba(43,108,176,0.12);
|
||||
}
|
||||
|
||||
.loginButton:focus {
|
||||
outline: 2px solid rgba(43,108,176,0.24);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
+6
-16
@@ -10,10 +10,9 @@
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
/* color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
background-color: #242424;*/
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -43,14 +42,15 @@ body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
width:100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.glassCard {
|
||||
z-index: 100;
|
||||
width: 240px;
|
||||
width: 100%;
|
||||
padding: 10px 20px 10px 20px;
|
||||
height: 360px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(3px);
|
||||
@@ -71,17 +71,7 @@ h1 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import styles from "./LoginPage.module.css";
|
||||
import LoginForm from "../../components/form/form.jsx";
|
||||
import Background from "../../components/background/background.jsx";
|
||||
|
||||
function LoginPage() {
|
||||
return (
|
||||
<Background>
|
||||
<div className={styles.container}>
|
||||
<LoginForm />
|
||||
</div>
|
||||
</Background>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginPage;
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 30%;
|
||||
overflow: hidden;
|
||||
max-height: 80%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-radius:12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createBrowserRouter } from "react-router";
|
||||
import Layout from "./layout.jsx";
|
||||
import HomePage from "./pages/Home/HomePage";
|
||||
import LoginPage from "./pages/Login/LoginPage";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
@@ -10,6 +11,10 @@ const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
Component: HomePage,
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
Component: LoginPage,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export default async function getUser() {
|
||||
await fetch('http://localhost:8000/api/me', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => console.log('Utilisateur connecté :', data))
|
||||
.catch(err => console.error('Erreur :', err));
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
export default async function getXSRFToken() {
|
||||
const response = await fetch('http://localhost:8000/sanctum/csrf-cookie', {
|
||||
method: 'GET',
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok && response.status !== 204) {
|
||||
throw new Error(`Error : ${response.status}`);
|
||||
}
|
||||
|
||||
const name = 'XSRF-TOKEN';
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) {
|
||||
return decodeURIComponent(parts.pop().split(';').shift());
|
||||
}
|
||||
|
||||
throw new Error('Error: Invalid XSRF-TOKEN');
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import getXSRFToken from "./getXSRF.js";
|
||||
|
||||
export default async function login(email, password) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
|
||||
await fetch('http://localhost:8000/api/login', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-XSRF-TOKEN': csrfToken,
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
password: password
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Code HTTP :', response.status);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur HTTP ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Connexion réussie ! Données utilisateur :', data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la connexion :', error.message);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user