[EN/HU] HTML Login panel

Gyrosos · January 5

English:
I have 2 seperate html files, one for the login part and one for the registration part. And if i just press onto the link to open the registration HTML it gives me a blank white screen. My codes are below. Thanks for anyone who tries to help.

Magyar:

Szeretnék 2 külön HTML fájlból készíteni login panelt, ez addig szép és jó volt, míg nem próbáltam ki. Rámentem a regisztrációra, és egy full fehér képet adott be. Ez az egyetlen problémám egyenlőre. Előre köszönöm annak a segítségét aki segít!

HTML (Login part / Bejelentkezés része)

<!DOCTYPE html>
<html lang="hu">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title>HTML Login panel by: Gyrosos</title>

    <style>
    body{
    background-color: #1a1a1a;
    font-family: 'Arial';
    }

    img{
        display: block;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
    }

    #panel{
        margin: auto;
        width: 25%;
        height: 50%;
        color: white;
    }

    #panel p{
        color: white;
        font-size: 18px;
        display: block;
        margin-top: 15px;
        text-align: center;
    }
    #panel p a{
        text-decoration: none;
        color: #ff9900;
        transition: .5s;
        border-bottom: 0px solid #ff9900;
    }
    #panel p a:hover{
        border-bottom: 3px solid #ff9900;
        transition: .5s;
    }


    #username{
        width: 100%;
        height: 25px;
        margin-bottom: 25px;
        font-size: large;
        background-color: #3a3a3a;
        border-width: 0;
        border-bottom: 3px solid #3a3a3a;
        transition: .3s;
        color: white;
    }

    #username:focus{
        outline: none;
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #username:hover{
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #password{
        width: 100%;
        height: 25px;
        margin-bottom: 25px;
        font-size: large;
        background-color: #3a3a3a;
        border-width: 0;
        border-bottom: 3px solid #3a3a3a;
        transition: .3s;
        color: white;
    }

    #password:focus{
        outline: none;
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #password:hover{
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #passwordAgain{
        width: 100%;
        height: 25px;
        margin-bottom: 25px;
        font-size: large;
        background-color: #3a3a3a;
        border-width: 0;
        border-bottom: 3px solid #3a3a3a;
        transition: .3s;
        color: white;
    }

    #passwordAgain:focus{
        outline: none;
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #passwordAgain:hover{
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #email{
        width: 100%;
        height: 25px;
        margin-bottom: 50px;
        font-size: large;
        background-color: #3a3a3a;
        border-width: 0;
        border-bottom: 3px solid #3a3a3a;
        transition: .3s;
        color: white;
    }

    #email:focus{
        outline: none;
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #email:hover{
        border-bottom: 3px solid #ff9900;
        transition: .3s;
    }

    #loginButton{
        font-size: large;
        display: block;
        width: 50%;
        height: 40px;
        margin: auto;
        background-color: #ff9900;
        color: white;
        border: 0px solid #804d00;
        transition: .5s;
    }

    #loginButton:hover{
        border: 3px solid #804d00;
        transition: .5s;
    }
</style>

    <script>
        function attemptLogin(){
            var username = document.getElementByID('username').value
            var password = document.getElementByID('password').value
            mta.triggerEvent('attemptLogin', username, password)
        }
    </script>
</head>
<body>
    <img align="middle" src="logo.png">
    <div id="panel">
        <input type="text" placeholder="Felhasználónév" name="user" id="username"><br>
        <input type="password" placeholder="Jelszó" name="password" id="password"><br>
        <input type="button" value="Bejelentkezés" onclick="attemptLogin()" id="loginButton">
        <p>Elfelejtetted a jelszavad, vagy még nem regisztráltál?</p>
        <p><a href="#">Elfelejtett adatok</a> | <a href="register.html">Regisztráció</a></p>
    </div>
</body>
</html>

HTML (Registration part / Regisztráció rész)

