Untitled

import { swalWithBootstrapButton, swalWithBootstrapButtons } from "../../portal/js/core/modules.js";

const serverBaseUrl = 'http://localhost:8000'

const login = (email, password, csrf_token, btn) => {
    if (btn == 'login-btn') {
        $('#loging-btn').removeClass('d-none')
        $('#login-btn').addClass('d-none')
    }

    $.ajax({
        url: `${serverBaseUrl}/portal/account/login/`,
        method: 'POST',
        dataType: 'json',
        headers: { 'X-CSRFToken': csrf_token },
        data: {
            'email': email,
            'password': password
        },
        success: function (response) {
            console.log(34)
            window.location.href = '/portal/dashboard/';
            document.location = `${serverBaseUrl}/portal/dashboard/`
        },
        error: function (xhr) {
            if (xhr.status == 400) {
                swalWithBootstrapButton.fire(
                    'Failed!',
                    'Email or password entered is invalid.',
                    'error'
                )
            } else if (xhr.status == 500) {
                swalWithBootstrapButton.fire(
                    'Server Error!',
                    'Server is unavailable. Please try again laler.',
                    'info'
                )
            }
        },
        complete: function () {
            if (btn == 'login-btn') {
                $('#loging-btn').addClass('d-none')
                $('#login-btn').removeClass('d-none')
            } else {
                $('#registering-btn').addClass('d-none')
                $('#next-btn').removeClass('d-none')
                $('#prev-btn').attr('disabled', false)
            }
        }
    });
}

var page = 1;

const getStepPage = (step) => {
    return $(`.step-${step}`)
}

