Kevin
99 lines
3.8 KiB
Vue
99 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Link } from '@adonisjs/inertia/vue'
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import EmptyLayout from '~/pages/layout/emptyLayout.vue'
|
|
|
|
defineOptions({ layout: EmptyLayout })
|
|
|
|
const form = useForm({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
passwordConfirmation: '',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
|
|
<div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
|
|
<div class="flex flex-col items-center justify-center mb-8">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
|
|
<p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
|
|
</div>
|
|
|
|
<Form route="new_account.store" #default="{ processing }">
|
|
<div class="space-y-4 sm:space-y-6">
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
|
|
<input
|
|
v-model="form.name"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="name"
|
|
type="text"
|
|
placeholder="Enter your full name"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
|
|
<input
|
|
v-model="form.email"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
|
|
<input
|
|
v-model="form.password"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
|
|
<input
|
|
v-model="form.passwordConfirmation"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="passwordConfirmation"
|
|
type="password"
|
|
placeholder="Confirm your password"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="processing"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{{ processing ? 'Creating account...' : 'Sign Up' }}
|
|
</button>
|
|
|
|
<div class="text-center mt-4">
|
|
<p class="text-sm text-gray-600">
|
|
Already have an account?
|
|
<Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
|
|
Login
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</template>
|