clement.freville2
/
Application
forked from IQBall/Application
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

React Rooter

Browse Source
dev
Leo TUAILLON 2 years ago
parent ee5b243c0b
commit 1312b00de8
9 changed files with 13326 additions and 6371 deletions
Show Stats Download Patch File Download Diff File

19389
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
Unescape View File

@ -4,11 +4,17 @@
"private": true, "private": true,
"main": "public/electron.js", "main": "public/electron.js",
"dependencies": { "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/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"ionicons": "^6.1.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^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", "react-scripts": "^5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

29
src/App.js
Unescape View File

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

52
src/components/login/Login.js
Unescape View File

@ -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>
</>
)
}

17
src/main/Main.js → src/components/main/Main.js
Unescape View File

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

81
src/components/register/Register.js
Unescape View File

@ -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>
</>
)
}

5
src/css/login.css
Unescape View File

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

43
src/login/Login.js
Unescape View File

@ -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>
</>)
}

73
src/register/Register.js
Unescape View File

@ -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>
</>
)
}
Write Preview
Loading…
Cancel
Save