[%#

Manage 2fa settings

Authors:
    Mark Smith <mark@dreamwidth.org>

Copyright (c) 2020 by Dreamwidth Studios, LLC.

This program is free software; you may redistribute it and/or modify it under
the same terms as Perl itself.  For a copy of the license, please reference
'perldoc perlartistic' or 'perldoc perlgpl'.
%]

[%- sections.title = "Set Up Two-Factor Authentication" -%]
[%- CALL dw.active_resource_group( "foundation" ) -%]

<form method="POST">
    [%- dw.form_auth -%]
    [%- form.hidden( name = "mode", value = "submit" ) -%]

<fieldset>
<legend>Getting Ready for 2FA</legend>

<p>
    To set up two-factor authentication (2FA), you will need the following:
</p>

<ol>
    <li>An authentication application, such as <strong>Google Authenticator</strong>, which supports
        scanning QR codes.<br />
        <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' width="160"/></a>
        <a href="https://apps.apple.com/us/app/google-authenticator/id388497605?mt=8"><img alt='Download on the App Store' src='https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2010-09-20&kind=iossoftware&bubble=ios_apps'/></a>
    </li>
    <li>A secure notepad or way to save your <strong>recovery codes</strong>. These are important,
        if you lose your 2FA device these codes are how you will get back in to your account!</li>
</ol>

</fieldset>
<fieldset>
<legend>Setting Up Your Device</legend>

<div class='row'>
<div class='large-8 columns'>
    Now scan this QR code in your authentication application:
</div>
<div class='large-4 columns'>
    [%- form.hidden( name='totp_secret', value=totp_secret ) -%]
    <img src='[% site.root %]/manage2fa/qrcode?secret=[% totp_secret %]' alt='QR code for setting up 2FA'/>
</div>
</div>

</fieldset>
<fieldset>
<legend>Verify & Enable</legend>

<div class='row'>
<div class='large-8 columns'>
    Finally, please enter a generated 2FA code from your device:
</div>
<div class='large-4 columns'>
    [% form.textbox(name='verification_code', maxlength='6') %]
</div></div>

[% form.submit(name='action:enable', value='Enable Two-Factor Authentication') %]

</form>