Login Seite

brainstuff · 25. April 2021

Hallo,

Ich versuche vergeblich ein code-pen script zum Laufen zu bringen :

HTML

<!DOCTYPE html>
<html lang="en" class="js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Responsive login</title>
        <!--- https://codepen.io/codyhouse/pen/pIrbg ---!>
        
        <link rel="stylesheet" href="login_signup.css"> 

        <script type="text/javascript" src="login_signup.js"></script>
    </head>
<body>



    <header role="banner">
        <div id="cd-logo"><a href="#0"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-logo_1.svg" alt="Logo"></a></div>

        <nav class="main-nav">
            <ul>
                <!-- inser more links here -->
                <li><a class="cd-signin" href="#0">Sign in</a></li>
                <li><a class="cd-signup" href="#0">Sign up</a></li>
            </ul>
        </nav>
    </header>

    <div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
        <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
            <ul class="cd-switcher">
                <li><a href="#0">Sign in</a></li>
                <li><a href="#0">New account</a></li>
            </ul>

            <div id="cd-login"> <!-- log in form -->
                <form class="cd-form">
                    <p class="fieldset">
                        <label class="image-replace cd-email" for="signin-email">E-mail</label>
                        <input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <label class="image-replace cd-password" for="signin-password">Password</label>
                        <input class="full-width has-padding has-border" id="signin-password" type="text"  placeholder="Password">
                        <a href="#0" class="hide-password">Hide</a>
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <input type="checkbox" id="remember-me" checked>
                        <label for="remember-me">Remember me</label>
                    </p>

                    <p class="fieldset">
                        <input class="full-width" type="submit" value="Login">
                    </p>
                </form>
                
                <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
                <!-- <a href="#0" class="cd-close-form">Close</a> -->
            </div> <!-- cd-login -->

            <div id="cd-signup"> <!-- sign up form -->
                <form class="cd-form">
                    <p class="fieldset">
                        <label class="image-replace cd-username" for="signup-username">Username</label>
                        <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <label class="image-replace cd-email" for="signup-email">E-mail</label>
                        <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <label class="image-replace cd-password" for="signup-password">Password</label>
                        <input class="full-width has-padding has-border" id="signup-password" type="text"  placeholder="Password">
                        <a href="#0" class="hide-password">Hide</a>
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <input type="checkbox" id="accept-terms">
                        <label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
                    </p>

                    <p class="fieldset">
                        <input class="full-width has-padding" type="submit" value="Create account">
                    </p>
                </form>

                <!-- <a href="#0" class="cd-close-form">Close</a> -->
            </div> <!-- cd-signup -->

            <div id="cd-reset-password"> <!-- reset password form -->
                <p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>

                <form class="cd-form">
                    <p class="fieldset">
                        <label class="image-replace cd-email" for="reset-email">E-mail</label>
                        <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <input class="full-width has-padding" type="submit" value="Reset password">
                    </p>
                </form>

                <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
            </div> <!-- cd-reset-password -->
            <a href="#0" class="cd-close-form">Close</a>
        </div> <!-- cd-user-modal-container -->
    </div> <!-- cd-user-modal -->
</body>

</html>

Alles anzeigen

das dazu gehörige css heisst: login_signup.css und das dazu gehörige JS heisst login_signup.js beide sind im gleichen Verzeichnis wie das HTML.

Das CSS ist aus der scss Version erstellt ... aber es kommt nur der erste Auswahl Bildschirm ...

Danke

brainstuff

Sempervivum · 25. April 2021

Das Syntaxhighlighting zeigt an, was das Problem ist: Da ist ein Ausrufezeichen zu viel im schließenden Kommentar-Tag hier:

<!--- https://codepen.io/codyhouse/pen/pIrbg ---!>

Daher werden die folgenden Zeilen als auskommentiert behandelt und sind unwirksam bis weiter unten der Kommentar wirklich geschlossen wird.

brainstuff · 25. April 2021

Hallo Sempervivum,

