tethys.backend/resources/views/settings.edge
Arno Kaimbacher c70fa4a0d8
Some checks failed
CI Pipeline / japa-tests (push) Failing after 53s
- aded npm packages @types/qrcode, qrcode and node-f2a
- corrected UsersController.ts and RoleController.ts with correct routes for settings
- added migration script and ui and Controller for 2 Factor Authentication
- npm updates
2023-12-29 15:54:49 +01:00

98 lines
4.1 KiB
Plaintext

@layout('layouts/app')
@set('title', 'Settings')
@section('body')
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="space-y-4">
<div class="my-12 text-center text-3xl font-bold tracking-tight text-gray-900">
SETTINGS
</div>
@if(status)
@!component('components/alert', {
status
})
@endif
@if(twoFactorEnabled)
<div class="w-1/2 space-y-4 bg-gray-100 p-8">
<h3 class="text-lg font-medium text-gray-900">
You have enabled two factor authentication.
</h3>
<div class="mt-3 max-w-xl text-sm text-gray-600">
<p>
When two factor authentication is enabled, you will be prompted for a secure, random
token during authentication. You may retrieve this token from your phone's Google
Authenticator application.
</p>
</div>
@if(code)
<div>
<div class="mt-4 max-w-xl text-sm text-gray-600">
<p class="font-semibold">
Two factor authentication is now enabled. Scan the following QR code using your
phone's authenticator application.
</p>
</div>
<div class="mt-4">
<img src="{{ code.svg }}" />
</div>
</div>
@endif
@if(recoveryCodes)
<div class="mt-4 max-w-xl text-sm text-gray-600">
<p class="font-semibold">
Store these recovery codes in a secure password manager. They can be used to recover
access to your account if your two factor authentication device is lost.
</p>
</div>
<div class="mt-4 grid max-w-xl gap-1 rounded-lg bg-gray-100 px-4 py-4 font-mono text-sm">
@each(code in recoveryCodes)
<div>
{{ code }}
</div>
@endeach
</div>
@endif
<div class="flex justify-between">
<form action="{{ route('UserController.fetchRecoveryCodes') }}" method="GET">
<button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs
font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
">
Show Recovery Codes
</button>
</form>
<form action="{{ route('UserController.disableTwoFactorAuthentication') }}" method="POST">
<button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs
font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
">
Disable
</button>
</form>
</div>
</div>
@elseif(!twoFactorEnabled)
<div class="w-1/2 space-y-4">
<div class="text-lg font-medium text-gray-900">
You have not enabled two factor authentication.
</div>
<div class="text-sm text-gray-600">
When two factor authentication is enabled, you will be prompted for a secure,
random token during authentication. You may retrieve this token from your phone's
Google Authenticator application.
</div>
<div>
<form action="{{ route('UserController.enableTwoFactorAuthentication') }}" method="POST">
<button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs
font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
">
Enable
</button>
</form>
</div>
</div>
@endif
</div>
</div>
@endsection