V1.0.0-beta.17 Update 1

Note: We appreciate your feedback and bug reports to continue improving our platform. Thank you for your continued support!

.drone.yml

@@ -20,7 +20,7 @@ steps:
       repo: swiftlogiclabs/cdn-app-insider
       tags: 
         - latest
-        - v1.0.0-beta.16
+        - v1.0.0-beta.17
       dockerfile: Dockerfile
       username:
         from_secret: docker_username

Dockerfile

@@ -5,15 +5,12 @@ WORKDIR /srv/docker/cdn-app-insider
 COPY package*.json ./
 
 RUN npm install
-
 RUN ln -s /srv/docker/cdn-app-insider/data /data
-
 RUN ln -s /srv/docker/cdn-app-insider/cdn-files /cdn-files
-
 RUN ln -s /srv/docker/cdn-app-insider/report /report
 
 COPY . .
 
 EXPOSE 5053
 
-CMD [ "npm", "run", "prod" ]
+CMD [ "npm", "run", "start" ]

Middlewares/checkUpdate.js

@@ -1,34 +0,0 @@
-const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));
-const semver = require('semver');
-
-async function checkUpdates(req, res) {
-    try {
-        const { version: currentVersion } = require('../package.json');
-
-        const response = await fetch('https://apollon.dinawo.fr/api/get/version');
-        const data = await response.json();
-
-        if (data && data.update && data.update.version) {
-            const latestVersion = data.update.version;
-
-            const comparisonResult = semver.compare(currentVersion, latestVersion);
-
-            if (comparisonResult < 0) {
-                res.json({
-                    updateAvailable: true,
-                    message: 'Nouvelle mise à jour disponible. Voulez-vous mettre à jour maintenant ?',
-                    showButton: true,
-                });
-            } else {
-                res.json({ updateAvailable: false });
-            }
-        } else {
-            res.status(500).json({ error: 'Données de mise à jour invalides.' });
-        }
-    } catch (error) {
-        console.error('Erreur lors de la vérification de la mise à jour :', error);
-        res.status(500).json({ error: 'Erreur lors de la vérification de la mise à jour.' });
-    }
-}
-
-module.exports = { checkUpdates };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdn-app/insider-myaxrin-labs-dinawo",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "description": "",
   "main": "server.js",
   "scripts": {

public/css/auth.css

@@ -1,54 +0,0 @@
-body {
-    background-color: #36393f;
-    color: #ffffff;
-    font-family: Arial, sans-serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    margin: 0;
-}
-
-.title-container {
-    margin-bottom: 20px;
-}
-
-.container {
-    width: 300px;
-    text-align: center;
-}
-
-.tittle {
-    font-size: 24px;
-    margin-bottom: 20px;
-}
-
-input[type="text"],
-input[type="password"] {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 15px;
-    background-color: #40444b;
-    border: none;
-    color: #ffffff;
-    border-radius: 5px;
-    font-size: 16px;
-}
-
-button {
-    background-color: #7289da;
-    color: #ffffff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    font-size: 16px;
-    margin: 0 auto; 
-    display: block;
-}
-
-button:hover {
-    background-color: #677bc4;
-}

public/css/authlogin.styles.css

@@ -0,0 +1,276 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+:root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+}
+
+.dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.animate {
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from { 
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.form-container {
+    background-color: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    padding: 2rem;
+    transition: all 0.3s ease;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: hsl(var(--ring));
+    box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
+}
+
+.btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    font-weight: 500;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    padding: 0.75rem 1.5rem;
+    overflow: hidden;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn-primary {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+}
+
+.btn-secondary:hover {
+    opacity: 0.9;
+}
+
+/* Animations de succès/échec */
+@keyframes successShake {
+    0%, 100% { transform: translateX(0); background-color: #10B981; }
+    25% { transform: translateX(-2px); }
+    75% { transform: translateX(2px); }
+}
+
+@keyframes failShake {
+    0%, 100% { transform: translateX(0); background-color: #EF4444; }
+    20%, 60% { transform: translateX(-4px); }
+    40%, 80% { transform: translateX(4px); }
+}
+
+.success-animation {
+    animation: successShake 0.5s ease;
+    background-color: #10B981 !important;
+}
+
+.fail-animation {
+    animation: failShake 0.5s ease;
+    background-color: #EF4444 !important;
+}
+
+/* Points de chargement */
+.loading-dots span {
+    display: inline-block;
+    animation: loadingDots 1.4s infinite;
+    opacity: 0;
+    margin-left: 2px;
+}
+
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes loadingDots {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+/* Écran de succès */
+.success-circle {
+    width: 80px;
+    height: 80px;
+    background: #10B981;
+    border-radius: 50%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    animation: scaleIn 0.5s ease;
+}
+
+.animate-success {
+    animation: fadeInUp 0.5s ease;
+}
+
+.loading-bar {
+    height: 4px;
+    width: 100%;
+    background-color: hsl(var(--secondary));
+    border-radius: 2px;
+    overflow: hidden;
+    position: relative;
+    margin-top: 1.5rem;
+}
+
+.loading-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 40%;
+    background-color: #10B981;
+    animation: loadingBar 1.5s infinite ease-in-out;
+    border-radius: 2px;
+}
+
+@keyframes loadingBar {
+    0% { left: -40%; }
+    100% { left: 100%; }
+}
+
+@keyframes scaleIn {
+    from { transform: scale(0); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes fadeInUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes ripple {
+    from {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+    }
+    to {
+        transform: translate(-50%, -50%) scale(4);
+        opacity: 0;
+    }
+}
+
+/* Utilitaires */
+.icon-spacing {
+    margin-right: 0.5rem;
+}
+
+/* Thème switcher */
+#authlogin-theme-switch {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.5rem;
+    border-radius: 50%;
+    background-color: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    transition: transform 0.3s ease;
+    z-index: 100;
+}
+
+#authlogin-theme-switch:hover {
+    transform: rotate(30deg);
+}
+
+/* Classes additionnelles pour les textes */
+.text-muted-foreground {
+    color: hsl(var(--muted-foreground));
+}
+
+h1 {
+    transition: all 0.3s ease-in-out;
+}

public/css/dashboard.styles.css

@@ -0,0 +1,461 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+:root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+}
+
+.dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+}
+
+.container {
+    max-width: 90%;
+    margin: 0 auto;
+    padding: 2rem;
+    flex: 1 0 auto;
+}
+
+.form-container {
+    background-color: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    padding: 2rem;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    font-weight: 500;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+}
+
+.btn-primary {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+}
+
+.btn-secondary:hover {
+    opacity: 0.9;
+}
+
+.btn-success {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+}
+
+.btn-success:hover {
+    opacity: 0.9;
+}
+
+.btn-danger {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+}
+
+.btn-danger:hover {
+    opacity: 0.9;
+}
+
+.animate {
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.table-responsive {
+    overflow-x: auto;
+}
+
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.table th,
+.table td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid hsl(var(--border));
+}
+
+.table thead th {
+    vertical-align: bottom;
+    border-bottom: 2px solid hsl(var(--border));
+}
+
+.header {
+    background-color: hsl(var(--background));
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+.dropdown-menu {
+    display: none;
+    background-color: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    min-width: 150px;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+.dropdown-item {
+    color: hsl(var(--foreground));
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-item:hover {
+    background-color: hsl(var(--muted));
+    color: hsl(var(--foreground));
+}
+
+.dropdown-divider {
+    border-top: 1px solid hsl(var(--border));
+}
+
+.footer {
+    flex-shrink: 0;
+    background-color: hsl(var(--background));
+    border-top: 1px solid hsl(var(--border));
+    padding: 1rem 0;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: hsl(var(--card));
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    padding: 20px;
+    max-width: 90%;
+    width: 600px;
+}
+
+.modal-header, .modal-body, .modal-footer {
+    padding: 20px;
+}
+
+.modal-header {
+    border-bottom: none;
+}
+
+.modal-footer {
+    border-top: none;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+.modal .close {
+    font-size: 28px;
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
+}
+
+.modal .close:hover {
+    opacity: 1;
+}
+
+.navbar {
+padding: 0.5rem 1rem;
+}
+
+/* Alignement des boutons à droite */
+.navbar {
+padding: 0.5rem 1rem !important;
+}
+
+.container-fluid {
+display: flex !important;
+justify-content: space-between !important;
+align-items: center !important;
+}
+
+/* Alignement des boutons à droite */
+.navbar-nav {
+display: flex !important;
+align-items: center !important;
+margin-left: auto !important;
+}
+
+.navbar-nav .nav-item {
+margin-left: 10px !important;
+}
+
+/* Style pour les boutons de la navbar */
+.nav-btn {
+padding: 0.375rem 0.75rem !important;
+font-size: 1rem !important;
+line-height: 1.5 !important;
+border-radius: 0.25rem !important;
+}
+
+/* Style pour l'avatar de l'utilisateur */
+.user-avatar {
+width: 40px !important;
+height: 40px !important;
+object-fit: cover !important;
+border-radius: 50% !important;
+}
+
+/* Style pour le bouton du dropdown */
+#accountDropdownBtn {
+padding: 0 !important;
+border: none !important;
+background: none !important;
+}
+
+/* Style pour le menu dropdown */
+.dropdown-menu {
+right: 0 !important;
+left: auto !important;
+}
+
+/* Assurez-vous que le dropdown est positionné correctement */
+.dropdown {
+position: relative !important;
+}
+
+/* Ajustement pour les écrans plus petits */
+@media (max-width: 768px) {
+.navbar-nav {
+    flex-direction: row !important;
+    justify-content: flex-end !important;
+    width: 100% !important;
+}
+
+.navbar-nav .nav-item {
+    margin-left: 5px !important;
+}
+
+}
+
+/* Animation de chargement stylisée */
+.initial-loading {
+    position: fixed;
+    inset: 0;
+    background: linear-gradient(135deg, 
+        hsla(var(--background), 0.85),
+        hsla(var(--background), 0.9)
+    );
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.success-animation {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.success-icon {
+    width: 64px;
+    height: 64px;
+    background-color: #0EA5E9;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transform: scale(0);
+    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.success-icon svg {
+    width: 32px;
+    height: 32px;
+    color: white;
+    opacity: 0;
+    transform: scale(0.5);
+    animation: iconIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
+}
+
+.success-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0;
+    transform: translateY(10px);
+    animation: textIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.4s;
+}
+
+.success-text h2 {
+    margin: 0;
+    color: hsl(var(--foreground));
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.success-text p {
+    margin: 0;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.875rem;
+}
+
+.success-text .loading-message {
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+    opacity: 0.8;
+    margin-top: 0.5rem;
+}
+
+.progress-bar {
+    width: 200px;
+    height: 4px;
+    background: hsla(var(--foreground), 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-top: 1rem;
+    opacity: 0;
+    animation: textIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.6s;
+}
+
+.progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40%;
+    height: 100%;
+    background-color: #10b981;
+    border-radius: 2px;
+    animation: loading 1.5s ease-in-out infinite;
+}
+
+@keyframes popIn {
+    from {
+        transform: scale(0);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
+@keyframes iconIn {
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes textIn {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes loading {
+    0% {
+        left: -40%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+/* Animation de sortie */
+.fade-out {
+    animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+    }
+}

public/js/authlogin.script.js

@@ -0,0 +1,134 @@
+// Gestion du thème
+const body = document.body;
+const themeSwitcher = document.getElementById('authlogin-theme-switch');
+
+function setTheme(theme) {
+    if (theme === 'dark') {
+        body.classList.add('dark');
+    } else {
+        body.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+}
+
+// Initialisation du thème
+const savedTheme = localStorage.getItem('theme');
+if (savedTheme) {
+    setTheme(savedTheme);
+} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setTheme('dark');
+}
+
+themeSwitcher.addEventListener('click', () => {
+    body.classList.contains('dark') ? setTheme('light') : setTheme('dark');
+});
+
+// Gestion du formulaire de connexion
+document.getElementById('authlogin-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    const username = document.getElementById('authlogin-username').value;
+    const password = document.getElementById('authlogin-password').value;
+    const loginButton = document.getElementById('authlogin-submit');
+
+    // Animation de chargement
+    loginButton.disabled = true;
+    loginButton.innerHTML = `
+        <div class="loading-dots">
+            Connexion en cours<span>.</span><span>.</span><span>.</span>
+        </div>
+    `;
+
+    fetch('/auth/activedirectory', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+        redirect: 'follow',
+    })
+    .then(response => {
+        if (response.url.includes('/dpanel/dashboard')) {
+            loginButton.classList.add('success-animation');
+            loginButton.innerHTML = '<i class="fas fa-check icon-spacing"></i>Succès!';
+            
+            // Crée l'effet de vague
+            const ripple = document.createElement('span');
+            ripple.style.cssText = `
+                position: absolute;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 50%;
+                pointer-events: none;
+                width: 200px;
+                height: 200px;
+                transform: translate(-50%, -50%) scale(0);
+                animation: ripple 1s ease-out;
+            `;
+            loginButton.appendChild(ripple);
+
+            setTimeout(() => {
+                const formContainer = document.querySelector('.form-container');
+                const h1Title = document.querySelector('h1');
+                
+                formContainer.style.opacity = '0';
+                formContainer.style.transform = 'translateY(-20px) scale(0.98)';
+                
+                h1Title.style.transform = 'translateY(20px)';
+                h1Title.style.opacity = '0';
+                
+                setTimeout(() => {
+                    formContainer.innerHTML = `
+                        <div class="text-center animate-success">
+                            <div class="success-circle mb-4">
+                                <i class="fas fa-check text-4xl"></i>
+                            </div>
+                            <h2 class="text-2xl font-semibold mb-3">Connexion réussie !</h2>
+                            <p class="text-muted-foreground mb-4">Redirection vers le tableau de bord...</p>
+                            <div class="loading-bar"></div>
+                        </div>
+                    `;
+                    
+                    formContainer.style.opacity = '1';
+                    formContainer.style.transform = 'translateY(0) scale(1)';
+                    
+                    h1Title.textContent = 'Bienvenue !';
+                    h1Title.style.transform = 'translateY(0)';
+                    h1Title.style.opacity = '1';
+                    
+                    setTimeout(() => window.location.replace('/dpanel/dashboard'), 1500);
+                }, 300);
+            }, 700);
+        } else {
+            throw new Error('Échec de la connexion');
+        }
+    })
+    .catch(error => {
+        loginButton.classList.add('fail-animation');
+        loginButton.innerHTML = '<i class="fas fa-times icon-spacing"></i>Échec';
+        
+        if ('vibrate' in navigator) {
+            navigator.vibrate(100);
+        }
+        
+        setTimeout(() => {
+            loginButton.classList.remove('fail-animation');
+            loginButton.disabled = false;
+            loginButton.innerHTML = '<i class="fa-solid fa-user icon-spacing"></i>Se connecter';
+        }, 1500);
+    });
+});
+
+function redirectToDiscord(url) {
+    const discordButton = document.getElementById('authlogin-discord');
+    if (discordButton) {
+        discordButton.innerHTML = `
+            <div class="loading-dots">
+                Redirection en cours<span>.</span><span>.</span><span>.</span>
+            </div>
+        `;
+        discordButton.disabled = true;
+        
+        setTimeout(() => {
+            document.querySelector('.form-container').style.opacity = '0';
+            document.querySelector('.form-container').style.transform = 'translateY(-20px) scale(0.98)';
+            setTimeout(() => window.location.href = url, 500);
+        }, 500);
+    }
+}

public/js/dashboard.js

@@ -501,4 +501,234 @@
                     text: 'Impossible de récupérer les métadonnées'
                 });
             });
-    }
+    }
+    document.addEventListener('DOMContentLoaded', () => {
+        // Recherche avec debounce
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            let timeout;
+            searchInput.addEventListener('input', (e) => {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    const term = e.target.value.toLowerCase();
+                    document.querySelectorAll('#fileTable tbody tr').forEach(row => {
+                        const text = row.querySelector('td:first-child').textContent.toLowerCase();
+                        row.style.display = text.includes(term) ? '' : 'none';
+                    });
+                }, 150);
+            });
+        }
+    
+        // Gestion des modales
+        document.querySelectorAll('[data-toggle="modal"]').forEach(trigger => {
+            trigger.addEventListener('click', () => {
+                const modal = document.querySelector(trigger.dataset.target);
+                if (modal) modal.classList.add('show');
+            });
+        });
+    
+        document.querySelectorAll('.modal .close, .modal .btn-secondary').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const modal = btn.closest('.modal');
+                if (modal) modal.classList.remove('show');
+            });
+        });
+    
+        // Dropdowns
+        document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
+            toggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const menu = toggle.nextElementSibling;
+                if (!menu) return;
+                
+                // Fermer les autres dropdowns
+                document.querySelectorAll('.dropdown-menu.show').forEach(m => {
+                    if (m !== menu) m.classList.remove('show');
+                });
+                
+                menu.classList.toggle('show');
+            });
+        });
+    
+        // Fermer les dropdowns au clic extérieur
+        document.addEventListener('click', () => {
+            document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
+                menu.classList.remove('show');
+            });
+        });
+    });
+    
+    // Loading overlay
+    window.showLoadingState = () => {
+        const overlay = document.createElement('div');
+        overlay.className = 'loading-overlay animate';
+        overlay.innerHTML = '<div class="loading-spinner"></div>';
+        document.body.appendChild(overlay);
+    };
+    
+    window.hideLoadingState = () => {
+        const overlay = document.querySelector('.loading-overlay');
+        if (overlay) overlay.remove();
+    };
+
+    // Gestion améliorée de l'état de chargement
+window.showLoadingState = () => {
+    const overlay = document.createElement('div');
+    overlay.className = 'loading-overlay';
+    
+    const wrapper = document.createElement('div');
+    wrapper.className = 'spinner-wrapper';
+    
+    const spinner = document.createElement('div');
+    spinner.className = 'loading-spinner';
+    
+    wrapper.appendChild(spinner);
+    overlay.appendChild(wrapper);
+    document.body.appendChild(overlay);
+    
+    // Force le reflow pour démarrer l'animation
+    overlay.offsetHeight;
+    overlay.classList.add('show');
+};
+
+window.hideLoadingState = () => {
+    const overlay = document.querySelector('.loading-overlay');
+    if (overlay) {
+        overlay.classList.remove('show');
+        overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
+    }
+};
+
+// Animation des lignes du tableau
+document.addEventListener('DOMContentLoaded', () => {
+    const tableRows = document.querySelectorAll('.table tr');
+    tableRows.forEach((row, index) => {
+        row.style.setProperty('--row-index', index);
+        requestAnimationFrame(() => row.classList.add('show'));
+    });
+
+    // Animation du conteneur principal
+    const mainContainer = document.querySelector('.form-container');
+    if (mainContainer) {
+        requestAnimationFrame(() => mainContainer.classList.add('show'));
+    }
+});
+
+// Fonction pour les transitions de page
+function transitionToPage(url) {
+    document.body.classList.add('page-transition');
+    showLoadingState();
+    
+    setTimeout(() => {
+        window.location.href = url;
+    }, 300);
+}
+
+// Amélioration des modales
+function showModal(modalId) {
+    const modal = document.querySelector(modalId);
+    if (!modal) return;
+    
+    modal.style.display = 'flex';
+    requestAnimationFrame(() => {
+        modal.classList.add('show');
+        modal.querySelector('.modal-content')?.classList.add('show');
+    });
+}
+
+function hideModal(modalId) {
+    const modal = document.querySelector(modalId);
+    if (!modal) return;
+    
+    modal.querySelector('.modal-content')?.classList.remove('show');
+    modal.classList.remove('show');
+    
+    modal.addEventListener('transitionend', () => {
+        modal.style.display = 'none';
+    }, { once: true });
+}
+
+// État de chargement des boutons
+function setButtonLoading(button, isLoading) {
+    if (isLoading) {
+        button.classList.add('loading');
+        button.dataset.originalText = button.innerHTML;
+        button.innerHTML = '';
+    } else {
+        button.classList.remove('loading');
+        if (button.dataset.originalText) {
+            button.innerHTML = button.dataset.originalText;
+        }
+    }
+}
+
+function createLoadingScreen() {
+    const container = document.createElement('div');
+    container.className = 'initial-loading';
+    const content = `
+        <div class="success-animation">
+            <div class="success-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+            </div>
+            <div class="success-text">
+                <h2>Vous y êtes presque !</h2>
+                <p>Préparation de votre espace de travail...</p>
+                <p class="loading-message">Chargement des données</p>
+            </div>
+            <div class="progress-bar"></div>
+        </div>
+    `;
+    container.innerHTML = content;
+    document.body.appendChild(container);
+    return container;
+}
+
+function initializeLoadingScreen() {
+    // Vérifier si c'est la première visite de la session
+    const hasSeenAnimation = sessionStorage.getItem('hasSeenLoadingAnimation');
+    
+    if (hasSeenAnimation) {
+        // Si l'animation a déjà été vue, initialiser directement le contenu
+        const contentWrapper = document.querySelector('.content-wrapper');
+        if (contentWrapper) {
+            contentWrapper.classList.add('loaded');
+        }
+        return Promise.resolve();
+    }
+
+    return new Promise((resolve) => {
+        const loadingScreen = createLoadingScreen();
+        
+        setTimeout(() => {
+            loadingScreen.classList.add('fade-out');
+            loadingScreen.addEventListener('animationend', () => {
+                loadingScreen.remove();
+                // Marquer l'animation comme vue pour cette session
+                sessionStorage.setItem('hasSeenLoadingAnimation', 'true');
+                resolve();
+            }, { once: true });
+        }, 2000);
+    });
+}
+
+// Nettoyer le sessionStorage lors de la déconnexion
+function handleLogout() {
+    sessionStorage.removeItem('hasSeenLoadingAnimation');
+    // Votre code de déconnexion existant...
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+    try {
+        await initializeLoadingScreen();
+        const contentWrapper = document.querySelector('.content-wrapper');
+        if (contentWrapper) {
+            contentWrapper.classList.add('loaded');
+        }
+    } catch (error) {
+        console.error('Erreur lors du chargement:', error);
+    }
+});

