feat(frontend): Install nuxt-ui, eslint, prettier, reformat whole code
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user