noan.randon
/
Favor
3
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Affichage postes
continuous-integration/drone/push Build encountered an error Details

Browse Source
master
Noan07 2 years ago
parent 7a2b656aa0 650b298767
commit eb3240ff4a
30 changed files with 29644 additions and 3280 deletions
Show Stats Download Patch File Download Diff File

2
Site Web/client/src/actions/user.actions.js
Unescape View File

@ -59,3 +59,5 @@ export const unFollowUser = (followerId, idToUnFollow) => {
.catch((err) => console.log(err)); .catch((err) => console.log(err));
}; };
}; };

BIN
Site Web/client/src/assets/img/Photo-Video-Camera-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
Site Web/client/src/assets/img/plus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

17
Site Web/client/src/components/Configurations/ConfigurationDuCompte.js
Unescape View File

@ -1,6 +1,10 @@
import React, { useState } from 'react'; import React from 'react';
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
/*import PolitiqueDeConfidentialite from '../components/';
*/
const ConfigurationDuCompte =()=>{ const ConfigurationDuCompte =()=>{
@ -13,14 +17,14 @@ const ConfigurationDuCompte =()=>{
<div> <div>
<h2 className='ligneHorizontal'>Modifucation information du compte</h2> <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
<div className="ModifucationInformationDuCompte"> <form className="ModifucationInformationDuCompte">
<div className='ModificationInformationDuCompteText'> <div className='ModificationInformationDuCompteText alignementText'>
<span>email</span> <span>email</span>
<span>mot de passe</span> <span>mot de passe</span>
<span>comfirmation mot de passe</span> <span>comfirmation mot de passe</span>
</div> </div>
<div>
<div className='ModificationInformationDuCompteText'> <div className='ModificationInformationDuCompteText'>
<input type="text" <input type="text"
@ -44,7 +48,9 @@ const ConfigurationDuCompte =()=>{
value={controlPassword}/> value={controlPassword}/>
<div className='password error'></div> <div className='password error'></div>
</div> </div>
<button className='buttonValidationChangements'>Valider</button>
</div> </div>
</form>
<div /> <div />
<h2 className='ligneHorizontal'>Suppression du compte</h2> <h2 className='ligneHorizontal'>Suppression du compte</h2>
<div className='buttonSuppressionCompte'> <div className='buttonSuppressionCompte'>
@ -52,7 +58,7 @@ const ConfigurationDuCompte =()=>{
<button> <button>
supprimer votre compte supprimer votre compte
</button> </button>
<span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span> <p className='buttonSuppressionText'>Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence</p>
</div> </div>
</div> </div>
) )
@ -60,7 +66,6 @@ const ConfigurationDuCompte =()=>{
export default ConfigurationDuCompte; export default ConfigurationDuCompte;

101
Site Web/client/src/components/Configurations/ConfigurationDuProfil.js
Unescape View File

@ -1,49 +1,104 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import PP from "../../assets/img/unknown.png"; import PP from "../../assets/img/unknown.png";
import PLUS from "../../assets/img/plus.png";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
const ConfigurationDuProfil = ()=>{ const ConfigurationDuProfil = ()=>{
const userData = useSelector((state) => state.user.user); const userData = useSelector((state) => state.user.user);
const [pseudo, setPseudo] = useState(''); const [pseudo, setPseudo] = useState('');
const [nomUtilisateur, setNomUtilisateur] = useState(''); const [nomUtilisateur, setNomUtilisateur] = useState('');
const [displayAdd, setDisplayAdd] = useState(false);
/*const [updateImage, setUpdateImage]= useState(false);
const setimageDeProfile=()=>{
if(updateImage=true){
useState("");
setDisplayAdd(false);
}
else{
setDisplayAdd(false);
}
}*/
var handleLoadFile=(e)=>{
var image = document.getElementById("output");
image.src = URL.createObjectURL(e.target.files[0]);
};
var a=PP;
return( return(
<div className='modificationDuProfilBackgroud'> <div className='modificationDuProfilBackgroud'>
<h2 className='ligneHorizontal' >Modifucation du Profil</h2> <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
<div className='modificationDuProfil' > <div className='modificationDuProfil' >
<img src={PP} className="imageDeProfilConfiguration imageDeProfil"/> <button className='imageDeProfilConfigurationPlus imageDeProfil' >
<img src={PLUS} className="plusButton "/>
<div className='modificationDuProfilText'> <img src={a} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
</button>
<div className='modificationDuProfilText alignementText'>
<span>Pseudo: </span> <span>Pseudo: </span>
<span>Nom d'utilisateur:</span> <span>Nom d'utilisateur:</span>
</div> </div>
<div className='modificationDuProfilText'> <div>
<div className='modificationDuProfilText'>
<input
type="nomUtilisateur" <input className='inputConfiguration'
name="nomUtilisateur" type="nomUtilisateur"
id="nomUtilisateur" name="nomUtilisateur"
onChange={(e) => setNomUtilisateur (e.target.value)} id="nomUtilisateur"
value={pseudo} onChange={(e) => setNomUtilisateur (e.target.value)}
/> value={nomUtilisateur}
<input />
type="pseudo" <input className='inputConfiguration'
name="pseudo" type="pseudo"
id="pseudo" name="pseudo"
value={pseudo} id="pseudo"
onChange={(e) => setPseudo (e.target.value)} value={pseudo}
/> onChange={(e) => setPseudo (e.target.value)}
</div> />
</div>
<button className='buttonValidationChangements'>Valider</button>
</div>
</div> </div>
<h2 className='ligneHorizontal' >Acces au dossiers personnel</h2> <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
<div className='accesDossiersPerso'> <div className='accesDossiersPerso'>
<div className='accesDossiersPersoValidation'>
<input type="checkbox" name='cocher' /> <input type="checkbox" name='cocher' />
<label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label> <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
</div>
<div className='dossierPersonnel'>
<span>dossiers</span>
</div>
</div> </div>
{displayAdd && (
<div className='popup-modificationProfil'>
<div className="modal">
<div className='imagesPopup'>
<img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
<div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
<label className="-label" for="file">
<span class="camera"></span>
<span>Changer</span>
</label>
<input type="file" id="file" onChange={handleLoadFile}/>
<img src={PLUS} id="output" />
</div>
</div >
<div className='buttonPopup'>
<button onClick={() => setDisplayAdd(false)/*&&setUpdateImage(true)*/}>Retour</button>
<button /*onClick={} */>Valider</button>
</div>
</div>
</div>
)}
</div> </div>
) )

1
Site Web/client/src/components/Configurations/PolitiqueDeConfidentialite.js
Unescape View File

@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
const PolitiqueDeConfidentialite =()=>{ const PolitiqueDeConfidentialite =()=>{
return( return(
<div className='PolitiqueDeConfidentialiteText'> <div className='PolitiqueDeConfidentialiteText'>
<p> Cette politique de confidentialité s’applique au site : Designed By GG. <p> Cette politique de confidentialité s’applique au site : Designed By GG.
La présente politique de confidentialité a pour but d’exposer aux utilisateurs du site : La présente politique de confidentialité a pour but d’exposer aux utilisateurs du site :

5
Site Web/client/src/components/Notif.js
Unescape View File

@ -1,10 +1,11 @@
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {isEmpty} from "./Utils"; import {isEmpty} from "./Utils";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import axios from "axios";
const Notif = ({message} ) => { import { useDispatch } from 'react-redux';
const usersData = useSelector((state) => state.users.users);
const Notif = ({message} ) => {
return ( return (
<div className='conteneur_notif'> <div className='conteneur_notif'>
<div className={'contenue_notif'}> <div className={'contenue_notif'}>

18
Site Web/client/src/pages/Configuration.js
Unescape View File

@ -28,25 +28,27 @@ const Configuration = () => {
}; };
return( return(
<main className='mainConfig'> <>
<Navbar /> <Navbar />
<div className='configuration'>
<div className='boutonDeConfigurations'> <div className='boutonDeConfigurations'>
<button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} > <a onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
Configuration du profil Configuration du profil
</button> </a>
<button onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}> <a onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
Configuration du compte Configuration du compte
</button> </a>
<button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}> <a onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
Politique de confidentialite Politique de confidentialite
</button> </a>
</div> </div>
{ConfigurationProfil &&<ConfigurationDuProfil/>} {ConfigurationProfil &&<ConfigurationDuProfil/>}
{ConfigurationCompte &&<ConfigurationDuCompte/>} {ConfigurationCompte &&<ConfigurationDuCompte/>}
{PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>} {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
</main> </div>
</>
); );
} }

142
Site Web/client/src/pages/Profil.js
Unescape View File

@ -14,7 +14,7 @@ const Profil = () => {
return ( return (
<> <>
<Navbar /> <Navbar />
<main> {/* <main>
<div id="bandeauProfil"> <div id="bandeauProfil">
<h1 className='affichage-date'>Compte créé le : {dateParser(userData.createdAt)}</h1> <h1 className='affichage-date'>Compte créé le : {dateParser(userData.createdAt)}</h1>
<div id="image"> <div id="image">
@ -94,6 +94,146 @@ const Profil = () => {
</div> </div>
</div> </div>
</main> */}
<main>
<div>
<div>
<div class="imageProfil">
<img class="image" src={userData.picture}/>
</div>
<div class="divPseudo">
<h3 class="pseudo">{userData.pseudo}</h3>
{/* <h3>suuu</h3> */}
</div>
<div class="divSuivreFollowing">
<a href="#" class="button" id="button">Suivre +</a>
</div>
<div class="divSuivreFollowing">
<div class="nbFollow" onClick={() => setFollowingPopup(true)}>
<h4>{userData.following.length}</h4>
<h4 class="txtFollower">Abonnements</h4>
</div>
<div class="nbFollow" onClick={() => setFollowerPopup(true)}>
<h4>{userData.followers.length}</h4>
<h4 class="txtFollower">Abonnés</h4>
</div>
</div>
{followingPopup && (
<div className="popup-profil-container">
<div className="modal">
<h3>Abonnements</h3>
<span className="cross" onClick={() => setFollowingPopup(false)}>
&#10005;
</span>
<ul>
{usersData.map((user) => {
for (let i = 0; i < userData.following.length; i++) {
if (user._id === userData.following[i]) {
return (
<li key={user._id}>
<img src={user.picture} alt="user-pic" />
<h4>{user.pseudo}</h4>
<div className="follow-handler">
<FollowHandler idToFollow={user._id} type={'card'}/>
</div>
</li>
);
}
}
return null;
})}
</ul>
</div>
</div>
)}
{followerPopup && (
<div className="popup-profil-container">
<div className="modal">
<h3>Abonnés</h3>
<span className="cross" onClick={() => setFollowerPopup(false)}>
&#10005;
</span>
<ul>
{usersData.map((user) => {
for (let i = 0; i < userData.followers.length; i++) {
if (user._id === userData.followers[i]) {
return (
<li key={user._id}>
<img src={user.picture} alt="user-pic" />
<h4>{user.pseudo}</h4>
<div className="follow-handler">
<FollowHandler idToFollow={user._id} type={'card'} />
</div>
</li>
);
}
}
return null;
})}
</ul>
</div>
</div>
)}
</div>
<div class="basDePage">
<div class="divMenu">
<div>
<nav role="navigation" class="navProfil">
<ul class="navItemsProfil">
<li class="navItemProfil">
<a href="#" class="navLinkProfil" ><span>Dossier Personnel</span></a>
</li>
<li class="navItemProfil">
<a href="#" class="navLinkProfil"><span>Posts</span></a>
</li>
<li class="navItemProfil">
<a href="#" class="navLinkProfil"><span>Posts likés</span></a>
</li>
</ul>
</nav>
</div>
<div class="menuContent">
<div class="listContent">
<span>suu</span>
</div>
</div>
</div>
<div class="recoDiv">
<div class="reco">
<span>Vous pourriez suivre</span>
<hr/>
<div class="ListReco">
<div class="UtiReco">
<img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
<div class="UtiReco">
<img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
<div class="UtiReco">
<img class="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main> </main>
</> </>
) )

13
Site Web/client/src/styles/_settings.scss
Unescape View File

@ -5,8 +5,9 @@ $color-2: #CCF2F4;
$color-3: #F4F9F9; $color-3: #F4F9F9;
$color-4: #AAAAAA; $color-4: #AAAAAA;
$color-5: #AABBCC; $color-5: #AABBCC;
$color-6: #5499c7 ;
$color-7: #19104f ;
$color-8: #FAFAFA;
// $color-1: #4cbfa6; // $color-1: #4cbfa6;
@ -17,14 +18,20 @@ $color-5: #AABBCC;
// $color-6: yellow; // $color-6: yellow;
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body{
background-color: #F0F0F0;
}
.imageDeProfil{ .imageDeProfil{
object-fit: none; object-fit: cover;
clip-path:circle(50%); clip-path:circle(50%);
} }

15
Site Web/client/src/styles/component/_configurationDuCompte.scss
Unescape View File

@ -25,9 +25,24 @@
margin-left: 6%; margin-left: 6%;
width: 16%; width: 16%;
max-width: 160px; max-width: 160px;
min-width: 120px;
background-color: $color-3; background-color: $color-3;
border: 2px solid $color-4; border: 2px solid $color-4;
border-radius: 20px; border-radius: 20px;
}
.buttonSuppressionText{
margin-left: 2%;
max-width: 400px;
min-width: 200px;
width: 35%;
font-style: italic;
color: red;
opacity: 70%;
background-color: $color-3;
height: fit-content;
padding: 1%;
} }
button:hover { button:hover {
background-color: $color-1; background-color: $color-1;

184
Site Web/client/src/styles/component/_configurationDuProfil.scss
Unescape View File

@ -1,7 +1,7 @@
@mixin object-center {
.modificationDuProfilBackgroud{ display: flex;
// background: $color-6; justify-content: center;
align-items: center;
} }
.modificationDuProfil{ .modificationDuProfil{
@ -25,13 +25,38 @@ span{
} }
.imageDeProfilConfiguration{
.plusButton{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
}
.imageDeProfilConfigurationPlus {
position: relative;
width: 15%; width: 15%;
max-width: 180px;
min-width: 130px;
border: none;
}
.imageDeProfilConfigurationPlus:hover .plusButton {
opacity:0.70;
} }
.imageDeProfilConfiguration:hover{ .imageDeProfilConfiguration:hover{
filter: blur(1px); filter: blur(1px);
opacity: 0.2;
transition: opacity 1s;
} }
.accesDossiersPerso{ .accesDossiersPerso{
display: flex; display: flex;
align-items: row; align-items: row;
@ -46,12 +71,161 @@ input{
margin-bottom: 2%; margin-bottom: 2%;
} }
.accesDossiersPerso{ .accesDossiersPerso{
display: flex; display: flex;
flex-direction: column;
} }
.accesDossiersPersoValidation{
flex-direction: row;
}
.textAccesDossiersPerso{ .textAccesDossiersPerso{
margin-left:18px; margin-left:18px;
font-size: medium;
font-style: italic;
opacity: 70%;
}
.popup-modificationProfil{
z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
animation: popup 1s forwards;
@keyframes popup {
to {
backdrop-filter: blur(2px);
}
}
.modal {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-100%);
background: $color-2;
padding: 25px;
border-radius: 20px;
box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
overflow: auto;
transform: scaleY(0);
transform-origin: center;
animation: modal .5s forwards;
max-width: 360px;
min-width: 320px;
border: 2px solid $color-4;
border-bottom-right-radius: 50px;
@keyframes modal {
to {
transform: scale(1) translate(-50%);
}
}
&:hover {
transform: scale(1.07);
}
}
&::-webkit-scrollbar {
width: 2px;
}
&::-webkit-scrollbar-track {
background: $color-4;
}
&::-webkit-scrollbar-thumb {
background: $color-1;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
.imagesPopup{
display: flex;
justify-content: space-between;
flex-direction: row;
.profile-pic {
color: transparent;
transition: all .3s ease;
@include object-center;
position: relative;
transition: all .3s ease;
input{
display:none;
}
img{
position: absolute;
object-fit: cover;
z-index: 0;
}
.-label {
cursor: pointer;
}
&:hover {
.-label {
@include object-center;
background-color: rgba(0,0,0,.8);
z-index: 10;
color: rgba(255,255,255);
transition: background-color .2s ease-in-out;
border-radius: 20px;
margin-bottom: 0;
}
}
span {
display: inline-flex;
padding: .2em;
height: 2em;
}
}
}
.buttonPopup {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 5%;
margin-left: 8%;
margin-right: 8%;
button{
background: $color-4;
border-radius: 20px;
&:hover {
color: $color-3;
transform: translateX(2px);
}
}
}
}
.buttonValidationChangements{
position: relative;
margin-top: 2%;
border-radius: 20px;
min-width: 80px;
background-color: $color-7;
color: white;
transition: all 1s;
} }
.camera{
background: url("./../../assets/img/Photo-Video-Camera-icon.png");
}
.alignementText{
margin-bottom: 2%;
}

1
Site Web/client/src/styles/component/_navbar.scss
Unescape View File

@ -36,6 +36,7 @@
background:var(--navbar-background-color); background:var(--navbar-background-color);
box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px; box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
transition: width var(--navbar-transition-speed) ease; transition: width var(--navbar-transition-speed) ease;
z-index: 11;
} }
.navbar:hover { .navbar:hover {

3
Site Web/client/src/styles/component/_newPoste.scss
Unescape View File

@ -1,5 +1,5 @@
.newPoste-form-popup { .newPoste-form-popup {
background-color: white; background-color: $color-8;
display: none; display: none;
position:fixed; position:fixed;
@ -38,6 +38,7 @@ textarea[name="description"]{
margin-left:10%; margin-left:10%;
margin-right:10%; margin-right:10%;
margin-bottom:10px; margin-bottom:10px;
margin-top:10px;
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
} }

45
Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss
Unescape View File

@ -0,0 +1,45 @@
.PolitiqueDeConfidentialiteText{
margin-top: 2%;
margin-left: 5%;
text-indent: 1%;
text-align: justify;
display: flex;
justify-content: center;
background-color: $color-8;
border: 0.2px solid $color-5;
max-width:85% ;
min-width: 380px;
height: 550px;
p{
animation-duration: 2s;
animation-name: slide;
margin: 1.5%;
@keyframes slide {
from {
margin-top: 100%;
width: 50%;
}
to {
margin-top: 0%;
width: 100%;
}
}
}
}

32
Site Web/client/src/styles/component/_poste.scss
Unescape View File

@ -1,13 +1,31 @@
#cadrePoste{ #cadrePoste{
background: white; background: $color-8;
border: 2px solid grey; border: 0.3px solid $color-5;
border-radius:5px; border-radius:5px;
margin-bottom: 10px;
width: 70%; width: 70%;
margin-bottom: 20px;
margin-left: 3%;
} }
#postContenu{ #postContenu{
padding: 15px; padding: 15px;
}
#contenuePoste{
background: $color-8;
border: 0.3px solid $color-5;
border-radius:5px;
margin-bottom: 10px;
p{
margin-top: 0.5%;
margin: 1%;
background-color: $color-3;
border: 0.2px solid $color-5;
}
} }
#hautPoste{ #hautPoste{
@ -21,11 +39,13 @@
list-style-type: none; list-style-type: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#cadreInfoPoste{ #cadreInfoPoste{
display: flex; display: flex;
align-items:center; align-items:center;
} }
#PhotoProfile{ #PhotoProfile{
margin: 0px 15px 0px 0px; margin: 0px 15px 0px 0px;
@ -33,6 +53,7 @@
height:40px; height:40px;
border-radius: 20px; border-radius: 20px;
border: 2px solid #555; border: 2px solid #555;
margin-bottom: 8%;
} }
#NomProfile{ #NomProfile{
@ -47,9 +68,14 @@
justify-content: space-between; justify-content: space-between;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
#like, #commentaire{ #like, #commentaire{
display: flex; display: flex;
align-items:center; align-items:center;
} }

3
Site Web/client/src/styles/component/_trends.scss
Unescape View File

@ -1,3 +0,0 @@
#listeNotif{
margin-left: 10%;
}

8
Site Web/client/src/styles/index.scss
Unescape View File

@ -5,9 +5,13 @@
@import './component/poste'; @import './component/poste';
@import './pages/configuration'; @import './pages/configuration';
@import './component/ajoutLien'; @import './component/ajoutLien';
@import './component/configurationDuProfil'; @import'./component/configurationDuProfil.scss';
@import'./component/configurationDuCompte.scss';
@import'./component/politiqueDeConfidentialite';
@import './component/newPoste'; @import './component/newPoste';
@import './component/notif'; @import './component/notif';
@import './component/trends'; @import './pages/trends';

56
Site Web/client/src/styles/pages/_configuration.scss
Unescape View File

@ -1,28 +1,46 @@
.boutonDeConfigurations{ .boutonDeConfigurations{
display: flex; display: flex;
justify-content: center; justify-content: space-between;
flex-direction: row; flex-direction: row;
background-color: $color-7;
margin-left: -1%;
margin-right: 1%;
a{
button{ transition: margin-right 2s,1s;
transition: background-color linear 1s,1s;
padding: 1%; padding: 1%;
margin-bottom: 1%; margin-bottom: 1%;
margin-top: 2%; margin-top: 1%;
margin-left: 6%; margin-left: 3%;
width: 16%; margin-right: 3%;
max-width: 200px; width: 30%;
min-width: 140px;
background-color: $color-3; background-color: $color-3;
border: 2px solid $color-4; border: 2px solid $color-4;
border-radius: 20px; border-radius: 20px;
text-align: center;
height: px;
} }
button:hover { a:hover {
background-color: $color-1; background-color: $color-6;
border-color: black; padding-right:14%;
color:$color-3;
} }
} }
.configuration{
input:focus{
background-color:$color-3;
}
margin-left: 1%;
}
.ligneHorizontal{ .ligneHorizontal{
border-bottom: thick solid $color-1; border-bottom: thick solid $color-1;
@ -32,7 +50,17 @@
margin-top: 2%; margin-top: 2%;
} }
.mainConfig{ .buttonValidationChangements:hover{
display: flex; min-width: 100px;
flex-direction: column; padding-right: 6%;
}
}
// body{
// background-color: gray;
// }

293
Site Web/client/src/styles/pages/_profil.scss
Unescape View File

@ -1,44 +1,44 @@
#PhotoProfile{ // #PhotoProfile{
display: block; // display: block;
margin-left: auto; // margin-left: auto;
margin-right: auto; // margin-right: auto;
width: 150px; // width: 150px;
height:150px; // height:150px;
border-radius: 80px; // border-radius: 80px;
border: 2px solid #555; // border: 2px solid #555;
} // }
#blocAbonnement{ // #blocAbonnement{
display: flex; // display: flex;
justify-content: center; // justify-content: center;
} // }
#blocAbonnement .bloc-aboonnements-abonner{ // #blocAbonnement .bloc-aboonnements-abonner{
margin-left: 80px; // margin-left: 80px;
margin-right: 80px; // margin-right: 80px;
} // }
#blocName{ // #blocName{
text-align: center; // text-align: center;
} // }
.affichage-date{ // .affichage-date{
font-size: 15px; // font-size: 15px;
} // }
.nombre{ // .nombre{
color:black; // color:black;
} // }
.texteNombre{ // .texteNombre{
color:white; // color:white;
} // }
#bandeauProfil{ // #bandeauProfil{
background-color: #D9D9D9; // background-color: #D9D9D9;
margin-top: 50px; // margin-top: 50px;
} // }
.popup-profil-container { .popup-profil-container {
z-index: 100; z-index: 100;
@ -145,3 +145,230 @@
} }
} }
} }
.navProfil {
margin: 0% 0 0% 4%;
padding-top: 0.5%;
}
/* Navigation */
.navProfil {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.navItemsProfil {
padding-top: 2%;
padding-bottom: 2%;
list-style: none;
}
.navItemProfil {
display: inline-block;
margin-right: 25px;
}
.navLinkProfil,
.navLinkProfil:link,
.navLinkProfil:visited,
.navLinkProfil:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.navLinkProfil,
.navLinkProfil:link,
.navLinkProfil:visited,
.navLinkProfil:active {
color: black;
font-weight: bold;
}
.navLinkProfil::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.navLinkProfil:hover::before,
.navLinkProfil:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.image {
margin-top: 1%;
border-radius: 100%;
width: 10%;
}
.imageProfil{
display: flex;
justify-content: center;
}
.flex-menu {
display:flex;
justify-content: center;
}
.flex-menu li:not(:last-child) {
margin-right:40px;
}
.divSuivreFollowing {
display: flex;
justify-content: center;
padding-bottom: 1%;
}
.nbFollow {
margin: 0% 8% 0% 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3%;
}
.nbFollow h4 {
margin: 5% 0% 0% 0%;
display: flex;
justify-content: center;
font-weight: bold;
}
// h3 {
// margin: 0%;
// }
// h4 {
// margin: 40% 0% 0% 0%;
// display: flex;
// justify-content: center;
// font-weight: bold;
// }
.pseudo {
margin:1% 0% 0% 0%;
}
.divPseudo {
display: grid;
justify-items: center;
}
/* * {
padding:0;
margin:0;
} */
// .txtFollower {
// display: flex;
// justify-content: center;
// margin: 0%;
// padding: 0% 0% 20% 0%;
// }
.button {
padding: 0.5% 0.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 16px;
letter-spacing: .08em;
margin-top: 1%;
}
.buttonReco {
padding-top: 1.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 13px;
letter-spacing: .08em;
margin-top: 1%;
}
.divMenu {
margin: 0%;
background-color: #cccaca;
width: 75%;
height: 500px;
border-radius: 25px;
}
.menuContent{
background-color: #8c8c8e;
margin: 0% 0% 0% 2.5%;
border-radius: 25px;
width: 95%;
height: 85%;
}
.reco{
background-color: #a8a8a8;
margin: 0% 0% 0% 2.5%;
border-radius: 25px;
width: 100%;
height: 300px;
}
.reco span{
display: flex;
justify-content: center;
padding-top: 3%;
}
.listContent {
/* display: flex;
justify-content: center; */
padding-left: 2.5%;
padding-top: 2.5%;
}
.basDePage {
display: flex;
flex-direction: row ;
justify-content: space-around;
}
.recoDiv {
width: 20%;
}
.UtiReco {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 5% 0% 0% 0%;
}
.ListReco {
display: flex;
flex-direction: column;
align-content: space-around;
}
// div {
// border: 5px ridge;
// }

11
Site Web/client/src/styles/pages/_trends.scss
Unescape View File

@ -0,0 +1,11 @@
#listeNotif{
margin: 2%;
margin-left: 8%;
padding:1%;
border-color: $color-5;
border-style:solid;
border-width: 0.3px;
min-width: 410px;
width: 84%;
background: $color-8;
}