views/AuthLogin.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,135 +7,7 @@
     <link rel="icon" href="/public/assets/homelab_logo.png" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
+    <link rel="stylesheet" href="../public/css/authlogin.styles.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
-
-        :root {
-            --background: 0 0% 100%;
-            --foreground: 222.2 84% 4.9%;
-            --card: 0 0% 100%;
-            --card-foreground: 222.2 84% 4.9%;
-            --popover: 0 0% 100%;
-            --popover-foreground: 222.2 84% 4.9%;
-            --primary: 222.2 47.4% 11.2%;
-            --primary-foreground: 210 40% 98%;
-            --secondary: 210 40% 96.1%;
-            --secondary-foreground: 222.2 47.4% 11.2%;
-            --muted: 210 40% 96.1%;
-            --muted-foreground: 215.4 16.3% 46.9%;
-            --accent: 210 40% 96.1%;
-            --accent-foreground: 222.2 47.4% 11.2%;
-            --destructive: 0 84.2% 60.2%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 214.3 31.8% 91.4%;
-            --input: 214.3 31.8% 91.4%;
-            --ring: 222.2 84% 4.9%;
-            --radius: 0.5rem;
-        }
-
-        .dark {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --popover: 222.2 84% 4.9%;
-            --popover-foreground: 210 40% 98%;
-            --primary: 210 40% 98%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --secondary: 217.2 32.6% 17.5%;
-            --secondary-foreground: 210 40% 98%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --accent: 217.2 32.6% 17.5%;
-            --accent-foreground: 210 40% 98%;
-            --destructive: 0 62.8% 30.6%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 212.7 26.8% 83.9%;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .container {
-            max-width: 960px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-
-        .form-container {
-            background-color: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: var(--radius);
-            padding: 2rem;
-        }
-
-        .form-group {
-            margin-bottom: 1rem;
-        }
-
-        .form-control {
-            width: 100%;
-            padding: 0.5rem;
-            border: 1px solid hsl(var(--border));
-            border-radius: var(--radius);
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-        }
-
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--radius);
-            font-weight: 500;
-            transition: all 0.3s ease;
-            cursor: pointer;
-        }
-
-        .btn-primary {
-            background-color: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-        }
-
-        .btn-primary:hover {
-            opacity: 0.9;
-        }
-
-        .btn-secondary {
-            background-color: hsl(var(--secondary));
-            color: hsl(var(--secondary-foreground));
-        }
-
-        .btn-secondary:hover {
-            opacity: 0.9;
-        }
-
-        #themeSwitcher {
-            position: fixed;
-            top: 1rem;
-            right: 1rem;
-        }
-
-        .animate {
-            animation: fadeIn 0.5s ease-out;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        
-        .icon-spacing {
-          margin-right: 8px;
-        }
-    </style>
 </head>
 <body class="animate">
     <div id="app" class="min-h-screen flex items-center justify-center">
@@ -143,18 +15,18 @@
             <h1 class="text-3xl font-semibold mb-6 text-center animate">Connexion</h1>
 
             <div class="form-container">
-                <form id="loginForm" class="mb-4 animate">
+                <form id="authlogin-form" class="mb-4 animate">
                     <div class="form-group animate">
-                        <label for="username" class="block mb-2">Nom d'utilisateur</label>
+                        <label for="authlogin-username" class="block mb-2">Nom d'utilisateur</label>
-                        <input type="text" id="username" name="username" class="form-control" required>
+                        <input type="text" id="authlogin-username" name="username" class="form-control" required>
                     </div>
 
                     <div class="form-group animate">
-                        <label for="password" class="block mb-2">Mot de passe</label>
+                        <label for="authlogin-password" class="block mb-2">Mot de passe</label>
-                        <input type="password" id="password" name="password" class="form-control" required>
+                        <input type="password" id="authlogin-password" name="password" class="form-control" required>
                     </div>
 
-                    <button type="submit" id="loginButton" class="btn btn-primary w-full py-2 mt-4">
+                    <button type="submit" id="authlogin-submit" class="btn btn-primary w-full py-2 mt-4">
                         <i class="fa-solid fa-user icon-spacing"></i>
                         Se connecter
                     </button>
@@ -162,7 +34,7 @@
                     <% if (typeof setupData !== 'undefined' && Array.isArray(setupData)) { %>
                         <% setupData.forEach(config => { %>
                             <% if (config.hasOwnProperty('discord') && config.discord.enabled === 'on' && config.discord.identifyURL) { %>
-                                <button onclick="redirectToDiscord('<%= config.discord.identifyURL %>')" id="discordButton" class="btn btn-secondary w-full py-2 mt-4">
+                                <button onclick="redirectToDiscord('<%= config.discord.identifyURL %>')" id="authlogin-discord" class="btn btn-secondary w-full py-2 mt-4" type="button">
                                     <i class="fab fa-discord mr-2"></i>
                                     Se connecter avec Discord
                                 </button>
@@ -174,80 +46,12 @@
         </div>
     </div>
 
-    <button id="themeSwitcher" class="btn btn-secondary p-2">
+    <button id="authlogin-theme-switch" class="btn btn-secondary p-2">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
         </svg>
     </button>
 
-    <script>
+    <script src="../public/js/authlogin.script.js"></script>
-        const body = document.body;
-        const themeSwitcher = document.getElementById('themeSwitcher');
-
-        function setTheme(theme) {
-            if (theme === 'dark') {
-                body.classList.add('dark');
-            } else {
-                body.classList.remove('dark');
-            }
-            localStorage.setItem('theme', theme);
-        }
-
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            setTheme(savedTheme);
-        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            setTheme('dark');
-        }
-
-        themeSwitcher.addEventListener('click', function() {
-            if (body.classList.contains('dark')) {
-                setTheme('light');
-            } else {
-                setTheme('dark');
-            }
-        });
-
-        document.getElementById('loginForm').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const username = document.getElementById('username').value;
-            const password = document.getElementById('password').value;
-            const loginButton = document.getElementById('loginButton');
-
-            loginButton.disabled = true;
-            loginButton.innerHTML = 'Connexion en cours...';
-
-            fetch('/auth/activedirectory', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password }),
-                redirect: 'follow',
-            })
-            .then(response => {
-                if (response.url.includes('/dpanel/dashboard')) {
-                    loginButton.innerHTML = 'Succès!';
-                    setTimeout(() => window.location.replace('/dpanel/dashboard'), 1000);
-                } else {
-                    throw new Error('Échec de la connexion');
-                }
-            })
-            .catch(error => {
-                loginButton.innerHTML = 'Échec';
-                setTimeout(() => {
-                    loginButton.disabled = false;
-                    loginButton.innerHTML = 'Se connecter';
-                }, 1500);
-            });
-        });
-
-        function redirectToDiscord(url) {
-            const discordButton = document.getElementById('discordButton');
-            if (discordButton) {
-                discordButton.innerHTML = 'Redirection en cours...';
-                discordButton.disabled = true;
-                setTimeout(() => window.location.href = url, 1000);
-            }
-        }
-    </script>
 </body>
