digest_app/templates/module_iam/iam_principal_add.html

{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->
{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a href="{% url 'module_iam:principal_group_link'%}" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>{{operation}} Principal</span></h3>
                </a>
            </div>
        </div>
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">

                        <form method="post" id="principalForm">
                            {% csrf_token %}
                            {% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
                            <div class="mt-4 mb-0">
                                <div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
                            </div>
                        </form>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}

<!-- include required js cdn link through html here -->
<script>
    $(document).ready(function() {

        // Add custom validation method for email
        $.validator.addMethod("validEmail", function(value, element) {
            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(value);
        }, "Please enter a valid email address.");

        $.validator.addMethod("noSpace", function(value, element) { 
            return value.indexOf(" ") < 0 && value != ""; 
          }, "Spaces are not allowed.");

        // Add custom validation method to check for special characters
        $.validator.addMethod("noSpecialChars", function(value, element) {
            return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
        }, "Please enter only letters and spaces.");
    
        // Add custom validation method to check for starting with a letter
        $.validator.addMethod("startsWithLetter", function(value, element) {
            return /^[a-zA-Z]/.test(value); // Check if the value starts with a letter
        }, "Please start with a letter.");
    
        // Add custom validation method for password complexity
        $.validator.addMethod("complexPassword", function(value, element) {
            return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?=.*[^\w\d\s])/.test(value);
        }, "Password must include at least one uppercase letter, one lowercase letter, one number, and special characters.");
    
        // Initialize form validation
        $("#principalForm").validate({
            rules: {
                email: {
                    required: true,
                    validEmail: true
                },
                first_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                    noSpecialChars: true,
                    startsWithLetter: true,
                    noSpace: true
                },
                last_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                    noSpecialChars: true,
                    startsWithLetter: true,
                    noSpace: true
                },
                password: {
                    required: true,
                    minlength: 6,
                    complexPassword: true
                },
                confirm_password: {
                    required: true,
                    equalTo: '#id_password'
                }
            },
            messages: {
                email: {
                    required: "Please enter your email address.",
                    validEmail: "Please enter a valid email address."
                },
                first_name: {
                    required: "Please enter your first name.",
                    minlength: "First name must be at least 2 characters.",
                    maxlength: "First name must not exceed 20 characters.",
                    noSpecialChars: "Please enter only letters and spaces.",
                    startsWithLetter: "First name must start with a letter."
                },
                last_name: {
                    required: "Please enter your last name.",
                    minlength: "Last name must be at least 2 characters.",
                    maxlength: "Last name must not exceed 20 characters.",
                    noSpecialChars: "Please enter only letters and spaces.",
                    startsWithLetter: "Last name must start with a letter."
                },
                password: {
                    required: "Please enter a new password.",
                    minlength: "Password must be at least 6 characters."
                },
                confirm_password: {
                    required: "Please confirm your new password.",
                    equalTo: "Passwords do not match."
                }
            },
            errorElement: 'div',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                $(element).closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid').addClass('is-valid');
            },
            submitHandler: function(form) {
                // Disable the submit button to prevent multiple submissions
                $('button[type="submit"]').prop('disabled', true);
                form.submit();
            }
        });
    });
</script>
{% endblock %}