Initial commit
This commit is contained in:
Ronald Huynen
211
resources/views/livewire/registration.blade.php
Normal file
211
resources/views/livewire/registration.blade.php
Normal file
@@ -0,0 +1,211 @@
|
||||
<div>
|
||||
<!-- Principles Acceptance Modal - Only render if principles post exists -->
|
||||
@if($principlesPost && $principlesPost->translations->isNotEmpty())
|
||||
<x-jetstream.dialog-modal wire:model.live="showPrinciplesModal" maxWidth="4xl">
|
||||
<x-slot name="title">
|
||||
{{ __('Read this before you decide to register') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
@php
|
||||
$translation = $principlesPost->translations->first();
|
||||
@endphp
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Title -->
|
||||
@if($translation->title)
|
||||
<h3 class="text-2xl font-semibold text-theme-primary">{{ $translation->title }}</h3>
|
||||
@endif
|
||||
|
||||
<!-- Excerpt -->
|
||||
@if($translation->excerpt)
|
||||
<p class="text-base leading-relaxed text-theme-secondary">{{ $translation->excerpt }}</p>
|
||||
@endif
|
||||
|
||||
<!-- Image -->
|
||||
@if($principlesPost->hasMedia('*'))
|
||||
<img src="{{ $principlesPost->getFirstMediaUrl('*') }}"
|
||||
alt="{{ $principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale) }}"
|
||||
class="w-full h-auto rounded-md">
|
||||
@if($principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale))
|
||||
<p class="text-sm text-theme-muted">
|
||||
{{ $principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale) }}
|
||||
</p>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<!-- Content -->
|
||||
@if($translation->content && strlen(trim(strip_tags($translation->content))) > 0)
|
||||
<div class="prose max-w-none text-theme-primary">
|
||||
{!! \App\Helpers\StringHelper::sanitizeHtml($translation->content) !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Acceptance Checkbox -->
|
||||
<div class="mt-6 border-t pt-6">
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<x-jetstream.checkbox wire:model="principlesAgreed" />
|
||||
<span class="text-theme-primary">
|
||||
{{ __('I have read and accept the platform principles described above.') }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="footer">
|
||||
<div class="flex justify-end" x-data="{ agreed: @entangle('principlesAgreed') }">
|
||||
<x-jetstream.button
|
||||
wire:click="acceptPrinciples"
|
||||
x-bind:disabled="!agreed"
|
||||
wire:loading.attr="disabled">
|
||||
<span wire:loading.remove wire:target="acceptPrinciples">
|
||||
{{ __('Accept Principles') }}
|
||||
</span>
|
||||
<span wire:loading wire:target="acceptPrinciples">
|
||||
{{ __('Processing...') }}
|
||||
</span>
|
||||
</x-jetstream.button>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-jetstream.dialog-modal>
|
||||
@endif
|
||||
|
||||
<!-- Registration Form Modal -->
|
||||
<x-jetstream.dialog-modal wire:model.live="principlesAccepted" maxWidth="2xl">
|
||||
<x-slot name="title">
|
||||
{{ __('Register') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
|
||||
<form wire:submit="create">
|
||||
@csrf
|
||||
|
||||
<div class="space-y-4 max-w-md">
|
||||
<div>
|
||||
<x-jetstream.label for="full_name" value="{{ __('Full name') }}" />
|
||||
<x-jetstream.input :value="old('full_name')" autocomplete="name" autofocus
|
||||
placeholder="{{__('Your real, full name, only visible for') . ' ' . __('messages.platform_users')}}"
|
||||
class="mt-1 block w-full" name="full_name" required
|
||||
type="text" wire:model.blur="full_name" />
|
||||
@error('full_name')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-jetstream.label for="name" value="{{ __('Username') }}" />
|
||||
<x-jetstream.input :value="old('name')" autocomplete="username"
|
||||
placeholder="{{__('Unique and public name, also used outside this platform')}}"
|
||||
class="mt-1 block w-full" name="name" required
|
||||
type="text" wire:model.blur="name" />
|
||||
@error('name')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-jetstream.label for="email" value="{{ __('Email') }}" />
|
||||
<x-jetstream.input :value="old('email')" class="mt-1 block w-full" name="email" required
|
||||
type="email" wire:model.blur="email" />
|
||||
@error('email')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div x-data="{ showPassword: false }">
|
||||
<x-jetstream.label for="password" value="{{ __('Password') }}" />
|
||||
<div class="relative">
|
||||
<x-jetstream.input autocomplete="new-password" class="mt-1 block w-full pr-10"
|
||||
name="password" required ::type="showPassword ? 'text' : 'password'"
|
||||
wire:model.blur="password" />
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
|
||||
<button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
|
||||
<template x-if="!showPassword">
|
||||
<x-icon name="eye" class="h-5 w-5" />
|
||||
</template>
|
||||
<template x-if="showPassword">
|
||||
<x-icon name="eye-slash" class="h-5 w-5" />
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="{ showPassword: false }">
|
||||
<x-jetstream.label for="password_confirmation" value="{{ __('Confirm Password') }}" />
|
||||
<div class="relative">
|
||||
<x-jetstream.input class="mt-1 block w-full pr-10" name="passwordConfirmation" required
|
||||
::type="showPassword ? 'text' : 'password'" wire:model.blur="password_confirmation" />
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
|
||||
<button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
|
||||
<template x-if="!showPassword">
|
||||
<x-icon name="eye" class="h-5 w-5" />
|
||||
</template>
|
||||
<template x-if="showPassword">
|
||||
<x-icon name="eye-slash" class="h-5 w-5" />
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div wire:init="emitLocationToChildren">
|
||||
@livewire('locations.locations-dropdown')
|
||||
@error('country')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('division')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('city')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- GDPR Age Verification -->
|
||||
<div class="border-t pt-4">
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<x-jetstream.checkbox wire:model="ageConfirmed" required />
|
||||
<span class="text-sm text-theme-primary">
|
||||
{{ __('I confirm that I am at least :age years old (or the age of digital consent in my country)', ['age' => timebank_config('auth.minimum_registration_age')]) }}
|
||||
</span>
|
||||
</label>
|
||||
@error('ageConfirmed')
|
||||
<p class="text-sm text-red-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@error('captcha')
|
||||
<p class="text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</form>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="footer">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
@if ($waitMessage)
|
||||
<span>{{ __('Please wait...') }}</span>
|
||||
@else
|
||||
<a class="text-sm text-theme-secondary underline hover:text-theme-primary"
|
||||
href="{{ route('login') }}">
|
||||
{{ __('Already registered?') }}
|
||||
</a>
|
||||
@endif
|
||||
<x-jetstream.button wire:click="create" wire:loading.attr="disabled">
|
||||
<span wire:loading.remove wire:target="create">
|
||||
{{ __('Register') }}
|
||||
</span>
|
||||
<span wire:loading wire:target="create">
|
||||
{{ __('Processing...') }}
|
||||
</span>
|
||||
</x-jetstream.button>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-jetstream.dialog-modal>
|
||||
</div>
|
||||
Reference in New Issue
Block a user