React Rooter
continuous-integration/drone/push Build is failing Details

pull/1/head
Leo TUAILLON 2 years ago
parent ee5b243c0b
commit 1312b00de8

19389
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -4,11 +4,17 @@
"private": true,
"main": "public/electron.js",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"ionicons": "^6.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-ionicons": "^4.6.5",
"react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},

@ -1,15 +1,26 @@
import logo from './logo.svg';
import './App.css';
import {Register} from './register/Register'
import {Login} from "./login/Login";
import {MainPage} from "./main/Main";
import Register from './components/register/Register';
import Login from "./components/login/Login";
import {MainPage} from "./components/main/Main";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
function App() {
return (
<MainPage/>
//<Login/>
//<Register/>
);
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/sign-up" element={<Register />} />
<Route path="/sign-in" element={<Login />} />
<Route path="/*" element={<MainPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

@ -0,0 +1,52 @@
import React from 'react'
import '../../css/login.css'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
export default function Login() {
return (
<>
<div className={"body"}>
<div className="container">
<form action="/login" method="POST">
<h3>Se connecter :</h3>
<div className="Input">
<span>Identifiant (eMail)</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="envelope" />
</div>
<input type="input" className="form__field" placeholder="email" name="email" id='email'
required/>
</div>
</div>
<div className="Input">
<span>Mot de passe</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="lock" />
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="password"
id="password" required/>
</div>
</div>
<label>
<input type="checkbox" value="se souvenir de moi" id={"remember me"} name={"remember me"}/>
se souvenir de moi
</label>
<div className="Input">
<div className="box">
<input type="submit" value="Se connecter"/>
</div>
</div>
<div className={"Href"}>
<a href="src/components/login#">J'ai oublier mon mot de passe</a>
<a href="/signup">Je n'ai pas encore de compte</a>
</div>
</form>
</div>
</div>
</>
)
}

@ -1,11 +1,11 @@
import React from 'react'
import '../css/main.css'
import '../../css/main.css'
export function MainPage() {
return (<>
<header>
<div className="header-left">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
</div>
<div className="header-center">
<h2>Bienvenue, Prénom Nom</h2>
@ -21,27 +21,27 @@ export function MainPage() {
<div id="teams-list">
{/*afficher la liste des équipes*/}
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 1</p>
</div>
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 2</p>
</div>
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../img/logo2.png")}/>
<img src={require("../../img/logo2.png")}/>
<p className="team-name">Equipe 3</p>
</div>
</div>
@ -69,3 +69,4 @@ export function MainPage() {
</>
)
}

@ -0,0 +1,81 @@
import React from 'react'
import '../../css/login.css'
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLock, faEnvelope, faUser } from '@fortawesome/free-solid-svg-icons';
library.add(faLock);
library.add(faEnvelope);
library.add(faUser);
export default function Register() {
return (
<>
<div className={"body"}>
<div className="container">
<form action="/signup" method="POST">
<h3>S'inscrire :</h3>
<div className="Input">
<span>Adresse e-mail</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="envelope" />
</div>
<input type="input" className="form__field" placeholder="email" name="email" id='email'
required/>
</div>
</div>
<div className="Input">
<span>Nom</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="user" />
</div>
<input type="input" placeholder="nom" name="name" id='name' required/>
</div>
</div>
<div className="Input">
<span>Prénom</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="user" />
</div>
<input type="input" placeholder="Prénom" name="forename" id='forename' required/>
</div>
</div>
<div className="Input">
<span>Mot de passe</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="lock" />
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="password"
id="password"
required/>
</div>
</div>
<div className="Input">
<span>Confirmer le mot de passe</span>
<div className="box">
<div className="icon">
<FontAwesomeIcon icon="lock" />
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="cpassword"
id="cpassword" required/>
</div>
</div>
<div className="Input">
<div className="box">
<input type="submit" value="S'inscrire"/>
</div>
</div>
<a href="/sign-in">J'ai déjà un compte</a>
</form>
</div>
</div>
</>
)
}

@ -8,7 +8,7 @@
a{
text-decoration: none;
}
body{
.body{
display: flex;
justify-content: center;
align-items: center;
@ -121,3 +121,6 @@ label input{
margin-right: 5px;
}
a:nth-of-type(1) {
display: block;
}

@ -1,43 +0,0 @@
import React from 'react'
import '../css/login.css'
export function Login() {
return (<>
<div className="container">
<form action="/login" method="POST">
<h3>Se connecter :</h3>
<div className="Input">
<span>Identifiant (eMail)</span>
<div className="box">
<div className="icon">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<input type="input" className="form__field" placeholder="email" name="email" id='email'
required/>
</div>
</div>
<div className="Input">
<span>Mot de passe</span>
<div className="box">
<div className="icon">
<ion-icon name="lock-closed"></ion-icon>
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="password"
id="password" required/>
</div>
</div>
<label>
<input type="checkbox" value="Se souvenir de moi"/>
</label>
<div className="Input">
<div className="box">
<input type="submit" value="Se connecter"/>
</div>
</div>
<a href="#">J'ai oublier mon mot de passe</a>
<a href="../register/index.html">Je n'ai pas encore de compte</a>
</form>
</div>
</>)
}

@ -1,73 +0,0 @@
import React from 'react'
import '../css/login.css'
export function Register() {
return (
<>
<div className="container">
<form action="/register" method="POST">
<h3>S'inscrire :</h3>
<div className="Input">
<span>Adresse e-mail</span>
<div className="box">
<div className="icon">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<input type="input" className="form__field" placeholder="email" name="email" id='email'
required/>
</div>
</div>
<div className="Input">
<span>Nom</span>
<div className="box">
<div className="icon">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<input type="input" placeholder="nom" name="name" id='name' required/>
</div>
</div>
<div className="Input">
<span>Prénom</span>
<div className="box">
<div className="icon">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<input type="input" placeholder="Prénom" name="forename" id='forename' required/>
</div>
</div>
<div className="Input">
<span>Mot de passe</span>
<div className="box">
<div className="icon">
<ion-icon name="lock-closed"></ion-icon>
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="password"
id="password"
required/>
</div>
</div>
<div className="Input">
<span>Confirmer le mot de passe</span>
<div className="box">
<div className="icon">
<ion-icon name="lock-closed"></ion-icon>
</div>
<input type="password" className="form__field" placeholder="mot de passe" name="cpassword"
id="cpassword" required/>
</div>
</div>
<label>
<input type="checkbox" value="se souvenir de moi"/>
</label>
<div className="Input">
<div className="box">
<input type="submit" value="S'inscrire"/>
</div>
</div>
<a href="../login/index.html">J'ai déjà un compte</a>
</form>
</div>
</>
)
}