feat(frontend): Clean-up schemas, remove dead code, move types

This commit is contained in:
2025-10-03 08:44:15 +02:00
parent 17a3a76054
commit 6c88b4fd96
12 changed files with 136 additions and 351 deletions

View File

@@ -9,7 +9,7 @@
</template>
<template #body>
<UForm :state="state" :schema="schema" class="space-y-4" @submit="onSubmit">
<UForm :state="state" :schema="organizationSchema" class="space-y-4" @submit="onCreateOrganizationSubmit">
<UFormField label="Name" name="name">
<UInput v-model="state.name" class="w-full" />
</UFormField>
@@ -33,25 +33,14 @@
</template>
<script setup lang="ts">
import * as z from 'zod'
const emit = defineEmits<{
(e: 'organizationCreated', id: string | undefined): void
}>()
import { organizationSchema, type OrganizationSchema } from '~/types/schemas'
const { createOrganization } = useOrganizationStore()
const open = ref(false)
const loading = ref(false)
const isSlugEdited = ref(false)
type Schema = z.output<typeof schema>
const schema = z.object({
name: z.string().min(2, 'Too short'),
slug: z.string().min(2, 'Too short'),
logo: z.string().optional()
})
const state = reactive<Partial<Schema>>({
const state = reactive<Partial<OrganizationSchema>>({
name: undefined,
slug: undefined,
logo: undefined
@@ -87,13 +76,12 @@ function handleLogoChange(event: Event) {
reader.readAsDataURL(file)
}
async function onSubmit() {
async function onCreateOrganizationSubmit() {
loading.value = true
if (!state.name || !state.slug) return
const organization = await createOrganization(state.name, state.slug, state.logo)
emit('organizationCreated', organization.data?.id)
await createOrganization(state.name, state.slug, state.logo)
loading.value = false
open.value = false
}

View File

@@ -1,80 +0,0 @@
<template>
<div class="form-container">
<h2>Login</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="email-login">Email:</label>
<input id="email-login" v-model="email" type="email" required />
</div>
<div class="form-group">
<label for="password-login">Passwort:</label>
<input id="password-login" v-model="password" type="password" required />
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
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)
}
}
)
}
</script>
<style scoped>
.form-container {
max-width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.form-group {
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 4px;
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>

View File

@@ -1,97 +0,0 @@
<template>
<div class="form-container">
<h2>Registrieren</h2>
<form @submit.prevent="handleRegister">
<div class="form-group">
<label for="username">Benutzername:</label>
<input id="username" v-model="username" type="text" required />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" v-model="email" type="email" required />
</div>
<div class="form-group">
<label for="password">Passwort:</label>
<input id="password" v-model="password" type="password" required />
</div>
<div class="form-group">
<label for="confirmPassword">Passwort bestätigen:</label>
<input id="confirmPassword" v-model="confirmPassword" type="password" required />
</div>
<button type="submit">Registrieren</button>
</form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
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)
}
}
)
}
</script>
<style scoped>
.form-container {
max-width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.form-group {
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 4px;
}
button {
width: 100%;
padding: 10px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}
</style>