Login-Advanced-UI/UX

Login-Advanced-UI/UX — Upgrade your login screen with a modern design, smooth animations, and a conversion-focused user experience.

login-profissional.php PHP • 9.01 KB
Script.JS JS • 2.65 KB
style.css CSS • 6.78 KB

/*
Plugin Name: Custom WooCommerce Login and Registration
Plugin URI: https://seusite.com/
Description: Complete plugin that creates custom login and registration forms integrated with WooCommerce, featuring a responsive, elegant interface and robust client/server validations via shortcode.
Version: 1.4
Author: Landing4You
Author URI: https://seusite.com/
License: GPL2
Text Domain: lr-plugin
Domain Path: /languages
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Prevent direct access.
}

class LoginRegistroPlugin {

    public function __construct() {
        add_shortcode( 'login_registro', [ $this, 'render_shortcode' ] );
        add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
        add_action( 'init', [ $this, 'handle_form_submission' ] );
    }

    public function enqueue_scripts() {
        wp_enqueue_style( 'lr-plugin-style', plugins_url( 'css/style.css', __FILE__ ) );
        wp_enqueue_script( 'jquery-mask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js', [ 'jquery' ], '1.14.16', true );
        wp_enqueue_script( 'lr-plugin-script', plugins_url( 'js/script.js', __FILE__ ), [ 'jquery', 'jquery-mask' ], '1.0.0', true );
    }

    public function render_shortcode() {
        ob_start();
        if ( isset( $_GET['lr_message'] ) ) {
            echo '<div class="lr-message">' . esc_html( wp_unslash( $_GET['lr_message'] ) ) . '</div>';
        }

        $display_register = ( isset( $_GET['lr_form'] ) && $_GET['lr_form'] === 'register' ) ? 'block' : 'none';
        ?>
        <div class="lr-container">
            <!-- Login Box -->
            <div class="lr-form-box lr-login-box" style="display: echo ( $display_register === 'block' ? 'none' : 'block' ); ?>;">
                <form method="post" class="lr-login-form">
                    <h2 class="form-title">_e( 'Login', 'lr-plugin' ); ?></h2>
                    wp_nonce_field( 'lr_login_action', 'lr_login_nonce' ); ?>

                    <div class="form-group">
                        <input type="text" name="lr_user_login" id="lr_user_login" placeholder=" " required>
                        <label for="lr_user_login">_e( 'Email', 'lr-plugin' ); ?></label>
                        <div class="border-animation"></div>
                    </div>

                    <div class="form-group">
                        <input type="password" name="lr_user_pass" id="lr_user_pass" placeholder=" " required>
                        <label for="lr_user_pass">_e( 'Password', 'lr-plugin' ); ?></label>
                        <div class="border-animation"></div>
                    </div>

                    <div class="forgot-password">
                        <a href="echo esc_url( wp_lostpassword_url() ); ?>">_e( 'Forgot Password?', 'lr-plugin' ); ?></a>
                    </div>

                    <input type="hidden" name="lr_action" value="login">
                    <button type="submit">_e( 'Log In', 'lr-plugin' ); ?></button>
                </form>

                <div class="lr-divider lr-divider-social">
                    <span>_e( 'Or continue with', 'lr-plugin' ); ?></span>
                </div>

                <div class="lr-social-login" style="margin-top: 15px;">
                    echo do_shortcode( '[nextend_social_login provider="google"]' ); ?>
                </div>
            </div>

            <div class="lr-divider">
                <span>_e( 'New to CodexaWP?', 'lr-plugin' ); ?></span>
            </div>

            <div class="lr-register-outside" style="margin-top: 20px; display: echo ( $display_register === 'block' ? 'none' : 'block' ); ?>;">
                <div style="text-align: center;">
                    <button id="lr-show-register-outside" class="lr-register-button">_e( 'Register', 'lr-plugin' ); ?></button>
                </div>
            </div>

            <!-- Registration Form -->
            <div class="lr-register-form-wrapper" style="display: echo esc_attr( $display_register ); ?>; margin-top: 20px;">
                <div class="lr-form-box">
                    <form method="post" class="lr-register-form">
                        <h2 class="form-title">_e( 'Register', 'lr-plugin' ); ?></h2>
                        wp_nonce_field( 'lr_register_action', 'lr_register_nonce' ); ?>

                        <div class="form-group">
                            <input type="email" name="lr_email" id="lr_email" placeholder=" " value="echo isset( $_GET['lr_email'] ) ? esc_attr( wp_unslash( $_GET['lr_email'] ) ) : ''; ?>" required>
                            <label for="lr_email">_e( 'Email', 'lr-plugin' ); ?></label>
                            <div class="border-animation"></div>
                        </div>

                        <div class="form-group">
                            <input type="password" name="lr_senha" id="lr_senha" placeholder=" " required>
                            <label for="lr_senha">_e( 'Password', 'lr-plugin' ); ?></label>
                            <div class="border-animation"></div>
                        </div>

                        <input type="hidden" name="lr_action" value="register">
                        <button type="submit">_e( 'Register', 'lr-plugin' ); ?></button>

                        <div class="lr-register-toggle" style="text-align: center; margin-top: 15px;">
                            <button type="button" id="lr-show-login">_e( 'Already have an account? Log In', 'lr-plugin' ); ?></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        return ob_get_clean();
    }

    public function handle_form_submission() {
        if ( 'POST' === $_SERVER['REQUEST_METHOD'] && isset( $_POST['lr_action'] ) ) {
            if ( 'login' === $_POST['lr_action'] ) {
                $this->handle_login();
            } elseif ( 'register' === $_POST['lr_action'] ) {
                $this->handle_registration();
            }
        }
    }

    private function handle_login() {
        if ( ! isset( $_POST['lr_login_nonce'] ) || ! wp_verify_nonce( wp_unslash( $_POST['lr_login_nonce'] ), 'lr_login_action' ) ) {
            wp_die( __( 'Invalid security nonce.', 'lr-plugin' ) );
        }

        $creds = [
            'user_login'    => sanitize_text_field( wp_unslash( $_POST['lr_user_login'] ) ),
            'user_password' => sanitize_text_field( wp_unslash( $_POST['lr_user_pass'] ) ),
            'remember'      => true,
        ];

        $user = wp_signon( $creds, false );
        if ( is_wp_error( $user ) ) {
            $error_message = $user->get_error_message();
            wp_redirect( add_query_arg( 'lr_message', urlencode( $error_message ), wp_get_referer() ) );
            exit;
        } else {
            wp_set_current_user( $user->ID );
            wp_set_auth_cookie( $user->ID );
            wp_redirect( home_url() );
            exit;
        }
    }

    private function handle_registration() {
        if ( ! isset( $_POST['lr_register_nonce'] ) || ! wp_verify_nonce( wp_unslash( $_POST['lr_register_nonce'] ), 'lr_register_action' ) ) {
            wp_die( __( 'Invalid security nonce.', 'lr-plugin' ) );
        }

        $email = sanitize_email( wp_unslash( $_POST['lr_email'] ) );
        $pass  = sanitize_text_field( wp_unslash( $_POST['lr_senha'] ) );

        if ( ! filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {
            $this->redirect_registration_error( __( 'Invalid email address.', 'lr-plugin' ), $email );
        }

        if ( username_exists( $email ) || email_exists( $email ) ) {
            $this->redirect_registration_error( __( 'Email is already registered.', 'lr-plugin' ), $email );
        }

        $username = sanitize_user( current( explode( '@', $email ) ), true );
        if ( username_exists( $username ) ) {
            $username .= wp_generate_password( 4, false );
        }

        $user_id = wp_create_user( $username, $pass, $email );
        if ( is_wp_error( $user_id ) ) {
            $this->redirect_registration_error( $user_id->get_error_message(), $email );
        }

        $creds = [
            'user_login'    => $username,
            'user_password' => $pass,
            'remember'      => true,
        ];

        $user = wp_signon( $creds, false );
        if ( is_wp_error( $user ) ) {
            wp_redirect( add_query_arg( 'lr_message', urlencode( $user->get_error_message() ), wp_get_referer() ) );
            exit;
        } else {
            wp_set_current_user( $user->ID );
            wp_set_auth_cookie( $user->ID );
            wp_redirect( home_url() );
            exit;
        }
    }

    private function redirect_registration_error( $error, $email ) {
        wp_redirect( add_query_arg( [
            'lr_message' => urlencode( $error ),
            'lr_form'    => 'register',
            'lr_email'   => urlencode( $email ),
        ], wp_get_referer() ) );
        exit;
    }
}

new LoginRegistroPlugin();

jQuery(document).ready(function($) {

    // Se a URL indicar que o formulário de registro deve ser exibido, oculta o login
    if (window.location.search.indexOf('lr_form=register') !== -1) {
        $('.lr-login-box').hide();
        $('.lr-register-form-wrapper').show();
    }

    // Botão "Registrar" externo (abre o formulário de registro)
    $(document).on('click', '#lr-show-register-outside', function(e) {
        e.preventDefault();
        $('.lr-login-box').fadeOut();
        $('.lr-register-form-wrapper').fadeIn();
    });

    // Botão "Já tem conta? Faça login" (abre o formulário de login)
    $(document).on('click', '#lr-show-login', function(e) {
        e.preventDefault();
        $('.lr-register-form-wrapper').fadeOut();
        $('.lr-login-box').fadeIn();
    });

    // Função para validar e-mail
    function validateEmail(email) {
        var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    // Validação do formulário de registro (client-side)
    $('.lr-register-form').on('submit', function(e) {
        $('.error-message').remove();
        $('.form-group').removeClass('has-error');
        var valid = true;

        var email = $('#lr_email').val().trim();
        var senha = $('#lr_senha').val().trim();

        // Validação do e-mail
        if (email === '' || !validateEmail(email)) {
            valid = false;
            var emailGroup = $('#lr_email').closest('.form-group');
            emailGroup.append('<span class="error-message">Email inválido.</span>');
            emailGroup.addClass('has-error');
        }

        // Validação da senha
        if (senha === '') {
            valid = false;
            var senhaGroup = $('#lr_senha').closest('.form-group');
            senhaGroup.append('<span class="error-message">Senha é obrigatória.</span>');
            senhaGroup.addClass('has-error');
        }

        if (!valid) {
            e.preventDefault();
        }
    });

    // Exibe o spinner ao submeter os formulários (login e registro)
    $('.lr-login-form, .lr-register-form').on('submit.spinner', function(e) {
        if (e.isDefaultPrevented()) {
            return;
        }
        var $form = $(this);
        var $button = $form.find('button[type="submit"]');
        if ($button.hasClass('loading')) {
            e.preventDefault();
            return;
        }
        $button.addClass('loading');
    });

    // Remove a classe loading dos botões quando a janela receber foco
    $(window).on('focus', function() {
        $('button[type="submit"].loading').removeClass('loading');
    });
});

Script.JS

/* Estilos Gerais do Plugin */
.lr-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.lr-form-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.form-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.6rem;
    color: #333;
}