12
Site Web/controllers/notifFonction.js
Unescape View File

@ -0,0 +1,12 @@
const UserModel = require("../models/user.model");
module.exports.addNotification = (userId, notification) => {
UserModel.findById(userId, (err, user) => {
if (err) {
console.log(err);
} else {
user.notif.push(notification);
user.save();
}
});
};

23
Site Web/controllers/post.controller.js
Unescape View File

@ -7,6 +7,21 @@ const ObjectID = require("mongoose").Types.ObjectId;
const fs = require("fs"); const fs = require("fs");
const { promisify } = require("util"); const { promisify } = require("util");
//import { addNotification } from "./notifFonction";
const {addNotification} = require("./notifFonction");
//const UserModel = require("../models/user.model");
/*const addNotification = (userId, notification) => {
UserModel.findById(userId, (err, user) => {
if (err) {
console.log(err);
} else {
user.notif.push(notification);
user.save();
}
});
};*/
module.exports.readPost = (req, res) => { module.exports.readPost = (req, res) => {
PostModel.find((err, docs) => { PostModel.find((err, docs) => {
if (!err) res.send(docs); if (!err) res.send(docs);
@ -60,7 +75,15 @@ module.exports.deletePost = (req, res) => {
}); });
}; };
module.exports.likePost = async (req, res) => { module.exports.likePost = async (req, res) => {
addNotification("63b835de3f9be509b614df36", {
typeNotif: "like",
id_user: "5f1a32c2f9f9ab74a1b7a6c8",
id_post1: "5f1a32c2f9f9ab74a1b7a6c8",
id_post2: ""
});
if (!ObjectID.isValid(req.params.id)) if (!ObjectID.isValid(req.params.id))
return res.status(400).send("ID unknown : " + req.params.id); return res.status(400).send("ID unknown : " + req.params.id);

2
Site Web/models/post.model.js
Unescape View File

@ -1,4 +1,4 @@
const mongoose = require('mongoose'); const mongoose = require('mongoose');
//trim pour supprimer les espaces //trim pour supprimer les espaces
const postSchema = new mongoose.Schema( const postSchema = new mongoose.Schema(

22
Site Web/models/user.model.js
Unescape View File

@ -5,6 +5,25 @@ const { isEmail } = require('validator');
const bcrypt = require('bcrypt'); const bcrypt = require('bcrypt');
const NotifSchema = new mongoose.Schema({
typeNotif: {
type: String,
required: true
},
id_user: {
type: String,
required: true
},
id_post1: {
type: String,
required: true
},
id_post2: {
type: String,
required: true
}
});
//trim pour supprimer les espaces //trim pour supprimer les espaces
const userSchema = new mongoose.Schema( const userSchema = new mongoose.Schema(
{ {
@ -46,7 +65,8 @@ const userSchema = new mongoose.Schema(
}, },
likes: { likes: {
type: [String] type: [String]
} },
notif: [NotifSchema]
}, },
{ {
timestamps: true, timestamps: true,

31891
Site Web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
Site Web/package.json
Unescape View File

@ -10,17 +10,26 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^1.1.3", "@reduxjs/toolkit": "^1.9.1",
"axios": "^1.2.2",
"bcrypt": "^5.1.0", "bcrypt": "^5.1.0",
"body-parser": "^1.20.1", "body-parser": "^1.20.1",
"cookie-parser": "^1.4.6", "cookie-parser": "^1.4.6",
"cors": "^2.8.5", "cors": "^2.8.5",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"express": "^4.18.2", "express": "^4.18.2",
"js-cookie": "^3.0.1",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"mongoose": "^6.6.6", "mongoose": "^6.6.6",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"validator": "^13.7.0" "react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.6.1",
"react-scripts": "^5.0.1",
"sass": "^1.57.1",
"tachyons": "^4.12.0",
"validator": "^13.7.0",
"web-vitals": "^3.1.0"
} }
} }

1
Site Web/routes/user.routes.js
Unescape View File

@ -21,7 +21,6 @@ router.delete('/:id', userController.deleteUser);
router.patch('/follow/:id', userController.follow); router.patch('/follow/:id', userController.follow);
router.patch('/unfollow/:id', userController.unfollow); router.patch('/unfollow/:id', userController.unfollow);
//upload pb avec postman //upload pb avec postman
router.post("/upload", upload.single('file'), uploadController.uploadProfil); router.post("/upload", upload.single('file'), uploadController.uploadProfil);

BIN
extention.zip
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save