Merge pull request #3927 from peaklabs-dev/fix-otp
Fix and improve OTP UI
This commit is contained in:
Andras Bacsai
@@ -33,20 +33,70 @@
|
|||||||
Please finish configuring two factor authentication below. Read the QR code or enter the secret key
|
Please finish configuring two factor authentication below. Read the QR code or enter the secret key
|
||||||
manually.
|
manually.
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-4">
|
||||||
<form action="/user/confirmed-two-factor-authentication" method="POST" class="flex items-end gap-2">
|
<form action="/user/confirmed-two-factor-authentication" method="POST" class="flex items-end gap-2">
|
||||||
@csrf
|
@csrf
|
||||||
<x-forms.input type="number" id="code" label="One-time code" required />
|
<x-forms.input type="text" inputmode="numeric" pattern="[0-9]*" id="code" label="One time (OTP) code" required />
|
||||||
<x-forms.button type="submit">Validate 2FA</x-forms.button>
|
<x-forms.button type="submit">Validate 2FA</x-forms.button>
|
||||||
</form>
|
</form>
|
||||||
<div>
|
<div class="flex flex-col items-start">
|
||||||
<div class="flex items-center justify-center w-64 h-64 bg-transparent">{!! request()->user()->twoFactorQrCodeSvg() !!}</div>
|
<div class="flex items-center justify-center w-80 h-80 bg-white p-4 border-4 border-gray-300 rounded-lg shadow-lg">
|
||||||
<div x-data="{ showCode: false }" class="py-2">
|
{!! request()->user()->twoFactorQrCodeSvg() !!}
|
||||||
<template x-if="showCode">
|
</div>
|
||||||
<div class="py-2 ">{!! decrypt(request()->user()->two_factor_secret) !!}</div>
|
<div x-data="{
|
||||||
</template>
|
showCode: false,
|
||||||
<x-forms.button x-on:click="showCode = !showCode">Show secret key to manually
|
secretKey: '{{ decrypt(request()->user()->two_factor_secret) }}',
|
||||||
enter</x-forms.button>
|
otpUrl: '{{ request()->user()->twoFactorQrCodeUrl() }}',
|
||||||
|
copiedSecretKey: false,
|
||||||
|
copiedOtpUrl: false
|
||||||
|
}" class="py-4 w-full">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div class="relative">
|
||||||
|
<x-forms.input
|
||||||
|
x-show="showCode"
|
||||||
|
x-model="secretKey"
|
||||||
|
label="Secret Key"
|
||||||
|
readonly
|
||||||
|
class="font-mono pr-10"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
x-show="showCode"
|
||||||
|
@click="navigator.clipboard.writeText(secretKey); copiedSecretKey = true; setTimeout(() => copiedSecretKey = false, 2000)"
|
||||||
|
class="absolute right-2 bottom-2 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg x-show="!copiedSecretKey" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
||||||
|
</svg>
|
||||||
|
<svg x-show="copiedSecretKey" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-green-500">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<x-forms.input
|
||||||
|
x-show="showCode"
|
||||||
|
x-model="otpUrl"
|
||||||
|
label="OTP URL"
|
||||||
|
readonly
|
||||||
|
class="font-mono pr-10"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
x-show="showCode"
|
||||||
|
@click="navigator.clipboard.writeText(otpUrl); copiedOtpUrl = true; setTimeout(() => copiedOtpUrl = false, 2000)"
|
||||||
|
class="absolute right-2 bottom-2 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg x-show="!copiedOtpUrl" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
||||||
|
</svg>
|
||||||
|
<svg x-show="copiedOtpUrl" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-green-500">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<x-forms.button x-on:click="showCode = !showCode" class="mt-2">
|
||||||
|
<span x-text="showCode ? 'Hide' : 'Show'"></span> Secret Key and OTP URL
|
||||||
|
</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user