1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00

Added TOTP generation view and started verification stage

Also updated MFA setup view to have settings-like listed interface to
make it possible to extend with extra options in the future.
This commit is contained in:
Dan Brown
2021-06-29 22:06:49 +01:00
parent efb6a6b457
commit d25cd83d8e
5 changed files with 141 additions and 7 deletions

View File

@ -29,6 +29,10 @@
}
}
.input-fill-width {
width: 100% !important;
}
.fake-input {
@extend .input-base;
overflow: auto;

View File

@ -5,12 +5,39 @@
<div class="card content-wrap auto-height">
<h1 class="list-heading">Setup Multi-Factor Authentication</h1>
<p>
<p class="mb-none">
Setup multi-factor authentication as an extra layer of security
for your user account.
To use multi-factor authentication you'll need a mobile application
that supports TOTP such as Google Authenticator, Authy or Microsoft Authenticator.
</p>
<div class="setting-list">
<div class="grid half gap-xl">
<div>
<div class="setting-list-label">Mobile App</div>
<p class="small">
To use multi-factor authentication you'll need a mobile application
that supports TOTP such as Google Authenticator, Authy or Microsoft Authenticator.
</p>
</div>
<div class="pt-m">
<a href="{{ url('/mfa/totp-generate') }}" class="button outline">Setup</a>
</div>
</div>
<div class="grid half gap-xl">
<div>
<div class="setting-list-label">Backup Codes</div>
<p class="small">
Print out or securely store a set of one-time backup codes
which you can enter to verify your identity.
</p>
</div>
<div class="pt-m">
<a href="{{ url('/mfa/codes/generate') }}" class="button outline">Setup</a>
</div>
</div>
</div>
</div>
</div>
@stop

View File

@ -0,0 +1,44 @@
@extends('simple-layout')
@section('body')
<div class="container very-small py-xl">
<div class="card content-wrap auto-height">
<h1 class="list-heading">Mobile App Setup</h1>
<p>
To use multi-factor authentication you'll need a mobile application
that supports TOTP such as Google Authenticator, Authy or Microsoft Authenticator.
</p>
<p>
Scan the QR code below using your preferred authentication app to get started.
</p>
<div class="text-center">
<div class="block inline">
{!! $svg !!}
</div>
</div>
<h2 class="list-heading">Verify Setup</h2>
<p id="totp-verify-input-details" class="mb-s">
Verify that all is working by entering a code, generated within your
authentication app, in the input box below:
</p>
<form action="{{ url('/mfa/totp-confirm') }}" method="POST">
{{ csrf_field() }}
<input type="text"
name="code"
aria-labelledby="totp-verify-input-details"
placeholder="Provide your app generated code here"
class="input-fill-width {{ $errors->has('code') ? 'neg' : '' }}">
@if($errors->has('code'))
<div class="text-neg text-small px-xs">{{ $errors->first('code') }}</div>
@endif
<div class="mt-s text-right">
<button class="button">Confirm and Enable</button>
</div>
</form>
</div>
</div>
@stop