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:
@ -29,6 +29,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-fill-width {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.fake-input {
|
||||
@extend .input-base;
|
||||
overflow: auto;
|
||||
|
@ -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
|
||||
|
44
resources/views/mfa/totp-generate.blade.php
Normal file
44
resources/views/mfa/totp-generate.blade.php
Normal 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
|
Reference in New Issue
Block a user