feat(ui): use new copy button component everywhere
This commit is contained in:
peaklabs-dev
@@ -40,7 +40,6 @@
|
|||||||
userConfirmationText: '',
|
userConfirmationText: '',
|
||||||
confirmWithText: @js($confirmWithText && !$disableTwoStepConfirmation),
|
confirmWithText: @js($confirmWithText && !$disableTwoStepConfirmation),
|
||||||
confirmWithPassword: @js($confirmWithPassword && !$disableTwoStepConfirmation),
|
confirmWithPassword: @js($confirmWithPassword && !$disableTwoStepConfirmation),
|
||||||
copied: false,
|
|
||||||
submitAction: @js($submitAction),
|
submitAction: @js($submitAction),
|
||||||
passwordError: '',
|
passwordError: '',
|
||||||
selectedActions: @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all()),
|
selectedActions: @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all()),
|
||||||
@@ -91,13 +90,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
copyConfirmationText() {
|
|
||||||
navigator.clipboard.writeText(this.confirmationText);
|
|
||||||
this.copied = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.copied = false;
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
toggleAction(id) {
|
toggleAction(id) {
|
||||||
const index = this.selectedActions.indexOf(id);
|
const index = this.selectedActions.indexOf(id);
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
@@ -255,29 +247,9 @@
|
|||||||
<h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
|
<h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
|
||||||
<p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
|
<p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
|
||||||
<div class="relative mb-2">
|
<div class="relative mb-2">
|
||||||
<input type="text" x-model="confirmationText"
|
<x-forms.copy-button
|
||||||
class="p-2 pr-10 w-full text-black rounded cursor-text input" readonly>
|
text="{{ $confirmationText }}"
|
||||||
<button @click="copyConfirmationText()"
|
/>
|
||||||
x-show="window.isSecureContext"
|
|
||||||
class="absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700"
|
|
||||||
title="Copy confirmation text" x-ref="copyButton">
|
|
||||||
<template x-if="!copied">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
|
|
||||||
viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
|
|
||||||
<path
|
|
||||||
d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<template x-if="copied">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
|
|
||||||
viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label for="userConfirmationText"
|
<label for="userConfirmationText"
|
||||||
|
|||||||
@@ -45,52 +45,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div x-data="{
|
<div x-data="{
|
||||||
showCode: false,
|
showCode: false,
|
||||||
secretKey: '{{ decrypt(request()->user()->two_factor_secret) }}',
|
|
||||||
otpUrl: '{{ request()->user()->twoFactorQrCodeUrl() }}',
|
|
||||||
copiedSecretKey: false,
|
|
||||||
copiedOtpUrl: false
|
|
||||||
}" class="py-4 w-full">
|
}" class="py-4 w-full">
|
||||||
<div class="flex flex-col gap-2" x-show="showCode">
|
<div class="flex flex-col gap-2 pb-2" x-show="showCode">
|
||||||
<div class="relative">
|
<x-forms.copy-button
|
||||||
<x-forms.input
|
text="{{ decrypt(request()->user()->two_factor_secret) }}"
|
||||||
x-model="secretKey"
|
/>
|
||||||
label="Secret Key"
|
<x-forms.copy-button
|
||||||
readonly
|
text="{{ request()->user()->twoFactorQrCodeUrl() }}"
|
||||||
class="font-mono pr-10"
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
x-show="window.isSecureContext"
|
|
||||||
@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" />
|
|
||||||
</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-model="otpUrl"
|
|
||||||
label="OTP URL"
|
|
||||||
readonly
|
|
||||||
class="font-mono pr-10"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
x-show="window.isSecureContext"
|
|
||||||
@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" />
|
|
||||||
</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>
|
</div>
|
||||||
<x-forms.button x-on:click="showCode = !showCode" class="mt-2">
|
<x-forms.button x-on:click="showCode = !showCode" class="mt-2">
|
||||||
<span x-text="showCode ? 'Hide Secret Key and OTP URL' : 'Show Secret Key and OTP URL'"></span>
|
<span x-text="showCode ? 'Hide Secret Key and OTP URL' : 'Show Secret Key and OTP URL'"></span>
|
||||||
|
|||||||
Reference in New Issue
Block a user