feat: add Dokan Login Form popup (#575)

Gruntfile.js

@@ -64,7 +64,11 @@ module.exports = function(grunt) {
                 files: {
                     '<%= dirs.js %>/dokan.js': [
                         '<%= dirs.devJsSrc %>/*.js',
-                        '!<%= dirs.devJsSrc %>/admin.js'
+                        '!<%= dirs.devJsSrc %>/admin.js',
+                        '!<%= dirs.devJsSrc %>/login-form-popup.js'
+                    ],
+                    '<%= dirs.js %>/login-form-popup.js': [
+                        '<%= dirs.devJsSrc %>/login-form-popup.js'
                     ]
                 }
             },

assets/src/js/login-form-popup.js

@@ -0,0 +1,101 @@
+// Dokan Login Form Popup
+(function($) {
+    dokan.login_form_popup = {
+        form_html: '',
+
+        init: function () {
+            $( 'body' ).on( 'dokan:login_form_popup:show', this.get_form );
+            $( 'body' ).on( 'submit', '#dokan-login-form-popup-form', this.submit_form );
+            $( 'body' ).on( 'dokan:login_form_popup:working', this.working );
+            $( 'body' ).on( 'dokan:login_form_popup:done_working', this.done_working );
+        },
+
+        get_form: function (e, options) {
+            if ( dokan.login_form_popup.form_html ) {
+                dokan.login_form_popup.show_popup();
+                return;
+            }
+
+            options = $.extend(true, {
+                nonce: dokan.nonce,
+                action: 'dokan_get_login_form'
+            }, options );
+
+            $( 'body' ).trigger( 'dokan:login_form_popup:fetching_form' );
+
+            $.ajax( {
+                url: dokan.ajaxurl,
+                method: 'get',
+                dataType: 'json',
+                data: {
+                    _wpnonce: options.nonce,
+                    action: options.action
+                }
+            } ).done( function ( response ) {
+                dokan.login_form_popup.form_html = response.data;
+                dokan.login_form_popup.show_popup();
+                $( 'body' ).trigger( 'dokan:login_form_popup:fetched_form' );
+            } );
+        },
+
+        show_popup: function () {
+            $.magnificPopup.open({
+                items: {
+                    src: dokan.login_form_popup.form_html,
+                    type: 'inline'
+                },
+
+                callbacks: {
+                    open: function () {
+                        $( 'body' ).trigger( 'dokan:login_form_popup:opened' );
+                    }
+                }
+            });
+        },
+
+        submit_form: function ( e ) {
+            e.preventDefault();
+
+            var form_data = $( this ).serialize();
+            var error_section = $( '.dokan-login-form-error', '#dokan-login-form-popup-form' );
+
+            error_section.removeClass( 'has-error' ).text('');
+
+            $( 'body' ).trigger( 'dokan:login_form_popup:working' );
+
+            $.ajax( {
+                url: dokan.ajaxurl,
+                method: 'post',
+                dataType: 'json',
+                data: {
+                    _wpnonce: dokan.nonce,
+                    action: 'dokan_login_user',
+                    form_data: form_data
+                }
+            } ).done( function ( response ) {
+                $( 'body' ).trigger( 'dokan:login_form_popup:logged_in' );
+                $.magnificPopup.close();
+            } ).always( function () {
+                $( 'body' ).trigger( 'dokan:login_form_popup:done_working' );
+            } ).fail( function ( jqXHR ) {
+                if ( jqXHR.responseJSON && jqXHR.responseJSON.data && jqXHR.responseJSON.data.message ) {
+                    error_section.addClass( 'has-error' ).text( jqXHR.responseJSON.data.message );
+                }
+            } );
+        },
+
+        working: function () {
+            $( 'fieldset', '#dokan-login-form-popup-form' ).prop( 'disabled', true );
+            $( '#dokan-login-form-submit-btn' ).addClass( 'dokan-hide' );
+            $( '#dokan-login-form-working-btn' ).removeClass( 'dokan-hide' );
+        },
+
+        done_working: function () {
+            $( 'fieldset', '#dokan-login-form-popup-form' ).prop( 'disabled', false );
+            $( '#dokan-login-form-submit-btn' ).removeClass( 'dokan-hide' );
+            $( '#dokan-login-form-working-btn' ).addClass( 'dokan-hide' );
+        }
+    };
+
+    dokan.login_form_popup.init();
+})(jQuery);

assets/src/less/login-form-popup.less

@@ -0,0 +1,28 @@
+.dokan-login-form-popup-wrapper {
+    width: 430px !important;
+    padding: 16px !important;
+    margin: 0 auto !important;
+
+    .dokan-login-form-title {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+    }
+
+    fieldset {
+        padding: 0;
+        border: 0;
+        margin: 0;
+    }
+
+    .dokan-login-form-error {
+        color: @brand-danger;
+        background-color: @state-danger-bg;
+        font-size: 0.9em;
+
+        &.has-error {
+            padding: 5px 8px;
+            margin-bottom: 5px;
+        }
+    }
+}

assets/src/less/style.less

@@ -55,5 +55,6 @@
 @import "settings.less";
 @import "store.less";
 @import "withdraw.less";
+@import "login-form-popup.less";
 
 @import "responsive.less";

classes/ajax.php

@@ -64,6 +64,9 @@ function init_ajax() {
         add_action( 'wp_ajax_dokan_json_search_products_and_variations', array( $this, 'json_search_product' ), 10 );
         add_action( 'wp_ajax_nopriv_dokan_json_search_products_and_variations', array( $this, 'json_search_product' ), 10 );
         add_action( 'wp_ajax_dokan_json_search_vendor_customers', array( $this, 'dokan_json_search_vendor_customers' ) );
+
+        add_action( 'wp_ajax_nopriv_dokan_get_login_form', array( $this, 'get_login_form' ) );
+        add_action( 'wp_ajax_nopriv_dokan_login_user', array( $this, 'login_user' ) );
     }
 
     /**
@@ -832,4 +835,60 @@ final public function insert_attachment( $object, $cropped ) {
         return $attachment_id;
     }
 
+    /**
+     * Get contents for login form popup
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return void
+     */
+    public function get_login_form() {
+        check_ajax_referer( 'dokan_reviews' );
+
+        ob_start();
+        dokan_get_template_part( 'login-form/login-form-popup' );
+        $popup_html = ob_get_clean();
+
+        wp_send_json_success( $popup_html );
+    }
+
+    /**
+     * Login user
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return void
+     */
+    public static function login_user() {
+        check_ajax_referer( 'dokan_reviews' );
+
+        $post_data = wp_unslash( $_POST );
+
+        parse_str( $post_data['form_data'], $form_data );
+
+        $user_login    = isset( $form_data['dokan_login_form_username'] ) ? sanitize_text_field( $form_data['dokan_login_form_username'] ) : null;
+        $user_password = isset( $form_data['dokan_login_form_password'] ) ? sanitize_text_field( $form_data['dokan_login_form_password'] ) : null;
+
+        if ( empty( $user_login ) || empty( $user_password ) ) {
+            wp_send_json_error( array( 'message' => esc_html__( 'Invalid username or password.', 'dokan-lite' ) ), 400 );
+        }
+
+        $wp_user = wp_signon( array(
+            'user_login'    => $user_login,
+            'user_password' => $user_password,
+        ), '' );
+
+        if ( is_wp_error( $wp_user ) ) {
+            wp_send_json_error( array( 'message' => esc_html__( 'Wrong username or password.', 'dokan-lite' ) ), 400 );
+        }
+
+        wp_set_current_user( $wp_user->data->ID, $wp_user->data->user_login );
+        wp_set_auth_cookie( $wp_user->data->ID );
+
+        $response = apply_filters( 'dokan_ajax_login_user_response', array(
+            'message' => esc_html__( 'User logged in successfully.', 'dokan-lite' ),
+        ) );
+
+        wp_send_json_success( $response );
+    }
 }

