feat: add docker support and update deps
This commit is contained in:
divlo
@ -84,299 +84,301 @@ const Profile = props => {
|
||||
/>
|
||||
|
||||
{/* É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
|
||||
{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'
|
||||
/>
|
||||
</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',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isAuth && user.name === props.name && (
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
}}
|
||||
style={{ marginBottom: '25px' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={{ width: '1.5rem', color: 'red' }}
|
||||
icon={faPen}
|
||||
style={{ cursor: 'pointer', width: '1rem' }}
|
||||
/>
|
||||
</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'
|
||||
/>
|
||||
</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
|
||||
Éditez le profil
|
||||
</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>
|
||||
|
||||
{props.favoritesArray.length > 0 && (
|
||||
<div className='row justify-content-center'>
|
||||
<div className='col-24 text-center'>
|
||||
<img
|
||||
className='Profile__logo'
|
||||
src={API_URL + props.logo}
|
||||
alt={props.name}
|
||||
/>
|
||||
<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'>
|
||||
{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',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<h2>
|
||||
Derniers <span className='important'>commentaires</span> :
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{isAuth && user.name === props.name && (
|
||||
<button
|
||||
onClick={toggleModal}
|
||||
style={{ marginBottom: '25px' }}
|
||||
className='btn btn-dark'
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
style={{ cursor: 'pointer', width: '1rem' }}
|
||||
/>
|
||||
É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
|
||||
<Link
|
||||
href={
|
||||
<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
|
||||
<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>
|
||||
as={`/functions/${comment.function.slug}`}
|
||||
>
|
||||
<a>{comment.function.title}</a>
|
||||
</Link>
|
||||
le{' '}
|
||||
{date.format(
|
||||
new Date(comment.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<ReactMarkdown
|
||||
source={comment.message}
|
||||
renderers={{ code: CodeBlock }}
|
||||
/>
|
||||
{date.format(
|
||||
new Date(comment.createdAt),
|
||||
'DD/MM/YYYY à HH:mm',
|
||||
false
|
||||
)}
|
||||
</p>
|
||||
<ReactMarkdown
|
||||
source={comment.message}
|
||||
renderers={{ code: CodeBlock }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
{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 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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user