<!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>Set up 2FA - Doxbin</title>
    @include('_scripts')
    <style>
    .admin-text{
        color: red;
        font-weight: bold;
    }
    .profile-cont{
        margin-bottom: 50px;
        margin-top: 60px;
        padding-top: 1px;
    }
    .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;
    }
    div.tfa-cont{
        width: 100%;
    }
    
    div.tfa-left{
        width: 50%;
        float: left;
        display: inline-block;
    }

    div.tfa-right{
        width: 50%;
        display: inline-block;
    }

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

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

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

@media only screen and (max-width: 992px){
    div.tfa-left, div.tfa-right{
        width: 100%;
        float: none;
    }
}
    </style>
    <link rel="stylesheet" href="/legacy/index.css">
</head>

<body class="bin" style="height: 100%; margin: 0 auto;">
    @include('_nav')
    <div class="container" style="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">
            <h5 style="font-size: 28px;">Two Factor Auth</h5>
            <div class="tfa-cont">
                
                <div class="tfa-right">
                    <div id="qrcode">
                        <h5>Activate 2FA</h5>
                        <h6>Scan the QR code with the app or type secret code into the app</h6>
                        {!! $barcode !!} {{-- Old method would not work with updated Laravel version --}}
                    </div>
                    <p style="color: white;margin: 0;">Secret code</p>
                    <p>{{$secret}}</p>
                    <h6>Then enter your 2FA code below:</h6>
                    <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="Verify">
                    </form>
                </div>
                <div class="tfa-left">
                    <h5>Information</h5>
                    <p>Activating 2FA requires you to enter a temporary, 6 digit code every time you log in.</p>
                    <p>Install a time-based authentication app like Google Authenticator, Authy or FreeOTP Authenticator to use 2FA.</p>
                </div>
            </div>
        </div>
    </div>
    <script>
    var manual = false;
    $(document).ready(function(){
        $('#switch-code').on('click', function(e){
            if(!manual){
                $('#qrcode').hide();
                $('#secretcode').show();
                $(this).text('Scan QR code instead');
            }else{
                $('#secretcode').hide();
                $('#qrcode').show();
                $(this).text('Type code instead');
            }
            manual = !manual;
            e.preventDefault();
        });
        $('#submitform').on('submit', function(e){
            if($('input[name=code]').val().length != 6){
                alert('invalid code');
            }else{
                $.post('/verify/new', {
                    _token: $('input[name=_token]').val(),
                    code: $('input[name=code]').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/';
                    }else{
                        alert(resp.msg);
                    }
                });
            }
            e.preventDefault();
        });
    });
    </script>
</body>
</html>
