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

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

@@ -5,41 +5,43 @@
{{ t('title') }}
</h1>
<p class="text-center text-gray-600 dark:text-gray-400">
<p class="text-center text-hOnSurface">
{{ t('description') }}
</p>
<form @submit.prevent="handleForgotPassword" class="card">
<div class="card-content">
<div class="flex flex-col gap-4">
<div class="form-field">
<label for="email" class="form-label">{{ t('email') }}</label>
<input
id="email"
v-model="email"
type="email"
class="form-input"
required
/>
</div>
<div class="card">
<form @submit.prevent="handleForgotPassword">
<div class="card-content">
<div class="flex flex-col gap-4">
<div class="form-field">
<label for="email" class="form-label">{{ t('email') }}</label>
<input
id="email"
v-model="email"
type="email"
class="form-input"
required
/>
</div>
<button
type="submit"
class="primary w-full"
:disabled="isLoading"
>
<span v-if="isLoading" class="loading-spinner mr-2"></span>
{{ t('resetPassword') }}
</button>
<button
type="submit"
class="primary w-full"
:disabled="isLoading"
>
<span v-if="isLoading" class="loading-spinner mr-2"></span>
{{ t('resetPassword') }}
</button>
<div class="text-center mt-4">
<router-link to="/login" class="text-sm text-blue-500">
{{ t('backToLogin') }}
</router-link>
<div class="text-center mt-4">
<router-link to="/login" class="text-sm text-blue-500">
{{ t('backToLogin') }}
</router-link>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
<!-- Success message -->
<div v-if="showSuccessMessage" class="notification success">
@@ -55,12 +57,12 @@
</template>
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useClient } from '@/plugins/api.js';
import {ref} from 'vue';
import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';
import {useClient} from '@/plugins/api.js';
const { t } = useI18n();
const {t} = useI18n();
const router = useRouter();
const clientApi = useClient();
@@ -110,10 +112,6 @@ async function handleForgotPassword() {
</script>
<style scoped>
.card {
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden;
}
.card-content {
@apply p-6;
}
@@ -128,13 +126,13 @@ async function handleForgotPassword() {
.form-input {
@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
dark:bg-gray-700 dark:border-gray-600 dark:text-white;
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;
}
.primary {
@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 {
@@ -155,13 +153,23 @@ async function handleForgotPassword() {
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>