includes/class-assets.php

@@ -370,6 +370,11 @@ public function get_scripts() {
                 'src'       => $asset_url . '/js/dokan-wp.js',
                 'deps'      => array( 'jquery' ),
                 'version'   => filemtime( $asset_path . '/js/dokan-wp.js' ),
+            ),
+            'dokan-loggin-form-popup' => array(
+                'src'       => $asset_url . '/js/login-form-popup.js',
+                'deps'      => array( 'dokan-popup' ),
+                'version'   => filemtime( $asset_path . '/js/login-form-popup.js' ),
             )
         );
 
@@ -456,6 +461,8 @@ public function enqueue_front_scripts() {
             }
         }
 
+        wp_enqueue_script( 'dokan-loggin-form-popup' );
+
         do_action( 'dokan_enqueue_scripts' );
     }
 

includes/functions.php

@@ -3455,3 +3455,32 @@ function dokan_privacy_policy_text() {
 
     echo wp_kses_post( wpautop( dokan_replace_policy_page_link_placeholders( $privacy_text ), true ) );
 }
+
+/**
+ * Dokan Login Form
+ *
+ * @since DOKAN_SINCE
+ *
+ * @param array $args
+ * @param bool  $echo
+ *
+ * @return void|string
+ */
+function dokan_login_form( $args = array(), $echo = false ) {
+    $defaults = array(
+        'title'        => esc_html__( 'Please Login to Continue', 'dokan-lite' ),
+        'id'           => 'dokan-login-form',
+        'nonce_action' => 'dokan-login-form-action',
+        'nonce_name'   => 'dokan-login-form-nonce',
+    );
+
+    $args = wp_parse_args( $args, $defaults );
+
+    if ( $echo ) {
+        dokan_get_template_part( 'login-form/login-form', false, $args );
+    } else {
+        ob_start();
+        dokan_get_template_part( 'login-form/login-form', false, $args );
+        return ob_get_clean();
+    }
+}

