dbroqua/simple-images-upload
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Damien Broqua 2023-09-23 20:54:44 +02:00
parent 9577ba4af5
commit 1bf353c150
52 changed files with 10449 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
views/error.ejs Normal file
View file

@ -0,0 +1,10 @@
<main class="layout-maxed error">
<div>
<h1><%= page.title %></h1>
<% if ( process.env.NODE_ENV !== 'production' ) { %>
<div>
<pre><%= error %></pre>
</div>
<% } %>
</div>
</main>

12
views/index.ejs Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="fr">
<%- include('partials/head', {page: page, user: user, baseUrl: baseUrl}); %>
<body class="<%= pagename %>">
<% if ( user ) { %>
<%- include('partials/header', {page: page, user: user, baseUrl: baseUrl}); %>
<% } %>
<%- include(viewname, {page: page, params: params, query: query, user: user}) %>
<%- include('partials/footer', {page: page, query: query, user: user}); %>
</body>
</html>

29
views/pages/connexion.ejs Normal file
View file

@ -0,0 +1,29 @@
<div class="box">
<form method="POST">
<h1>
Connexion
</h1>
<div class="field">
<label for="email">Adresse e-mail</label>
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
</div>
<div class="field">
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" placeholder="********">
</div>
<% if ( messages ) {%>
<% for (let i = 0 ; i < messages.length ; i += 1 ) { %>
<div class="message error" role="alert">
<%= messages[i] %>
</div>
<% } %>
<% } %>
<div class="text-right mt-10">
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
</div>
<button type="submit" class="button is-primary">Connexion</button>
</form>
</div>

89
views/pages/gallery.ejs Normal file
View file

@ -0,0 +1,89 @@
<main class="layout-maxed collection" id="gallery">
<div class="grid gap-5 grid-cols-1 md:grid-cols-4 list hover">
<%
for ( let i = 0 ; i < page.images.length ; i += 1 ) {
const image = page.images[i];
%>
<div
class="item link imagesPreview"
data-toggle="modal"
id="item-<%= i %>"
data-original="<%= image.originalFile %>"
data-medium="<%= image.mediumFile %>"
data-small="<%= image.smallFile %>"
onclick="displayImageDetails('<%= i %>')"
>
<img src="<%= image.smallFile %>" alt="Image <%= i %>">
</div>
<%
}
%>
</div>
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul class="pagination-list">
<% if ( page.currentPage > 1 ) { %>
<li>
<a class="pagination-link" href="?page=1" aria-label="Aller à la première page">
&laquo;
</a>
</li>
<li>
<a class="pagination-link" href="?page=<%= page.currentPage - 1 %>" aria-label="Aller à la page précédente">
&lsaquo;
</a>
</li>
<% } %>
<% for ( let i = 1 ; i <= page.totalPages ; i += 1 ) { %>
<% if (i < 2 || i > (page.totalPages - 1) || (Number(page.currentPage) - 1) <= i && Number(page.currentPage) + 1 >= i) { %>
<li>
<a class="pagination-link <%= i === page.currentPage ? 'is-current' : '' %>" href="?page=<%= i %>">
<%= i %>
</a>
</li>
<% } %>
<% if ((Number(page.currentPage) - 3 === i && Number(page.currentPage) - 2 > 1) || (Number(page.currentPage) + 2 === i && Number(page.currentPage) + 2 < page.totalPages - 1)) { %>
<li>
<a class="pagination-link is-disabled">…</a>
</li>
<% } %>
<% } %>
<% if ( page.currentPage < page.totalPages ) { %>
<li>
<a class="pagination-link" href="?page=<%= page.currentPage + 1 %>" aria-label="Aller à la page suivante">
&rsaquo;
</a>
</li>
<li>
<a class="pagination-link" href="?page=<%= page.totalPages %>" aria-label="Aller à la dernière page">
&raquo;
</a>
</li>
<% } %>
</ul>
</nav>
</main>
<div class="modal">
<div class="modal-background" onclick="closeModale()"></div>
<div class="modal-card">
<header>
<div>Détails d'une image</div>
<button aria-label="Fermer" class="close" onclick="closeModale()"></button>
</header>
<section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<div class="image-preview">
<img src="" id="previewImage" alt="Image">
</div>
<div>
<%- include('../partials/file-links', {file: {}, index: 0}) %></div>
<div>
</div>
</section>
<footer>
<button class="button is-primary" onclick="closeModale()">Fermer</button>
</footer>
</div>
</div>

54
views/pages/inscription.ejs Normal file
View file