Danke für diese Korrektur ... aber das ist scheinbar nur einer von mehreren Fehlern. Ich habe jetzt das Ausrufezeichen rausgenommen und habe auch die anderen Kommentare geprüft. Aber das läuft trotzdem noch nicht. Es kommt ei Auswahlbildschirm sign-in bzw sign-up ... aber wenn man darauf drückt, geht es nicht weiter.

Liegt es vielleicht am Java Script, oder an seiner Einbindung? hier hast Du noch das JS.

Code

jQuery(document).ready(function($){
    var $form_modal = $('.cd-user-modal'),
        $form_login = $form_modal.find('#cd-login'),
        $form_signup = $form_modal.find('#cd-signup'),
        $form_forgot_password = $form_modal.find('#cd-reset-password'),
        $form_modal_tab = $('.cd-switcher'),
        $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
        $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
        $forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
        $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
        $main_nav = $('.main-nav');

    //open modal
    $main_nav.on('click', function(event){

        if( $(event.target).is($main_nav) ) {
            // on mobile open the submenu
            $(this).children('ul').toggleClass('is-visible');
        } else {
            // on mobile close submenu
            $main_nav.children('ul').removeClass('is-visible');
            //show modal layer
            $form_modal.addClass('is-visible');    
            //show the selected form
            ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
        }

    });

    //close modal
    $('.cd-user-modal').on('click', function(event){
        if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
            $form_modal.removeClass('is-visible');
        }    
    });
    //close modal when clicking the esc keyboard button
    $(document).keyup(function(event){
        if(event.which=='27'){
            $form_modal.removeClass('is-visible');
        }
    });

    //switch from a tab to another
    $form_modal_tab.on('click', function(event) {
        event.preventDefault();
        ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
    });

    //hide or show password
    $('.hide-password').on('click', function(){
        var $this= $(this),
            $password_field = $this.prev('input');
        
        ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
        ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
        //focus and move cursor to the end of input field
        $password_field.putCursorAtEnd();
    });

    //show forgot-password form 
    $forgot_password_link.on('click', function(event){
        event.preventDefault();
        forgot_password_selected();
    });

    //back to login from the forgot-password form
    $back_to_login_link.on('click', function(event){
        event.preventDefault();
        login_selected();
    });

    function login_selected(){
        $form_login.addClass('is-selected');
        $form_signup.removeClass('is-selected');
        $form_forgot_password.removeClass('is-selected');
        $tab_login.addClass('selected');
        $tab_signup.removeClass('selected');
    }

    function signup_selected(){
        $form_login.removeClass('is-selected');
        $form_signup.addClass('is-selected');
        $form_forgot_password.removeClass('is-selected');
        $tab_login.removeClass('selected');
        $tab_signup.addClass('selected');
    }

    function forgot_password_selected(){
        $form_login.removeClass('is-selected');
        $form_signup.removeClass('is-selected');
        $form_forgot_password.addClass('is-selected');
    }

    //REMOVE THIS - it's just to show error messages 
    $form_login.find('input[type="submit"]').on('click', function(event){
        event.preventDefault();
        $form_login.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
    });
    $form_signup.find('input[type="submit"]').on('click', function(event){
        event.preventDefault();
        $form_signup.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
    });


    //IE9 placeholder fallback
    //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
    if(!Modernizr.input.placeholder){
        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
              }
        }).blur(function() {
             var input = $(this);
              if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.val(input.attr('placeholder'));
              }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
              $(this).find('[placeholder]').each(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                     input.val('');
                }
              })
        });
    }

});


//credits https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
jQuery.fn.putCursorAtEnd = function() {
    return this.each(function() {
        // If this function exists...
        if (this.setSelectionRange) {
              // ... then use it (Doesn't work in IE)
              // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
              var len = $(this).val().length * 2;
              this.setSelectionRange(len, len);
        } else {
            // ... otherwise replace the contents with itself
            // (Doesn't work in Google Chrome)
              $(this).val($(this).val());
        }
    });
};

Alles anzeigen

und kannst Du bitte auch mal nachsehen, ob dieses Js-Script wirklich in der Lage ist,da einen neuen User zu registrieren? Ich habe irgendwie den Eindruck, dass da nirgendwo steht, wo die Daten dann gespeichert werden.