.lr-message {
    margin: 20px auto;
    padding: 10px;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
}

.lr-toggle {
    text-align: center;
    margin-top: 20px;
}

.lr-toggle button {
    background: none;
    border: none;
    color: #0073aa;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
}

/* Botões */
button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: none;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button[type="submit"]:hover {
    background: #005f8d;
}

/* Estilos dos Campos */
.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    padding: 14px 12px;
    border: 2px solid #ccc;
    border-radius: 4px !important;
    background: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    z-index: 1;
}

.form-group input:focus {
    border-color: #0073aa;
    outline: none;
}

.form-group label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    background: #fff;
    padding: 0 5px;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 0.85rem;
    color: #0073aa;
}

/* Para campos com erro, forçar label para cima */
.form-group.has-error label {
    top: -8px !important;
    font-size: 0.85rem !important;
    color: #d9534f !important;
}

/* Borda inferior com animação */
.border-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0073aa;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.form-group input:focus ~ .border-animation {
    transform: scaleX(1);
}

/* Mensagens de erro inline */
.error-message {
    display: block;
    font-size: 0.85rem;
    color: #d9534f;
    margin-top: 4px;
    min-height: 1em;
}

/* Link "Esqueci a senha" */
.forgot-password {
    text-align: right;
}

.forgot-password a {
    font-size: 0.9rem;
    color: #0073aa;
    text-decoration: none;
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Feedback inline (Ajax) */
.ajax-response {
    display: none;
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.ajax-response.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d0e9c6;
}

.ajax-response.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* Medidor de força da senha */
#password-strength-meter {
    height: 5px;
    margin-top: 5px;
    background: #ccc;
    border-radius: 3px;
    overflow: hidden;
}