-</html>
+</html>

views/dashboard.ejs

@@ -8,53 +8,8 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
-    <style>
+    <link rel="stylesheet" href="../public/css/dashboard.styles.css">
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+    <style>        
-
-        :root {
-            --background: 0 0% 100%;
-            --foreground: 222.2 84% 4.9%;
-            --card: 0 0% 100%;
-            --card-foreground: 222.2 84% 4.9%;
-            --popover: 0 0% 100%;
-            --popover-foreground: 222.2 84% 4.9%;
-            --primary: 222.2 47.4% 11.2%;
-            --primary-foreground: 210 40% 98%;
-            --secondary: 210 40% 96.1%;
-            --secondary-foreground: 222.2 47.4% 11.2%;
-            --muted: 210 40% 96.1%;
-            --muted-foreground: 215.4 16.3% 46.9%;
-            --accent: 210 40% 96.1%;
-            --accent-foreground: 222.2 47.4% 11.2%;
-            --destructive: 0 84.2% 60.2%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 214.3 31.8% 91.4%;
-            --input: 214.3 31.8% 91.4%;
-            --ring: 222.2 84% 4.9%;
-            --radius: 0.5rem;
-        }
-
-        .dark {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --popover: 222.2 84% 4.9%;
-            --popover-foreground: 210 40% 98%;
-            --primary: 210 40% 98%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --secondary: 217.2 32.6% 17.5%;
-            --secondary-foreground: 210 40% 98%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --accent: 217.2 32.6% 17.5%;
-            --accent-foreground: 210 40% 98%;
-            --destructive: 0 62.8% 30.6%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 212.7 26.8% 83.9%;
-        }
 
         body {
             font-family: 'Inter', sans-serif;
@@ -71,278 +26,6 @@
             display: flex;
             flex-direction: column;
         }
