index.html file change

iogt_users/templates/wagtailusers/users/index.html

@@ -0,0 +1,314 @@
+{% extends "wagtailusers/users/index.html" %}
+{% load wagtailadmin_tags i18n %}
+
+{% block content %}
+    {% trans "Users" as users_str %}
+
+    {% include "wagtailadmin/shared/header.html" with subtitle=group.name title=users_str action_url=add_link action_text=add_a_user_str icon="user" search_url="wagtailusers_users:index" %}
+<div class="right">
+<div class="actionbutton action-buttons">
+        <button id="invite-admin-button" class="button button&#45;&#45;icon" style="margin-left: 10px;">
+        {% icon name="plus" wrapped=1 %} Invite Admin User
+        </button>
+    </div>
+</div>
+    <div class="nice-padding">
+        <div id="user-results" class="users">
+            {% include "wagtailusers/users/results.html" %}
+        </div>
+        {% trans "Select all users in listing" as select_all_text %}
+        {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=app_label model_name=model_name objects=users %}
+    </div>
+
+<!--    <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&#45;&#45;icon" style="margin-left: 10px;">-->
+<!--                        {% icon name="plus" wrapped=1 %} Invite Admin User-->
+<!--                    </button>-->
+<!--                        <a href="/admin/users/add/" class="button bicolor button&#45;&#45;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>
+        window.headerSearch = {
+            {% if group %}
+                url: "{% url 'wagtailusers_groups:users' group.id %}",
+            {% else %}
+                url: "{% url 'wagtailusers_users:index' %}",
+            {% endif %}
+            termInput: "#id_q",
+            targetOutput: "#user-results"
+        }
+    </script>
+    <script>
+        window.wagtailConfig.BULK_ACTION_ITEM_TYPE = 'USER';
+    </script>
+    <script defer src="{% versioned_static 'wagtailadmin/js/bulk-actions.js' %}"></script>
+
+    <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 %}