改造 laravel 注册页，密码显示与隐藏，随机密码并显示强度

running8 的个人博客 / 210 / 3 / 创建于 6个月前 / 更新于 6个月前

改进注册页面来开始本课程。在这里，我们将添加一个按钮来显示/隐藏密码，生成一个随机密码，并显示密码强度栏。
原来的注册页是长这样的：

新Livewire组件

首先，我们将创建一个 Livewire 组件。

php artisan make:livewire RegisterPasswords

现在，我们需要将 resources/views/auth/register.blade.php 视图中的密码字段移动到新创建的 Livewire 组件。

resources/views/livewire/register-passwords.blade.php:

<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" />
    </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" />
    </div>
</div>

resources/views/auth/register.blade.php :

<livewire:register-passwords/>

使用Alpine.js显示/隐藏密码

首先，让我们制作一个密码显示/隐藏功能。为此，我们只使用Alpine.js，不需要Livewire，因为我们只与浏览器交互，不需要将数据发送到服务器。
resources/views/livewire/register-passwords.blad.php：

        <div class="flex mt-1 mb-2">
            <div class="relative flex-1 col-span-4" x-data="{ show: true }">
                <input class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                       id="password"
                       :type="show ? 'password' : 'text'"
                       name="password"
                       required autocomplete="new-password" />

                <button type="button" class="flex absolute inset-y-0 right-0 items-center pr-3" @click="show = !show" :class="{'hidden': !show, 'block': show }">
                    <!-- Heroicon name: eye -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </button>
                <button type="button" class="flex absolute inset-y-0 right-0 items-center pr-3" @click="show = !show" :class="{'block': !show, 'hidden': show }">
                    <!-- Heroicon name: eye-slash -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                    </svg>
                </button>
            </div>
        </div>

Alpine 中的所有内容都是从 x-data 指令开始的，所以我们添加了名为 show 的反应数据，默认情况下，我们将其设置为true。接下来，对于输入，我们绑定 type 属性，将其类型更改为 password 或 text 。

我们有两个按钮，我们使用图标来显示。对于这些按钮，我们使用缩写语法 @click 来更改显示状态。

生成随机密码

现在，让我们添加一个按钮来生成随机密码。

现在，我们可以继续添加按钮。为此，我们需要Livewire组件上的两个公共属性来绑定这两个密码字段。

app/Http/Livewire/RegisterPasswords.php：

    public string $password = '';

    public string $passwordConfirmation = '';

把这两个属性用 wire:model 绑定

resources/views/livewire/register-passwords.blade.php:

<input class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
        id="password"
        :type="show ? 'password' : 'text'"
        name="password"
        wire:model.live="password" 
        required autocomplete="new-password" />
...
<x-text-input id="password_confirmation" class="block mt-1 w-full"
            type="password"
            wire:model="passwordConfirmation" 
            name="password_confirmation" required />

让我们添加自动生成密码的按钮
resources/views/livewire/register-passwords.blade.php:

        <div class="flex mt-1 mb-2">
            <div class="relative flex-1 col-span-4" x-data="{ show: true }">
...
            </div>
            <div class="flex items-center place-content-end ml-1">
                <x-primary-button wire:click="generatePassword" type="button">随机密码</x-primary-button>
            </div>
        </div>

这个新按钮有一个名为 generatePassword 的 Livewire 方法。
app/Http/Livewire/RegisterPasswords.php:

    public function generatePassword(): void
    {
        $lowercase = range('a', 'z');
        $uppercase = range('A', 'Z');
        $digits = range(0,9);
        $special = ['!', '@', '#', '$', '%', '^', '*'];
        $chars = array_merge($lowercase, $uppercase, $digits, $special);
        $length = 12;
        do {
            $password = array();

            for ($i = 0; $i <= $length; $i++) {
                $int = rand(0, count($chars) - 1);
                $password[] = $chars[$int];
            }

        } while (empty(array_intersect($special, $password)));

        $this->setPasswords(implode('', $password));
    }

    private function setPasswords($value): void
    {
        $this->password = $value;
        $this->passwordConfirmation = $value;
    }

点击按钮可生成随机密码了

显示密码强度

我们将添加到注册表单的最后一个功能：显示密码强度。为了确定强度，我们将使用 bjeavons/zxcvbn-php 包。

composer require bjeavons/zxcvbn-php

要更新强度值，我们将使用 Livewire Lifecycle Hook 并设置 $strengthScore 公共属性。此外，我们需要在生成密码时更新强度分数。
现在我们可以在刀刃文件中显示强度值。除了进度条，我们还会用文字写下密码的强度，例如“弱”或“强”。

app/Livewire/RegisterPasswords.php:

use ZxcvbnPhp\Zxcvbn;

class  RegisterPasswords  extends  Component

{

public  string  $password  =  '';

public  string  $passwordConfirmation  =  '';

public  int  $strengthScore  =  0;
public  array  $strengthLevels  = [
1  =>  'Weak',
2  =>  'Fair',
3  =>  'Good',
4  =>  'Strong',
];

public  function  updatedPassword($value)
{
$this->strengthScore  = (new  Zxcvbn())->passwordStrength($value)['score'];
}

// ...

protected  function  setPasswords($value):  void
{
$this->password  =  $value;
$this->passwordConfirmation  =  $value;
$this->updatedPassword($value);
}

因为我们只有一个分数的整数值，所以我们将添加一个公共属性，作为单词中哪个分数值对应哪个强度的数组。
resources/views/livewire/register-passwords.blade.php:

            <div class="flex items-center place-content-end ml-1">
                <x-primary-button wire:click="generatePassword" type="button">随机密码</x-primary-button>
            </div>
        </div>

        <span class="text-sm"> 
            <span class="font-semibold">密码强度:</span> {{ $strengthLevels[$strengthScore] ?? '弱' }}
        </span>
         <progress  value="{{  $strengthScore  }}"  max="4"  class="w-full"></progress>
        <x-input-error :messages="$errors->get('password')" class="mt-2" />
    </div>