-
-        .container {
-            max-width: 90%;
-            margin: 0 auto;
-            padding: 2rem;
-            flex: 1 0 auto;
-        }
-
-        .form-container {
-            background-color: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: var(--radius);
-            padding: 2rem;
-        }
-
-        .form-control {
-            width: 100%;
-            padding: 0.5rem;
-            border: 1px solid hsl(var(--border));
-            border-radius: var(--radius);
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-        }
-
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--radius);
-            font-weight: 500;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            padding: 0.5rem 1rem;
-        }
-
-        .btn-primary {
-            background-color: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-        }
-
-        .btn-primary:hover {
-            opacity: 0.9;
-        }
-
-        .btn-secondary {
-            background-color: hsl(var(--secondary));
-            color: hsl(var(--secondary-foreground));
-        }
-
-        .btn-secondary:hover {
-            opacity: 0.9;
-        }
-
-        .btn-success {
-            background-color: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-        }
-
-        .btn-success:hover {
-            opacity: 0.9;
-        }
-
-        .btn-danger {
-            background-color: hsl(var(--destructive));
-            color: hsl(var(--destructive-foreground));
-        }
-
-        .btn-danger:hover {
-            opacity: 0.9;
-        }
-
-        .animate {
-            animation: fadeIn 0.5s ease-out;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
-        .table-responsive {
-            overflow-x: auto;
-        }
-
-        .table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0;
-        }
-
-        .table th,
-        .table td {
-            padding: 0.75rem;
-            vertical-align: top;
-            border-top: 1px solid hsl(var(--border));
-        }
-
-        .table thead th {
-            vertical-align: bottom;
-            border-bottom: 2px solid hsl(var(--border));
-        }
-
-        .header {
-            background-color: hsl(var(--background));
-            border-bottom: 1px solid hsl(var(--border));
-        }
-
-        .dropdown-menu {
-            display: none;
-            background-color: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: var(--radius);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 1000;
-            min-width: 150px;
-        }
-
-        .dropdown-menu.show {
-            display: block;
-        }
-
-        .dropdown-item {
-            color: hsl(var(--foreground));
-            padding: 0.5rem 1rem;
-            text-decoration: none;
-            display: block;
-        }
-
-        .dropdown-item:hover {
-            background-color: hsl(var(--muted));
-            color: hsl(var(--foreground));
-        }
-
-        .dropdown-divider {
-            border-top: 1px solid hsl(var(--border));
-        }
-
-        .footer {
-            flex-shrink: 0;
-            background-color: hsl(var(--background));
-            border-top: 1px solid hsl(var(--border));
-            padding: 1rem 0;
-        }
-
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-        }
-
-        .modal.show {
-            display: flex;
-        }
-
-        .modal-content {
-            background-color: hsl(var(--card));
-            border-radius: 15px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-            padding: 20px;
-            max-width: 90%;
-            width: 600px;
-        }
-
-        .modal-header, .modal-body, .modal-footer {
-            padding: 20px;
-        }
-
-        .modal-header {
-            border-bottom: none;
-        }
-
-        .modal-footer {
-            border-top: none;
-            display: flex;
-            justify-content: flex-end;
-            gap: 0.5rem;
-        }
-
-        .modal .close {
-            font-size: 28px;
-            opacity: 0.6;
-            transition: opacity 0.3s ease;
-        }
-
-        .modal .close:hover {
-            opacity: 1;
-        }
-
-        .navbar {
-        padding: 0.5rem 1rem;
-    }
-
-    /* Alignement des boutons à droite */
-    .navbar {
-        padding: 0.5rem 1rem !important;
-    }
-
-    .container-fluid {
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-    }
-
-    /* Alignement des boutons à droite */
-    .navbar-nav {
-        display: flex !important;
-        align-items: center !important;
-        margin-left: auto !important;
-    }
-
-    .navbar-nav .nav-item {
-        margin-left: 10px !important;
-    }
-
-    /* Style pour les boutons de la navbar */
-    .nav-btn {
-        padding: 0.375rem 0.75rem !important;
-        font-size: 1rem !important;
-        line-height: 1.5 !important;
-        border-radius: 0.25rem !important;
-    }
-
-    /* Style pour l'avatar de l'utilisateur */
-    .user-avatar {
-        width: 40px !important;
-        height: 40px !important;
-        object-fit: cover !important;
-        border-radius: 50% !important;
-    }
-
-    /* Style pour le bouton du dropdown */
-    #accountDropdownBtn {
-        padding: 0 !important;
-        border: none !important;
-        background: none !important;
-    }
-
-    /* Style pour le menu dropdown */
-    .dropdown-menu {
-        right: 0 !important;
-        left: auto !important;
-    }
-
-    /* Assurez-vous que le dropdown est positionné correctement */
-    .dropdown {
-        position: relative !important;
-    }
-
-    /* Ajustement pour les écrans plus petits */
-    @media (max-width: 768px) {
-        .navbar-nav {
-            flex-direction: row !important;
-            justify-content: flex-end !important;
-            width: 100% !important;
-        }
-
-        .navbar-nav .nav-item {
-            margin-left: 5px !important;
-        }
-
-    }
     </style>
 </head>
 <body class="animate">
