Stimulus.js 및 Rails 6을 사용한 비밀번호 가시성 토글

최근에 Rails 6에서 Stimulus.js를 사용하여 암호 표시 숨기기 기능을 고안한 형태로 구현하고 싶었습니다. 자극의 초보자이기 때문입니다. 올바른 방법을 찾기 위해 많은 노력을 기울여야 했습니다.

이 기사에서 다룰 두 가지 구현 방법과 두 가지 시나리오가 있습니다.

하나의 비밀번호 필드에서만 토글을 구현하려는 경우.

예를 들어 두 개의 비밀번호 필드에서 토글을 구현하려는 경우 가입 양식에는 두 개의 비밀번호 필드가 있습니다.

나는 이것을 읽는 사람이 Stimulus.js에 대한 기본 아이디어를 가지고 있다고 가정합니다.

시나리오 1.

이것이 내 기본 장치 비밀번호 필드가 어떻게 생겼는지입니다.

<div class="form-group my-4" data-controller="password-toggle">
 <%= f.label :password %>
 <%= f.password_field :password, autocomplete: "current-password", class: 'form-control p-2 my-2 unhide', placeholder: "Password", "data-target": "password-toggle.unhide"%>
 <a data-action="click->password-toggle#password" class="password-field-icon-1 far fa-eye-slash"></a>
</div>

내 분야를 자극 이벤트를 수용하는 것으로 변환하는 세 가지를 추가했습니다.

자극 컨트롤러 정의: data-controller="password-toggle" password_toggle_controller.js는 내 자극 컨트롤러 파일입니다.

대상 필드 정의: "data-target": "password-toggle.unhide"

클릭 이벤트 정의: 아이콘 태그에 정의할 클릭 이벤트. data-action="click->password-toggle#password"

이제 이것이 우리의 password_toggle_controller.js 모습입니다.

import { Controller } from "stimulus";

export default class extends Controller {

  static targets = ["unhide"]

  password(e) {
    if (this.input.type === "password") {
      e.target.classList.remove('fa-eye-slash');
      e.target.classList.add('fa-eye');
      this.input.type = "text";
    } else {
      e.target.classList.remove('fa-eye');
      e.target.classList.add('fa-eye-slash');
      this.input.type = "password";
    }
  }
}

이 코드 조각의 기본 아이디어는 입력 필드 유형이 password이고 가시성 아이콘을 클릭하면 필드 유형이 text로 변경되고 아이콘을 토글하거나 그 반대의 경우도 마찬가지입니다.

이제 이것이 당신에게 효과가 있고 이것이 당신의 요구 사항 일뿐이라면 훌륭합니다!

시나리오 2

그러나 요구 사항이 이것이 아니고 두 암호 필드에서 토글을 활성화하려는 경우. 그런 다음 jquery를 더 많이 사용해야 합니다.

그리고 내 코드에서 SVG 아이콘 유형을 사용했습니다. e.target 아이콘을 변경하기 위한 올바른 대상을 항상 제공하지는 않습니다. 이 article는 SVG 아이콘의 클릭 이벤트가 왜 그렇게 동작하는지 간략하게 설명합니다.

그래서 이 문제에 접근하는 방식을 바꿔야 했습니다.

<div class="form-group pb-1" data-controller="password-toggle">
  <label>Password</label>
  <%= f.password_field :password, autocomplete: "off", class: 'form-control p-2', required: true, placeholder: 'Password' %>
  <a data-action="click->password-toggle#password" class="password-field-icon-2 far fa-eye-slash"</a> 
</div>

<div class="form-group pb-1" data-controller="password-toggle">
  <label>Password Confirmation</label>
  <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control p-2', required: true, placeholder: 'Confirm Password' %>
  <a data-action="click->password-toggle#password" class="password-field-icon-2 far fa-eye-slash">     </a>
</div>

보시다시피 저는 data-target를 사용하지 않을 것이기 때문에 제거한 것을 볼 수 있습니다. 대신 자극 컨트롤러에서 event 개체를 사용할 것입니다.

import { Controller } from "stimulus";

export default class extends Controller {

  password(e) {

    var password_field = $(e.currentTarget).prev("input")[0];
    var icon = $(e.currentTarget).closest("svg")[0];

    if (password_field.type === "password") {
      icon.classList.remove('fa-eye-slash');
      icon.classList.add('fa-eye');
      password_field.type = "text";
    } else {
      icon.classList.remove('fa-eye');
      icon.classList.add('fa-eye-slash');
      password_field.type = "password";
    }
  }
 }
}

코드의 기본 알고리즘은 동일하게 유지되며 유일한 변경 사항은 input field를 가져오는 방법과 icon를 가져오는 방법입니다. e.target를 사용하는 대신 아이콘 태그를 올바르게 제공하는 e.currentTarget를 사용했습니다.

그리고 this.target를 사용하는 대신 동일한 e.currentTarget을 사용하여 바로 이전에 입력 필드를 가져옵니다. 기본적으로 해당 아이콘 이벤트에 대한 입력 암호 필드를 제공합니다.

고맙습니다! 그것을 읽기 위해. 나는 그것이 누군가를 돕기를 바랍니다. 이것보다 더 좋은 아이디어가 있다면. 알려주세요. 내 프로젝트에서 구현하고 싶습니다. 사랑을 보여주는 것을 잊지 마십시오. ❤️