jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(auth): change background color of card in ForgotPasswordView.vue

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-05-12 22:33:31 -04:00
parent 47f2f3cf00
commit 5908f5d21f
1 changed files with 57 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/views/ForgotPasswordView.vue
View File

@@ -4,42 +4,44 @@
<h1 class="text-2xl font-bold text-center"> <h1 class="text-2xl font-bold text-center">
{{ t('title') }} {{ t('title') }}
</h1> </h1>
<p class="text-center text-gray-600 dark:text-gray-400"> <p class="text-center text-hOnSurface">
{{ t('description') }} {{ t('description') }}
</p> </p>
<form @submit.prevent="handleForgotPassword" class="card"> <div class="card">
<div class="card-content"> <form @submit.prevent="handleForgotPassword">
<div class="flex flex-col gap-4"> <div class="card-content">
<div class="form-field"> <div class="flex flex-col gap-4">
<label for="email" class="form-label">{{ t('email') }}</label> <div class="form-field">
<input <label for="email" class="form-label">{{ t('email') }}</label>
id="email" <input
v-model="email" id="email"
type="email" v-model="email"
class="form-input" type="email"
required class="form-input"
/> required
</div> />
</div>
<button <button
type="submit" type="submit"
class="primary w-full" class="primary w-full"
:disabled="isLoading" :disabled="isLoading"
> >
<span v-if="isLoading" class="loading-spinner mr-2"></span> <span v-if="isLoading" class="loading-spinner mr-2"></span>
{{ t('resetPassword') }} {{ t('resetPassword') }}
</button> </button>
<div class="text-center mt-4"> <div class="text-center mt-4">
<router-link to="/login" class="text-sm text-blue-500"> <router-link to="/login" class="text-sm text-blue-500">
{{ t('backToLogin') }} {{ t('backToLogin') }}
</router-link> </router-link>
</div>
</div> </div>
</div> </div>
</div> </form>
</form> </div>
<!-- Success message --> <!-- Success message -->
<div v-if="showSuccessMessage" class="notification success"> <div v-if="showSuccessMessage" class="notification success">
@@ -55,12 +57,12 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import {ref} from 'vue';
import { useI18n } from 'vue-i18n'; import {useI18n} from 'vue-i18n';
import { useRouter } from 'vue-router'; import {useRouter} from 'vue-router';
import { useClient } from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
const { t } = useI18n(); const {t} = useI18n();
const router = useRouter(); const router = useRouter();
const clientApi = useClient(); const clientApi = useClient();
@@ -74,7 +76,7 @@ async function handleForgotPassword() {
// Reset notification states // Reset notification states
showSuccessMessage.value = false; showSuccessMessage.value = false;
showErrorMessage.value = false; showErrorMessage.value = false;
if (!email.value) { if (!email.value) {
errorMessage.value = t('emailRequired'); errorMessage.value = t('emailRequired');
showErrorMessage.value = true; showErrorMessage.value = true;
@@ -91,10 +93,10 @@ async function handleForgotPassword() {
// Show success message // Show success message
showSuccessMessage.value = true; showSuccessMessage.value = true;
// Clear the form // Clear the form
email.value = ''; email.value = '';
// Redirect to login after a short delay // Redirect to login after a short delay
setTimeout(() => { setTimeout(() => {
router.push('/login'); router.push('/login');
@@ -110,10 +112,6 @@ async function handleForgotPassword() {
</script> </script>
<style scoped> <style scoped>
.card {
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden;
}
.card-content { .card-content {
@apply p-6; @apply p-6;
} }
@@ -127,14 +125,14 @@ async function handleForgotPassword() {
} }
.form-input { .form-input {
@apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
dark:bg-gray-700 dark:border-gray-600 dark:text-white; dark:bg-gray-700 dark:border-gray-600 dark:text-white;
} }
.primary { .primary {
@apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5 @apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5
focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed; focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed;
} }
.notification { .notification {
@@ -155,13 +153,23 @@ async function handleForgotPassword() {
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(10px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes fade-out { @keyframes fade-out {
from { opacity: 1; } from {
to { opacity: 0; } opacity: 1;
}
to {
opacity: 0;
}
} }
</style> </style>