<!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>Doxbin - Paste password required</title>
    <meta name="description" content="A password is required to view this paste.">
    @include('_scripts')
    <style>
    .info-cont{
        font-size: 16px;
        color: #bfbfbf;
        margin: 0 auto;
        text-align: left;
    }
    .info-cont p{
        margin: 0;
    }
    .info-cont p b{
        margin-right: 6px;
    }
    .admin-text{
        color: red;
        font-weight: bold;
    }
    .profile-cont{
        position:absolute;
        height: 100%;
        left:0;
        right:0;
        
    }
    .gray{
        color: #bfbfbf;
        margin-top: 5px;
    }
    .admin-text{
        color: red;
        font-weight: bold;
    }
    input, textarea{
		line-height: 1.2;
		color: white;
		background: #282828;
		border: 0;
		border-radius: 2px;
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 8px 5px;
        width: 100%;
		font-size: 100%;
        font-size: 15px;
        margin-bottom: 30px;
	}
	input::placeholder, textarea::placeholder{
		color: rgb(167, 167, 167);
	}
	input[type=submit]{
		line-height: 1.2;
		color: white;
		background: green;
		border: 0;
		border-radius: 2px;
		display: inline;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 8px 10px;
        width: auto;
        font-size: 15px;
        font-weight: bold;
        margin: 15px auto 50px;
	}
	
	input[type=submit]:hover{
		color: white;
		background: #0e6b00;
		text-decoration: none;
	}
    input:disabled, textarea:disabled{
        color: #757575;
    }
    textarea{
        max-height: 58px;
        max-width: 100%;
        resize: none;
    }
    .vertical-center{
        display:flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        
    }
    h5.title{
        font-size: 26px;
        margin-bottom: 0;
        margin-top: 0;
    }
    #submitform > p{
        margin-top: 40px;
        font-size: 14px;
    }
    @media screen and (max-height: 380px){
        .vertical-center{
            display: block;
            padding-top: 50px;
        }
    }
    
    @media screen and (max-width: 460px){
        div.vertical-center > div > h5{
            font-size: 15px;
        }
        div.vertical-center > div > h5.title{
            font-size: 19px;
        }
        #submitform > p{
            margin-top: 0px;
            font-size: 12px;
        }
    }

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
.cont{
    background-color: rgb(58, 58, 58);
    padding: 30px;
    border: solid 1px rgb(53, 53, 53);
    border-radius: 2px;
    /* position: relative; */
}
    </style>
    <link rel="stylesheet" href="/legacy/index.css">
</head>

<body class="bin" style="height: 100%; margin: 0 auto;">
    @include('_nav')
    <div class="container" style="text-align: center;background-color: #111111; text-align: center; min-height: 100%; -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="profile-cont">
            <div class="vertical-center">
                <div class="cont">
                    <h5 class="title">Password Protected Paste</h5>
                    <p>
                    <h5>Enter the password to view the paste:</h5>
                    <form method="POST" id="submitform">
                        <input type="hidden" name="raw" value="{{ isset($raw) ? $raw : 0 }}">
                        {!! csrf_field() !!}
                        <input id="password" type="text" autocomplete="off" autofocus placeholder="Password..." style="width: auto; text-align: center; color: white; padding: 3px 0; margin-bottom: 10px; font-size: 17px;"><br> {{-- Added margin bottom to make it look nicer for the captcha --}}
                        @include('layouts.captcha')
                        <div id="error-msg" style="color: red;"></div>
                        <input name="submit" type="submit" id="submit-password" value="Submit" style="margin: 10px 0 0 0;">
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Captcha's beforehand were not working. This implementation should fix password protected pastes --}}
    @if(env('CAPTCHA') == 'HCAPTCHA')
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <script>
        $('#submit-password').on('click', function(e){
            $.post('/upload/{{$paste->link}}/password-verify', {
                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{
                    location.reload();
                }
            });
            e.preventDefault();
        });
    </script>
    @elseif(env('CAPTCHA') == 'RECAPTCHA')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        $('#submit-password').on('click', function(e){
            $.post('/upload/{{$paste->link}}/password-verify', {
                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{
                    location.reload();
                }
            });
            e.preventDefault();
        });
    </script>
    @elseif(env('CAPTCHA') == 'TURNSTILE')
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script>
        $('#submit-password').on('click', function(e){
            $.post('/upload/{{$paste->link}}/password-verify', {
                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{
                    location.reload();
                }
            });
            e.preventDefault();
        });
    </script>
    @endif
</body>
</html>