Außerdem bin ich dabei zu überlegen, ob dieses Script wirklich mein Problem lösen kann.... so wie es aussieht, kann man sich da registrieren bzw einloggen. Aber das ist dann ja fast völliger Schwachsinn ... da kann sich dann jeder registrieren und dann einloggen. Wenn diese Seite funktioniert, dann kann sich jeder ja jeder registrieren und dann einloggen.

Ich brauche aber so eine login Seite, wo man sich nur einmal registrieren kann und dann kommt man nur mit dem Benutzernamen und dem dazugehörigen Passwort auf eine Seite mit user spezifischen Inhalten, die nur dem User gehören.

Am liebsten hätte ich es so wie hier bei html-seminar.de wo man, wenn man eingeloggt ist, an Inhalte kommt die für alle bestimmt sind und auch an Inhalte kommt, die nur für einem selbst bestimmt sind.

Ich sehe da 4 Zugangszonen:

Zone 1 öffentliche Inhalte die für Alle bestimmt sind (zugänglich ohne Passwort und Nutzernamen)
Zone 2 Inhalte die nur für "Mitglieder" bestimmt sind, die eingeloggt sind und die sich dann diese Inhalte anschauen können.

Zone 3 Inhalte die nur für "Mitglieder" bestimmt sind, die Inhalte ansehen und bearbeiten können, wenn sie eingeloggt sind.
Zone 4 Private Inhalte, die nur für bestimmte "Mitglieder" zugänglich sind, wenn sie eingeloggt sind.
Zone 5 uneingeschränkter Zugang zu allen Inhalten die nicht privat sind (= Administratoren Zugang)

Anders gesagt, ich suche nach einer Möglichkeit, wo ich den Nutzern, die Zugriffsrechte einräumen kann, die sie wirklich nutzen dürfen.

Ich finde aber nur scripts die eigentlich nicht brauchbar sind.

Danke,

brainstuff

Sempervivum · 25. April 2021

Nächstes Problem: Dein Javascript benutzt jQuery aber in deinem HTML finde ich nicht, dass es auch eingebunden wird.

Zitat

ob dieses Js-Script wirklich in der Lage ist,da einen neuen User zu registrieren? Ich habe irgendwie den Eindruck, dass da nirgendwo steht, wo die Daten dann gespeichert werden.

Login-Skripts sind nicht mein Schwerpunkt aber so viel weiß ich, dass dazu immer ein serverseitiges Skript gehört, das die Eingaben prüft und ggf. den Benutzer anlegt. Das ist aber eine Wissenschaft für sich und da sind andere gefragt, dich zu unterstützen.

brainstuff · 25. April 2021

Sempervivum,

Ich habe jetzt des jquery eingebunden :

Jetzt kommt der Anmeldebildschirm bzw die Registerierung Wenn ich dann was eintrage kommt beim E-mail "Error message here"

in einem roten Kasten ... und dann geht nichts mehr weiter.

Ich glaube, dass das von diesem JS code kommt:

<span class="cd-error-message">Error message here!</span>

</p>

oder vielleicht auch von dem eingebundenen jquery ...

Ich habe es mit verschiedenen E-Mail Adressen ausprobiert, weil ich in letzter Zeit oftmals Formulare gesehen habe, die nur noch e-mail adressen bei google akzeptieren wollen ... aber das Formular zeigt den Error auch dann, wenn man eine Adresse bei google nimmt ...

Aber das mit den Formularen, die keine e-mail Adressen (ausser bei google und MS) akzeptieren ist auch so eine gemeine Sauerei ...

Ich suche mir jetzt ein anderes Script ... das was ich da gefunden habe ist offensichtlich sowieso nicht in der Lage auch nur einen User zu registrieren ... es ist irgendwie traurig, dass es da kein Standard-Script gibt, was das macht, was nötig ist

Danke,

brainstuff

jonas3344 · 25. April 2021

Das Script ist nur Frontend, gespeichert wird da nix. Geht mit JavaScript auch nicht.

Login Seite

Jetzt mitmachen!

Teilen

Tags