81 lines
3 KiB
Vue
81 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from "vue";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
import { authClient } from "~~/shared/utils/auth-client";
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes["class"];
|
|
}>();
|
|
|
|
const name = ref("");
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const confirmPassword = ref("");
|
|
|
|
const createAccount = async () => {
|
|
await authClient.signUp.email({
|
|
name: name.value,
|
|
email: email.value,
|
|
password: password.value,
|
|
// callbackURL: "/",
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('flex flex-col gap-6', props.class)">
|
|
<ClientOnly>
|
|
<Card>
|
|
<CardHeader class="text-center">
|
|
<CardTitle class="text-xl">Create your account</CardTitle>
|
|
<CardDescription>Enter your email below to create your account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form autocomplete="off" @submit.prevent="createAccount">
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel for="name">Full Name</FieldLabel>
|
|
<Input id="name" v-model="name" type="text" placeholder="John Doe" required />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="email">Email</FieldLabel>
|
|
<Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
|
|
</Field>
|
|
<Field>
|
|
<Field class="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel for="password">Password</FieldLabel>
|
|
<Input id="password" v-model="password" type="password" required />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="confirm-password">Confirm Password</FieldLabel>
|
|
<Input id="confirm-password" v-model="confirmPassword" type="password" required />
|
|
</Field>
|
|
</Field>
|
|
<FieldDescription>Must be at least 8 characters long.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<Button type="submit">Create Account</Button>
|
|
<FieldDescription class="text-center">
|
|
Already have an account?
|
|
<NuxtLink to="/member/auth/login">
|
|
<Button variant="link">Log in</Button>
|
|
</NuxtLink>
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</ClientOnly>
|
|
<FieldDescription class="px-6 text-center">
|
|
<NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
|
|
<NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
|
|
</FieldDescription>
|
|
</div>
|
|
</template>
|