/* Estilos para o Select2 */
.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    height: auto !important;
    box-sizing: border-box !important;
    color: #333 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: transparent !important;
    color: #333 !important;
}
.select2-container--default .select2-dropdown {
    background-color: #fff !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
}
.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    color: #333 !important;
}

/* Botão para alternar para login interno */
.form-group.login-switch button {
    background: transparent;
    color: #0073aa;
    border: none;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.form-group.login-switch button:hover {
    color: #005f8d;
}

/* Responsividade para dispositivos menores */
@media (max-width: 480px) {
    .lr-container {
        padding: 5px;
    }
    .lr-form-box {
        padding: 20px 10px;
    }
}

/* Garante que as mensagens de resposta (Ajax) sejam visíveis */
.ajax-response.success,
.ajax-response.error {
    display: block !important;
}

/* Spinner usando pseudo-elemento */
button[type="submit"].loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

button[type="submit"].loading::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilização do container do Social Login */
.lr-social-login {
    text-align: center !important;
    margin-top: 15px;
}

/* Área de cadastro fora do box de login */
.lr-register-outside {
    margin-top: 20px;
    text-align: center;
}

/* Botão de registro fora do box com !important */
.lr-register-button {
    padding: 10px 30px !important;
    border: 2px solid #0073aa !important;
    background: transparent !important;
    color: #0073aa !important;
    cursor: pointer;
    border-radius: 4px !important;
    font-size: 1rem !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

.lr-register-button:hover {
    background: #0073aa !important;
    color: #fff !important;
}

/* Divisor para textos (compartilhada) */
.lr-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.lr-divider::before,
.lr-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
}

.lr-divider:not(:empty)::before {
    margin-right: 10px;
}

.lr-divider:not(:empty)::after {
    margin-left: 10px;
}

.lr-divider span {
    font-size: 1rem;
    color: #666;
}

/* Específico para o divisor do social login (texto "Ou continuar com") */
.lr-divider.lr-divider-social span {
    /* Ajuste adicional se necessário */
}

style.css