https://www.zumstein.ch/shop/assets/login/js/login_handler.js?v=835

1/**
2 *
3 *
4 * Autoren: Jose Fontanil & Reto Glanzmann & Roland Bruehwiler & Glarotech GmbH
5 *
6 * CVS-Version / Datum: $Id: login_handler.js,v ccd9cdad3 2025/05/16 10:39:14 gitlabv1 $ $Dl: #dl_eu#$
7 *
8 * -----------------------------------------------------------------------
9 * #lizenz#
10 * -----------------------------------------------------------------------
11 */
12
13/**
14 * @namespace
15 */
16var PepperShop   = PepperShop || {};
17PepperShop.login = PepperShop.login || {};
18
19/**
20 * Klasse stellt die Funktionalitaet zur Verfuegung, anhand des Usernames
21 * (Benutzer / Email) dynamisch die passenden Eingabefelder abzurufen.
22 * @class
23 */
24PepperShop.login.login_handler = (function ($) {
25    function construct() {
26        this.autofill_password = '';
27
28        this.get_password_field = function (elem) {
29            var username_login = $(elem).val();
30            var from_where     = $(elem).attr('data-where');
31
32            $('.login_dynamic_box').remove();
33
34            if (username_login.length >= 3) {
35                get_fields_via_ajax('get_password_fields', username_login, from_where, this.autofill_password);
36            }
37            else {
38                // Account-Erstellen Link einblenden
39                $('.get_password').show();
40            }
41        };
42
43        var get_fields_via_ajax = function (ajax_method, username_login, from, autofill_password = '') {
44            let pps_config = PepperShop.config;
45            $.ajax({
46                       type   : 'POST',
47                       url    : pps_config.httpschema + pps_config.shopWebrootPath + 'shop/ajax_handler.php?',
48                       data   : {
49                           ajax_handler_id: ajax_method,
50                           username_login : username_login,
51                           from           : from,
52                       },
53                       success: function (data) {
54                           // Account-Erstellen Link ausblenden
55                           $('.get_password').hide();
56                           try {
57                               let response = JSON.parse(data);
58                               if (from === 'left_column') {
59                                   $('.login_box_left_username').after(response.data);
60                                   //$('.get_password_left_btn').hide();
61                               }
62                               else {
63                                   $('.login_box_username').after(response.data);
64                                   //$('.get_password_btn').hide();
65                               }
66                               set_focus_on_password();
67                               set_listener_on_login_btn();
68                               // Falls Passwort von Browser bereits abgefuellt wurde, dieses in neues Feld setzen
69                               autofill_password_to_input_field(autofill_password);
70                           } catch (err) {
71                               show_error_msg(PepperShop.locale.technischer_fehler_text);
72                           }
73                       },
74                       error  : function (request, status, error) {
75                           show_error_msg(PepperShop.locale.technischer_fehler_text);
76                       }
77                   })
78        };
79
80        var set_focus_on_password = function () {
81            // password: Inputfeld Kassenlogin
82            // login_passwort: Inputfeld Kundenaccount Login
83            $('#password,#login_passwort').focus();
84        };
85
86        var set_listener_on_login_btn = function () {
87            $('#login_weiter_btn').click(function (event) {
88                event.preventDefault();
89                $('#error_msg_alert').remove();
90                check_login();
91            });
92            $('#login_passwort, #password').on('keypress', function (event) {
93                var keycode = (event.keyCode ? event.keyCode : event.which);
94                // 13 = Enter
95                if (keycode === 13) {
96                    $('form[name="Formular"]').submit();
97                }
98            });
99        }
100        
101        var check_login = function () {
102            let pps_config = PepperShop.config;
103            $.ajax({
104                       type   : 'POST',
105                       url    : pps_config.httpschema + pps_config.shopWebrootPath + 'shop/ajax_handler.php?',
106                       data   : {
107                           ajax_handler_id: 'check_login',
108                           Benutzername   : $('input[name="Benutzername_email"]').val(),
109                           Passwort       : $('input[name="Passwort"]').val(),
110                       },
111                       success: function (data) {
112                           if (data === 'gesperrt') {
113                               show_error_msg(PepperShop.locale.geperrt_zu_viele_login_versuche);
114                           }
115                           else if (data === 'passwort_falsch') {
116                               show_error_msg(PepperShop.locale.anmeldedaten_nicht_korrekt);
117                           }
118                           else {
119                               $('form[name="Formular"]').submit();
120                           }
121                       },
122                       error  : function (request, status, error) {
123                           $('form[name="Formular"]').submit();
124                       }
125                   })
126        };
127        
128        var show_error_msg = function (error) {
129            var info_banner = '<div id="error_msg_alert" class="login_dynamic_box alert alert-danger" ' +
130                'role="alert" aria-live="polite" ' +
131                'style="margin-top: 1rem">' +
132                error + '</div>';
133            let login_box   = $('.login_box');
134            if (login_box.length) {
135                login_box.append(info_banner);
136            }
137            else {
138                $('.js_variant').append(info_banner);
139            }
140        };
141
142        const autofill_password_to_input_field = (password) => {
143            $('#login_passwort, #password').val(password);
144        };
145    }
146
147    return construct;
148}(jQuery));
149
150$(function () {
151    var obj                  = new PepperShop.login.login_handler();  // new Object
152    var benutzer_email_input = $('#benutzername_email, #login_benutzername');
153    let benutzer_weiter_button = $('.get_password_btn');
154    var last_login           = '';
155    let is_standalone        = $('#standalone_passwort').length > 0;
156
157    // var benutzer_email_left_input = $('#benutzername_login_box');
158    // Fokus auf Login-Feld verlieren
159
160    benutzer_weiter_button.on('click', function () {
161        if (!is_standalone) {
162            last_login = benutzer_email_input.val();
163            obj.get_password_field(benutzer_email_input);
164        }
165    });
166
167    // Enter interpretieren
168    benutzer_email_input.on('keydown', function (event) {
169        var keycode = (event.keyCode ? event.keyCode : event.which);
170        // 13 = Enter| 9 = Tab
171        if (!is_standalone && (keycode === 13 || keycode === 9) && $(this).val() !== last_login) {
172            last_login = $(this).val();
173            event.preventDefault();
174            obj.get_password_field(this);
175        }
176    });
177    
178    // Im Falle dass der Shop als Kasse betrieben wird, muss der Login-Btn submitten.
179    if (is_standalone) {
180        $('.get_password_btn').attr('type', 'submit');
181        $('.get_password_btn').attr('tabindex', '3');
182    }
183    else {
184        if(benutzer_email_input.length > 0 && benutzer_email_input.val().length) {
185            obj.get_password_field(benutzer_email_input);
186        }
187    }
188    // Wenn der Browser das Passwort autofillt, speichern wir dieses im Login Handler Objekt,
189    // damit wir es spaeter in das neue Passwortfeld schreiben koennen.
190    $('.autocomplete_password_filler input[type=password]').on('change', e => {
191        obj.autofill_password = $(e.target).val();
192    });
193});