From d11d8f234e39e301c19743a3e0155808f9ca7a33 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 24 Oct 2024 10:07:18 +0200
Subject: [PATCH] Refactor profile index.blade.php to improve OTP display and
 functionality

---
 .../views/livewire/profile/index.blade.php    | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/resources/views/livewire/profile/index.blade.php b/resources/views/livewire/profile/index.blade.php
index 94bc73089..fc367e6f2 100644
--- a/resources/views/livewire/profile/index.blade.php
+++ b/resources/views/livewire/profile/index.blade.php
@@ -43,26 +43,24 @@
                 <div class="flex items-center justify-center w-80 h-80 bg-white p-4 border-4 border-gray-300 rounded-lg shadow-lg">
                     {!! request()->user()->twoFactorQrCodeSvg() !!}
                 </div>
-                <div x-data="{ 
-                    showCode: false, 
+                <div x-data="{
+                    showCode: false,
                     secretKey: '{{ decrypt(request()->user()->two_factor_secret) }}',
                     otpUrl: '{{ request()->user()->twoFactorQrCodeUrl() }}',
                     copiedSecretKey: false,
                     copiedOtpUrl: false
                 }" class="py-4 w-full">
-                    <div class="flex flex-col gap-2">
+                    <div class="flex flex-col gap-2" x-show="showCode">
                         <div class="relative">
-                            <x-forms.input 
-                                x-show="showCode" 
-                                x-model="secretKey" 
-                                label="Secret Key" 
-                                readonly 
+                            <x-forms.input
+                                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"
+                            <button
+                                @click="navigator.clipboard.writeText(secretKey); copiedSecretKey = true; setTimeout(() => copiedSecretKey = false, 2000)"
+                                class="absolute right-2 bottom-1 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" />
@@ -72,18 +70,16 @@
                                 </svg>
                             </button>
                         </div>
-                        <div class="relative">
-                            <x-forms.input 
-                                x-show="showCode" 
-                                x-model="otpUrl" 
-                                label="OTP URL" 
-                                readonly 
+                        <div class="relative" >
+                            <x-forms.input
+                                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"
+                            <button
+                                @click="navigator.clipboard.writeText(otpUrl); copiedOtpUrl = true; setTimeout(() => copiedOtpUrl = false, 2000)"
+                                class="absolute right-2 bottom-1 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" />
@@ -95,7 +91,7 @@
                         </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
+                        <span x-text="showCode ? 'Hide Secret Key and OTP URL' : 'Show Secret Key and OTP URL'"></span>
                     </x-forms.button>
                 </div>
             </div>