Untitled

html>
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <style>
            input
            {
                background-color: grey;
                border: 1px solid black;
                min-width: 200px;
                min-height: 40px;
            }
            input,input.show
            {
                display: block;
            }
            button.show
            {
                display: inline;
            }
            .hidden
            {
                display: none;
            }
            .white
            {
                background-color: grey;
                color: black;
            }
            .green
            {
                background-color: green;
                color: white;
            }
            .red
            {
                background-color: red;
                color: white;
            }
            #titlename
            {
                text-align: center;
            }
            #formbox
            {
                width: 200px;
                margin: 20% auto;
            }
        </style>
        <script type="text/javascript">
            function l_compare_pass()
            {
                var lpass = document.getElementById("l_pass");
                var lPasswort_repeat = document.getElementById("l_Passwort_repeat");

                if (lpass.value != lPasswort_repeat.value)
                {
                    lPasswort_repeat.className = "show red";
                }
                else
                {
                    lPasswort_repeat.className = "show green";
                    return true;
                }

                return false;
            }

            function l_check_fields(Passwort_repeat)
            {
                var out = true;
                var lname = document.getElementById("l_name");
                var lpass = document.getElementById("l_pass");
                var lPasswort_repeat = document.getElementById("l_Passwort_repeat");

                if (lname.value == "")
                {
                    lname.placeholder = "Name einfügen!";
                    lname.className = "show red";
                    out = false;
                }
                else
                {
                    lname.className = "show green";
                }

                if (lpass.value == "")
                {
                    lpass.placeholder = "Passwort einfügen...!";
                    lpass.className = "show red";
                    out = false;
                }
                else
                {
                    lpass.className = "show green";
                }


                if (Passwort_repeat == 1)
                {
                    lPasswort_repeat.className = "show red";

                    if (lPasswort_repeat.value == "")
                    {
                        lPasswort_repeat.placeholder = "Passwort wiederholen!";
                        out = false;
                    }
                    else if (!l_compare_pass())
                    {
                        lPasswort_repeat.placeholder = "Passwort stimmt nicht überein!";
                        lPasswort_repeat.value = "";
                        out = false;
                    }
                    else
                    {
                        lPasswort_repeat.className = "show green";
                    }
                }

                return out;
            }

            function l_init_page()
            {
                var lname = document.getElementById("l_name");
                var lpass = document.getElementById("l_pass");
                var lPasswort_repeat = document.getElementById("l_Passwort_repeat");

                lname.focus();
                lname.value = "";
                lname.placeholder = "Name...";

                lpass.value = "";
                lpass.placeholder = "Passwort...";

                lPasswort_repeat.value = "";
                lPasswort_repeat.placeholder = "Passwort wiederholen...";
            }


            function l_show_login()
            {

                document.getElementById("titlename").innerHTML = "Login";


                document.getElementById("l_name").className = "show white";
                document.getElementById("l_pass").className = "show white";
                document.getElementById("l_Passwort_repeat").className = "hidden";


                document.getElementById("l_login").className = "show";
                document.getElementById("l_register").className = "hidden";


                document.getElementById("page_login").className = "hidden";
                document.getElementById("page_register").className = "show";
                document.getElementById("l_usecase").value = "login";
                l_init_page();
            }


            function l_show_register()
            {

                document.getElementById("titlename").innerHTML = "Register";


                document.getElementById("l_name").className = "show white";
                document.getElementById("l_pass").className = "show white";
                document.getElementById("l_Passwort_repeat").className = "show white";


                document.getElementById("l_login").className = "hidden";
                document.getElementById("l_register").className = "show";


                document.getElementById("page_login").className = "show";
                document.getElementById("page_register").className = "hidden";
                document.getElementById("l_usecase").value = "register";
                l_init_page();
            }

            window.onload = function()
            {
                document.getElementById("page_login").onclick = function()
                {
                    l_show_login();
                }

                document.getElementById("page_register").onclick = function()
                {
                    l_show_register();
                }

                document.getElementById("l_login").onclick = function()
                {
                    if (l_check_fields(0))
                    {
                        document.getElementById("data").submit();
                    }
                }

                document.getElementById("l_register").onclick = function()
                {
                    if (l_check_fields(1))
                    {
                        document.getElementById("data").submit();
                    }
                }

                document.getElementById("l_Passwort_repeat").onkeyup = function()
                {
                    l_compare_pass();
                }

                document.getElementById("l_reset").onclick = function()
                {
                    if (document.getElementById("l_Passwort_repeat").className == 'hidden')
                    {
                        l_show_login();
                    }
                    else
                    {
                        l_show_register();
                    }
                }


                l_show_login();
            }
        </script>
    </head>
    <body>
        <div id="formbox">
            <h1 id="titlename"></h1>

            <form id="data" action="http://localhost:80/Login/index.php" method="post">
            <input id="l_name" type="textbox" name="Username" />
            <input id="l_pass" type="password" name="Passwort" />
            <input id="l_Passwort_repeat" type="password" name="Passwort_repeat" />
            <input id="l_usecase" type="hidden" name="usecase" value="login" />

            <button id="l_login" type="button">Login</button>
            <button id="l_register" type="button">Register</button>
            <button id="l_reset" type="reset">Reset</button>
            </form>

            <a id="page_login" href="#">Login</a>
            <a id="page_register" href="#">Register</a>
        </div>
    </body>
</html>

// Datei: index.php

<?php
function error ($msg)
{
    return '<html><head><style>h1 {color:red;}</style></head><body><h1>Error: '.$msg.'</h1><a href="index.html">Back</a></body></html>';
}

function success ($msg)
{
    return '<html><head><style>h1 {color:blue;}</style></head><body><h1>Sucess: '.$msg.'</h1><a href="index.html">Back</a></body></html>';
}

function check ()
{
    $db = mysqli_connect("127.0.0.1","root","","login") or die (error (mysqli_error ($db)));
    mysqli_select_db ($db, "login") or die (error (mysqli_error ($db)));

    if ($_POST['usecase'] == "login")
    {
        $loginname = mysqli_real_escape_string($db, $_POST['Username']);

        $query = "SELECT Passwort FROM user WHERE Username = '$loginname'";

        $res = mysqli_query ($db, $query) or die (error (mysqli_error ($db)));

        $row = mysqli_fetch_assoc ($res);

        if (!$row)
        {
            die(error ("Der login ".$loginname." ist nicht vorhanden!"));
        }
        else
        {
                if (crypt ($_POST['Passwort'], $row['Passwort']) == $row['Passwort'])
                {

                    die (success ("Login erfolgreich!"));
                }
                else
                {
                    die (error("Falsches Passwort!"));
                }
        }
    }
    else if ($_POST['usecase'] == "register")
    {
        $loginname = mysqli_real_escape_string($db, $_POST['Username']);

        $query = "SELECT Username FROM user WHERE Username = '$loginname'";
        $res = mysqli_query ($db, $query);
        $row = mysqli_fetch_assoc ($res);

        if ($row)
        {
            die (error ("Username bereits vorhanden!"));
        }

        $password_hash = password_hash($_POST['Passwort'], PASSWORD_DEFAULT);
        $query = "INSERT INTO user VALUES ('$loginname', '$password_hash')";
        $res = mysqli_query ($db, $query);

        die (success("Registrierung erfolgreich!"));

    }

    mysqli_close($db);
}
check ();
?>