49 lines
No EOL
2.9 KiB
Text
49 lines
No EOL
2.9 KiB
Text
<!-- Form: create OTP-Secret -->
|
|
<div class="flex flex-col flex-auto">
|
|
<div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
|
|
<div class="flex w-full">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
|
|
Two-Factor Authentication
|
|
</h2>
|
|
</div>
|
|
<div class="flex w-full">
|
|
<div class="flex flex-col w-full px-4 py-3 text-sm bg-blue-100 dark:bg-blue-600 dark:text-white rounded-lg gap-2" role="alert">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-medium">next steps:</span>
|
|
</div>
|
|
<ul class="px-3 list-disc list-inside">
|
|
<li>scan the QR-Code with your authenticator app or add your secret manually</li>
|
|
<li>enter the generated one-time password in the input field for confirmation</li>
|
|
<li>validate the code from your authenticator app</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<form class="flex gap-8" action="/profile/otp/create" method="post" enctype="application/x-www-form-urlencoded">
|
|
<div class="flex flex-col w-48">
|
|
<img class="rounded-lg w-full" src="{{ otp.qrcode }}">
|
|
</div>
|
|
<div class="flex flex-col flex-auto gap-4">
|
|
<div class="flex flex-col lg:flex-row gap-4">
|
|
<div class="flex flex-col gap-3 lg:w-4/6">
|
|
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
|
your OTP-Secret:
|
|
</label>
|
|
<input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
|
|
</div>
|
|
<div class="flex flex-col gap-3 lg:flex-auto">
|
|
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
|
TOTP Code:
|
|
</label>
|
|
<input type="text" name="otpcode" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" placeholder="123456">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-auto"></div>
|
|
<div class="flex w-full justify-end gap-4">
|
|
<button type="submit" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-blue-500">
|
|
Validate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |