как сделать глазок для пароля

Рейтинг: 0Ответов: 1Опубликовано: 10.08.2023
    {% extends 'base.html' %}
{% load static %}
{% block title %}Добавить пользователя{% endblock %}
{% block head %}Добавить пользователя{% endblock %}
{% block bread %}Добавить пользователя{% endblock %}
{% block content %}
<div class="card card-primary card-outline">
    <div class="card-header">
        <h5 class="m-0">Добавить пользователя</h5>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            {{form.as_p}}
            <span style="#ff0000"> {{pass_error}}</span> <br>
            <button type="submit" class="btn btn-primary">Добавить</button>
        </form>
    </div>
</div>
{% endblock %}

    class UserForm(forms.ModelForm):
    password = forms.CharField(widget=PasswordInput(),label='Пароль')
    confirm_password = forms.CharField(widget=PasswordInput(), label='Подтвердите пароль')

    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'email', 'phone', 'cashbox', 'role']

    def __init__(self, *args, **kwargs):
        super(UserForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs['class'] = 'form-control'
django javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1

как сделать глазок для пароля

Вопрос только в том - как далеко ты готов зайти, делая такое украшательство?

const data = {
  password: {
    type: 'text',
    img: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
            <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>`
  },
  text: {
    type: 'password',
    img: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
            <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>`
  }
}
const ob = document.getElementById('toggle_button')
ob.innerHTML = data.text.img
const oi = document.getElementById('password_input')
ob.addEventListener('click', function () {
  const o = data[oi.type]
  oi.type = o.type
  this.innerHTML = o.img
})
.password_input_container {
  position: relative;
  display: inline-block;
}

.password_input_container button {
  cursor: pointer;
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  background-color: transparent;
  border: none;
  color: #777;
}

.password_input_container input {
  outline: none;
  font-size: 9px;
  padding: 8px;
  width: 130px;
  background-color: transparent;
  border: #777 solid 1px;
  border-radius: 4px;
  color: #555;
}

.password_input_container label {
  position: absolute;
  margin: 0 5px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  background-color: #fff;
  padding: 0 2px;
  color: #aaa;
  font-size: 12px;
  transition: .3s;
}

.password_input_container input:focus+label,
.password_input_container input:not(:placeholder-shown)+label {
  top: 0;
  font-size: 8px;
  z-index: 1;
}

.password_input_container input:focus+label {
  color: rgb(15, 156, 116);
  font-size: 8px;
}

.password_input_container input:focus {
  border-color: rgb(15, 156, 116);
}
<div class="password_input_container">
  <input placeholder=" " name="password_input" type="password" id="password_input">
  <label for="password_input">Password</label>
  <button id="toggle_button"></button>
</div>