@ -0,0 +1,54 @@
<%
const errors = {
'username-required': 'Le pseudo est requis',
'username-match': 'Ce pseudo n\'est pas autorisé',
'email-required': 'L\'email est requis',
'email-match': 'L\'email n\'est pas valide',
'email-dup': 'Cet email est déjà présent en base'
};
%>
<div class="box">
<form method="POST">
<h1>
Inscription
</h1>
<div class="field">
<label for="username">Nom d'utilisateur</label>
<input type="text" required name="username" id="username" placeholder="ex : DarKou">
<% if ( messages ) {%>
<% for (let i = 0 ; i < messages.length ; i += 1 ) { %>
<% if ( messages[i].includes('username') ) { %>
<div class="message error" role="alert">
<%= errors[messages[i]] %>
</div>
<% } %>
<% } %>
<% } %>
</div>
<div class="field">
<label for="email">Adresse e-mail</label>
<input type="email" required name="email" id="email" placeholder="ex : damien@darkou.fr">
<% if ( messages ) {%>
<% for (let i = 0 ; i < messages.length ; i += 1 ) { %>
<% if ( messages[i].includes('email') ) { %>
<div class="message error" role="alert">
<%= errors[messages[i]] %>
</div>
<% } %>
<% } %>
<% } %>
</div>
<div class="field">
<label for="password">Mot de passe</label>
<input type="password" required name="password" id="password" placeholder="********">
</div>
<div class="text-right mt-10">
Déjà inscrit ?
<a href="/connexion">Connectez-vous</a>
</div>
<button type="submit" class="button is-primary">Connexion</button>
</form>
</div>

31
views/pages/upload.ejs Normal file
View file

@ -0,0 +1,31 @@
<div class="box">
<form method="POST" enctype="multipart/form-data">
<h1>
Upload
</h1>
<div class="field">
<label for="image">Choisir une image</label>
<input
type="file"
accept="image/*"
class="custom-file-input"
id="image"
name="image"
aria-describedby="file"
/>
</div>
<button type="submit" class="button is-primary">Uploader</button>
<% if ( page.upload ) { %>
<div class="grid gap-5 grid-cols-1 md:grid-cols-2">
<div class="image-preview">
<img src="<%= page.upload.smallFile %>" alt="Miniature" />
</div>
<div>
<%- include('../partials/file-links', {file: page.upload, index: 0}) %>
</div>
</div>
<% } %>
</form>
</div>

39
views/partials/file-links.ejs Normal file
View file

@ -0,0 +1,39 @@
<div class="field">
<label for="originalFile-<%= index %>">Taille originale</label>
<input
type="text"
name="originalFile-<%= index %>"
id="originalFile-<%= index %>"
value="<%= file.originalFile %>"
onclick="copyToClipboard('originalFile-<%= index %>', 'Lien copié')"
>
</div>
<div class="field">
<label for="mediumFile-<%= index %>">Taille moyenne (800x600)</label>
<input
type="text"
name="mediumFile-<%= index %>"
id="mediumFile-<%= index %>"
value="<%= file.mediumFile %>"
onclick="copyToClipboard('mediumFile-<%= index %>', 'Lien copié')"
>
</div>
<div class="field">
<label for="smallFile-<%= index %>">Miniature (300x200)</label>
<input
type="text"
name="smallFile-<%= index %>"
id="smallFile-<%= index %>"
value="<%= file.smallFile %>"
onclick="copyToClipboard('smallFile-<%= index %>', 'Lien copié')"
>
</div>
<div class="field">
<label for="bbcode-<%= index %>"BB Code</label>
<textarea
name="bbcode-<%= index %>"
id="bbcode-<%= index %>"
onclick="copyToClipboard('bbcode-<%= index %>', 'BB Code copié')"
rows="4"
>[url=<%= file.originalFile %>][img]<%= file.mediumFile %>[/img][/url]</textarea>
</div>

1
views/partials/footer.ejs Normal file
View file

@ -0,0 +1 @@
<script type="text/javascript" src="/js/main.js"></script>

10
views/partials/head.ejs Normal file
View file

@ -0,0 +1,10 @@
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Simple Gallery <% } %></title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="/css/main.css" />
</head>

70
views/partials/header.ejs Normal file
View file

@ -0,0 +1,70 @@
<nav class="navbar" aria-label="Navigation principale">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/img/logo.png" alt="Logo Simple Gallery">
<span>Simple Gallery</span>
</a>
<a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu">
<% if ( user ) { %>
<div class="navbar-start">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/upload">
<span>
Ajouter une image
</span>
</a>
</div>
</div>
</div>
<% } %>
<div class="navbar-end">
<% if ( user ) { %>
<div class="navbar-item has-dropdown">
<a class="navbar-link">
<span>
<%= user.username %>
</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/mon-compte">
Mon compte
</a>
<hr />
<a class="navbar-item" href="/gallery">
Mes images
</a>
</div>
</div>
<% } %>
<div class="navbar-item">
<div class="buttons">
<% if ( !user ) { %>
<a class="button is-primary" href="/connexion">
<strong>Connexion</strong>
</a>
<% } else { %>
<a class="button is-danger" href="/se-deconnecter">
Déconnexion
</a>
<% } %>
</div>
</div>
</div>
</div>
</nav>
<div id="toastr">
<button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
<span></span>
</div>