@extends('layouts.app') @section('content') <div class="container"> <div class="col-12"> <div class="card shadow-none border mt-5"> <div class="card-body"> <div class="row"> <div class="col-12 p-3 p-md-5"> <div class="title"> <h3 class="font-weight-bold">Setup Two-Factor Authentication</h3> </div> <hr> <div class="alert alert-info font-weight-light mb-3"> We only support Two-Factor Authentication via TOTP mobile apps. </div> <section class="step-one pb-5"> <div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step1" aria-expanded="true" aria-controls="step1" data-step="1"> Step 1: Install compatible 2FA mobile app <i class="float-right fas fa-chevron-down"></i> </div> <hr> <div class="collapse show" id="step1"> <p>You will need to install a compatible mobile app, we recommend the following apps:</p> <ul> <li><a href="https://1password.com/downloads/" rel="nooopener nofollow">1Password</a></li> <li><a href="https://authy.com/download/" rel="nooopener nofollow">Authy</a></li> <li><a href="https://lastpass.com/auth/" rel="nooopener nofollow">LastPass Authenticator</a></li> <li> Google Authenticator <a class="small" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_CA" rel="nooopener nofollow"> (android) </a> <a class="small" href="https://itunes.apple.com/ca/app/google-authenticator/id388497605?mt=8" rel="nooopener nofollow"> (iOS) </a> </li> <li><a href="https://www.microsoft.com/en-us/account/authenticator" rel="nooopener nofollow">Microsoft Authenticator</a></li> </ul> </div> </section> <section class="step-two pb-5"> <div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step2" aria-expanded="false" aria-controls="step2" data-step="2"> Step 2: Scan QR Code and confirm <i class="float-right fas fa-chevron-down"></i> </div> <hr> <div class="collapse" id="step2"> <p>Please scan the QR code and then enter the 6 digit code in the form below. Keep in mind the code changes every 30 seconds, and is only good for 1 minute.</p> <div class="card"> <div class="card-body text-center"> <div class="pb-3"> <p class="font-weight-bold">QR Code</p> {!!$qrcode!!} </div> <div> <p class="font-weight-bold">OTP Secret</p> <input type="text" class="form-control" value="{{ $user->{'2fa_secret'} }}" disabled> </div> </div> <div class="card-body"> <form id="confirm-code"> <div class="form-group"> <label class="font-weight-bold small">Code</label> <input type="text" name="code" id="verifyCode" class="form-control" placeholder="Code" autocomplete="off"> </div> <button type="submit" class="btn btn-primary font-weight-bold">Submit</button> </form> </div> </div> </div> </section> <section class="step-three pb-5"> <div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step3" aria-expanded="true" aria-controls="step3" data-step="3"> Step 3: Download Backup Codes <i class="float-right fas fa-chevron-down"></i> </div> <hr> <div class="collapse" id="step3"> <p>Please store the following codes in a safe place, each backup code can be used only once if you do not have access to your 2FA mobile app.</p> <code> @foreach($backups as $code) <p class="mb-0">{{$code}}</p> @endforeach </code> </div> </section> </div> </div> </div> </div> </div> </div> @endsection @push('scripts') <script type="text/javascript"> $(document).ready(function() { $('#step3').addClass('d-none'); window.twoFactor = {}; window.twoFactor.validated = false; $(document).on('click', 'div[data-toggle=collapse]', function(e) { let el = $(this); let step = el.data('step'); switch(step) { case 1: $('#step2').collapse('hide'); $('#step3').collapse('hide'); break; case 2: $('#step1').collapse('hide'); $('#step3').collapse('hide'); break; case 3: if(twoFactor.validated == false) { e.preventDefault(); return; } else { $('#step3').removeClass('d-none'); $('#step1').collapse('hide'); $('#step2').collapse('hide'); } break; } }); $(document).on('submit', '#confirm-code', function(e) { e.preventDefault(); let el = $(this); let code = $('#verifyCode').val(); if(code.length < 5) { swal('Oops!', 'You need to enter a valid code', 'error'); return; } axios.post(window.location.href, { code: code }).then((res) => { twoFactor.validated = true; $('#step3').removeClass('d-none'); $('#step3').collapse('show'); $('#step1').collapse('hide'); $('#step2').collapse('hide'); }).catch((res) => { swal('Oops!', 'That was an invalid code, please try again.', 'error'); return; }); }); }); </script> @endpush