Skip to content
This repository was archived by the owner on Oct 1, 2021. It is now read-only.

Commit c1d3e9d

Browse files
alfonsobriesalfonsobries
authored
feat: add password validation component on the reset password form (#28)
1 parent 30aaab5 commit c1d3e9d

File tree

4 files changed

+106
-70
lines changed

4 files changed

+106
-70
lines changed

‎resources/views/auth/reset-password-form.blade.php‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<form
2+
method="POST"
3+
action="{{ route('password.update') }}"
4+
class="flex flex-col p-8 mx-4 border rounded-lg border-theme-secondary-200 md:mx-0 lg:p-8 xl:mx-8"
5+
x-data="{ isTyping: false }"
6+
>
7+
@csrf
8+
9+
<input type="hidden" name="token" value="{{ $token }}">
10+
11+
<div class="mb-8">
12+
<div class="flex flex-1">
13+
<x-ark-input
14+
wire:model.defer="state.email"
15+
no-model
16+
type="email"
17+
name="email"
18+
:label="trans('fortify::forms.email')"
19+
autocomplete="email"
20+
class="w-full"
21+
:autofocus="true"
22+
:required="true"
23+
:errors="$errors"
24+
readonly
25+
/>
26+
</div>
27+
</div>
28+
29+
<x:ark-fortify::password-rules class="mb-8" :password-rules="$passwordRules">
30+
<x-ark-input
31+
model="state.password"
32+
type="password"
33+
name="password"
34+
:label="trans('fortify::forms.password')"
35+
autocomplete="new-password"
36+
class="w-full mb-2"
37+
required="true"
38+
@keydown="isTyping=true"
39+
:errors="$errors"
40+
/>
41+
</x:ark-fortify::password-rules>
42+
43+
<div class="mb-8">
44+
<div class="flex flex-1">
45+
<x-ark-input
46+
model="state.password_confirmation"
47+
type="password"
48+
name="password_confirmation"
49+
:label="trans('fortify::forms.confirm_password')"
50+
autocomplete="new-password"
51+
class="w-full"
52+
:required="true"
53+
:errors="$errors"
54+
/>
55+
</div>
56+
</div>
57+
58+
<div class="flex flex-col items-center justify-between w-full space-y-2 md:flex-row md:space-y-0">
59+
<a href="{{ route('login') }}" class="link">@lang('fortify::actions.cancel')</a>
60+
61+
<button type="submit" class="w-full button-primary md:w-auto">
62+
@lang('fortify::actions.reset_password')
63+
</button>
64+
</div>
65+
</form>

‎resources/views/auth/reset-password.blade.php‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -14,78 +14,10 @@
1414
@section('content')
1515
<div class="container mx-auto">
1616
<div class="mx-auto my-8 md:w-3/4 lg:w-3/5 xl:w-1/2">
17-
<h1 class="mx-4 text-2xl font-bold md:text-4xl md:mx-8 xl:mx-16 text-center">
18-
@lang('fortify::auth.reset-password.page_header')
19-
</h1>
17+
<h1 class="mx-4 text-2xl font-bold md:text-4xl md:mx-8 xl:mx-16">@lang('fortify::auth.reset-password.page_header')</h1>
2018

2119
<div class="mt-5 lg:mt-8">
22-
<form
23-
method="POST"
24-
action="{{ route('password.update') }}"
25-
class="flex flex-col p-8 mx-4 border rounded-lg border-theme-secondary-200 md:mx-0 lg:p-8 xl:mx-8"
26-
>
27-
@csrf
28-
29-
<input type="hidden" name="token" value="{{ $request->route('token') }}">
30-
31-
<div class="mb-8">
32-
<div class="flex flex-1">
33-
<x-ark-input
34-
type="email"
35-
name="email"
36-
:label="trans('fortify::forms.email')"
37-
autocomplete="email"
38-
class="w-full"
39-
:autofocus="true"
40-
:value="old('email', $request->email)"
41-
:required="true"
42-
:errors="$errors"
43-
readonly
44-
/>
45-
</div>
46-
</div>
47-
48-
<div class="mb-8">
49-
<div class="flex flex-1">
50-
<x-ark-input
51-
type="password"
52-
name="password"
53-
:label="trans('fortify::forms.password')"
54-
autocomplete="new-password"
55-
class="w-full"
56-
:required="true"
57-
:errors="$errors"
58-
/>
59-
</div>
60-
@if (! request()->session()->get('errors'))
61-
<div class="text-sm text-theme-secondary-600">@lang('fortify::forms.update-password.requirements_notice')</div>
62-
@endif
63-
</div>
64-
65-
<div class="mb-8">
66-
<div class="flex flex-1">
67-
<x-ark-input
68-
type="password"
69-
name="password_confirmation"
70-
:label="trans('fortify::forms.confirm_password')"
71-
autocomplete="new-password"
72-
class="w-full"
73-
:required="true"
74-
:errors="$errors"
75-
/>
76-
</div>
77-
</div>
78-
79-
<div class="flex flex-col-reverse space-y-4 sm:space-y-0 sm:flex-row items-center justify-between">
80-
<div class="flex-1 mt-8 sm:mt-0">
81-
<a href="{{ route('login') }}" class="link">@lang('fortify::actions.cancel')</a>
82-
</div>
83-
84-
<button type="submit" class="w-full button-secondary md:w-auto">
85-
@lang('fortify::actions.reset_password')
86-
</button>
87-
</div>
88-
</form>
20+
<livewire:auth.reset-password-form />
8921
</div>
9022
</div>
9123
</div>

‎src/Components/ResetPasswordForm.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace ARKEcosystem\Fortify\Components;
6+
7+
use ARKEcosystem\Fortify\Components\Concerns\ValidatesPassword;
8+
use Livewire\Component;
9+
10+
class ResetPasswordForm extends Component
11+
{
12+
use ValidatesPassword;
13+
14+
public $token;
15+
16+
public array $state = [
17+
'email' => '',
18+
'password' => '',
19+
'password_confirmation' => '',
20+
];
21+
22+
public function mount()
23+
{
24+
$this->token = request()->route('token');
25+
$this->state['email'] = old('email', request()->email);
26+
}
27+
28+
/**
29+
* Render the component.
30+
*
31+
* @return \Illuminate\View\View
32+
*/
33+
public function render()
34+
{
35+
return view('ark-fortify::auth.reset-password-form');
36+
}
37+
}

‎src/FortifyServiceProvider.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
use ARKEcosystem\Fortify\Components\ExportUserData;
1414
use ARKEcosystem\Fortify\Components\LogoutOtherBrowserSessionsForm;
1515
use ARKEcosystem\Fortify\Components\RegisterForm;
16+
use ARKEcosystem\Fortify\Components\ResetPasswordForm;
1617
use ARKEcosystem\Fortify\Components\TwoFactorAuthenticationForm;
1718
use ARKEcosystem\Fortify\Components\UpdatePasswordForm;
1819
use ARKEcosystem\Fortify\Components\UpdateProfileInformationForm;
@@ -113,6 +114,7 @@ public function registerLivewireComponents(): void
113114
Livewire::component('profile.update-profile-photo-form', UpdateProfilePhotoForm::class);
114115
Livewire::component('profile.update-timezone-form', UpdateTimezoneForm::class);
115116
Livewire::component('auth.register-form', RegisterForm::class);
117+
Livewire::component('auth.reset-password-form', ResetPasswordForm::class);
116118
}
117119

118120
/**

0 commit comments

Comments
 (0)