index.html

{% extends "wagtailusers/users/index.html" %}
{% load wagtailadmin_tags i18n %}

{% block content %}
    {% trans "Users" as users_str %}
    {% url "wagtailusers_users:add" as add_link %}

    <header class=" hasform">
        <div class="row">
            <div class="left">
                <div class="col">
                    <h1><svg class="icon icon-user icon" aria-hidden="true"><use href="#icon-user"></use></svg>
                        Users
                    </h1>
                </div>
                <form class="col search-form" action="/admin/users/" method="get" novalidate="" role="search">
                    <ul class="fields">
                        <li class="required">
                        <div class="field char_field text_input field-small iconfield" data-contentpath="q">
                            <label for="id_q">Search term:</label>
                            <div class="field-content">
                                <div class="input">
                                    <svg class="icon icon-search icon" aria-hidden="true"><use href="#icon-search"></use></svg>
                                    <input type="text" name="q" placeholder="Search users" required="" id="id_q">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        </li>
                        <li class="visuallyhidden"><input disabled="" type="submit" aria-hidden="true"></li>
                        <li class="submit visuallyhidden"><input type="submit" value="Search" class="button"></li>
                    </ul>
                </form>
            </div>
            <div class="right">
                <div class="actionbutton action-buttons">
                    <!-- <button id="invite-admin-button" class="button button--icon" style="margin-left: 10px;">
                        {% icon name="plus" wrapped=1 %} Invite Admin User
                    </button> -->
                        <a href="/admin/users/add/" class="button bicolor button--icon">
                            <span class="icon-wrapper"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></span>
                            Add a user
                        </a>
                </div>
            </div>
        </div>
    </header>

    <div id="invite-admin-modal" class="modal">
        <div class="modal-content">
            <div>
                <span class="close-button" id="close-modal">&times;</span>
                <h2>Invite Admin User</h2>
            </div>
            <hr>
            <form id="invite-admin-form">
                <div class="input-group">
                    <div class="input-field">
                        <input type="text" id="first_name" name="first_name" placeholder="First Name">
                        <span class="error-message" id="first_name_error" style="color: red; display: none;"></span>
                    </div>

                    <div class="input-field">
                        <input type="text" id="last_name" name="last_name" placeholder="Last Name">
                        <span class="error-message" id="last_name_error" style="color: red; display: none;"></span>
                    </div>

                </div>
                <div class="input-field">
                    <input type="text" id="email" name="email" placeholder="Email Address" title="Please enter a valid email address">
                    <span class="error-message" id="email_error" style="color: red; display: none;"></span>
                </div>

                <div class="form-actions">
                    <button type="submit" class="button button--icon" style="border-radius: 5px;">Send Invite</button>
                </div>
            </form>
        </div>
    </div>

    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% 36%;
            padding: 20px;
            border: 1px solid #888;
            width: 25%;
            border-radius: 10px;
        }
        .close-button {
            color: black;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .error-message {
            display: block;
            color: red;
        }
        hr{
            border-color: black;
        }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .input-field {
            flex: 1;
        }
        .input-field input {
            border: 1px solid #888;
            width: 100%;
            padding: 10px;
            font-weight: 400;
            border-radius: 5px;
        }
        input.invalid {
            border: 1px solid red;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 25px;
        }
    </style>

{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inviteAdminButton = document.getElementById('invite-admin-button');
            const modal = document.getElementById('invite-admin-modal');
            const closeButton = document.getElementById('close-modal');
            const form = document.getElementById('invite-admin-form');
            const inputs = form.querySelectorAll('input');
            const body = document.querySelector('body');

            inviteAdminButton.onclick = function() {
                modal.style.display = 'block';
                form.reset();
                resetErrorMessages();
            };

            closeButton.onclick = function() {
                modal.style.display = 'none';
            };

            form.onsubmit = function(event) {
                event.preventDefault();
                resetErrorMessages();

                const firstName = document.getElementById('first_name').value;
                const lastName = document.getElementById('last_name').value;
                const email = document.getElementById('email').value;

                let isValid = true;

                if (firstName.trim() === "") {
                    showError('first_name', "First Name is required.");
                    isValid = false;
                }
                if (lastName.trim() === "") {
                    showError('last_name', "Last Name is required.");
                    isValid = false;
                }
                if (!validateEmail(email)) {
                    showError('email', "Please enter a valid email address.");
                    isValid = false;
                }

                if (isValid) {
                    const formData = new FormData(form);

                    fetch("{% url 'invite_admin_user' %}", {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            modal.style.display = 'none';
                            form.reset();
                            displaySuccessMessage("Invite sent successfully!");

                            setTimeout(() => {
                                modal.style.display = 'none';
                            }, 1000);
                        } else {
                            for (const [key, value] of Object.entries(data.errors)) {
                                showError(key, value);
                            }
                        }
                    })
                    .catch(error => console.error('Error:', error));
                }
            };

            function validateEmail(email) {
                const re = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
                return re.test(String(email).toLowerCase());
            }

            function resetErrorMessages() {
                const errorMessages = document.querySelectorAll('.error-message');
                errorMessages.forEach(function(errorMessage) {
                    errorMessage.textContent = '';
                    errorMessage.style.display = 'none';
                });

                const invalidInputs = document.querySelectorAll('input.invalid');
                invalidInputs.forEach(function(input) {
                    input.classList.remove('invalid');
                });
            }

            function showError(inputId, message) {
                const errorElement = document.getElementById(inputId + '_error');
                errorElement.textContent = message;
                errorElement.style.display = 'block';
                document.getElementById(inputId).classList.add('invalid');
            }

            function displaySuccessMessage(message){
                const successMessage = document.createElement('div');
                successMessage.textContent = message;
                successMessage.style.cssText = `
                    position: fixed;
                    bottom: 10px;
                    right: 10px;
                    background-color: #134f5c;
                    color: white;
                    padding: 15px 20px;
                    border-radius: 5px;
                    z-index: 1001;
                    font-size: 14px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    font-weight: bold;
                `;

                body.appendChild(successMessage);

                setTimeout(() => {
                    successMessage.remove();
                }, 1000);
            }

            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    const errorMessage = document.getElementById(input.id + '_error');
                    if (errorMessage) {
                        errorMessage.style.display = 'none';
                    }
                    input.classList.remove('invalid');
                });
            });
        });
        </script>
{% endblock %}