V1.0.0-beta.16 Update

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

views/profile.ejs

@@ -4,6 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Profil Utilisateur</title>
+    <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>
     <style>
         body {
             background-image: url('<%= user.wallpaper %>');
@@ -14,117 +18,257 @@
             margin: 0;
             height: 100vh;
             overflow: hidden;
-            font-family: Arial, sans-serif;
-            color: #333;
         }
+
+        @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: 800px;
+            max-width: 960px;
             margin: 0 auto;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.8);
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            padding: 2rem;
         }
-        h1 {
-            margin-top: 0;
+
+        .form-container {
+            background-color: hsl(var(--card));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            padding: 2rem;
         }
-        label {
-            display: block;
-            margin: 10px 0 5px;
+
+        .form-group {
+            margin-bottom: 1rem;
         }
-        input[type="text"] {
-            width: calc(100% - 22px);
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 10px;
+
+        .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));
         }
-        button {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background-color: #007bff;
-            color: white;
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--radius);
+            font-weight: 500;
+            transition: all 0.3s ease;
             cursor: pointer;
         }
-        button:hover {
-            background-color: #0056b3;
+
+        .btn-primary {
+            background-color: hsl(var(--primary));
+            color: hsl(var(--primary-foreground));
         }
-        .user-info {
-            margin: 20px 0;
-            text-align: left;
+
+        .btn-primary:hover {
+            opacity: 0.9;
         }
-        .profile-picture {
-            margin: 20px 0;
-            text-align: center;
+
+        .btn-secondary {
+            background-color: hsl(var(--secondary));
+            color: hsl(var(--secondary-foreground));
         }
-        .profile-picture img {
-            max-width: 150px;
-            border-radius: 50%;
+
+        .btn-secondary:hover {
+            opacity: 0.9;
         }
-        .return-btn {
-            display: block;
-            margin: 20px 0;
-            text-align: center;
+
+        #themeSwitcher {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
         }
-        .badge {
-            display: inline-block;
-            padding: 5px 10px;
-            border-radius: 12px;
-            background-color: #007bff;
-            color: white;
-            font-size: 0.9em;
-            font-weight: bold;
+
+        .animate {
+            animation: fadeIn 0.5s ease-out;
         }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .icon-spacing {
+            margin-right: 8px;
+        }
+
+        .swal2-toast {
+        background-color: hsl(var(--card));
+        color: hsl(var(--foreground));
+        border: 1px solid hsl(var(--border));
+        border-radius: var(--radius);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .dark .swal2-toast {
+            background-color: #000; /* Fond noir en mode sombre */
+            color: #fff; /* Texte blanc */
+            border: 1px solid #333; /* Bordure grise foncée */
+    }
     </style>
 </head>
-<body>
-    <div class="container">
-        <div class="profile-picture">
-            <a class="btn dropdown-toggle" id="accountDropdownBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <img 
-                    src="<%= user.profilePicture || 'https://api.dicebear.com/7.x/initials/svg?seed=' + user.name %>" 
-                    alt="User Icon" 
-                    class="rounded-circle" 
-                    style="width: 30px; height: 30px;" 
-                />
-            </a>        </div>
-        <h1>Bienvenue, <span id="userName"><%= user.name %></span> !</h1>
-        
-        <div class="user-info">
-            <p><strong>ID :</strong> <span id="userId"><%= user.id %></span></p>
-            <p><strong>Rôle :</strong> <span id="userRole" class="badge"><%= user.role %></span></p>
-        </div>
+<body class="animate dark">
+    <div id="app" class="min-h-screen flex items-center justify-center">
+        <div class="container mt-8">
+            <h1 class="text-3xl font-semibold mb-6 text-center animate">Profil Utilisateur</h1>
 
-        <form id="wallpaperForm">
-            <div>
-                <label for="wallpaperUrl">Entrez l'URL du fond d'écran :</label>
-                <input type="text" id="wallpaperUrl" name="wallpaperUrl" placeholder="http://example.com/image.jpg">
+            <div class="form-container">
+                <div class="profile-picture text-center mb-6">
+                    <a class="btn btn-secondary" id="accountDropdownBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <img 
+                            src="<%= user.profilePicture || 'https://api.dicebear.com/7.x/initials/svg?seed=' + user.name %>" 
+                            alt="User Icon" 
+                            class="rounded-full" 
+                            style="max-width: 120px; max-height: 120px;" 
+                        />
+                    </a>
+                </div>
+                
+                <div class="text-center mb-6">
+                    <h2 class="text-2xl font-semibold mb-2">Bienvenue, <span id="userName"><%= user.name %></span> !</h2>
+                    <p><strong>ID :</strong> <span id="userId"><%= user.id %></span></p>
+                    <p><strong>Rôle :</strong> <span id="userRole" class="badge bg-blue-500 text-white px-2 py-1 rounded-full"><%= user.role %></span></p>
+                </div>
+
+                <form id="wallpaperForm" class="mb-4">
+                    <div class="form-group">
+                        <label for="wallpaperUrl" class="block mb-2">Entrez l'URL du fond d'écran :</label>
+                        <input type="text" id="wallpaperUrl" name="wallpaperUrl" placeholder="http://example.com/image.jpg" class="form-control">
+                    </div>
+                    <button type="submit" id="updateWallpaper" class="btn btn-primary w-full py-2 mt-4">
+                        <i class="fas fa-image icon-spacing"></i>
+                        Mettre à jour le fond d'écran
+                    </button>
+                </form>
+
+                <form id="profilePictureForm" class="mb-4">
+                    <div class="form-group">
+                        <label for="profilePictureUrl" class="block mb-2">Entrez l'URL de la photo de profil :</label>
+                        <input type="text" id="profilePictureUrl" name="profilePictureUrl" placeholder="http://example.com/path/to/profile.jpg" class="form-control">
+                    </div>
+                    <button type="submit" id="updateProfilePicture" class="btn btn-primary w-full py-2 mt-4">
+                        <i class="fas fa-user-circle icon-spacing"></i>
+                        Mettre à jour la photo de profil
+                    </button>
+                </form>
+
+                <div class="text-center">
+                    <button onclick="window.location.href='/dpanel/dashboard';" class="btn btn-secondary w-full py-2 mt-4">
+                        <i class="fas fa-arrow-left icon-spacing"></i>
+                        Retour au Dashboard
+                    </button>
+                </div>
             </div>
-            <button type="submit">Mettre à jour le fond d'écran</button>
-        </form>
-
-        <form id="profilePictureForm">
-            <div>
-                <label for="profilePictureUrl">Entrez l'URL de la photo de profil :</label>
-                <input type="text" id="profilePictureUrl" name="profilePictureUrl" placeholder="http://example.com/path/to/profile.jpg">
-            </div>
-            <button type="submit">Mettre à jour la photo de profil</button>
-        </form>
-
-        <div class="return-btn">
-            <button onclick="window.location.href='/dpanel/dashboard';">Retour au Dashboard</button>
         </div>
     </div>
 
+    <button id="themeSwitcher" 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>
-        const userId = '<%= user.id %>'; // Ensure this is set correctly by EJS
-
-        document.getElementById('wallpaperForm').addEventListener('submit', async (event) => {
-            event.preventDefault();
-
+        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');
+            }
+        });
+    
+        function showToast(icon, title) {
+            Swal.fire({
+                icon: icon,
+                title: title,
+                showConfirmButton: false,
+                timer: 1800,
+                toast: true,
+                position: 'top-end',
+                customClass: {
+                    container: 'swal2-toast'
+                }
+            });
+        }
+    
+        document.getElementById('wallpaperForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
             const urlInput = document.getElementById('wallpaperUrl').value;
-
+    
             if (urlInput) {
                 const response = await fetch('/api/dpanel/dashboard/backgroundcustom/wallpaper', {
                     method: 'POST',
@@ -134,25 +278,24 @@
                     },
                     body: JSON.stringify({
                         wallpaperUrl: urlInput,
-                        userId: userId // Ensure this is passed correctly
+                        userId: '<%= user.id %>'
                     })
                 });
-
+    
                 if (response.ok) {
                     const data = await response.json();
                     document.body.style.backgroundImage = `url('${data.wallpaper}')`;
-                    alert('Fond d\'écran mis à jour avec succès !');
+                    showToast('success', 'Fond d\'écran mis à jour avec succès !');
                 } else {
-                    alert('Échec de la mise à jour du fond d\'écran');
+                    showToast('error', 'Échec de la mise à jour du fond d\'écran');
                 }
             }
         });
-
-        document.getElementById('profilePictureForm').addEventListener('submit', async (event) => {
-            event.preventDefault();
-
+    
+        document.getElementById('profilePictureForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
             const urlInput = document.getElementById('profilePictureUrl').value;
-
+    
             if (urlInput) {
                 const response = await fetch('/api/dpanel/dashboard/profilpicture', {
                     method: 'POST',
@@ -162,19 +305,20 @@
                     },
                     body: JSON.stringify({
                         profilePictureUrl: urlInput,
-                        userId: userId
+                        userId: '<%= user.id %>'
                     })
                 });
-
+    
                 if (response.ok) {
                     const data = await response.json();
-                    document.getElementById('currentProfilePicture').src = data.profilePicture;
-                    alert('Photo de profil mise à jour avec succès !');
+                    document.querySelector('.profile-picture img').src = data.profilePicture;
+                    showToast('success', 'Photo de profil mise à jour avec succès !');
                 } else {
-                    alert('Échec de la mise à jour de la photo de profil');
+                    showToast('error', 'Échec de la mise à jour de la photo de profil');
                 }
             }
         });
     </script>
+    
 </body>
 </html>