theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

🎨 Configure standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 12:04:07 +02:00
parent e22e62a749
commit 58f47c7480
120 changed files with 12271 additions and 10025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
website/pages/users/[name].js
View File

@ -1,245 +1,238 @@
import Link from 'next/link';
import { Fragment, useContext, useState, useEffect } from 'react';
import { UserContext } from '../../contexts/UserContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faTimes } from '@fortawesome/free-solid-svg-icons';
import date from 'date-and-time';
import HeadTag from '../../components/HeadTag';
import FunctionCard from '../../components/FunctionCard/FunctionCard';
import Modal from '../../components/Modal';
import redirect from '../../utils/redirect';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import ReactMarkdown from 'react-markdown';
import CodeBlock from "../../components/CodeBlock";
import api from '../../utils/api';
import { API_URL } from '../../utils/config/config';
import '../../public/css/pages/profile.css';
import Link from 'next/link'
import { useContext, useState, useEffect } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPen, faTimes } from '@fortawesome/free-solid-svg-icons'
import date from 'date-and-time'
import HeadTag from '../../components/HeadTag'
import FunctionCard from '../../components/FunctionCard/FunctionCard'
import Modal from '../../components/Modal'
import redirect from '../../utils/redirect'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import ReactMarkdown from 'react-markdown'
import CodeBlock from '../../components/CodeBlock'
import api from '../../utils/api'
import { API_URL } from '../../utils/config/config'
import '../../public/css/pages/profile.css'
const Profile = (props) => {
const { isAuth, user, logoutUser } = useContext(UserContext)
const [isOpen, setIsOpen] = useState(false)
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const { isAuth, user, logoutUser } = useContext(UserContext);
const [isOpen, setIsOpen] = useState(false);
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (isAuth) {
setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail });
}
}, [isAuth]);
const toggleModal = () => setIsOpen(!isOpen);
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = (event.target.files != undefined) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value;
setInputState(inputStateNew);
useEffect(() => {
if (isAuth) {
setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail })
}
}, [isAuth])
const handleSubmit = (event) => {
event.preventDefault();
const token = user.token;
if (isAuth && token != undefined) {
setIsLoading(true);
const formData = new FormData();
formData.append('name', inputState.name);
formData.append('email', inputState.email);
formData.append('biography', inputState.biography);
formData.append('isPublicEmail', inputState.isPublicEmail);
formData.append('logo', inputState.logo);
api.put('/users/', formData, { headers: { 'Authorization': token } })
.then(() => {
setIsLoading(false);
logoutUser();
redirect({}, '/users/login?isSuccessEdit=true');
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
const toggleModal = () => setIsOpen(!isOpen)
const handleChange = (event, isTypeCheck = false) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = (event.target.files != null) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value
setInputState(inputStateNew)
}
const handleSubmit = (event) => {
event.preventDefault()
const token = user.token
if (isAuth && token != null) {
setIsLoading(true)
const formData = new window.FormData()
formData.append('name', inputState.name)
formData.append('email', inputState.email)
formData.append('biography', inputState.biography)
formData.append('isPublicEmail', inputState.isPublicEmail)
formData.append('logo', inputState.logo)
api.put('/users/', formData, { headers: { Authorization: token } })
.then(() => {
setIsLoading(false)
logoutUser()
redirect({}, '/users/login?isSuccessEdit=true')
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
}
return (
<Fragment>
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != undefined) ? props.biography : ""}`} />
return (
<>
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != null) ? props.biography : ''}`} />
{/* Édition du profil */}
{(isOpen) ?
<Modal toggleModal={toggleModal}>
<div className="Profile__container container-fluid">
<div className="Profile__row row">
<div className="col-24">
<div className="Profile__Modal-top-container row">
<div className="col-24">
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className="text-center">Éditer le profil</h2>
<p className="text-center"><em>(Vous devrez vous reconnecter après la sauvegarde) <br/> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
</div>
</div>
</div>
<div className="col-24">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
</div>
<div className="form-group">
<label className="form-label" htmlFor="email">Email :</label>
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group custom-control custom-switch">
<input onChange={(event) => handleChange(event, true)} type="checkbox" name="isPublicEmail" checked={inputState.isPublicEmail} className="custom-control-input" id="isPublicEmail" />
<label className="custom-control-label" htmlFor="isPublicEmail">Email Public</label>
</div>
<div className="form-group">
<label className="form-label" htmlFor="biography">Biographie :</label>
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name="biography" id="biography" className="form-control" rows="5"></textarea>
</div>
<div className="form-group">
<label className="form-label" htmlFor="logo">Logo <em>(400x400 recommandé)</em> :</label>
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
<input onChange={handleChange} accept="image/jpeg,image/jpg,image/png,image/gif" type="file" name="logo" id="logo" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Sauvegarder</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
</div>
</Modal>
:
<div className="container-fluid Profile__container">
<div className="row Profile__row">
<div className="col-20">
<div className="text-center">
<h1>Profil de <span className="important">{props.name}</span></h1>
</div>
<div className="row justify-content-center">
<div className="col-24 text-center">
<img className="Profile__logo" src={API_URL + props.logo} alt={props.name} />
</div>
<div className="col-24 text-center">
{(props.biography != undefined) && <p>{props.biography}</p>}
{(props.email != undefined) && <p><span className="important">Email :</span> {props.email}</p>}
<p><span className="important">Date de création du compte :</span> {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}</p>
</div>
{(isAuth && user.name === props.name) &&
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className="btn btn-dark">
<FontAwesomeIcon icon={faPen} style={{cursor: 'pointer', width: '1rem'}} />
&nbsp; Éditez le profil
</button>
}
</div>
</div>
</div>
{(props.favoritesArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Dernières fonctions ajoutées aux <span className="important">favoris</span> :</h2>
</div>
<div className="col-24">
<div className="row justify-content-center">
{props.favoritesArray.map((favorite) => {
return (
<FunctionCard key={favorite.id} { ...favorite } />
);
})}
</div>
</div>
</div>
}
{(props.commentsArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Derniers <span className="important">commentaires</span> :</h2>
</div>
<div className="col-24">
{props.commentsArray.map((comment) => (
<div key={comment.id} className="row Profile__row Profile__comment">
<div className="col-20">
<p style={{ textAlign: 'center', marginTop: '30px' }}>
Posté sur la fonction&nbsp;
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? "/functions/[slug]" : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
<a>{comment.function.title}</a>
</Link>
&nbsp;le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
</p>
<ReactMarkdown source={comment.message} renderers={{ code: CodeBlock }} />
</div>
</div>
))}
</div>
</div>
}
{(props.quotesArray.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2>Dernières <span className="important">citations</span> proposées (et validées) :</h2>
<p>Citations pour la fonction <Link href="/functions/randomQuote"><a>Générateur de citations</a></Link>.</p>
</div>
<div className="col-24 table-column">
<table style={{ marginBottom: '50px' }}>
<thead>
<tr>
<th className="table-row" scope="col">Citation/Proverbe</th>
<th className="table-row" scope="col">Auteur</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className="table-row text-center">{currentQuote.quote}</td>
<td className="table-row text-center">{currentQuote.author}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
}
{/* Édition du profil */}
{(isOpen)
? (
<Modal toggleModal={toggleModal}>
<div className='Profile__container container-fluid'>
<div className='Profile__row row'>
<div className='col-24'>
<div className='Profile__Modal-top-container row'>
<div className='col-24'>
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
</span>
<h2 className='text-center'>Éditer le profil</h2>
<p className='text-center'><em>(Vous devrez vous reconnecter après la sauvegarde) <br /> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
</div>
}
</div>
</div>
</Fragment>
);
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Nom :</label>
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='Divlo' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='email'>Email :</label>
<input value={inputState.email} onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group custom-control custom-switch'>
<input onChange={(event) => handleChange(event, true)} type='checkbox' name='isPublicEmail' checked={inputState.isPublicEmail} className='custom-control-input' id='isPublicEmail' />
<label className='custom-control-label' htmlFor='isPublicEmail'>Email Public</label>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='biography'>Biographie :</label>
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name='biography' id='biography' className='form-control' rows='5' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='logo'>Logo <em>(400x400 recommandé)</em> :</label>
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
<input onChange={handleChange} accept='image/jpeg,image/jpg,image/png,image/gif' type='file' name='logo' id='logo' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</Modal>
)
: (
<div className='container-fluid Profile__container'>
<div className='row Profile__row'>
<div className='col-20'>
<div className='text-center'>
<h1>Profil de <span className='important'>{props.name}</span></h1>
</div>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<img className='Profile__logo' src={API_URL + props.logo} alt={props.name} />
</div>
<div className='col-24 text-center'>
{(props.biography != null) && <p>{props.biography}</p>}
{(props.email != null) && <p><span className='important'>Email :</span> {props.email}</p>}
<p><span className='important'>Date de création du compte :</span> {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}</p>
</div>
{(isAuth && user.name === props.name) &&
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className='btn btn-dark'>
<FontAwesomeIcon icon={faPen} style={{ cursor: 'pointer', width: '1rem' }} />
&nbsp; Éditez le profil
</button>}
</div>
</div>
</div>
{(props.favoritesArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Dernières fonctions ajoutées aux <span className='important'>favoris</span> :</h2>
</div>
<div className='col-24'>
<div className='row justify-content-center'>
{props.favoritesArray.map((favorite) => {
return (
<FunctionCard key={favorite.id} {...favorite} />
)
})}
</div>
</div>
</div>}
{(props.commentsArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Derniers <span className='important'>commentaires</span> :</h2>
</div>
<div className='col-24'>
{props.commentsArray.map((comment) => (
<div key={comment.id} className='row Profile__row Profile__comment'>
<div className='col-20'>
<p style={{ textAlign: 'center', marginTop: '30px' }}>
Posté sur la fonction&nbsp;
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? '/functions/[slug]' : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
<a>{comment.function.title}</a>
</Link>
&nbsp;le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
</p>
<ReactMarkdown source={comment.message} renderers={{ code: CodeBlock }} />
</div>
</div>
))}
</div>
</div>}
{(props.quotesArray.length > 0) &&
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>Dernières <span className='important'>citations</span> proposées (et validées) :</h2>
<p>Citations pour la fonction <Link href='/functions/randomQuote'><a>Générateur de citations</a></Link>.</p>
</div>
<div className='col-24 table-column'>
<table style={{ marginBottom: '50px' }}>
<thead>
<tr>
<th className='table-row' scope='col'>Citation/Proverbe</th>
<th className='table-row' scope='col'>Auteur</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className='table-row text-center'>{currentQuote.quote}</td>
<td className='table-row text-center'>{currentQuote.author}</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>}
</div>
)}
</>
)
}
export async function getServerSideProps(context) {
const { name } = context.params;
return api.get(`/users/${name}`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'));
export async function getServerSideProps (context) {
const { name } = context.params
return api.get(`/users/${name}`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'))
}
export default Profile;
export default Profile

129
website/pages/users/forgotPassword.js
View File

@ -1,74 +1,71 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const forgotPassword = () => {
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleChange = (event) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
const handleChange = () => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.post('/users/reset-password', inputState)
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
setInputState({})
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.post('/users/reset-password', inputState)
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
setInputState({});
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
return (
<Fragment>
<HeadTag
title="Mot de passe oublié - FunctionProject"
description="Vous vous ne souvenez pas de votre mot de passe ? Demandez une demande de réinitialisation de mot de passe par email."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Mot de passe oublié ?</h1>
<div className="text-center">
<p>Demandez une demande de réinitialisation de mot de passe par email.</p>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Email :</label>
<input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title='Mot de passe oublié - FunctionProject'
description='Vous vous ne souvenez pas de votre mot de passe ? Demandez une demande de réinitialisation de mot de passe par email.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Mot de passe oublié ?</h1>
<div className='text-center'>
<p>Demandez une demande de réinitialisation de mot de passe par email.</p>
</div>
</Fragment>
);
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Email :</label>
<input onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</>
)
}
export default withoutAuth(forgotPassword);
export default withoutAuth(forgotPassword)

187
website/pages/users/index.js
View File

@ -1,109 +1,108 @@
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import HeadTag from '../../components/HeadTag';
import Loader from '../../components/Loader';
import api from '../../utils/api';
import '../../public/css/pages/users.css';
import { API_URL } from '../../utils/config/config';
import { useState, useEffect, useRef, useCallback } from 'react'
import Link from 'next/link'
import HeadTag from '../../components/HeadTag'
import Loader from '../../components/Loader'
import api from '../../utils/api'
import '../../public/css/pages/users.css'
import { API_URL } from '../../utils/config/config'
const Users = () => {
let pageUsers = 1
let pageUsers = 1;
const [inputSearch, setInputSearch] = useState("");
const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] });
const [isLoadingUsers, setLoadingUsers] = useState(true);
const [inputSearch, setInputSearch] = useState('')
const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] })
const [isLoadingUsers, setLoadingUsers] = useState(true)
// Récupère les users si la recherche change
useEffect(() => {
pageUsers = 1;
getUsersData().then((data) => setUsersData(data));
}, [inputSearch]);
// Récupère les users si la recherche change
useEffect(() => {
pageUsers = 1
getUsersData().then((data) => setUsersData(data))
}, [inputSearch])
const getUsersData = async () => {
setLoadingUsers(true);
const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`);
setLoadingUsers(false);
return data;
}
const getUsersData = async () => {
setLoadingUsers(true)
const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`)
setLoadingUsers(false)
return data
}
const handleSearchChange = (event) => {
setInputSearch(event.target.value);
}
const handleSearchChange = (event) => {
setInputSearch(event.target.value)
}
// Permet la pagination au scroll
const observer = useRef();
const lastUserCardRef = useCallback((node) => {
if (isLoadingUsers) return;
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && usersData.hasMore) {
pageUsers += 1;
getUsersData().then((data) => {
setUsersData((oldData) => {
return {
totalItems: data.totalItems,
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows]
}
});
});
// Permet la pagination au scroll
const observer = useRef()
const lastUserCardRef = useCallback((node) => {
if (isLoadingUsers) return
if (observer.current) observer.current.disconnect()
observer.current = new window.IntersectionObserver((entries) => {
if (entries[0].isIntersecting && usersData.hasMore) {
pageUsers += 1
getUsersData().then((data) => {
setUsersData((oldData) => {
return {
totalItems: data.totalItems,
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows]
}
}, { threshold: 1 });
if (node) observer.current.observe(node);
}, [isLoadingUsers, usersData.hasMore]);
})
})
}
}, { threshold: 1 })
if (node) observer.current.observe(node)
}, [isLoadingUsers, usersData.hasMore])
return (
<Fragment>
<HeadTag
title="Utilisateurs"
description="Liste des utilisateurs."
/>
return (
<>
<HeadTag
title='Utilisateurs'
description='Liste des utilisateurs.'
/>
<div className="container text-center">
<div className="row justify-content-center">
<div className="col-24">
<h1 style={{ marginBottom: 0, paddingTop: "20px" }}>Utilisateurs</h1>
<p style={{ marginTop: '5px' }}>La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :</p>
<div className='container text-center'>
<div className='row justify-content-center'>
<div className='col-24'>
<h1 style={{ marginBottom: 0, paddingTop: '20px' }}>Utilisateurs</h1>
<p style={{ marginTop: '5px' }}>La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :</p>
</div>
</div>
<div className='Users__search-container row justify-content-center'>
<input value={inputSearch} onChange={handleSearchChange} type='search' className='Users__form-control Users__search-input' name='search' id='search' placeholder='🔎 Rechercher...' />
</div>
<div className='row justify-content-center'>
{usersData.rows.map((user, index) => {
// Si c'est le dernier élément
if (usersData.rows.length === index + 1) {
return (
<div ref={lastUserCardRef} key={user.id} className='UserCard col-sm-24 col-md-10 col-xl-7'>
<Link href='/users/[name]' as={`/users/${user.name}`}>
<div className='UserCard__container'>
<img className='UserCard__logo' src={API_URL + user.logo} alt={user.name} />
<h2 className='UserCard__name'>{user.name}</h2>
</div>
</Link>
</div>
)
}
return (
<div key={user.id} className='UserCard col-sm-24 col-md-10 col-xl-7'>
<Link href='/users/[name]' as={`/users/${user.name}`}>
<div className='UserCard__container'>
<img className='UserCard__logo' src={API_URL + user.logo} alt={user.name} />
<h2 className='UserCard__name'>{user.name}</h2>
</div>
</Link>
</div>
)
})}
</div>
<div className="Users__search-container row justify-content-center">
<input value={inputSearch} onChange={handleSearchChange} type="search" className="Users__form-control Users__search-input" name="search" id="search" placeholder="🔎 Rechercher..." />
</div>
<div className="row justify-content-center">
{usersData.rows.map((user, index) => {
// Si c'est le dernier élément
if (usersData.rows.length === index + 1) {
return (
<div ref={lastUserCardRef} key={user.id} className="UserCard col-sm-24 col-md-10 col-xl-7">
<Link href={"/users/[name]"} as={`/users/${user.name}`}>
<div className="UserCard__container">
<img className="UserCard__logo" src={API_URL + user.logo} alt={user.name} />
<h2 className="UserCard__name">{user.name}</h2>
</div>
</Link>
</div>
);
}
return (
<div key={user.id} className="UserCard col-sm-24 col-md-10 col-xl-7">
<Link href={"/users/[name]"} as={`/users/${user.name}`}>
<div className="UserCard__container">
<img className="UserCard__logo" src={API_URL + user.logo} alt={user.name} />
<h2 className="UserCard__name">{user.name}</h2>
</div>
</Link>
</div>
);
})}
</div>
{isLoadingUsers && <Loader />}
</div>
</Fragment>
);
{isLoadingUsers && <Loader />}
</div>
</>
)
}
export default Users;
export default Users

