feat(frontend): Update nuxt-ui, add login, signup, logout
This commit is contained in:
@@ -39,6 +39,10 @@ import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
|
||||
import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
|
||||
import type { FormElementId } from '~/types/FormElement'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth']
|
||||
})
|
||||
|
||||
const { getAllApplicationFormTemplates } = useApplicationFormTemplate()
|
||||
const { createApplicationForm } = useApplicationForm()
|
||||
const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
|
||||
|
||||
@@ -52,6 +52,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth']
|
||||
})
|
||||
|
||||
const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm()
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
@@ -1,45 +1,113 @@
|
||||
<template>
|
||||
<UDashboardPanel id="home">
|
||||
<template #header>
|
||||
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
|
||||
<template #leading>
|
||||
<UDashboardSidebarCollapse />
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UDropdownMenu :items="items">
|
||||
<UButton icon="i-lucide-plus" size="md" class="rounded-full" />
|
||||
</UDropdownMenu>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UDashboardToolbar>
|
||||
<template #left> toolbar left </template>
|
||||
</UDashboardToolbar>
|
||||
<UAuthForm
|
||||
:fields="fields"
|
||||
:schema="schema"
|
||||
:providers="providers"
|
||||
title="Welcome back"
|
||||
icon="i-lucide-lock"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template #description>
|
||||
Don't have an account? <ULink to="/signup" class="text-primary-500 font-medium">Sign up</ULink>.
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div>
|
||||
<pre>{{ session }}</pre>
|
||||
<h1>{{ session.data ? 'Du bist eingeloggt' : 'Nicht eingeloggt' }}</h1>
|
||||
<button v-if="session?.data" @click="authClient.signOut()">Sign out</button>
|
||||
</div>
|
||||
<Register />
|
||||
<Login />
|
||||
<template #password-hint>
|
||||
<ULink to="/" class="text-primary-500 font-medium">Forgot password?</ULink>
|
||||
</template>
|
||||
</UDashboardPanel>
|
||||
|
||||
<template #footer>
|
||||
By signing in, you agree to our <ULink to="/" class="text-primary-500 font-medium">Terms of Service</ULink>.
|
||||
</template>
|
||||
</UAuthForm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const session = authClient.useSession()
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
label: 'Neuer Mitbestimmungsantrag',
|
||||
icon: 'i-lucide-send',
|
||||
to: '/create'
|
||||
}
|
||||
]
|
||||
definePageMeta({ layout: 'auth' })
|
||||
|
||||
useSeoMeta({ title: 'Login' })
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const fields = [
|
||||
{
|
||||
name: 'email',
|
||||
type: 'text' as const,
|
||||
label: 'Email',
|
||||
placeholder: 'Enter your email',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'password',
|
||||
label: 'Password',
|
||||
type: 'password' as const,
|
||||
placeholder: 'Enter your password'
|
||||
},
|
||||
{
|
||||
name: 'remember',
|
||||
label: 'Remember me',
|
||||
type: 'checkbox' as const
|
||||
}
|
||||
]
|
||||
|
||||
const providers = [
|
||||
{
|
||||
label: 'Google',
|
||||
icon: 'i-simple-icons-google',
|
||||
onClick: () => {
|
||||
toast.add({ title: 'Google', description: 'Login with Google' })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
icon: 'i-simple-icons-github',
|
||||
onClick: () => {
|
||||
toast.add({ title: 'GitHub', description: 'Login with GitHub' })
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email('Invalid email'),
|
||||
password: z.string().min(8, 'Must be at least 8 characters')
|
||||
})
|
||||
|
||||
type Schema = z.output<typeof schema>
|
||||
|
||||
function onSubmit(payload: FormSubmitEvent<Schema>) {
|
||||
if (!payload.data.email || !payload.data.password) {
|
||||
alert('Bitte alle Felder ausfüllen')
|
||||
return
|
||||
}
|
||||
authClient.signIn.email(
|
||||
{
|
||||
email: payload.data.email,
|
||||
password: payload.data.password
|
||||
},
|
||||
{
|
||||
onRequest: () => {
|
||||
// TODO: Show loading spinner
|
||||
console.log('Sending login request')
|
||||
},
|
||||
onResponse: () => {
|
||||
// TODO: Hide loading spinner
|
||||
console.log('Receiving login response')
|
||||
},
|
||||
onSuccess: async (ctx) => {
|
||||
console.log('Successfully logged in!', ctx)
|
||||
await navigateTo('/')
|
||||
},
|
||||
onError: (ctx) => {
|
||||
console.log(ctx.error.message)
|
||||
useToast().add({
|
||||
title: 'Fehler bei der Anmeldung',
|
||||
description: ctx.error.message,
|
||||
color: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
107
legalconsenthub/pages/signup.vue
Normal file
107
legalconsenthub/pages/signup.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<UAuthForm
|
||||
:fields="fields"
|
||||
:schema="schema"
|
||||
:providers="providers"
|
||||
title="Create an account"
|
||||
:submit="{ label: 'Create account' }"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template #description>
|
||||
Already have an account? <ULink to="/login" class="text-primary-500 font-medium">Login</ULink>.
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
By signing up, you agree to our <ULink to="/" class="text-primary-500 font-medium">Terms of Service</ULink>.
|
||||
</template>
|
||||
</UAuthForm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
|
||||
definePageMeta({ layout: 'auth' })
|
||||
|
||||
useSeoMeta({ title: 'Sign up' })
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const fields = [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text' as const,
|
||||
label: 'Name',
|
||||
placeholder: 'Enter your name'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
type: 'text' as const,
|
||||
label: 'Email',
|
||||
placeholder: 'Enter your email'
|
||||
},
|
||||
{
|
||||
name: 'password',
|
||||
label: 'Password',
|
||||
type: 'password' as const,
|
||||
placeholder: 'Enter your password'
|
||||
}
|
||||
]
|
||||
|
||||
const providers = [
|
||||
{
|
||||
label: 'Google',
|
||||
icon: 'i-simple-icons-google',
|
||||
onClick: () => {
|
||||
toast.add({ title: 'Google', description: 'Login with Google' })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
icon: 'i-simple-icons-github',
|
||||
onClick: () => {
|
||||
toast.add({ title: 'GitHub', description: 'Login with GitHub' })
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, 'Name is required'),
|
||||
email: z.string().email('Invalid email'),
|
||||
password: z.string().min(8, 'Must be at least 8 characters')
|
||||
})
|
||||
|
||||
type Schema = z.output<typeof schema>
|
||||
|
||||
function onSubmit(payload: FormSubmitEvent<Schema>) {
|
||||
signUp.email(
|
||||
{
|
||||
email: payload.data.email,
|
||||
password: payload.data.password,
|
||||
name: payload.data.name
|
||||
},
|
||||
{
|
||||
onRequest: () => {
|
||||
// TODO: Show loading spinner
|
||||
console.log('Sending register request')
|
||||
},
|
||||
onResponse: () => {
|
||||
// TODO: Hide loading spinner
|
||||
console.log('Receiving register response')
|
||||
},
|
||||
onSuccess: async () => {
|
||||
console.log('Successfully registered!')
|
||||
await navigateTo('/')
|
||||
},
|
||||
onError: (ctx) => {
|
||||
console.log(ctx.error.message)
|
||||
useToast().add({
|
||||
title: 'Fehler bei der Registrierung',
|
||||
description: ctx.error.message,
|
||||
color: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user