feat(frontend): Clean-up schemas, remove dead code, move types
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user