Initial commit: PC Builder AdonisJS project

inertia/pages/account/signup.vue

@@ -0,0 +1,98 @@
+<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({
+  fullName: '',
+  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="account.signup" #default="{ processing, errors }">
+        <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.fullName"
+                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="fullName"
+                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="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
+                Login
+              </Link>
+            </p>
+          </div>
+        </div>
+      </Form>
+    </div>
+  </div>
+</template>