<!DOCTYPE html>
<html lang="hu">
<head>
    <link rel="stylesheet" href="style.css">
    <title>HTML Login panel by: Gyrosos</title>
    <meta charset="utf-8">

    <style>
        body{
        background-color: #1a1a1a;
        font-family: 'Arial';
        }
    
        img{
            display: block;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            width: 20%;
        }
    
        #panel{
            margin: auto;
            width: 25%;
            height: 50%;
            color: white;
        }
    
        #panel p{
            color: white;
            font-size: 18px;
            display: block;
            margin-top: 15px;
            text-align: center;
        }
        #panel p a{
            text-decoration: none;
            color: #ff9900;
            transition: .5s;
            border-bottom: 0px solid #ff9900;
        }
        #panel p a:hover{
            border-bottom: 3px solid #ff9900;
            transition: .5s;
        }
    
    
        #username{
            width: 100%;
            height: 25px;
            margin-bottom: 25px;
            font-size: large;
            background-color: #3a3a3a;
            border-width: 0;
            border-bottom: 3px solid #3a3a3a;
            transition: .3s;
            color: white;
        }
    
        #username:focus{
            outline: none;
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #username:hover{
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #password{
            width: 100%;
            height: 25px;
            margin-bottom: 25px;
            font-size: large;
            background-color: #3a3a3a;
            border-width: 0;
            border-bottom: 3px solid #3a3a3a;
            transition: .3s;
            color: white;
        }
    
        #password:focus{
            outline: none;
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #password:hover{
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #passwordAgain{
            width: 100%;
            height: 25px;
            margin-bottom: 25px;
            font-size: large;
            background-color: #3a3a3a;
            border-width: 0;
            border-bottom: 3px solid #3a3a3a;
            transition: .3s;
            color: white;
        }
    
        #passwordAgain:focus{
            outline: none;
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #passwordAgain:hover{
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #email{
            width: 100%;
            height: 25px;
            margin-bottom: 50px;
            font-size: large;
            background-color: #3a3a3a;
            border-width: 0;
            border-bottom: 3px solid #3a3a3a;
            transition: .3s;
            color: white;
        }
    
        #email:focus{
            outline: none;
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #email:hover{
            border-bottom: 3px solid #ff9900;
            transition: .3s;
        }
    
        #loginButton{
            font-size: large;
            display: block;
            width: 50%;
            height: 40px;
            margin: auto;
            background-color: #ff9900;
            color: white;
            border: 0px solid #804d00;
            transition: .5s;
        }
    
        #loginButton:hover{
            border: 3px solid #804d00;
            transition: .5s;
        }
    </style>

    <script>
        function attemptRegister(){
            var username = document.getElementByID("username").value
            var password = document.getElementByID("password").value
            var passwordAgain = document.getElementByID("passwordAgain").value
            var email = document.getElementByID("email").value
            mta.triggerEvent("attemptRegister", username, password, passwordAgain, email)
        }
    </script>
</head>
<body>
    <img align="middle" src="logo.png">
    <div id="panel">
        <input type="text" placeholder="Felhasználónév" name="user" id="username"><br>
        <input type="password" placeholder="Jelszó" name="password" id="password"><br>
        <input type="password" placeholder="Jelszó újra" name="passwordAgain" id="passwordAgain"><br>
        <input type="email" placeholder="Email cím" name="email" id="email"><br>
        <input type="button" value="Regisztráció" onclick="attemptRegister()" id="loginButton">
        <p><a href="index.html">Visszalépés</a></p>
    </div>
</body>
</html>

Server Lua

local con = exports.cs_mysql:getConnection()

addEvent('checkBannedStatus', true)
addEventHandler('checkBannedStatus', getRootElement(), function(serial)
    local qh = dbQuery(con, "SELECT * FROM bans WHERE serial=? AND banned_until > banned_date", serial)
    local bans = dbPoll(qh, 500)
    if bans then
        if #bans > 0 then
            return true
        else
            return false
        end
    else
        return false
    end
end)

function attemptLogin(username, password)
    local qh = dbQuery(con, 'SELECT * FROM accounts WHERE username=?', username)
    local user = dbPoll(qh, 500)
    if user then
        if #user > 0 then
            if user['password'] == hash(sha256, password) then
                setElementData(client, 'loggedin', true)
                outputDebugString('Sikeres bejelentkezés!')
            else
                outputDebugString('Nem egyezik a jelszó!')
            end
        else
            outputDebugString('Nincs ilyen felhasználónév!')
        end 
    else
        outputDebugString('Ismeretlen hiba!')
    end
end

function attemptRegister(username, password, passwordAgain, email)
    local qh = dbQuery(con, "SELECT * FROM accounts WHERE username=? OR password=? OR email=?", username, password, email)
    local user = dbPoll(qh, 500)
    if user then
        if not #user > 0 then
            dbExec(con, "INSERT INTO accounts SET username=?, password=?, email=?", username, hash(sha256, password), email)
            outputDebugString('Sikeres regisztráció!')
        else
            outputDebugString('Létező felhasználó!')
        end
    else
        outputDebugString('Ismeretlen hiba!')
    end
end

Client Lua

local screenWidth, screenHeight = guiGetScreenSize()

local page = 'http://mta/cs_accounts/html/index.html'
local initBrowser = guiCreateBrowser(0, 0, screenWidth, screenHeight, true, false, false)
local theBrowser = guiGetBrowser(initBrowser)

local bannedStatus

addEventHandler('onClientBrowserCreated', theBrowser, function()
    if not bannedStatus then
        loadBrowserURL(source, page)
        showCursor(true)
    end
end)

addEventHandler('onClientElementDataChange', getRootElement(), function(data, oldValue, newValue)
    if getElementType(source) == 'player' and data == 'loggedin' and newValue then
        destroyElement(initBrowser)
        showCursor(false)
    end
end)

addEventHandler('onClientPlayerJoin', getRootElement(), function()
    if triggerServerEvent('checkBannedStatus', source, getPlayerSerial(source)) then
        bannedStatus = true
    else
        bannedStatus = false
    end
end)

Sorry for the long HTML codes!

Sign In

[EN/HU] HTML Login panel

Recommended Posts

Gyrosos

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

MTA Network

Social Media