Fixed formatting of profile page in CP

This commit is contained in:
Pinga 2024-02-08 10:43:03 +02:00
parent 9070788a31
commit 3ad6e9488c

View file

@ -24,9 +24,8 @@
<div class="page-body"> <div class="page-body">
<div class="container-xl"> <div class="container-xl">
{% include 'partials/flash.twig' %} {% include 'partials/flash.twig' %}
<div class="card"> <div class="card-tabs">
<div class="card-header"> <ul class="nav nav-tabs" data-bs-toggle="tabs">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item"> <li class="nav-item">
<a href="#tabs-details" class="nav-link active" data-bs-toggle="tab">{{ __('Details') }}</a> <a href="#tabs-details" class="nav-link active" data-bs-toggle="tab">{{ __('Details') }}</a>
</li> </li>
@ -40,13 +39,10 @@
<a href="#tabs-log" class="nav-link" data-bs-toggle="tab">{{ __('Log') }}</a> <a href="#tabs-log" class="nav-link" data-bs-toggle="tab">{{ __('Log') }}</a>
</li> </li>
</ul> </ul>
</div>
<div class="card-body">
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active show" id="tabs-details"> <div class="card tab-pane active show" id="tabs-details">
<h4 class="card-title">{{ __('Details') }}</h4>
<div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">{{ __('Details') }}</h3>
<form action="{{route('change.password')}}" name="register" method="post"> <form action="{{route('change.password')}}" name="register" method="post">
{{ csrf.field | raw }} {{ csrf.field | raw }}
<div class="row g-3"> <div class="row g-3">
@ -60,11 +56,11 @@
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">{{ __('Status') }}</div> <div class="form-label">{{ __('Status') }}</div>
<span class="badge bg-green text-bg-green mt-2">{{ status }}</span> <span class="badge bg-green-lt mt-2">{{ status }}</span>
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">{{ __('Role') }}</div> <div class="form-label">{{ __('Role') }}</div>
<span class="badge bg-blue text-bg-blue mt-2">{{ role }}</span> <span class="badge bg-purple-lt mt-2">{{ role }}</span>
</div> </div>
</div> </div>
<h3 class="card-title mt-4">{{ __('Change Password') }}</h3> <h3 class="card-title mt-4">{{ __('Change Password') }}</h3>
@ -97,20 +93,16 @@
</div> </div>
</form> </form>
</div> </div>
</div> <div class="card tab-pane" id="tabs-2fa">
<div class="tab-pane" id="tabs-2fa">
<h4 class="card-title">{{ __('Two-Factor Authentication') }} (2FA)</h4>
<div class="card">
{% if secret is defined %} {% if secret is defined %}
<div class="card-body">
<h3 class="card-title">{{ __('Two-Factor Authentication') }} (2FA)</h3>
<form action="{{route('activate2fa')}}" name="2fa" method="post"> <form action="{{route('activate2fa')}}" name="2fa" method="post">
{{ csrf.field | raw }} {{ csrf.field | raw }}
<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> <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 -->
<div class="mb-3"> <div class="mb-3">
<img src="{{ qrcodeDataUri }}" alt="2FA QR Code" class="img-fluid"> <img src="{{ qrcodeDataUri }}" alt="2FA QR Code" class="img-fluid">
</div> </div>
<!-- Secret for Manual Entry -->
<div class="mb-3"> <div class="mb-3">
<p class="font-weight-bold">{{ __('Manual Entry Secret') }}</p> <p class="font-weight-bold">{{ __('Manual Entry Secret') }}</p>
<code>{{ secret|split(4)|join(' ') }}</code> <code>{{ secret|split(4)|join(' ') }}</code>
@ -118,7 +110,6 @@
{{ __('If you\'re unable to scan the QR code, enter this secret manually into your authentication app. The secret is case-sensitive and should be entered exactly as shown.') }} {{ __('If you\'re unable to scan the QR code, enter this secret manually into your authentication app. The secret is case-sensitive and should be entered exactly as shown.') }}
</small> </small>
</div> </div>
<!-- Verification Code Input -->
<div class="mb-3"> <div class="mb-3">
<label for="verificationCode" class="form-label required">{{ __('Verification Code') }}</label> <label for="verificationCode" class="form-label required">{{ __('Verification Code') }}</label>
<input type="number" class="form-control" id="verificationCode" name="verificationCode" placeholder="{{ __('Enter code') }}" required="required"> <input type="number" class="form-control" id="verificationCode" name="verificationCode" placeholder="{{ __('Enter code') }}" required="required">
@ -126,12 +117,12 @@
{{ __('Enter the code generated by your authentication app. This code verifies that your 2FA setup is working correctly. Once entered, click') }} {{ __('Save 2FA Settings') }} {{ __('to activate two-factor authentication for your account.') }} {{ __('Enter the code generated by your authentication app. This code verifies that your 2FA setup is working correctly. Once entered, click') }} {{ __('Save 2FA Settings') }} {{ __('to activate two-factor authentication for your account.') }}
</small> </small>
</div> </div>
<!-- Save Button -->
<button type="submit" class="btn btn-primary">{{ __('Save 2FA Settings') }}</button> <button type="submit" class="btn btn-primary">{{ __('Save 2FA Settings') }}</button>
</div>
</form> </form>
</div>
{% else %} {% else %}
<div class="card-body"> <div class="card-body">
<h3 class="card-title">{{ __('Two-Factor Authentication') }} (2FA)</h3>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<span class="badge bg-green text-green-fg me-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /><path d="M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12l0 2.5" /></svg></span> <span class="badge bg-green text-green-fg me-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /><path d="M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12l0 2.5" /></svg></span>
<div> <div>
@ -142,15 +133,11 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> <div class="card tab-pane" id="tabs-webauthn">
<div class="tab-pane" id="tabs-webauthn">
<h4 class="card-title">{{ __('WebAuthn Authentication') }}</h4>
<div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">{{ __('WebAuthn Authentication') }}</h3>
<p>{{ __('Secure your account with WebAuthn. Click the button below to register your device for passwordless sign-in.') }}</p> <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" id="connectWebAuthnButton">{{ __('Connect WebAuthn Device') }}</button> <button type="button" class="btn btn-success" id="connectWebAuthnButton">{{ __('Connect WebAuthn Device') }}</button>
<!-- WebAuthn Devices Table -->
<div class="table-responsive mt-4"> <div class="table-responsive mt-4">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
@ -179,11 +166,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="card tab-pane" id="tabs-log">
<div class="tab-pane" id="tabs-log">
<h4 class="card-title">{{ __('User Audit Log') }}</h4>
<div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">{{ __('User Audit Log') }}</h3>
<p>{{ __('Track and review all user activities in your account below. Monitor logins, profile changes, and other key actions to ensure security and transparency.') }}</p> <p>{{ __('Track and review all user activities in your account below. Monitor logins, profile changes, and other key actions to ensure security and transparency.') }}</p>
<div class="table-responsive mt-4"> <div class="table-responsive mt-4">
<table class="table table-striped"> <table class="table table-striped">
@ -218,8 +203,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
{% include 'partials/footer.twig' %} {% include 'partials/footer.twig' %}
</div> </div>
<script> <script>