+ ← Back to Dashboard
+
+
diff --git a/Media.JoshHeaps.Net/Pages/Profile.cshtml.cs b/Media.JoshHeaps.Net/Pages/Profile.cshtml.cs
new file mode 100644
index 0000000..c46ec25
--- /dev/null
+++ b/Media.JoshHeaps.Net/Pages/Profile.cshtml.cs
@@ -0,0 +1,22 @@
+using Media.JoshHeaps.Net.Models;
+using Media.JoshHeaps.Net.Services;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Media.JoshHeaps.Net.Pages
+{
+ public class ProfileModel(UserService userService) : AuthenticatedPageModel
+ {
+ public UserDashboard? Dashboard { get; set; }
+
+ public async Task
+
+
+ Profile Information
+
+
+
+ @Model.Dashboard?.Username
+
+
+
+ @Model.Dashboard?.Email
+
+
+
+
+ @if (Model.Dashboard?.EmailVerified == true)
+ {
+ Verified
+ }
+ else
+ {
+ Unverified
+ }
+
+
+
+Appearance
+
+
+
+ Dark Mode
+ Enable dark theme across the application
+
+
+
- 
-
-
- `;
-
- modal.addEventListener('click', (e) => {
- if (e.target.classList.contains('modal-backdrop') ||
- e.target.classList.contains('modal-close') ||
- e.target.classList.contains('image-modal')) {
- modal.remove();
+ // Optional: Add image preview on click
+ galleryElement?.addEventListener('click', (e) => {
+ if (e.target.tagName === 'IMG') {
+ const modal = createImageModal(e.target.src);
+ document.body.appendChild(modal);
}
});
- return modal;
-}
+ function createImageModal(imageSrc) {
+ const modal = document.createElement('div');
+ modal.className = 'image-modal';
+ modal.innerHTML = `
+
+
+
+
+
+ `;
+
+ modal.addEventListener('click', (e) => {
+ if (e.target.classList.contains('modal-backdrop') ||
+ e.target.classList.contains('modal-close') ||
+ e.target.classList.contains('image-modal')) {
+ modal.remove();
+ }
+ });
+
+ return modal;
+ }
+}); // End of DOMContentLoaded
diff --git a/Media.JoshHeaps.Net/wwwroot/js/theme.js b/Media.JoshHeaps.Net/wwwroot/js/theme.js
new file mode 100644
index 0000000..b59e698
--- /dev/null
+++ b/Media.JoshHeaps.Net/wwwroot/js/theme.js
@@ -0,0 +1,38 @@
+// Theme Toggle Functionality
+(function() {
+ const THEME_KEY = 'theme-preference';
+
+ // Initialize theme on page load
+ function initTheme() {
+ const savedTheme = localStorage.getItem(THEME_KEY);
+ const theme = savedTheme || 'light'; // Default to light
+
+ document.documentElement.setAttribute('data-theme', theme);
+
+ // Update toggle if it exists
+ const toggle = document.getElementById('theme-toggle');
+ if (toggle) {
+ toggle.checked = theme === 'dark';
+ }
+ }
+
+ // Toggle theme
+ function toggleTheme() {
+ const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+ document.documentElement.setAttribute('data-theme', newTheme);
+ localStorage.setItem(THEME_KEY, newTheme);
+ }
+
+ // Initialize immediately (before DOMContentLoaded to prevent flash)
+ initTheme();
+
+ // Set up toggle listener when DOM is ready
+ document.addEventListener('DOMContentLoaded', function() {
+ const toggle = document.getElementById('theme-toggle');
+ if (toggle) {
+ toggle.addEventListener('change', toggleTheme);
+ }
+ });
+})();
diff --git a/Media.JoshHeaps.Net/wwwroot/js/upload.js b/Media.JoshHeaps.Net/wwwroot/js/upload.js
new file mode 100644
index 0000000..710cf37
--- /dev/null
+++ b/Media.JoshHeaps.Net/wwwroot/js/upload.js
@@ -0,0 +1,106 @@
+// Handle multiple file uploads sequentially
+document.addEventListener('DOMContentLoaded', function() {
+ const uploadForm = document.getElementById('upload-form');
+ const fileInput = document.getElementById('UploadedFile');
+ const descriptionInput = document.getElementById('Description');
+ const uploadBtn = document.getElementById('upload-btn');
+ const progressContainer = document.getElementById('upload-progress');
+ const progressFill = document.getElementById('progress-fill');
+ const progressText = document.getElementById('progress-text');
+ const galleryElement = document.getElementById('gallery');
+
+ if (!uploadForm) return;
+
+ uploadForm.addEventListener('submit', async function(e) {
+ e.preventDefault();
+
+ const files = fileInput.files;
+ if (!files || files.length === 0) {
+ alert('Please select at least one file');
+ return;
+ }
+
+ // Validate file sizes
+ const maxSize = 10 * 1024 * 1024; // 10MB
+ for (let file of files) {
+ if (file.size > maxSize) {
+ alert(`File "${file.name}" exceeds 10MB limit`);
+ return;
+ }
+ }
+
+ // Disable form during upload
+ uploadBtn.disabled = true;
+ fileInput.disabled = true;
+ descriptionInput.disabled = true;
+ progressContainer.style.display = 'block';
+
+ const description = descriptionInput.value;
+ let successCount = 0;
+ let failCount = 0;
+
+ // Upload files sequentially
+ for (let i = 0; i < files.length; i++) {
+ const file = files[i];
+ const progress = Math.round(((i + 1) / files.length) * 100);
+
+ progressFill.style.width = `${progress}%`;
+ progressText.textContent = `Uploading ${i + 1} of ${files.length}: ${file.name}`;
+
+ try {
+ const success = await uploadSingleFile(file, description);
+ if (success) {
+ successCount++;
+ } else {
+ failCount++;
+ }
+ } catch (error) {
+ console.error(`Failed to upload ${file.name}:`, error);
+ failCount++;
+ }
+ }
+
+ // Reset form
+ uploadBtn.disabled = false;
+ fileInput.disabled = false;
+ descriptionInput.disabled = false;
+ progressContainer.style.display = 'none';
+ progressFill.style.width = '0%';
+
+ // Show results
+ if (successCount > 0 && failCount === 0) { }
+ else if (successCount > 0 && failCount > 0) {
+ alert(`Uploaded ${successCount} image(s), but ${failCount} failed.`);
+ } else {
+ alert(`Failed to upload all ${failCount} image(s).`);
+ }
+
+ // Reset form and reload page
+ uploadForm.reset();
+ window.location.reload();
+ });
+
+ async function uploadSingleFile(file, description) {
+ const formData = new FormData();
+ formData.append('UploadedFile', file);
+ if (description) {
+ formData.append('Description', description);
+ }
+
+ // Get anti-forgery token
+ const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
+ formData.append('__RequestVerificationToken', token);
+
+ try {
+ const response = await fetch('/?handler=Add', {
+ method: 'POST',
+ body: formData
+ });
+
+ return response.ok;
+ } catch (error) {
+ console.error('Upload error:', error);
+ return false;
+ }
+ }
+});