@@ -469,7 +152,7 @@
 
 <footer class="footer mt-auto py-3 bg-light">
     <div class="container">
-        <span class="text-muted">Version: 1.0.0-beta.16 | &copy; 2024 Myaxrin Labs</span>
+        <span class="text-muted">Version: 1.0.0-beta.17 | &copy; 2024 Myaxrin Labs</span>
         <a href="#" class="float-right" onclick="displayMetadata()">Metadata</a>
     </div>
 </footer>

views/folder.ejs

@@ -191,7 +191,7 @@
     <div class="container">
         <footer class="py-3 my-4">
           <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-            <li class="nav-item"><a class="nav-link px-2 text-muted">Version: 1.0.0-beta.16</a></li>
+            <li class="nav-item"><a class="nav-link px-2 text-muted">Version: 1.0.0-beta.17</a></li>
           </ul>
           <p class="text-center text-muted">&copy; 2024 Myaxrin Labs</p>
         </footer>

views/promote.ejs

@@ -10,181 +10,158 @@
 
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #000;
+            background-color: #0A0B14;
             color: #fff;
             min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .logo {
-            width: 32px;
-            height: 32px;
-            animation: fadeInDown 0.6s ease-out;
-        }
-
-        .promo-container {
-            background: #111111;
-            border-radius: 12px;
-            max-width: 800px;
-            width: 90%;
-            padding: 2.5rem;
-            animation: fadeIn 0.8s ease-out;
-            transform: translateY(20px);
-            animation-fill-mode: forwards;
         }
 
         .feature-card {
-            background: #1a1a1a;
+            background: rgba(30, 41, 59, 0.3);
-            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
-            padding: 1.5rem;
+            border-radius: 12px;
+            backdrop-filter: blur(10px);
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
 
         .feature-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
 
-        .discord-button {
+        .login-button {
-            background-color: #5865F2;
+            background: rgba(255, 255, 255, 0.1);
             transition: all 0.2s ease;
-            animation: pulse 2s infinite;
         }
 
-        .discord-button:hover {
+        .login-button:hover {
-            background-color: #4752c4;
+            background: rgba(255, 255, 255, 0.15);
-            animation: none;
         }
 
-        .title-color {
+        .feature-icon {
-            color: #3b82f6;
+            color: #60A5FA;
-            background: linear-gradient(45deg, #3b82f6, #60a5fa);
+            transition: transform 0.3s ease;
+        }
+
+        .feature-card:hover .feature-icon {
+            transform: scale(1.1);
+        }
+
+        .powered-by {
+            background: linear-gradient(90deg, #3B82F6, #60A5FA);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
+            transition: opacity 0.2s ease;
         }
 
-        .selfhosted-badge {
+        .powered-by:hover {
-            background: linear-gradient(45deg, #3b82f6, #60a5fa);
-            animation: fadeInRight 0.6s ease-out;
-        }
-
-        .try-button {
-            background: linear-gradient(45deg, #3b82f6, #60a5fa);
-            transition: all 0.3s ease;
-        }
-
-        .try-button:hover {
             opacity: 0.9;
-            transform: translateY(-2px);
         }
 
-        @keyframes fadeIn {
+        .animate-fade-in-up {
-            from {
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fade-in-up 0.6s ease-out forwards;
+        }
+
+        .animate-fade-in-up-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        @keyframes fade-in-up {
+            0% {
                 opacity: 0;
                 transform: translateY(20px);
             }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        @keyframes fadeInDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        @keyframes fadeInRight {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        @keyframes pulse {
-            0% {
-                box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.4);
-            }
-            70% {
-                box-shadow: 0 0 0 10px rgba(88, 101, 242, 0);
-            }
             100% {
-                box-shadow: 0 0 0 0 rgba(88, 101, 242, 0);
+                opacity: 1;
-            }
-        }
-
-        .animate-float {
-            animation: float 6s ease-in-out infinite;
-        }
-
-        @keyframes float {
-            0%, 100% {
                 transform: translateY(0);
             }
-            50% {
-                transform: translateY(-10px);
-            }
         }
     </style>
 </head>
-<body class="flex items-center justify-center p-4">
+<body>
-    <a href="/" class="absolute top-6 left-6">
+    <!-- Navigation -->
-        <img src="https://cdn.dinawo.fr/public/assets/homelab_logo.png" alt="Logo" class="logo">
+    <nav class="border-b border-gray-800/30">
-    </a>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
+            <div class="flex justify-between h-16">
-    <div class="promo-container">
+                <div class="flex items-center">
-        <div class="text-center mb-12">
+                    <img src="https://cdn.dinawo.fr/public/assets/homelab_logo.png" alt="Logo" class="w-8 h-8 transition-transform duration-300 ease-in-out hover:scale-105">
-            <img src="https://cdn.dinawo.fr/public/assets/homelab_logo.png" alt="Logo" class="logo mx-auto mb-6 animate-float">
+                </div>
-            <h1 class="text-3xl font-bold mb-4 title-color">Bienvenue sur le CDN de Myaxrin Labs</h1>
+                <div class="flex items-center gap-4">
-            <div class="inline-block selfhosted-badge px-3 py-1 rounded-full text-sm font-medium mb-4">
+                    <a href="/auth/login" class="login-button text-sm px-4 py-2 rounded-lg font-medium">
-                100% Self-Hosted
+                        Connexion
-            </div>
+                    </a>
-            <p class="text-gray-300 mb-2">✨ Découvrez notre infrastructure de distribution de contenu nouvelle génération.</p>
+                    <button class="text-gray-400 hover:text-white transition-colors duration-300">
-            <p class="text-gray-400">Ce service est propulsé par Myaxrin Labs, un laboratoire dédié à l'innovation technologique.</p>
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        </div>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-
+                        </svg>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
+                    </button>
-            <div class="feature-card text-center" style="animation: fadeIn 0.8s ease-out 0.2s both;">
+                </div>
-                <div class="text-4xl mb-4 text-blue-500">🚀</div>
-                <h3 class="text-lg font-semibold mb-2">Performance</h3>
-                <p class="text-gray-400 text-sm">Distribution ultra-rapide de vos contenus avec une infrastructure optimisée</p>
-            </div>
-            <div class="feature-card text-center" style="animation: fadeIn 0.8s ease-out 0.4s both;">
-                <div class="text-4xl mb-4 text-blue-500">🛡️</div>
-                <h3 class="text-lg font-semibold mb-2">Sécurité</h3>
-                <p class="text-gray-400 text-sm">Protection avancée de vos données avec chiffrement de bout en bout</p>
             </div>
         </div>
+    </nav>
 
-        <div class="flex justify-center mb-8" style="animation: fadeIn 0.8s ease-out 0.6s both;">
+    <!-- Hero Section -->
-            <a href="https://cdn-app.dinawo.fr" target="_blank" 
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-               class="try-button inline-flex items-center px-6 py-3 rounded-lg text-white font-medium">
+        <div class="text-center py-20 opacity-0 animate-fade-in-up">
-                Essayer maintenant
+            <h2 class="text-blue-400 text-sm font-medium tracking-wide uppercase mb-3">Fonctionnalités</h2>
+            <h1 class="text-3xl font-bold tracking-tight mb-4">Tout ce dont vous avez besoin pour<br>votre CDN</h1>
+            <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                Notre CDN self-hosted offre une solution complète pour gérer et distribuer vos fichiers efficacement.
+            </p>
+            <a href="https://cdn-app.dinawo.fr/" 
+               class="powered-by inline-block mt-4 text-lg font-medium">
+                Propulsé par Myaxrin Labs →
             </a>
         </div>
 
-        <div class="text-center border-t border-gray-800 pt-8" style="animation: fadeIn 0.8s ease-out 0.8s both;">
+        <!-- Features Grid -->
-            <p class="text-gray-300 mb-6">✨ Rejoignez notre communauté pour suivre nos dernières innovations !</p>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pb-20 opacity-0 animate-fade-in-up">
-            <a href="https://discord.gg/k6r96Tmtgx" target="_blank" 
+            <div class="feature-card p-8 text-center">
-               class="discord-button inline-flex items-center px-6 py-3 rounded-lg text-white font-medium">
+                <div class="text-center mb-4">
-               <svg class="w-5 h-5 mr-2" viewBox="0 0 71 55" fill="currentColor">
+                    <svg class="w-8 h-8 mx-auto text-blue-400 feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                   <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
-               </svg>
+                    </svg>
-               Rejoindre le Discord
+                </div>
-            </a>
+                <h3 class="text-lg font-semibold mb-2">Téléversement facile</h3>
+                <p class="text-gray-400 text-sm">Téléversez vos fichiers rapidement et en toute sécurité sur votre propre infrastructure.</p>
+            </div>
+
+            <div class="feature-card p-8 text-center">
+                <div class="text-center mb-4">
+                    <svg class="w-8 h-8 mx-auto text-blue-400 feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                    </svg>
+                </div>
+                <h3 class="text-lg font-semibold mb-2">Sécurité renforcée</h3>
+                <p class="text-gray-400 text-sm">Bénéficiez d'une protection avancée pour vos fichiers et vos données.</p>
+            </div>
+
+            <div class="feature-card p-8 text-center">
+                <div class="text-center mb-4">
+                    <svg class="w-8 h-8 mx-auto text-blue-400 feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                </div>
+                <h3 class="text-lg font-semibold mb-2">Performance optimisée</h3>
+                <p class="text-gray-400 text-sm">Profitez d'une distribution de contenu ultra-rapide pour des chargements éclair.</p>
+            </div>
         </div>
-    </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-gray-500 text-sm opacity-0 animate-fade-in-up">
+        <p>Version: 1.0.0-beta.17 | © 2024 Myaxrin Labs</p>
+    </footer>
+
+    <script>
+        // Add animations on page load
+        const elements = document.querySelectorAll('.animate-fade-in-up');
+        elements.forEach(element => {
+            element.classList.add('animate-fade-in-up-visible');
+        });
+    </script>
 </body>
 </html>

views/upload.ejs

@@ -160,6 +160,7 @@
             background-color: hsl(var(--primary));
             width: 0%;
         }
+        
     </style>
 </head>
 <body class="animate dark">