const validateFields = (step) => {
    let isValid = true;

    $(`.step-${step} input[required], .step-${step} select[required]`).each(function () {
        if (!$(this).val()) {
            isValid = false;
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    if (step == 3) {
        var emailField = $('#email');
        var passwordField = $('#password');
        var confirmPasswordField = $('#confirm-password');

        var isValidEmail = true
        var isValidPassword = true

        // Validate the email field
        if (!emailField.val().trim()) {
            emailField.addClass('is-invalid');
            isValid = false;
            isValidEmail = false
        } else {
            var emailRegex = /^\S+@\S+\.\S+$/;
            if (!emailRegex.test(emailField.val())) {
                emailField.addClass('is-invalid');
                isValid = false;
                isValidEmail = false
            } else {
                emailField.removeClass('is-invalid');
                isValidEmail = true
            }
        }

        // Validate the password field
        if (!passwordField.val().trim()) {
            passwordField.addClass('is-invalid');
            isValid = false;
            isValidPassword = false
        } else {
            var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
            if (!passwordRegex.test(passwordField.val())) {
                passwordField.addClass('is-invalid');
                isValid = false;
                isValidPassword = false
                if (isValidEmail) {
                    swalWithBootstrapButton.fire(
                        'Invalid Password',
                        'Password must contain at least 8 characters including at least one letter and one number.',
                        'error'
                    )
                }
            } else {
                passwordField.removeClass('is-invalid');
                isValidPassword = true
            }
        }

        // Validate the confirm password field
        if (!confirmPasswordField.val().trim()) {
            confirmPasswordField.addClass('is-invalid');
            isValid = false;
        } else {
            if (confirmPasswordField.val() !== passwordField.val()) {
                confirmPasswordField.addClass('is-invalid');
                isValid = false;

                if (isValidEmail && isValidPassword) {
                    swalWithBootstrapButton.fire(
                        'Error',
                        'The passwords entered do not match. Please make sure you have entered the same password in both fields.',
                        'error'
                    )
                }
            } else {
                confirmPasswordField.removeClass('is-invalid');
            }
        }
    }

    return isValid;
}

const handleStepPageSwitching = (oldStep, newStep, btn) => {
    const oldStepPage = getStepPage(oldStep)
    const newStepPage = getStepPage(newStep)

    let isValid = true

    newStepPage.removeClass('animate__animated animate__fadeInLeft')
    newStepPage.removeClass('animate__animated animate__fadeInRight')

    if (btn == 'next') {
        isValid = validateFields(oldStep)
        newStepPage.addClass('animate__animated animate__fadeInRight')
    } else {
        newStepPage.addClass(('animate__animated animate__fadeInLeft'))
    }

    if (isValid) {
        $('#prev-btn').removeClass('d-none')
        oldStepPage.addClass('d-none')
        newStepPage.removeClass('d-none')

        page = newStep

        switch (page) {
            case 1: $('.step-title').text('How should we address you?')
                $('.step-desc').text('Enter your details to continue.')
                $('#next-btn').text('Next')
                break
            case 2: $('.step-title').text(`Hello ${$('#title').val()} ${$('#first-name').val()}!`)
                $('.step-desc').text('Tell us more about yourself.')
                $('#next-btn').text('Next')
                break
            case 3: $('.step-title').text("What are your Credentials")
                $('.step-desc').text('This will help you login back anytime.')
                $('#next-btn').text('Submit')
                break
        }
    }
}

const gotoPreviousStepPage = () => {
    var oldStep = page

    if (oldStep > 1) {
        var newStep = page - 1

        if (newStep == 1) {
            $('#prev-btn').addClass('d-none')
        }

        handleStepPageSwitching(oldStep, newStep, 'prev')
    }
}

const gotoNextStepPage = () => {
    var oldStep = page

    if (oldStep < 3) {
        var newStep = page + 1
        handleStepPageSwitching(oldStep, newStep, 'next')
    } else {
        let isValid = validateFields(3)

        if (isValid) {
            $('#registering-btn').removeClass('d-none')
            $('#next-btn').addClass('d-none')
            $('#prev-btn').attr('disabled', true)

            const title = $('#title').val();
            const firstName = $('#first-name').val();
            const middleName = $('#middle-name').val();
            const lastName = $('#last-name').val();

            const csrf_token = $('.register-form input[name="csrfmiddlewaretoken"]').val();

            const nationality = $('#country-input').val();
            const city = $('#city-input').val();
            const gender = $('#gender').val();
            const year = $('#dob-year').val();
            const month = $('#dob-month').val();
            const day = $('#dob-day').val();
            const dob = `${year}-${month}-${day}`;

            const email = $('#email').val();
            const password = $('#password').val();

            const formData = {
                'email': email,
                'password': password,
                'title': title,
                'first_name': firstName,
                'middle_name': middleName,
                'last_name': lastName,
                'gender': gender,
                'dob': dob,
                'nationality': nationality,
                'city': city
            }

            $.ajax({
                url: `${serverBaseUrl}/portal/account/register/`,
                method: 'POST',
                dataType: 'json',
                headers: { 'X-CSRFToken': csrf_token },
                data: formData,
                success: function (response) {
                    console.log(response)
                    login(email, password, csrf_token, 'register-btn')
                },
                error: function (xhr) {
                    if (xhr.status == 400) {
                        swalWithBootstrapButton.fire(
                            'Error',
                            'Invalid field or fields.',
                            'error'
                        )
                    } else if (xhr.status == 403) {
                        swalWithBootstrapButton.fire(
                            'Forbidden',
                            'Please contact system administration.',
                            'error'
                        )
                    } else if (xhr.status == 409) {
                        swalWithBootstrapButton.fire(
                            'Error',
                            'Email is not available.',
                            'error'
                        )
                    } else if (xhr.status == 500) {
                        swalWithBootstrapButton.fire(
                            'Server Error!',
                            'Server is unavailable. Please try again laler.',
                            'info'
                        )
                    }
                }
            });
        }
    }
}

const loginButton = $('#login-btn');

loginButton.click(function (event) {

    // Prevent the form from submitting normally
    event.preventDefault();

    // Get the input values
    const email = $('.login-form #email').val()
    const password = $('.login-form #password').val()

    console.log(email, password)

    // Check if the input values are valid
    let isValid = true;

    if (!email) {
        isValid = false;
    }
    if (!password) {
        isValid = false;
    }

    // If the input values are valid, submit the form data to the server
    if (isValid) {
        const csrf_token = $('.login-form input[name="csrfmiddlewaretoken"]').val()
        login(email, password, csrf_token, 'login-btn')
    } else {
        swalWithBootstrapButton.fire(
            'Error!',
            'Email and password are required to continue.',
            'error'
        )
    }
});

$('#prev-btn').click(gotoPreviousStepPage)
$('#next-btn').click(gotoNextStepPage)