File: /var/www/html/resources/views/livewire/auth/register.blade.php
<div class="col-lg-6">
<div x-data="{
showDefault: true,
name: '',
email: '',
password: '',
canContinue() {
return this.name.trim() && this.email.trim() && this.password.trim();
}
}" class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
<div class="mb30">
<h2 class="fw-bold">Signup</h2>
</div>
<form wire:submit.prevent="register">
<!-- Default View -->
<div x-show="showDefault" x-cloak>
<div class="mb25">
<label class="form-label fw500 dark-color">Firstname</label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-photo mr8"></i>
</div>
<input autocomplete="name" autofocus wire:model.blur="name" x-model="name" type="text"
class="form-control" placeholder="Enter your first name" />
</div>
@error('name')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb25">
<label class="form-label fw500 dark-color">Email</label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-mail mr8"></i>
</div>
<input autocomplete="email" wire:model.blur="email" x-model="email" type="email"
class="form-control" placeholder="Enter your email address" />
</div>
@error('email')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb25" x-data="{ showPassword: false }">
<label class="form-label fw500 dark-color">Password</label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-website mr8"></i>
</div>
<input autocomplete="new-password" wire:model.live="password" x-model="password"
:type="showPassword ? 'text' : 'password'" class="form-control"
placeholder="Choose your new password" />
<button type="button" @click="showPassword = !showPassword" class="input-group-text">
<i :class="showPassword ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
</button>
</div>
@error('password')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<p>By Signing up, you agreed to <a href="{{route('privacy.policy')}}">Our Privacy Policy</a> and <a
href="{{route('terms.condition')}}">Use of Service</a></p>
<div class="d-grid mb20">
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2">
<span wire:loading wire:target="register" class="spinner-border spinner-border-sm"></span>
<span wire:loading wire:target="register">Please wait...</span>
<span wire:loading.remove>Continue</span>
</button>
</div>
@livewire('auth.google')
<!-- <div class="hr_content mb20 text-center"> Already have an account? <a href="{{ route('login') }}"
class="text-thm fw-bold">Login</a></span> </div> -->
</div>
<!-- Continue View -->
<div wire:ignore x-show="!showDefault" x-cloak>
<div class="mb25">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">Select your country</label>
<div class="bootselect-multiselect">
<select wire:model="nationality_id" class="selectpicker">
<option selected hidden>Select</option>
@foreach ($countries as $country)
<option value="{{ $country['id'] }}"
data-content="<span class='flag-wrapper'><img src='{{ $country['flag_url'] }}' alt='{{ $country['name'] }} flag' class='flag' /> {{ $country['name'] }}</span>">
{{ $country['name'] }}
</option>
@endforeach
</select>
</div>
@error('nationality_id') <span class="text-danger">{{ $message }}</span> @enderror
</div>
{{-- <div x-data="{ role: '' }" class="form-style1 mt-4">
<!-- Role Selection -->
<label class="heading-color ff-heading fw500 mb10">
Select your user type
</label>
<div class="d-flex flex-column">
<div class="form-check">
<input type="radio" id="buyer" name="role" class="form-check-input" x-model="role"
value="buyer">
<label class="form-check-label" for="buyer">Sign up as user</label>
</div>
<div class="form-check mt-2">
<input type="radio" id="seller" name="role" class="form-check-input" x-model="role"
value="seller">
<label class="form-check-label" for="seller">Sign up as service provider</label>
</div>
</div>
@error('role') <span class="text-danger">{{ $message }}</span> @enderror
<!-- NIN Input (Visible Only for 'seller') -->
<div class="mb25 mt-3" x-show="role === 'seller'" x-data="{ showNin: false }" x-cloak>
<label class="form-label fw500 dark-color" title="National Identity Number">NIN
number</label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-security mr8"></i>
</div>
<input autocomplete="off" wire:model="nin" maxlength="11"
:type="showNin ? 'text' : 'password'" class="form-control"
placeholder="Enter your NIN number" />
<button type="button" @click="showNin = !showNin" class="input-group-text">
<i :class="showNin ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
</button>
</div>
@error('nin') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div> --}}
<div x-data="{ role: @entangle('role') }" class="form-style1 mt-4">
<!-- Role Selection -->
<label class="heading-color ff-heading fw500 mb10">
Select your user type
</label>
<div class="d-flex flex-column">
<div class="form-check">
<input type="radio" id="buyer" name="role" class="form-check-input" x-model="role"
value="buyer">
<label class="form-check-label" for="buyer">Sign up as user</label>
</div>
<div class="form-check mt-2">
<input type="radio" id="seller" name="role" class="form-check-input" x-model="role"
value="seller">
<label class="form-check-label" for="seller">Sign up as service provider</label>
</div>
</div>
@error('role') <span class="text-danger">{{ $message }}</span> @enderror
<!-- NIN Input (Visible Only for 'seller') -->
<div class="mb25 mt-3" x-show="role === 'seller'" x-data="{ showNin: false }" x-cloak>
<label class="form-label fw500 dark-color" title="National Identity Number">NIN number</label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-security mr8"></i>
</div>
<input autocomplete="off" wire:model.live="nin" maxlength="11"
:type="showNin ? 'text' : 'password'" class="form-control"
placeholder="Enter your NIN number" />
<button type="button" @click="showNin = !showNin" class="input-group-text">
<i :class="showNin ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
</button>
</div>
@error('nin') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
@if ($errorMessage)
<span class="text-danger">{{ $errorMessage }}</span>
@endif
<br>
<div class="d-grid mb20">
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2">
<span wire:loading wire:target="register" class="spinner-border spinner-border-sm"></span>
<span wire:loading wire:target="register">Please wait...</span>
<span wire:loading.remove>Signup</span>
</button>
</div>
</div>
</div>
</form>
</div>
<style>
.country-dropdown .flag-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.country-dropdown .flag {
width: 20px;
height: 15px;
border: 1px solid #ddd;
border-radius: 3px;
object-fit: cover;
}
</style>
</div>