130
website/pages/users/login.js
View File

@ -1,77 +1,75 @@
import { Fragment, useContext, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import { UserContext } from '../../contexts/UserContext';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useContext, useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import { UserContext } from '../../contexts/UserContext'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const Login = () => {
const router = useRouter()
const [inputState, setInputState] = useState({})
const { loginUser, messageLogin, loginLoading, isAuth } = useContext(UserContext)
const router = useRouter();
const [inputState, setInputState] = useState({});
const { loginUser, messageLogin, loginLoading, isAuth } = useContext(UserContext);
const handleChange = (event) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
const handleChange = (event) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
const handleSubmit = async (event) => {
event.preventDefault()
if (!isAuth) {
await loginUser(inputState)
}
}
const handleSubmit = async (event) => {
event.preventDefault();
if (!isAuth) {
await loginUser(inputState);
}
}
return (
<>
<HeadTag
title='Se connecter - FunctionProject'
description='Connexion à FunctionProject.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Se connecter</h1>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='email'>Email :</label>
<input onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
return (
<Fragment>
<HeadTag
title="Se connecter - FunctionProject"
description="Connexion à FunctionProject."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Se connecter</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="email">Email :</label>
<input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='password'>Mot de passe :</label>
<input onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
<p>
<Link href='/users/forgotPassword'>
<a className='Register-Login__Forgot-password'>Mot de passe oublié ?</a>
</Link>
</p>
</div>
<div className="form-group">
<label className="form-label" htmlFor="password">Mot de passe :</label>
<input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
<p>
<Link href={"/users/forgotPassword"}>
<a className="Register-Login__Forgot-password">Mot de passe oublié ?</a>
</Link>
</p>
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{(router.query.isConfirmed !== undefined && messageLogin === "") && <p className="form-success"><b>Succès:</b> Votre compte a bien été confirmé, vous pouvez maintenant vous connectez!</p>}
{(router.query.isSuccessEdit !== undefined && messageLogin === "") && <p className="form-success"><b>Succès:</b> Votre profil a bien été modifié, vous pouvez maintenant vous connectez!</p>}
{
(loginLoading) ?
<Loader />
:
htmlParser(messageLogin)
}
</div>
</div>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{(router.query.isConfirmed !== undefined && messageLogin === '') && <p className='form-success'><b>Succès:</b> Votre compte a bien été confirmé, vous pouvez maintenant vous connectez!</p>}
{(router.query.isSuccessEdit !== undefined && messageLogin === '') && <p className='form-success'><b>Succès:</b> Votre profil a bien été modifié, vous pouvez maintenant vous connectez!</p>}
{
(loginLoading)
? <Loader />
: htmlParser(messageLogin)
}
</div>
</Fragment>
);
</div>
</div>
</div>
</>
)
}
export default withoutAuth(Login);
export default withoutAuth(Login)

140
website/pages/users/newPassword.js
View File

@ -1,82 +1,80 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import redirect from '../../utils/redirect';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import redirect from '../../utils/redirect'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const newPassword = (props) => {
const [inputState, setInputState] = useState({})
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleChange = (event) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
const handleChange = () => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.put('/users/reset-password', { ...inputState, tempToken: props.token })
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
setInputState({})
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.put('/users/reset-password', { ...inputState, tempToken: props.token })
.then(({ data }) => {
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
setInputState({});
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
return (
<Fragment>
<HeadTag
title="Nouveau mot de passe - FunctionProject"
description="Mise à jour du mot de passe."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">Nouveau mot de passe</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="password">Mot de passe :</label>
<input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title='Nouveau mot de passe - FunctionProject'
description='Mise à jour du mot de passe.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>Nouveau mot de passe</h1>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='password'>Mot de passe :</label>
<input onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</Fragment>
);
</div>
</div>
</div>
</>
)
}
export async function getServerSideProps(context) {
if (context.query.token != undefined) {
return {
props: {
token: context.query.token
}
};
export async function getServerSideProps (context) {
if (context.query.token != null) {
return {
props: {
token: context.query.token
}
}
return redirect(context, '/404');
}
return redirect(context, '/404')
}
export default withoutAuth(newPassword);
export default withoutAuth(newPassword)

150
website/pages/users/register.js
View File

@ -1,83 +1,81 @@
import { Fragment, useState } from 'react';
import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader';
import HeadTag from '../../components/HeadTag';
import api from '../../utils/api';
import withoutAuth from '../../hoc/withoutAuth';
import '../../public/css/pages/register-login.css';
import { useState } from 'react'
import htmlParser from 'html-react-parser'
import Loader from '../../components/Loader'
import HeadTag from '../../components/HeadTag'
import api from '../../utils/api'
import withoutAuth from '../../hoc/withoutAuth'
import '../../public/css/pages/register-login.css'
const Register = () => {
const [inputState, setInputState] = useState({ name: "", email: "", password: "" });
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleChange = (event) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const [inputState, setInputState] = useState({ name: '', email: '', password: '' })
const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = (event) => {
setIsLoading(true);
event.preventDefault();
api.post('/users/register', inputState)
.then(({ data }) => {
setInputState({ name: "", email: "", password: "" });
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
setIsLoading(false);
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
setIsLoading(false);
});
}
const handleChange = (event) => {
const inputStateNew = { ...inputState }
inputStateNew[event.target.name] = event.target.value
setInputState(inputStateNew)
}
return (
<Fragment>
<HeadTag
title="S'inscrire - FunctionProject"
description="Créer un compte."
/>
<div className="container Register-Login__container">
<div className="row Register-Login__row justify-content-center">
<div className="col-20">
<h1 className="Register-Login__title">S'inscrire</h1>
<div className="text-center">
<p>En vous inscrivant, vous accéderez à de nombreuses fonctionnalités : publier des commentaires, ajouter des fonctions aux favoris, utiliser certaines fonctions disponibles qu'aux membres (exemple: La To Do list) etc.</p>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="name">Nom :</label>
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
</div>
const handleSubmit = (event) => {
setIsLoading(true)
event.preventDefault()
api.post('/users/register', inputState)
.then(({ data }) => {
setInputState({ name: '', email: '', password: '' })
setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`)
setIsLoading(false)
})
.catch((error) => {
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
setIsLoading(false)
})
}
<div className="form-group">
<label className="form-label" htmlFor="name">Email :</label>
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
</div>
<div className="form-group">
<label className="form-label" htmlFor="name">Mot de passe :</label>
<input value={inputState.password} onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
<div className="form-result text-center">
{
(isLoading) ?
<Loader />
:
htmlParser(message)
}
</div>
</div>
</div>
return (
<>
<HeadTag
title="S'inscrire - FunctionProject"
description='Créer un compte.'
/>
<div className='container Register-Login__container'>
<div className='row Register-Login__row justify-content-center'>
<div className='col-20'>
<h1 className='Register-Login__title'>S'inscrire</h1>
<div className='text-center'>
<p>En vous inscrivant, vous accéderez à de nombreuses fonctionnalités : publier des commentaires, ajouter des fonctions aux favoris, utiliser certaines fonctions disponibles qu'aux membres (exemple: La To Do list) etc.</p>
</div>
</Fragment>
);
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Nom :</label>
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='Divlo' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Email :</label>
<input value={inputState.email} onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
</div>
<div className='form-group'>
<label className='form-label' htmlFor='name'>Mot de passe :</label>
<input value={inputState.password} onChange={handleChange} type='password' name='password' id='password' className='form-control' placeholder='******' />
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>Envoyer</button>
</div>
</form>
<div className='form-result text-center'>
{
(isLoading)
? <Loader />
: htmlParser(message)
}
</div>
</div>
</div>
</div>
</>
)
}
export default withoutAuth(Register);
export default withoutAuth(Register)