{% extends 'wizard/slides/common/base.twig' %}

{% block slide_body %}
	{{ icwp_macros.slideTitle( 'Setup Email-Based Authentication' ) }}

	<p>Email-based authentication involves you receiving an email to the address attached to your WordPress
	   user account. This email will contain a 6-digit code which you'll need to put into the
	   login confirmation page.</p>
	<p>The tricky thing with email is that WordPress sites are terrible for sending emails, as most domains
	   and webhosting aren't configured properly for sending email reliably.</p>
	<p>This means if you set this up and you don't get the email, you'll be locked out. So, before enabling
	   email-based authentication, we'll send you a test email first and ask you to verify that you got it.</p>

	<h4>Email Sending Confirmation</h4>
	<p>Click the button below to confirm your email address, to which we'll send a confirmation email.</p>
	<form class="form-horizontal icwp-wizard-form" id>

		{{ icwp_macros.formInput_Email( 'email', data.user_email, 'Your Email', data.user_email ) }}
		<div class="stage-verificationcode" style="display: none;">
			{{ icwp_macros.formInput_Text( 'code', '', 'Verification Code' ) }}
			{{ icwp_macros.formInput_Checkbox(
				'Email2FAOption', 'Y', 'Turn On Email 2FA', 'Check to turn on Email-based 2 Factor Authentication',
				"When enabled, each time you login you'll get an email with a 2-factor authentication code.
					You will need this code to log into your WordPress site. If your site
					has problems in the future with emails, this could present a problem.
					Emails not being received are the responsibility
					of your WordPress site and your email provider. Shield uses the standard WordPress email
					functionality and if it doesn't work, you'll need to check with your host."
			) }}
		</div>
		{{ icwp_macros.formInput_Hidden( 'wizard-step', 'authemail' ) }}
		{{ icwp_macros.formInput_Submit( 'Send Code', 'EmailSendCode' ) }}
	</form>

	<script type="text/javascript">
		jQuery( document ).on( 'icwpWizardFormSubmit', function ( event, oResponse ) {
			if ( oResponse.success ) {
				var $oForm = jQuery( event.target );
				jQuery( '.stage-verificationcode', $oForm ).slideDown();
				var $oButt = jQuery( 'button[name=EmailSendCode]', $oForm );
				$oButt.prop( 'disabled', false );
				$oButt.prop( 'value', 'Now Click To Verify Your Code' );
				$oButt.html( 'Now Click To Verify Your Code' );
				$oButt.removeClass( 'btn-primary' );
				$oButt.addClass( 'btn-warning' );
			}
		} );
	</script>
{% endblock %}