templates/login-form/login-form-popup.php

@@ -0,0 +1,3 @@
+<div class="white-popup dokan-login-form-popup-wrapper" id="dokan-login-form-popup">
+    <?php dokan_login_form( array( 'id' => 'dokan-login-form-popup-form' ), true ); ?>
+</div>

templates/login-form/login-form.php

@@ -0,0 +1,32 @@
+<?php if ( $title ): ?>
+    <h2 class="dokan-login-form-title"><?php echo $title; ?></h2>
+<?php endif; ?>
+
+<form class="dokan-form-container" id="<?php echo esc_attr( $id ); ?>">
+    <fieldset>
+        <div class="dokan-form-group">
+            <label class="dokan-form-label" for="dokan-login-form-username"><?php esc_html_e( 'Username', 'dokan-lite' ) ?>:</label>
+            <input requireds class="dokan-form-control" type="text" name='dokan_login_form_username' id='dokan-login-form-username'/>
+        </div>
+
+        <div class="dokan-form-group">
+            <label class="dokan-form-label" for="dokan-login-form-password"><?php esc_html_e( 'Password', 'dokan-lite' ) ?>:</label>
+            <input requireds class="dokan-form-control" type="password" name='dokan_login_form_password' id='dokan-login-form-password'/>
+        </div>
+
+        <div class="dokan-form-group">
+            <div class="dokan-login-form-error"></div>
+
+            <button type="submit" class="dokan-w5 dokan-btn dokan-btn-theme" id="dokan-login-form-submit-btn">
+                <?php esc_html_e( 'Login', 'dokan-lite' ); ?>
+            </button>
+
+            <button type="button" class="dokan-w5 dokan-btn dokan-btn-theme dokan-hide" id="dokan-login-form-working-btn">
+                <i class="fa fa-refresh fa-spin"></i>&nbsp;&nbsp;<?php esc_html_e( 'Logging in', 'dokan-lite' ); ?>...
+            </button>
+        </div>
+
+        <?php wp_nonce_field( esc_html( $nonce_action ), esc_html( $nonce_name ) ); ?>
+    </fieldset>
+</form>
+<div class="dokan-clearfix"></div>