Skip to content

Commit

Permalink
Phone number input create
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raccoon254
Raccoon254 committed Jun 13, 2024
1 parent 213f271 commit f06fad8
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 75 deletions.
7 changes: 0 additions & 7 deletions app/Http/Controllers/Auth/RegisteredUserController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,6 @@

class RegisteredUserController extends Controller
{
/**
* Display the registration view.
*/
public function create(): View
{
return view('auth.register');
}

/**
* Handle an incoming registration request.
Expand Down
62 changes: 60 additions & 2 deletions app/Livewire/Register.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,71 @@

namespace App\Livewire;

use App\Models\User;
use App\Notifications\NewUserJoined;
use App\Notifications\UserWelcome;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use Illuminate\Foundation\Application;
use Illuminate\Http\RedirectResponse;
use Illuminate\Routing\Redirector;
use Illuminate\Support\Facades\Notification;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;

class Register extends Component
{
public function render()

#[Validate('required', 'string', 'max:255', 'min:3')]
public $name;
#[Validate('required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class)]
public $email;
#[Validate('required', 'string', 'max:255', 'min:8', 'unique:' . User::class)]
public $phone;
#[Validate('required', 'string', 'max:255', 'min:3')]
public $location;
#[Validate('required', 'confirmed')]
public $password;
#[Validate('required')]
public $password_confirmation;

public function register(): Application|Redirector|\Illuminate\Contracts\Foundation\Application|RedirectResponse
{
$this->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class],
'phone' => ['required', 'string', 'max:255', 'min:8', 'unique:' . User::class],
'location' => ['required', 'string', 'max:255', 'min:3'],
'password' => ['required', 'confirmed', Rules\Password::defaults()],
]);

$user = User::create([
'name' => $this->name,
'email' => $this->email,
'phone' => $this->phone,
'location' => $this->location,
'password' => Hash::make($this->password),
]);

event(new Registered($user));

Auth::login($user);

// Send notification to the new user
$user->notify(new UserWelcome($user));

// Send notification to all writers
$writers = User::where('role', 'writer')->get();
Notification::send($writers, new NewUserJoined($user));

return redirect(route('dashboard'));
}

public function render(): View
{
return view('livewire.register')
return view('auth.register')
->layout('layouts.guest');
}
}
117 changes: 51 additions & 66 deletions resources/views/auth/register.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,82 @@
<x-guest-layout>
<form method="POST" action="{{ route('register') }}">
<div>
<form wire:submit.prevent="register">
@csrf

<!-- Name -->
<div>
<x-input-label for="name" :value="__('Name')" />
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
<x-input-error :messages="$errors->get('name')" class="mt-2" />
<x-input-label for="name" :value="__('Name')"/>
<x-text-input id="name" class="block mt-1 w-full" type="text" wire:model.live="name" required autofocus
autocomplete="name"/>
@error('name')
<x-input-error :messages="$message" class="mt-2"/> @enderror
</div>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

<div class="loc">
<div class="flex gap-4">
<!-- Phone Number -->
<div class="mt-4 w-1/2">
<x-input-label for="phone" :value="__('Phone Number')"></x-input-label>
<x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
<x-input-error :messages="$errors->get('phone')" class="mt-2"></x-input-error>
</div>
<div class="flex items-center gap-4">
<!-- Phone Number -->
<div class="mt-4 w-1/2">
<x-input-label for="phone" :value="__('Phone Number')"></x-input-label>
<x-text-input id="phone" class="block mt-1 w-full" type="tel" wire:model.live="phone" required
autocomplete="phone"/>
@error('phone')
<x-input-error :messages="$message" class="mt-2"></x-input-error> @enderror
</div>

<!-- Location -->
<div class="mt-4 w-1/2">
<x-input-label for="location" :value="__('Location')"></x-input-label>
<x-text-input id="location" class="block mt-1 w-full" type="text" name="location" :value="old('location')" required autocomplete="location" />
<x-input-error :messages="$errors->get('location')" class="mt-2"></x-input-error>
</div>
<!-- Location -->
<div class="mt-4 w-1/2">
<x-input-label for="location" :value="__('Location')"></x-input-label>
<x-text-input id="location" class="block mt-1 w-full" type="text" wire:model.lazy="location" required
autocomplete="location"/>
@error('location')
<x-input-error :messages="$message" class="mt-2"></x-input-error> @enderror
</div>
<div class="alert alert-info" style="display: none;"></div>
</div>

<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>

<!-- Email Address -->
<div class="mt-4">
<x-input-label for="email" :value="__('Email')" />
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
<x-input-error :messages="$errors->get('email')" class="mt-2" />
<x-input-label for="email" :value="__('Email')"/>
<x-text-input id="email" class="block mt-1 w-full" type="email" wire:model.lazy="email" required
autocomplete="username"/>
@error('email')
<x-input-error :messages="$message" class="mt-2"/> @enderror
</div>

<!-- Password -->
<div class="mt-4">
<x-input-label for="password" :value="__('Password')" />

<x-text-input id="password" class="block mt-1 w-full"
type="password"
name="password"
required autocomplete="new-password" />

<x-input-error :messages="$errors->get('password')" class="mt-2" />
<x-input-label for="password" :value="__('Password')"/>
<x-text-input id="password" class="block mt-1 w-full" type="password" wire:model.lazy="password" required
autocomplete="new-password"/>
@error('password')
<x-input-error :messages="$message" class="mt-2"/> @enderror
</div>

<!-- Confirm Password -->
<div class="mt-4">
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />

<x-text-input id="password_confirmation" class="block mt-1 w-full"
type="password"
name="password_confirmation" required autocomplete="new-password" />

<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
<x-input-label for="password_confirmation" :value="__('Confirm Password')"/>
<x-text-input id="password_confirmation" class="block mt-1 w-full" type="password"
wire:model.lazy="password_confirmation" required autocomplete="new-password"/>
@error('password_confirmation')
<x-input-error :messages="$message" class="mt-2"/> @enderror
</div>

<div class="flex items-center justify-end mt-4">
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
href="{{ route('login') }}">
{{ __('Already registered?') }}
</a>

<x-primary-button class="ms-4">
<x-primary-button class="ms-4" type="submit">
{{ __('Register') }}
<i class="fas fa-lock ml-2"></i>
</x-primary-button>
</div>
</form>
</x-guest-layout>

@script
<script>
let phoneInputField = document.querySelector("#phone");
let phoneInput = window.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
@endscript
</div>
2 changes: 2 additions & 0 deletions resources/views/layouts/guest.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
Expand Down

0 comments on commit f06fad8

Please sign in to comment.