feat(frontend): Install nuxt-ui, eslint, prettier, reformat whole code

This commit is contained in:
2025-02-21 10:51:29 +01:00
parent e7557ce2e2
commit d6effcd1d5
16 changed files with 8131 additions and 2113 deletions

View File

@@ -1,77 +1,85 @@
<template>
<div class="form-container">
<h2>Login</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="email-login">Email:</label>
<input type="email" id="email-login" v-model="email" required />
</div>
<div class="form-container">
<h2>Login</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="email-login">Email:</label>
<input type="email" id="email-login" v-model="email" required />
</div>
<div class="form-group">
<label for="password-login">Passwort:</label>
<input type="password" id="password-login" v-model="password" required />
</div>
<div class="form-group">
<label for="password-login">Passwort:</label>
<input
type="password"
id="password-login"
v-model="password"
required
/>
</div>
<button type="submit">Login</button>
</form>
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ref } from "vue";
const email = ref('');
const password = ref('');
const email = ref("");
const password = ref("");
const handleLogin = () => {
if (!email.value || !password.value) {
alert('Bitte alle Felder ausfüllen');
return;
}
authClient.signIn.email({
email: email.value,
password: password.value
}, {
onRequest: (ctx) => {
console.log("Sending login request", ctx)
},
onSuccess: (ctx) => {
console.log("Successfully logged in!")
},
onError: (ctx) => {
console.log(ctx.error.message);
},
});
if (!email.value || !password.value) {
alert("Bitte alle Felder ausfüllen");
return;
}
authClient.signIn.email(
{
email: email.value,
password: password.value,
},
{
onRequest: (ctx) => {
console.log("Sending login request", ctx);
},
onSuccess: (ctx) => {
console.log("Successfully logged in!");
},
onError: (ctx) => {
console.log(ctx.error.message);
},
},
);
};
</script>
<style scoped>
.form-container {
max-width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
max-width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.form-group {
margin-bottom: 10px;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 4px;
width: 100%;
padding: 8px;
margin-top: 4px;
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
background: #0056b3;
}
</style>