@extends('layouts.app')

@section('htmlheader_title')
	SQRL Test Site
@endsection
@section('page_title')
	SQRL
@endsection

@section('contentheader_title')
	SQRL Test Site
@endsection
@section('contentheader_description')
	Login with SQRL
@endsection

@section('main-content')
	<div class="row">
		<div class="col-12 bg-white">
			<div class="text-center">
				<p>Welcome to the SQRL test site.</p>
				<p>You can login with your SQRL client and see what we see...</p>
				<p class="mt-5">{!! ($x=\Leenooks\SQRL\SQRL::authNonce(200))['qrcode'] !!}</p>
			</div>

			<div class="card-footer">
				<div class="alert alert-danger" role="alert" id="error_message" hidden></div>
			</div>

			@include('sqrl::login_js',$x)
		</div>
	</div>
@endsection

@section('benefits-content')
	<h2 class="section-heading text-center mb-3">SQRL Benefits</h2>
	<div class="section-intro single-col-max mx-auto text-center mb-5">
		<p>SQRL solves an annoying situation that occurs with traditional usernames and passwords. Below is a list of a few of those benefits - both for end users <strong>and</strong> website owners.</p>
	</div>
	<div class="row text-center">
		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-lock"></i><h3 class="item-heading">No Passwords</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>SQRL presents a public key, that can only be generated by you to login.</p>
					<p>Yes the service provider needs to first register you (with that public key), but once done, you can login everytime using it, since only you can generated it.</p>
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-user"></i><h3 class="item-heading">No User Names</h3>
					</div>
				</div>
				<div class="item-desc">
					With SQRL, as a user you no longer need to remember the username you used to login to a website. Nor do you have to think of one, if the one you wanted is already taken.
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-mask"></i><h3 class="item-heading">No Private Details</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>When registering with websites, you dont need to use any of your private details (eg: your email address or parts of your name) as part of the authentication process.</p>
					<p>The website owner will probably still want your email address to send you emails, but that can now be stored privately and securely at the backend.</p>
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-bullhorn"></i><h3 class="item-heading">Credentials Public</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>SQRL uses public/private key algorithms, and as a result, the public portion is truly public.</p>
					<p>You can show you public key to anybody - and yes it is different for every site that you login - but they cannot use it to login as you.</p>
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-laptop-code"></i><h3 class="item-heading">User Managed</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>You no longer need to wait to receive, or think about creating a username to login to a website. So no more this username is already used, think of another!</p>
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-user-secret"></i><h3 class="item-heading">Compromised Sites</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>If a website is compromised, and the hacker obtains the website authentication files, then the details in those files is completely useless.</p>
					<p>If you own that website, you dont need to do any remediation actions on the lots credentials, you just need to worry about what else they were able to obtain.</p>
					<p>If you are a user, then you dont need to go through the process of changing your password, as you dont have one!</p>
				</div>
			</div>
		</div>

		<div class="item col-12 col-md-6 col-lg-4">
			<div class="item-inner p-3 p-lg-4">
				<div class="item-header mb-3">
					<div class="item-icon">
						<i class="fas fa-question-circle"></i><h3 class="item-heading">No Forgotten Passwords</h3>
					</div>
				</div>
				<div class="item-desc">
					<p>There is no longer I forgot my password, nor what email address did I use for this website?</p>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
<script>
	$(document).ready(function() {
		$('body')
			.addClass('sidebar-collapse')
			.delay(500)
			.queue(function () {
				window.dispatchEvent(new Event('resize'));
				$(this).dequeue();
			});
	});
</script>
@append