Interface preparation for 2FA and WebAuthn

This commit is contained in:
Pinga 2023-11-18 12:14:12 +02:00
parent fe39a693c7
commit 95e47cd9a6

View file

@ -23,11 +23,28 @@
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-details" class="nav-link active" data-bs-toggle="tab">Details</a>
</li>
<li class="nav-item">
<a href="#tabs-2fa" class="nav-link" data-bs-toggle="tab">2FA</a>
</li>
<li class="nav-item">
<a href="#tabs-webauthn" class="nav-link" data-bs-toggle="tab">WebAuthn</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-details">
<h4 class="card-title">{{ __('Details') }}</h4>
<div class="card">
<div class="card-body">
<form action="{{route('change.password')}}" name="register" method="post">
{{ csrf.field | raw }}
<h5 class="card-title">{{ __('Details') }}</h5>
<div class="row g-3">
<div class="col-md">
<div class="form-label">{{ __('User Name') }}</div>
@ -77,6 +94,53 @@
</form>
</div>
</div>
<div class="tab-pane" id="tabs-2fa">
<h4 class="card-title">Two-Factor Authentication (2FA)</h4>
<div class="card">
<div class="card-body">
<p>Set up 2FA for additional security. Scan the QR code with your authentication app and enter the provided code below to verify.</p>
<!-- QR Code Placeholder -->
<div class="mb-3">
<img src="path/to/qr-code.png" alt="2FA QR Code" class="img-fluid">
</div>
<!-- Verification Code Input -->
<div class="mb-3">
<label for="verificationCode" class="form-label">Verification Code</label>
<input type="text" class="form-control" id="verificationCode" placeholder="Enter code">
</div>
<!-- Save Button -->
<button type="button" class="btn btn-primary">Save 2FA Settings</button>
</div>
</div>
</div>
<div class="tab-pane" id="tabs-webauthn">
<h4 class="card-title">WebAuthn Authentication</h4>
<div class="card">
<div class="card-body">
<p>Secure your account with WebAuthn. Click the button below to register your device for passwordless sign-in.</p>
<!-- Connect WebAuthn Button -->
<button type="button" class="btn btn-success">Connect WebAuthn Device</button>
<!-- WebAuthn Devices Table -->
<div class="table-responsive mt-4">
<table class="table table-striped">
<thead>
<tr>
<th>Device Name</th>
<th>Registration Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Dynamically populated rows go here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">