<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="robots" content="noindex">
	
    <title>Login - Doxbin</title>
    <link rel="stylesheet" href="legacy/index.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<style>
    .login-div{
        margin: 0 auto;
        max-width: 500px;
        min-width: 100px;
        width: 100%;
        text-align: left;
    }
    .login-div label{
        padding: 10px 0px 1px 3px;
        margin: 0;
    }
	input{
		line-height: 1.2;
		color: white;
		background: #282828;
		border: 0;
		border-radius: 2px;
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 7px 5px;
        width: 100%;
	}
	input::placeholder{
		color: rgb(167, 167, 167);
	}
	input[type=submit]{
		line-height: 1.2;
		color: white;
		background: #282828;
		border: 0;
		border-radius: 2px;
		display: block;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 7px 5px;
        width: 90%;
        margin: 15px auto 50px auto;
	}
	input{
		font-size: 100%;
	}
	
	input[type=submit]:hover{
		color: white;
		background: #3d3d3d;
		text-decoration: none;
	}
	.center {
	  text-align: center;
	}

    
	</style>
</head>

<body>
{!! csrf_field() !!}
    @include('_nav')
    <div class="container" style="background-color: #111111; min-height: 100vh;-webkit-box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);-moz-box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);">
        <div class="col-md-12" style="margin-top: 10px;">
            <div class="col-md-12" style="margin-top: 80px;">
                <div align="center">
                    <h5 style="font-size: 25px;">Login</h5>
                    <noscript><p style="color: red; padding: 0px 0px 10px 0px; text-align: center; margin: 0;">Doxbin requires JavaScript to function correctly.</noscript>
                    <div id="error-msg" style="color: red; padding: 0px 0px 10px 0px; text-align: center; margin: 0;"></div>
                </div>
            </div>
            <div class="col-md-6 col-md-offset-3 text-center">
                <p style="color: green;">{{ ($success == 1 ? 'Success. You can now login with your new password.' : '') }}</p>
                <div class="login-div">
                <form action="" method="POST" id="login-form">
                {!! csrf_field() !!}
                <label for="username">Username</label><br>
                <input name="username" id="username" type="text" placeholder="Username" autofocus><br>
                <label for="username">Password</label><br>
                <input id="password" type="password" placeholder="Password"><br>
                <br>
                <div class="text-center">
                    @include('layouts.captcha')
                </div>
                <input type="submit" value="Login">
                </form>
                </div>
            </div>
		</div>
    </div>
    <script src="{{ asset('/legacy/jquery.min.js') }}"></script>
    <script src="{{ asset('/legacy/jquery-ui-1.10.3.custom.min.js') }}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    @if(env('CAPTCHA') == 'HCAPTCHA')
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <script>
        $('#login-form').on('submit', function(e){
            $.post('/login', {
                username: $('#username').val(),
                password: $('#password').val(),
                _token: $('input[name=_token]').val(),
                hcaptcha_token: $('[name=h-captcha-response]').val()
            }, function(resp){
                if(resp.status == "err"){
                    $('#error-msg').text(resp.msg);
                    hcaptcha.reset();
                }else{
                    window.location = '/';
                }
            });
            e.preventDefault();
        });
    </script>
    @elseif(env('CAPTCHA') == 'RECAPTCHA')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        $('#login-form').on('submit', function(e){
            $.post('/login', {
                username: $('#username').val(),
                password: $('#password').val(),
                _token: $('input[name=_token]').val(),
                recaptcha_token: grecaptcha.getResponse()
            }, function(resp){
                if(resp.status == "err"){
                    $('#error-msg').text(resp.msg);
                    grecaptcha.reset();
                }else{
                    window.location = '/';
                }
            });
            e.preventDefault();
        });
    </script>
    @elseif(env('CAPTCHA') == 'TURNSTILE')
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script>
        $('#login-form').on('submit', function(e){
            $.post('/login', {
                username: $('#username').val(),
                password: $('#password').val(),
                _token: $('input[name=_token]').val(),
                turnstile_token: $('[name=cf-turnstile-response]').val(),
            }, function(resp){
                if(resp.status == "err"){
                    $('#error-msg').text(resp.msg);
                    turnstile.reset();
                }else{
                    window.location = '/';
                }
            });
            e.preventDefault();
        });
    </script>
    @endif
</body>
</html>