home-page functionality, and some design tweaks

This commit is contained in:
Edd
2026-01-21 02:03:12 +00:00
parent 56844c9188
commit 0fade43944
12 changed files with 889 additions and 170 deletions
+3 -3
View File
@@ -57,7 +57,7 @@ async function handleResetRequest() {
<div
class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100! mb-8 text-center">Reset Password</h1>
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Reset Password</h1>
<form class="space-y-6" @submit.prevent="handleResetRequest">
<div>
@@ -69,7 +69,7 @@ async function handleResetRequest() {
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
error ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
]" placeholder="[email protected]">
<p v-if="error" class="mt-1.5 text-xs text-red-500! ml-1 font-medium">{{ error }}</p>
<p v-if="error" class="mt-1.5 text-xs text-red-500 ml-1 font-medium">{{ error }}</p>
</div>
<div class="flex flex-col items-center gap-4 pt-2">
@@ -87,4 +87,4 @@ async function handleResetRequest() {
</div>
</Transition>
</div>
</template>
</template>
+4 -5
View File
@@ -1,5 +1,4 @@
<template>
<title> Login - Reddit for Academic Papers</title>
<div
class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
<Transition appear enter-active-class="transition duration-700 ease-out" enter-from-class="translate-y-8 opacity-0"
@@ -7,7 +6,7 @@
<div
class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white! mb-8 text-center capitalize">Login</h1>
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center capitalize">Login</h1>
<div v-if="globalError"
class="mb-6 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm text-center">
@@ -21,7 +20,7 @@
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
errors.email ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
]" placeholder="[email protected]">
<p v-if="errors.email" class="mt-1 text-xs text-red-500! ml-1">{{ errors.email }}</p>
<p v-if="errors.email" class="mt-1 text-xs text-red-500 ml-1">{{ errors.email }}</p>
</div>
<div>
@@ -30,7 +29,7 @@
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
errors.password ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
]" placeholder="••••••••" @keyup.enter="handleLogin">
<p v-if="errors.password" class="mt-1 text-xs text-red-500! ml-1">{{ errors.password }}</p>
<p v-if="errors.password" class="mt-1 text-xs text-red-500 ml-1">{{ errors.password }}</p>
</div>
<div class="flex flex-col items-center gap-4 pt-2">
@@ -139,4 +138,4 @@ async function handleLogin() {
animation-delay: 0.2s;
opacity: 0;
}
</style>
</style>