-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlogin.vue
80 lines (72 loc) · 1.91 KB
/
login.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script setup lang="ts">
definePageMeta({
layout: 'auth'
})
useSeoMeta({
title: 'Login'
})
const fields = [{
name: 'email',
type: 'text',
label: 'Email',
placeholder: 'Enter your email'
}, {
name: 'password',
label: 'Password',
type: 'password',
placeholder: 'Enter your password'
}]
const validate = (state: any) => {
const errors = []
if (!state.email) errors.push({ path: 'email', message: 'Email is required' })
if (!state.password) errors.push({ path: 'password', message: 'Password is required' })
return errors
}
const providers = [{
label: 'Continue with GitHub',
icon: 'i-simple-icons-github',
color: 'white' as const,
click: () => {
console.log('Redirect to GitHub')
}
}]
function onSubmit(data: any) {
console.log('Submitted', data)
}
</script>
<!-- eslint-disable vue/multiline-html-element-content-newline -->
<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
<UCard class="max-w-sm w-full bg-white/75 dark:bg-white/5 backdrop-blur">
<UAuthForm
:fields="fields"
:validate="validate"
:providers="providers"
title="Welcome back"
align="top"
icon="i-heroicons-lock-closed"
:ui="{ base: 'text-center', footer: 'text-center' }"
:submit-button="{ trailingIcon: 'i-heroicons-arrow-right-20-solid' }"
@submit="onSubmit"
>
<template #description>
Don't have an account? <NuxtLink
to="/signup"
class="text-primary font-medium"
>Sign up</NuxtLink>.
</template>
<template #password-hint>
<NuxtLink
to="/"
class="text-primary font-medium"
>Forgot password?</NuxtLink>
</template>
<template #footer>
By signing in, you agree to our <NuxtLink
to="/"
class="text-primary font-medium"
>Terms of Service</NuxtLink>.
</template>
</UAuthForm>
</UCard>
</template>