feat: fixed admin page, settings on user
This commit is contained in:
AfonsoCMSousa
+128
-18
@@ -427,17 +427,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="userProfile.publications.length === 0" class="...">
|
||||
<div v-if="userProfile.publications.length === 0 && !loading"
|
||||
class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
|
||||
|
||||
<div
|
||||
class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">No
|
||||
publications yet</h3>
|
||||
<button @click="goToCreatePost()"
|
||||
class="mt-4 inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all cursor-pointer">
|
||||
Submit your first paper
|
||||
</button>
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<div
|
||||
class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
|
||||
<svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
|
||||
No publications yet
|
||||
</h3>
|
||||
|
||||
<button
|
||||
class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
|
||||
@click="isModalOpen = true">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Submit your first post
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -585,13 +603,67 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="activeTab === 'settings'" key="settings"
|
||||
class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2
|
||||
class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
|
||||
Settings</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
Nothing here but chickens! Settings coming soon.
|
||||
</p>
|
||||
class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-5 border-b border-slate-200 dark:border-slate-800">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Edit Profile
|
||||
</h2>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
|
||||
Update your personal information and account details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<div>
|
||||
<label for="name"
|
||||
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
Name
|
||||
</label>
|
||||
<input id="name" type="text" v-model="newUsername"
|
||||
placeholder="Your first name and last name" class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
|
||||
border border-slate-300 dark:border-slate-700
|
||||
rounded-xl text-slate-900 dark:text-white
|
||||
placeholder-slate-400
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
outline-none transition-all" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email"
|
||||
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
Email address
|
||||
</label>
|
||||
<input id="email" type="email" v-model="newEmail" placeholder="[email protected]"
|
||||
class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
|
||||
border border-slate-300 dark:border-slate-700
|
||||
rounded-xl text-slate-900 dark:text-white
|
||||
placeholder-slate-400
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
outline-none transition-all" />
|
||||
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
Dont worry, Your email is going to be sold to russian hackers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a @click="openResetPassword" class="text-sm text-red dark:text-red-600 hover:underline">
|
||||
Reset Password
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Footer / Actions -->
|
||||
<div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50
|
||||
border-t border-slate-200 dark:border-slate-800
|
||||
flex justify-end">
|
||||
<button @click="updateProfile" class="inline-flex items-center gap-2
|
||||
bg-blue-600 hover:bg-blue-700
|
||||
text-white font-semibold
|
||||
px-6 py-2.5 rounded-xl
|
||||
shadow-sm transition-all
|
||||
active:scale-95">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
@@ -625,6 +697,9 @@ const page = ref(1);
|
||||
const selectedPost = ref(null);
|
||||
const newCommentContent = ref('');
|
||||
|
||||
const newUsername = ref('');
|
||||
const newEmail = ref('');
|
||||
|
||||
interface Tag {
|
||||
id: number;
|
||||
name: string;
|
||||
@@ -668,8 +743,6 @@ const userProfile = ref({
|
||||
role: '',
|
||||
is_active: false,
|
||||
avatarUrl: '',
|
||||
biography: 'No biography provided.',
|
||||
joinDate: new Date().toISOString(),
|
||||
publications: [] as any[]
|
||||
});
|
||||
|
||||
@@ -870,6 +943,39 @@ const confirmHide = async (post) => {
|
||||
}
|
||||
};
|
||||
|
||||
const updateProfile = async () => {
|
||||
if (!token.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const name = newUsername.value.trim();
|
||||
const email = newEmail.value.trim();
|
||||
|
||||
if (name.length === 0 || email.length === 0) {
|
||||
alert("Name and email cannot be empty.");
|
||||
return;
|
||||
}
|
||||
|
||||
await $fetch(`${api}/users/me`, {
|
||||
method: 'PATCH',
|
||||
headers: { Authorization: `Bearer ${token.value}` },
|
||||
body: {
|
||||
name: name,
|
||||
email: email
|
||||
}
|
||||
});
|
||||
alert("Profile updated successfully. Please log in again.");
|
||||
authStore.logout();
|
||||
|
||||
} catch (error) {
|
||||
console.error("Profile update failed", error);
|
||||
alert("Failed to update profile.");
|
||||
}
|
||||
|
||||
fetchProfileData();
|
||||
};
|
||||
|
||||
// --- Redirects ---
|
||||
const goToCreatePost = () => {
|
||||
console.log("Navigating to create post modal...");
|
||||
@@ -879,6 +985,10 @@ const goToCreatePost = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const openResetPassword = () => {
|
||||
router.push({ path: '/profile/update-password' });
|
||||
};
|
||||
|
||||
// --- Lifecycle ---
|
||||
onMounted(() => {
|
||||
fetchProfileData();
|
||||
|
||||
Reference in New Issue
Block a user