Formulare oder anderes nach Zeit ausblenden

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Freitag, 08. Februar 2019 um 11:22 Uhr (6/2019 Kalenderwoche)

geändert: Freitag, 19. Juni 2020 um 14:53 Uhr (25/2020 Kalenderwoche)

Keywords: token=ae39c4d110c5" >ausblenden token=ae39c4d110c5" >Formular token=ae39c4d110c5" >unsichtbar login token

Kategorien: JavaScript, PHP,

Text:

Da Formulare, die mit einem Sicherheitstoken ausgestattet sind, nach Ablauf des Token nicht mehr abgeschickt werden können, habe ich diesen Service mit Javascript entwickelt.


Wenn der Nutzer JavaScript deaktiviert hat, ist das Formular immer noch bedienbar, außer die Zeit des Token ist abgelaufen ;-)


IDEE: Vielleicht könnte man das auch grafisch darstellen mit:
Stand der Abarbeitung: 65%
Restliche Sekunden
60 Sekunden
1.) Anleitung: selfhtml.org
2.) TechDox: ähnliches Thema #249
3.) TechDox: ähnliches Thema #229


.Empfohlener Text zum Ausblenden des (Login-)Formulars:.
Aus Sicherheitsgründen ist die Eingabe der Anmeldedaten in einem vorgegebenen Zeitraum erforderlich. Dieser Zeitraum wurde überschritten.
Wir bitten Sie, die Anmeldung zu wiederholen.


Quellcode:   

<?php
/** Nach dieser Zeit wird das Login-Form mit JS wieder ausgeblendet!
 *  @var integer */
define('ZEIT_UM_LOGIN_AUSZUFUELLN', 2);
?>

<div id="restlSessionZeitAnzgn">
    <strong title="Zeit gilt ab <?= date('H:i'); ?> Uhr am <?= date('d.m.Y');
    ?>">Aus Sicherheitsgründen ist die Eingabe der Anmeldedaten in einem
        <br>
        vorgegebenen Zeitraum von <?= ZEIT_UM_LOGIN_AUSZUFUELLN; ?> Minuten erforderlich.
        <br><br>
        Sie haben noch <span id="MinutenAnzeige" style="color: green; font-weight: bold;"
        ><?= ZEIT_UM_LOGIN_AUSZUFUELLN;
            ?> Minuten</span> Zeit um Ihre Logindaten einzugeben.</strong>
    <br>
    <progress value="<?= (ZEIT_UM_LOGIN_AUSZUFUELLN * 60); ?>" 
              max="<?= (ZEIT_UM_LOGIN_AUSZUFUELLN * 60);
        ?>" id="loginRestzeitAnzeige">Restlicher Zeitraum</progress>
    <br><br>

    <label for="emaill" >Email*:</label>
        <input type="text" id="emaill" value="" name="email" required="required" autofocus>
        <br>
    <label for="passwortl" >Passwort*:</label>
        <input type="password" id="passwortl" value="" name="passwort" required="required">
        <br>
        <p><input type="submit" value="login" name="login" class="button" style="width:auto;" >
    </form>

</div><!-- ENDE: div class="restlSessionZeitAnzgn" -->


<script type="text/javascript">

    var restlMinuten = <?= ZEIT_UM_LOGIN_AUSZUFUELLN ?>;//in Minuten
    var restlSekunden = 60;//60 Sekunden (Countdown ab der letzten Minute)
    var eineMinute = 60000;//60 x 1000 = 60000 (= 1 Minute)
    var ladeZeitNeu;//wird unten gebraucht

    function zeigeVersteckeLoginNachZeit(restlMinuten, restlSekunden) {
        if (restlMinuten < 3) {
            //Letzte Minute ist angebrochen, jetzt Sekunden zeigen...

            if (restlSekunden < 1) {
                //Zeit ist abgelaufen; Die Prozedur nicht erneut laden!
                document.getElementById("restlSessionZeitAnzgn").innerHTML =
                    '<strong>Aus Sicherheitsgründen ist die Eingabe der Anmeldedaten in einem' +
                    '        <br>' +
                    '        vorgegebenen Zeitraum von <?= ZEIT_UM_LOGIN_AUSZUFUELLN; 
                                   ?> Minuten erforderlich.' +
                    '        <br>' +
                    '        Dieser Zeitraum wurde überschritten.' +
                    '        <br>' +
                    '        <br>' +
                    '        Wir bitten Sie, die Anmeldung zu wiederholen.</strong>' +
                    '        <br>' +
                    '        <a href="/index.php">Zum Login...</a>';

            } else {
                //Hier laeuft die Zeit ab!
                document.getElementById("MinutenAnzeige").style.color ="red";
                document.getElementById("MinutenAnzeige").style.fontWeight ="bold";
                document.getElementById("MinutenAnzeige").innerHTML =
                    "noch " + restlSekunden + " Sekunden";
                document.getElementById("loginRestzeitAnzeige").value = restlSekunden;

                //Restliche Sekunden um eine verringern
                restlSekunden = restlSekunden - 1;

                //jetzt einfach immer wieder aufrufen (1 x pro Minute)
                ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit(\'"
                    + restlMinuten + "\', \'" + restlSekunden + "\')", 1000);

            }//ENDE: else ==> if (restlSekunden < 1)

        } else if (restlMinuten < 1 || restlSekunden < 1) {
            //Hier sollte man nicht mehr hin kommen, aber zur Sicherheit:
            //Zeit ist abgelaufen; Die Prozedur nicht erneut laden!
            document.getElementById("restlSessionZeitAnzgn").innerHTML =
                '<strong>Aus Sicherheitsgründen ist die Eingabe der Anmeldedaten in einem' +
                '        <br>' +
                '        vorgegebenen Zeitraum von <?= ZEIT_UM_LOGIN_AUSZUFUELLN; 
                             ?> Minuten erforderlich.' +
                '        <br>' +
                '        Dieser Zeitraum wurde überschritten.' +
                '        <br>' +
                '        <br>' +
                '        Wir bitten Sie, die Anmeldung zu wiederholen.</strong>' +
                '        <br>' +
                '        <a href="/index.php">Zum Login...</a>';

        } else {
            //Restliche Minuten um eine Minute verringern
            restlMinuten = restlMinuten - 1;

            //Hier laeuft die Zeit ab!
            document.getElementById("loginRestzeitAnzeige").value = (restlMinuten * 60);
            document.getElementById("MinutenAnzeige").innerHTML =
                "noch " + restlMinuten + " Minuten";

            //jetzt einfach immer wieder aufrufen (1 x pro Minute)
            ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit(\'"
                + restlMinuten + "\', \'" + restlSekunden + "\')", eineMinute);

        }//ENDE: else ==> if (restlMinuten < 3)

    }//ENDE: function zeigeVersteckeLoginNachZeit()

    //Nach einer Minute (60.000 Milisekunden) geht es los...
    ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit("
        + restlMinuten + ", " + restlSekunden + ")", eineMinute);

</script>