SyntaxSquad/DADProject
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into feature/profile-page

Browse Source
This commit is contained in:
AfonsoCMSousa
2025-12-23 17:35:49 +00:00
parent d903f96d57 7d1b769bdb
commit 29fc78c9f5
13 changed files with 841 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/login/LoginPage.vue
+54 -60
View File
@@ -1,55 +1,55 @@
<template>
<div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
Enter your credentials to access your account
</p>
</div>
<div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
Enter your credentials to access your account
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
<div class="space-y-4 rounded-md shadow-sm">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email address
</label>
<Input id="email" v-model="formData.email" type="email" autocomplete="email" required
placeholder="[email protected]" :disabled="isLoading" />
</div>
<form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
<div class="space-y-4 rounded-md shadow-sm">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email address
</label>
<Input id="email" v-model="formData.email" type="email" autocomplete="email" required
placeholder="[email protected]" />
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">
Password
</label>
<Input id="password" v-model="formData.password" type="password" autocomplete="current-password" required
placeholder="••••••••" :disabled="isLoading" />
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">
Password
</label>
<Input id="password" v-model="formData.password" type="password" autocomplete="current-password"
required placeholder="••••••••" />
</div>
</div>
<div>
<Button type="submit" class="w-full"> Sign in </Button>
</div>
<div class="text-center text-sm">
<span class="text-gray-600">Don't have an account? </span>
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">
Sign up
</a>
</div>
</form>
</div>
<div>
<Button type="submit" class="w-full" :disabled="isLoading">
{{ isLoading ? 'Signing in...' : 'Sign in' }}
</Button>
</div>
<div class="text-center text-sm">
<span class="text-gray-600">Don't have an account? </span>
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">
Sign up
</a>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
@@ -58,27 +58,21 @@ const authStore = useAuthStore()
const router = useRouter()
const formData = ref({
email: 'pa@mail.pt',
password: '123'
email: 'pa@mail.pt',
password: '123'
})
const isLoading = ref(false)
const handleSubmit = async () => {
isLoading.value = true
try {
const user = await authStore.login(formData.value)
toast.success(`Login Successful - Welcome ${user?.name}!`)
setTimeout(() => {
router.push('/')
}, 500)
} catch (error) {
toast.error(`Login Failed - ${error?.response?.data?.message || error.message}`)
} finally {
isLoading.value = false
}
const promise = authStore.login(formData.value)
toast.promise(promise, {
loading: 'Calling API',
success: (user) => {
router.push('/')
return `Login Successful - ${user.name}`
},
error: (error) =>
error.response?.data?.message
})
}
</script>
</script>