tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added error handling and cleaned up styles

Browse source
This commit is contained in:
Edward Tirado Jr 2026-04-10 18:10:01 -05:00
parent 21c3d42d90
commit 93c60498d0
6 changed files with 137 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/components/forms/auth/login-form.vue
View file

@ -1,9 +1,19 @@
<script lang="ts" setup>
import incorrectPasswordGif from '~/assets/img/incorrect-password.gif';
const email = ref("");
const password = ref("");
const {login} = useAuth();
const handleLogin = () => login(email.value, password.value)
const errorMessage = ref("");
const handleLogin = async () => {
try {
await login(email.value, password.value)
} catch (error) {
errorMessage.value = "Invalid email or password";
}
}
</script>
<template>
@ -29,10 +39,22 @@ const handleLogin = () => login(email.value, password.value)
</div>
<button type="submit">Submit</button>
<div class="error-container">
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
<img v-if="errorMessage" :src="incorrectPasswordGif" alt="You didn't say the magic word." class="error-image"
height="200" width="300"/>
</div>
</form>
</template>
<style scoped>
.error-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.password-form {
display: flex;
flex-direction: column;
@ -46,4 +68,9 @@ const handleLogin = () => login(email.value, password.value)
flex-direction: column;
gap: 1rem;
}
.error-message {
color: red;
text-align: center;
}
</style>

36
app/components/forms/auth/registration-form.vue
View file

@ -5,27 +5,36 @@ const {register} = useAuth();
const username = ref("");
const email = ref("");
const errorMessage = ref("");
const handleRegistration = () => {
register(email.value, username.value);
const handleRegistration = async () => {
try {
await register(email.value, username.value);
} catch (error: any) {
console.error(error);
errorMessage.value = error.message;
}
}
</script>
<template>
<form class="password-form" @submit.prevent="handleRegistration">
<div class="form-group">
<label for="username">Username</label>
<input id="username" v-model="username" type="text"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" v-model="email" type="email"/>
</div>
<div class="form-group">
<label for="username">Username</label>
<input id="username" v-model="username" type="text"/>
</div>
<button type="submit">Submit</button>
</form>
<div class="error-container">
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
</div>
</template>
<style scoped>
@ -42,4 +51,17 @@ const handleRegistration = () => {
flex-direction: column;
gap: 1rem;
}
.error-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.error-message {
color: red;
text-align: center;
}
</style>