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

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>