octopus/myproject/user_roles/templates/user_roles/user_role_create.html

{% extends "base.html" %}

{% block title %}Добавить пользователя{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Добавить пользователя</h4>
                </div>
                <div class="card-body">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}

                    <form method="post">
                        {% csrf_token %}

                        <div class="mb-3">
                            <label for="email" class="form-label">Email *</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                            <div class="form-text">Email пользователя для входа</div>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">Имя *</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                            <div class="form-text">Полное имя пользователя</div>
                        </div>

                        <div class="mb-3">
                            <label for="role" class="form-label">Роль *</label>
                            <select class="form-select" id="role" name="role" required>
                                <option value="">Выберите роль...</option>
                                {% for role in roles %}
                                    <option value="{{ role.code }}">{{ role.name }} - {{ role.description }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="password" class="form-label">Пароль</label>
                            <input type="text" class="form-control" id="password" name="password">
                            <div class="form-text">Оставьте пустым для автогенерации. Пароль будет показан после создания.</div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'user_roles:list' %}" class="btn btn-secondary">Отмена</a>
                            <button type="submit" class="btn btn-primary">Создать пользователя</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно с паролем -->
{% if generated_password %}
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" 
     aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="passwordModalLabel">
                    <i class="bi bi-check-circle-fill"></i> Пользователь успешно создан
                </h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <strong>Важно!</strong> Сохраните этот пароль. Он больше не будет показан.
                </div>
                
                <p><strong>Email:</strong> {{ created_user_email }}</p>
                
                <div class="mb-3">
                    <label class="form-label"><strong>Пароль:</strong></label>
                    <div class="input-group">
                        <input type="text" class="form-control form-control-lg font-monospace" 
                               id="generatedPassword" value="{{ generated_password }}" readonly>
                        <button class="btn btn-outline-primary" type="button" 
                                onclick="copyPassword()">
                            <i class="bi bi-clipboard"></i> Копировать
                        </button>
                    </div>
                </div>
                
                <div class="mb-3">
                    <button class="btn btn-outline-success w-100" type="button" 
                            onclick="copyCredentials()">
                        <i class="bi bi-clipboard-check"></i> Скопировать логин и пароль
                    </button>
                    <div class="form-text text-center mt-2">Скопирует в формате: <code>{{ created_user_email }} / пароль</code></div>
                </div>
                
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="passwordSavedCheck" 
                           onchange="toggleCloseButton()">
                    <label class="form-check-label" for="passwordSavedCheck">
                        Я скопировал(а) пароль
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{% url 'user_roles:list' %}" 
                   class="btn btn-success disabled" 
                   id="closeModalBtn" 
                   disabled>
                    Вернуться к списку
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function copyPassword() {
    const passwordInput = document.getElementById('generatedPassword');
    passwordInput.select();
    passwordInput.setSelectionRange(0, 99999); // Для мобильных устройств
    
    navigator.clipboard.writeText(passwordInput.value).then(function() {
        // Меняем текст кнопки на короткое время
        const btn = event.target.closest('button');
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
        btn.classList.remove('btn-outline-primary');
        btn.classList.add('btn-success');
        
        setTimeout(function() {
            btn.innerHTML = originalHTML;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-primary');
        }, 2000);
    });
}

function copyCredentials() {
    const email = '{{ created_user_email }}';
    const password = '{{ generated_password }}';
    const credentials = `${email} / ${password}`;
    
    navigator.clipboard.writeText(credentials).then(function() {
        const btn = event.target.closest('button');
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
        btn.classList.remove('btn-outline-success');
        btn.classList.add('btn-success');
        
        setTimeout(function() {
            btn.innerHTML = originalHTML;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-success');
        }, 2000);
    });
}

function toggleCloseButton() {
    const checkbox = document.getElementById('passwordSavedCheck');
    const closeBtn = document.getElementById('closeModalBtn');
    if (checkbox.checked) {
        closeBtn.classList.remove('disabled');
        closeBtn.removeAttribute('disabled');
    } else {
        closeBtn.classList.add('disabled');
        closeBtn.setAttribute('disabled', 'disabled');
    }
}

// Автоматически показываем модальное окно при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    const modalElement = document.getElementById('passwordModal');
    if (modalElement) {
        const passwordModal = new bootstrap.Modal(modalElement);
        passwordModal.show();
        console.log('Password modal shown');
    } else {
        console.error('Password modal element not found');
    }
});
</script>
{% endif %}
{% endblock %}