maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finalisation Page Admin

Browse Source
master
Théo DUPIN 3 years ago
parent 4c6676713d
commit 2092568a4b
3 changed files with 114 additions and 72 deletions
Show Stats Download Patch File Download Diff File

6
src/components/NavigationAdmin.js
Unescape View File

@ -7,13 +7,13 @@ const NavigationAdmin = () => {
<div className="nav_bar_verticale">
<img className="logo" srcSet="./LogoApp.svg"></img>
<NavLink className="create_user" to="/Admin">
<button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer un nouvel utilisateur</button>
<button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer utilisateur</button>
</NavLink>
<NavLink className="modify_user" to="/Admin_modif">
<button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button>
<button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier utilisateur</button>
</NavLink>
<NavLink className="delete_user" to="/Admin_supp">
<button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button>
<button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer utilisateur</button>
</NavLink>
</div>

67
src/pages/Admin.js
Unescape View File

@ -7,40 +7,41 @@ const Admin = () => {
<div className="page_admin">
<NavigationAdmin />
{/* Create a admin page */}
<p className="Titre">Admin
<div className="Formulaire">
<form className="form">
<table className="Formulaire_de_connexion">
<tr>
<p className="texte">Nom :</p>
<input id="nom" className="texte_zone" type="text" placeholder="Nom"/>
</tr>
<tr>
<p className="texte">Prénom :</p>
<input id="prénom" className="texte_zone" type="text" placeholder="Prénom"/>
</tr>
<tr>
<p className="texte">Rôle dans l'entreprise :</p>
<input id="rôle" className="texte_zone" type="text" placeholder="Rôle"/>
</tr>
<tr>
<p className="texte">Identifiant :</p>
<input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant"/>
</tr>
<tr>
<p className="texte">Mot de passe (par défaut) :</p>
<input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
</tr>
<tr>
<div className='bouton_submit'>
<button className="bouton_val_ann" type="submit">Valider</button>
<button className="bouton_val_ann" type="submit">Annuler</button>
</div>
</tr>
</table>
</form>
<div className="Titre_Formulaire">
<p className="Titre">Admin</p>
<div className="Formulaire">
<form className="form">
<table className="Formulaire_de_connexion">
<tr>
<p className="texte">Nom :</p>
<input id="nom" className="texte_zone" type="text" placeholder="Nom"/>
</tr>
<tr>
<p className="texte">Prénom :</p>
<input id="prénom" className="texte_zone" type="text" placeholder="Prénom"/>
</tr>
<tr>
<p className="texte">Rôle dans l'entreprise :</p>
<input id="rôle" className="texte_zone" type="text" placeholder="Rôle"/>
</tr>
<tr>
<p className="texte">Identifiant :</p>
<input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant"/>
</tr>
<tr>
<p className="texte">Mot de passe (par défaut) :</p>
<input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
</tr>
<tr>
<div className='bouton_submit'>
<button className="bouton_val" type="submit">Valider</button>
<button className="bouton_ann" type="submit">Annuler</button>
</div>
</tr>
</table>
</form>
</div>
</div>
</p>
</div>
);
};

113
src/styles/components/_admin.scss
Unescape View File

@ -1,15 +1,12 @@
.page_admin {
display: flex;
flex-direction: row;
flex-basis: 100%;
height: 100vh;
position:fixed;
.nav_bar_verticale {
display: flex;
flex-direction: column;
width: 200px;
height: 100%;
background: rgba(255, 255, 255, 0.143);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
@ -21,16 +18,19 @@
.create_user {
padding: 5px;
text-decoration: none;
align-self: center;
}
.modify_user {
padding: 5px;
text-decoration: none;
align-self: center;
}
.delete_user {
padding: 5px;
text-decoration: none;
align-self: center;
}
@ -46,7 +46,6 @@
font-size: 13.5px;
font-weight: bold;
transition: 1s box-shadow;
cursor: pointer;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
background-color: rgba(163, 163, 163, 0.371);
@ -73,36 +72,49 @@
font-size: 30px;
}*/
.Titre {
.Titre_Formulaire{
display: flex;
flex-direction: column;
flex-basis: 100%;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
margin: 10px;
padding: 10px;
.Formulaire {
.Titre {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 70px;
font-weight: bold;
}
.Formulaire{
display: flex;
flex-direction: column;
border-radius: 30px;
margin: 100px;
padding: 30px;
align-items: center;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin-left: 10px;
margin-right: 10px;
}
.texte {
align-self: center;
font-weight: bold;
padding: 10px;
font-size: 30px;
padding: 10px 10px 10px 0;
}
.texte_zone {
@ -111,35 +123,64 @@
background-color: transparent;
border-radius: 5px;
border: 0.5px solid;
padding-left: 10px;
padding-right: 10px;
//padding-left: 10px;
//padding-right: 10px;
}
.bouton_val_ann {
width: 150px;
height: 40px;
border-radius: 10px;
border: 0.5px solid;
color: $white;
border: 0;
background-color: black;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
&:hover {
background-color: rgba(114, 114, 114, 0.371);
}
.bouton_submit {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
height: 30px;
margin: 5px 5px 5px 0;
&:active {
background-color: rgba(68, 68, 68, 0.972);
.bouton_val{
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px;
width: 20%;
align-items: center;
justify-content: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
.bouton_submit{
.bouton_ann{
display: flex;
flex-direction: row;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px;
width: 20%;
align-items: center;
justify-content: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
}

Write Preview
Loading…
Cancel
Save