<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<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>2FA - Doxbin</title>
    @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: 28px;
    }
    #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%; }
}

    </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>
                    <h5 class="title">Two Factor Auth</h5>
                    <p>
                    <h5>Enter your 2FA code to login:</h5>
                    <form method="POST" id="submitform">
                        {!! csrf_field() !!}
                        <input name="code" type="text" autocomplete="off" autofocus maxlength="6" placeholder="2FA Code" style="width: auto; text-align: center; color: white; padding: 3px 0; font-size: 17px;"><br>
                        <input name="submit" type="submit" value="Login">
                        <div id="error-msg" style="color: red;"></div>
                        <p>Staff can't unlock your account for you if you've lost access your app.</p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
    var manual = false;
    $(document).ready(function(){
        $('#submitform').on('submit', function(e){
            if($('input[name=code]').val().length != 6){
                // error
            }else{
                $.post('/verify', {
                    _token: $('input[name=_token]').val(),
                    code: $('input[name=code]').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/';
                    }else if(resp.locked == 1){
                        window.location = '/account/locked';
                    }else{
                        $('#error-msg').text(resp.msg);
                    }
                });
            }
            e.preventDefault();
        });
    });
    </script>
</body>
</html>
