Initialer Laravel Commit für BetiX

resources/js/components/auth/RegisterForm.vue

@@ -0,0 +1,567 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { ChevronRight, ChevronLeft, Check, X } from 'lucide-vue-next';
+import { ref, computed, watch, reactive } from 'vue';
+import InputError from '@/components/InputError.vue';
+import Button from '@/components/ui/button.vue';
+import CountrySelect from '@/components/ui/CountrySelect.vue';
+import DatePicker from '@/components/ui/DatePicker.vue';
+import Input from '@/components/ui/input.vue';
+import Label from '@/components/ui/label.vue';
+import Select from '@/components/ui/Select.vue';
+import Spinner from '@/components/ui/spinner.vue';
+import { csrfFetch } from '@/utils/csrfFetch';
+
+const props = defineProps<{
+    onSuccess?: () => void;
+}>();
+
+const form = useForm({
+    username: '',
+    first_name: '',
+    last_name: '',
+    full_name: '',
+    email: '',
+    birthdate: '',
+    gender: '',
+    phone: '',
+    country: '',
+    address_line1: '',
+    address_line2: '',
+    city: '',
+    postal_code: '',
+    currency: 'EUR',
+    password: '',
+    password_confirmation: '',
+    is_adult: false,
+    terms_accepted: false,
+});
+
+const currentStep = ref(1);
+const totalSteps = 4;
+const showPassword = ref(false);
+const showConfirmPassword = ref(false);
+
+const validation = reactive({
+    username: { valid: false, error: '' },
+    first_name: { valid: false, error: '' },
+    last_name: { valid: false, error: '' },
+    email: { valid: false, error: '' },
+    phone: { valid: false, error: '' },
+    birthdate: { valid: false, error: '' },
+    gender: { valid: false, error: '' },
+    address_line1: { valid: false, error: '' },
+    city: { valid: false, error: '' },
+    postal_code: { valid: false, error: '' },
+    password: { valid: false, error: '' },
+    password_confirmation: { valid: false, error: '' },
+});
+
+const availability = reactive({
+    username: { checked: false, checking: false, available: false, error: '' },
+    email: { checked: false, checking: false, available: false, error: '' },
+});
+
+const debounceTimers: Record<string, any> = { username: null, email: null };
+
+const checkAvailability = (field: 'username' | 'email', value: string) => {
+    if (debounceTimers[field]) clearTimeout(debounceTimers[field]);
+
+    if (!value || (field === 'username' && validation.username.error) || (field === 'email' && validation.email.error)) {
+        availability[field].checked = false;
+        availability[field].available = false;
+        availability[field].error = '';
+        return;
+    }
+
+    debounceTimers[field] = setTimeout(async () => {
+        availability[field].checking = true;
+        availability[field].error = '';
+        const currentValue = value;
+
+        try {
+            const url = `/api/auth/availability?field=${field}&value=${encodeURIComponent(currentValue)}`;
+            const res = await csrfFetch(url, {
+                method: 'GET',
+                headers: { 'Accept': 'application/json' }
+            });
+
+            if (form[field] !== currentValue) return;
+
+            const data = await res.json();
+            if (res.ok && data.available) {
+                availability[field].available = true;
+            } else {
+                availability[field].available = false;
+                availability[field].error = data.message || (field === 'username' ? 'Username taken' : 'Email in use');
+            }
+        } catch (error) {
+            console.error('Availability check failed:', error);
+            availability[field].available = false;
+            availability[field].error = 'Error checking availability. Please try again.';
+        } finally {
+            availability[field].checking = false;
+            availability[field].checked = true;
+        }
+    }, 350);
+};
+
+const validateField = (field: string, value: any) => {
+    switch (field) {
+        case 'username':
+            if ((value || '').length < 3) {
+                validation.username = { valid: false, error: 'Min. 3 characters' };
+            } else {
+                validation.username = { valid: true, error: '' };
+                checkAvailability('username', value);
+            }
+            break;
+        case 'email':
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(value || '')) {
+                validation.email = { valid: false, error: 'Invalid email' };
+            } else {
+                validation.email = { valid: true, error: '' };
+                checkAvailability('email', value);
+            }
+            break;
+        case 'password':
+            if ((value || '').length < 8) {
+                validation.password = { valid: false, error: 'Min. 8 characters' };
+            } else {
+                validation.password = { valid: true, error: '' };
+            }
+            break;
+        case 'password_confirmation':
+            if (value !== form.password) {
+                validation.password_confirmation = { valid: false, error: 'Passwords mismatch' };
+            } else {
+                validation.password_confirmation = { valid: true, error: '' };
+            }
+            break;
+        case 'first_name':
+        case 'last_name':
+        case 'city':
+        case 'address_line1':
+        case 'postal_code':
+            validation[field] = (value || '').length > 0
+                ? { valid: true, error: '' }
+                : { valid: false, error: 'Required' };
+            break;
+        case 'phone':
+            validation.phone = (value || '').length > 5
+                ? { valid: true, error: '' }
+                : { valid: false, error: 'Required' };
+            break;
+        case 'birthdate':
+            validation.birthdate = value ? { valid: true, error: '' } : { valid: false, error: 'Required' };
+            break;
+        case 'gender':
+            validation.gender = value ? { valid: true, error: '' } : { valid: false, error: 'Required' };
+            break;
+    }
+};
+
+watch(() => form.username, (v) => validateField('username', v));
+watch(() => form.email, (v) => validateField('email', v));
+watch(() => form.password, (v) => {
+    validateField('password', v);
+    validateField('password_confirmation', form.password_confirmation);
+});
+watch(() => form.password_confirmation, (v) => validateField('password_confirmation', v));
+watch(() => form.first_name, (v) => validateField('first_name', v));
+watch(() => form.last_name, (v) => validateField('last_name', v));
+watch(() => form.city, (v) => validateField('city', v));
+watch(() => form.address_line1, (v) => validateField('address_line1', v));
+watch(() => form.postal_code, (v) => validateField('postal_code', v));
+watch(() => form.phone, (v) => validateField('phone', v));
+watch(() => form.birthdate, (v) => validateField('birthdate', v));
+watch(() => form.gender, (v) => validateField('gender', v));
+
+const step1Valid = computed(() =>
+    validation.username.valid && availability.username.available &&
+    validation.first_name.valid && validation.last_name.valid
+);
+
+const step2Valid = computed(() =>
+    validation.email.valid && availability.email.available &&
+    validation.phone.valid && validation.birthdate.valid && validation.gender.valid
+);
+
+const step3Valid = computed(() =>
+    validation.address_line1.valid && validation.city.valid &&
+    validation.postal_code.valid && form.country && form.currency
+);
+
+const step4Valid = computed(() =>
+    validation.password.valid && validation.password_confirmation.valid &&
+    form.is_adult && form.terms_accepted
+);
+
+const nextStep = () => { if (currentStep.value < totalSteps) currentStep.value++; };
+const prevStep = () => { if (currentStep.value > 1) currentStep.value--; };
+
+const submit = () => {
+    form.post('/register', {
+        onSuccess: () => {
+            if (props.onSuccess) props.onSuccess();
+        },
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+};
+</script>
+
+<template>
+    <div class="register-form-content">
+        <!-- Progress Bar -->
+        <div class="progress-container mb-8">
+            <div class="flex justify-between mb-2">
+                <span class="text-xs font-bold text-[var(--primary, #df006a)] uppercase tracking-wider">Step {{ currentStep }} of {{ totalSteps }}</span>
+                <span class="text-xs font-bold text-[#888] uppercase tracking-wider">{{ Math.round((currentStep / totalSteps) * 100) }}% Complete</span>
+            </div>
+            <div class="progress-track">
+                <div class="progress-fill" :style="{ width: `${(currentStep / totalSteps) * 100}%` }"></div>
+            </div>
+        </div>
+
+        <form @submit.prevent="submit" class="form-content">
+            <!-- Step 1: Basic Info -->
+            <div v-if="currentStep === 1" class="step-container space-y-4">
+                <div class="input-group" :class="{ 'valid': validation.username.valid && availability.username.available, 'invalid': validation.username.error || availability.username.error }">
+                    <Label for="username">Username</Label>
+                    <div class="input-wrapper">
+                        <Input id="username" v-model="form.username" placeholder="CryptoKing" />
+                        <div class="status-icon">
+                            <Spinner v-if="availability.username.checking" class="w-4 h-4" />
+                            <Check v-else-if="availability.username.available && validation.username.valid" class="text-green-500 w-4 h-4" />
+                            <X v-else-if="availability.username.error || validation.username.error" class="text-red-500 w-4 h-4" />
+                        </div>
+                    </div>
+                    <span v-if="availability.username.error" class="text-[10px] text-red-500 mt-1 uppercase font-bold">{{ availability.username.error }}</span>
+                    <InputError :message="form.errors.username" />
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="input-group" :class="{ 'valid': validation.first_name.valid, 'invalid': validation.first_name.error }">
+                        <Label for="first_name">First Name</Label>
+                        <Input id="first_name" v-model="form.first_name" placeholder="John" />
+                        <InputError :message="form.errors.first_name" />
+                    </div>
+                    <div class="input-group" :class="{ 'valid': validation.last_name.valid, 'invalid': validation.last_name.error }">
+                        <Label for="last_name">Last Name</Label>
+                        <Input id="last_name" v-model="form.last_name" placeholder="Doe" />
+                        <InputError :message="form.errors.last_name" />
+                    </div>
+                </div>
+
+                <Button type="button" @click="nextStep" class="w-full mt-4" :disabled="!step1Valid">
+                    NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
+                </Button>
+            </div>
+
+            <!-- Step 2: Contact & Identity -->
+            <div v-if="currentStep === 2" class="step-container space-y-4">
+                <div class="input-group" :class="{ 'valid': validation.email.valid && availability.email.available, 'invalid': validation.email.error || availability.email.error }">
+                    <Label for="email">Email Address</Label>
+                    <div class="input-wrapper">
+                        <Input id="email" type="email" v-model="form.email" placeholder="john@example.com" />
+                        <div class="status-icon">
+                            <Spinner v-if="availability.email.checking" class="w-4 h-4" />
+                            <Check v-else-if="availability.email.available && validation.email.valid" class="text-green-500 w-4 h-4" />
+                            <X v-else-if="availability.email.error || validation.email.error" class="text-red-500 w-4 h-4" />
+                        </div>
+                    </div>
+                    <span v-if="availability.email.error" class="text-[10px] text-red-500 mt-1 uppercase font-bold">{{ availability.email.error }}</span>
+                    <InputError :message="form.errors.email" />
+                </div>
+
+                <div class="input-group" :class="{ 'valid': validation.phone.valid, 'invalid': validation.phone.error }">
+                    <Label for="phone">Phone Number</Label>
+                    <Input id="phone" v-model="form.phone" placeholder="+49 123 456789" />
+                    <InputError :message="form.errors.phone" />
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="input-group">
+                        <Label>Birthdate</Label>
+                        <DatePicker v-model="form.birthdate" />
+                        <InputError :message="form.errors.birthdate" />
+                    </div>
+                    <div class="input-group">
+                        <Label>Gender</Label>
+                        <Select
+                            v-model="form.gender"
+                            :options="[
+                                { label: 'Male', value: 'male', icon: 'user' },
+                                { label: 'Female', value: 'female', icon: 'user' },
+                                { label: 'Other', value: 'other', icon: 'user' }
+                            ]"
+                            placeholder="Select Gender"
+                        />
+                        <InputError :message="form.errors.gender" />
+                    </div>
+                </div>
+
+                <div class="flex gap-4 mt-4">
+                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
+                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
+                    </Button>
+                    <Button type="button" @click="nextStep" class="flex-[2]" :disabled="!step2Valid">
+                        NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Step 3: Address -->
+            <div v-if="currentStep === 3" class="step-container space-y-4">
+                <div class="input-group">
+                    <Label>Country</Label>
+                    <CountrySelect v-model="form.country" />
+                    <InputError :message="form.errors.country" />
+                </div>
+
+                <div class="input-group">
+                    <Label for="address">Address</Label>
+                    <Input id="address" v-model="form.address_line1" placeholder="Main Street 123" />
+                    <InputError :message="form.errors.address_line1" />
+                </div>
+
+                <div class="input-group">
+                    <Label for="address_line2">Address Line 2 (Optional)</Label>
+                    <Input id="address_line2" v-model="form.address_line2" placeholder="Apartment, suite, etc." />
+                    <InputError :message="form.errors.address_line2" />
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="input-group">
+                        <Label for="city">City</Label>
+                        <Input id="city" v-model="form.city" placeholder="Berlin" />
+                        <InputError :message="form.errors.city" />
+                    </div>
+                    <div class="input-group">
+                        <Label for="postal">Postal Code</Label>
+                        <Input id="postal" v-model="form.postal_code" placeholder="10115" />
+                        <InputError :message="form.errors.postal_code" />
+                    </div>
+                </div>
+
+                <div class="input-group">
+                    <Label>Preferred Currency</Label>
+                    <Select
+                        v-model="form.currency"
+                        :options="[
+                            { label: 'EUR - Euro', value: 'EUR', icon: 'euro' },
+                            { label: 'USD - US Dollar', value: 'USD', icon: 'dollar-sign' },
+                            { label: 'BTC - Bitcoin', value: 'BTC', icon: 'bitcoin' }
+                        ]"
+                    />
+                </div>
+
+                <div class="flex gap-4 mt-4">
+                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
+                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
+                    </Button>
+                    <Button type="button" @click="nextStep" class="flex-[2]" :disabled="!step3Valid">
+                        NEXT STEP <ChevronRight class="ml-2 w-4 h-4" />
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Step 4: Security -->
+            <div v-if="currentStep === 4" class="step-container space-y-4">
+                <div class="input-group">
+                    <div class="flex justify-between">
+                        <Label for="password">Password</Label>
+                        <button type="button" @click="showPassword = !showPassword" class="text-xs text-[#888]">{{ showPassword ? 'Hide' : 'Show' }}</button>
+                    </div>
+                    <Input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="Min. 8 characters" />
+                    <InputError :message="form.errors.password" />
+                </div>
+
+                <div class="input-group">
+                    <div class="flex justify-between">
+                        <Label for="password_confirmation">Confirm Password</Label>
+                        <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="text-xs text-[#888]">{{ showConfirmPassword ? 'Hide' : 'Show' }}</button>
+                    </div>
+                    <Input :type="showConfirmPassword ? 'text' : 'password'" v-model="form.password_confirmation" placeholder="Repeat password" />
+                    <InputError :message="form.errors.password_confirmation" />
+                </div>
+
+                <div class="reg-checks">
+                    <InputError :message="form.errors.is_adult" />
+                    <InputError :message="form.errors.terms_accepted" />
+
+                    <label class="reg-check-label" :class="{ 'reg-check-active': form.is_adult }">
+                        <input type="checkbox" v-model="form.is_adult" class="reg-sr-only" />
+                        <span class="reg-box">
+                            <Check :size="11" class="reg-tick" stroke-width="3.5" />
+                        </span>
+                        <span class="reg-check-text">
+                            Ich bestätige, dass ich <strong>18 Jahre oder älter</strong> bin und berechtigt bin, an Online-Spielen teilzunehmen.
+                        </span>
+                    </label>
+
+                    <label class="reg-check-label" :class="{ 'reg-check-active': form.terms_accepted }">
+                        <input type="checkbox" v-model="form.terms_accepted" class="reg-sr-only" />
+                        <span class="reg-box">
+                            <Check :size="11" class="reg-tick" stroke-width="3.5" />
+                        </span>
+                        <span class="reg-check-text">
+                            Ich habe die <a href="/terms" target="_blank" class="reg-link">Nutzungsbedingungen</a> und <a href="/privacy" target="_blank" class="reg-link">Datenschutzerklärung</a> gelesen und akzeptiert.
+                        </span>
+                    </label>
+                </div>
+
+                <div class="flex gap-4 mt-4">
+                    <Button type="button" variant="outline" @click="prevStep" class="flex-1">
+                        <ChevronLeft class="mr-2 w-4 h-4" /> BACK
+                    </Button>
+                    <Button type="submit" class="flex-[2] neon-button" :disabled="form.processing || !step4Valid">
+                        <Spinner v-if="form.processing" class="mr-2 w-4 h-4" />
+                        FINISH REGISTRATION
+                    </Button>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+.progress-track {
+    height: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary, #df006a), #00f2ff);
+    box-shadow: 0 0 10px rgba(223, 0, 106, 0.5);
+    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+.status-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+}
+
+.neon-button {
+    background: linear-gradient(90deg, var(--primary, #df006a), color-mix(in srgb, var(--primary, #df006a) 70%, #000));
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 20px rgba(223, 0, 106, 0.4);
+    transition: all 0.3s ease;
+}
+
+.neon-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 0 40px rgba(223, 0, 106, 0.7);
+}
+
+.valid :deep(input) {
+    border-color: rgba(34, 197, 94, 0.3) !important;
+}
+
+.invalid :deep(input) {
+    border-color: rgba(239, 68, 68, 0.3) !important;
+}
+
+/* ── Custom Checkboxes (Step 4) ─────────────────────────── */
+.reg-checks {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255,255,255,.05);
+}
+
+.reg-sr-only {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden;
+    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+}
+
+.reg-check-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid rgba(255,255,255,.06);
+    background: rgba(255,255,255,.02);
+    cursor: pointer;
+    transition: border-color .2s, background .2s;
+    user-select: none;
+}
+.reg-check-label:hover {
+    border-color: rgba(223,0,106,.2);
+    background: rgba(223,0,106,.03);
+}
+.reg-check-active {
+    border-color: rgba(223,0,106,.3) !important;
+    background: rgba(223,0,106,.05) !important;
+    box-shadow: 0 0 0 1px rgba(223,0,106,.1);
+}
+
+.reg-box {
+    flex-shrink: 0;
+    width: 20px; height: 20px;
+    margin-top: 1px;
+    background: rgba(0,0,0,.4);
+    border: 1.5px solid #2a2a2a;
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    transition: .2s;
+}
+.reg-check-active .reg-box {
+    background: var(--primary, #df006a);
+    border-color: var(--primary, #df006a);
+    box-shadow: 0 0 12px rgba(223,0,106,.4);
+}
+
+.reg-tick {
+    color: #fff;
+    opacity: 0;
+    transform: scale(0);
+    transition: .15s cubic-bezier(.175,.885,.32,1.275);
+}
+.reg-check-active .reg-tick {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.reg-check-text {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.55;
+    transition: color .2s;
+}
+.reg-check-label:hover .reg-check-text,
+.reg-check-active .reg-check-text { color: #aaa; }
+
+.reg-check-text strong { color: #bbb; font-weight: 700; }
+
+.reg-link {
+    color: var(--primary, #df006a);
+    text-decoration: none;
+    font-weight: 600;
+    transition: .15s;
+}
+.reg-link:hover { text-decoration: underline; filter: brightness(1.2); }
+</style>