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,94 +1,107 @@
<template>
<div class="form-container">
<h2>Registrieren</h2>
<form @submit.prevent="handleRegister">
<div class="form-group">
<label for="username">Benutzername:</label>
<input type="text" id="username" v-model="username" required />
</div>
<div class="form-container">
<h2>Registrieren</h2>
<form @submit.prevent="handleRegister">
<div class="form-group">
<label for="username">Benutzername:</label>
<input type="text" id="username" v-model="username" required />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required />
</div>
<div class="form-group">
<label for="password">Passwort:</label>
<input type="password" id="password" v-model="password" required />
</div>
<div class="form-group">
<label for="password">Passwort:</label>
<input type="password" id="password" v-model="password" required />
</div>
<div class="form-group">
<label for="confirmPassword">Passwort bestätigen:</label>
<input type="password" id="confirmPassword" v-model="confirmPassword" required />
</div>
<div class="form-group">
<label for="confirmPassword">Passwort bestätigen:</label>
<input
type="password"
id="confirmPassword"
v-model="confirmPassword"
required
/>
</div>
<button type="submit">Registrieren</button>
</form>
</div>
<button type="submit">Registrieren</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ref } from "vue";
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const username = ref("");
const email = ref("");
const password = ref("");
const confirmPassword = ref("");
const handleRegister = () => {
if (!username.value || !email.value || !password.value || !confirmPassword.value) {
alert('Bitte alle Felder ausfüllen');
return;
}
if (password.value !== confirmPassword.value) {
alert('Passwörter stimmen nicht überein');
return;
}
authClient.signUp.email({
email: email.value,
password: password.value,
name: username.value
}, {
onRequest: (ctx) => {
console.log("Sending register request", ctx)
},
onSuccess: (ctx) => {
console.log("Successfully registered!")
},
onError: (ctx) => {
console.log(ctx.error.message);
},
});
if (
!username.value ||
!email.value ||
!password.value ||
!confirmPassword.value
) {
alert("Bitte alle Felder ausfüllen");
return;
}
if (password.value !== confirmPassword.value) {
alert("Passwörter stimmen nicht überein");
return;
}
authClient.signUp.email(
{
email: email.value,
password: password.value,
name: username.value,
},
{
onRequest: (ctx) => {
console.log("Sending register request", ctx);
},
onSuccess: (ctx) => {
console.log("Successfully registered!");
},
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: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
padding: 10px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
background: #218838;
}
</style>