46 lines
No EOL
2.7 KiB
Vue
46 lines
No EOL
2.7 KiB
Vue
<script setup>
|
|
import AuthButton from './AuthButton.vue';
|
|
const id = 'authModal';
|
|
</script>
|
|
<template>
|
|
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
|
|
:id="id" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none">
|
|
<div
|
|
class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
|
|
<div
|
|
class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
|
|
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
|
|
Login with Anilist
|
|
</h5>
|
|
<button type="button"
|
|
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
|
|
data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body relative p-4">
|
|
<AuthButton />
|
|
<div class="mt-3">
|
|
<label for="tokenTextArea" class="form-label inline-block mb-2 text-gray-700">
|
|
Insert token below
|
|
</label>
|
|
<textarea
|
|
class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
|
|
id="tokenTextArea"
|
|
rows="3"
|
|
placeholder="Insert token here"></textarea>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
|
|
<button type="button"
|
|
class="inline-block px-6 py-2.5 bg-slate-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-slate-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-slate-800 active:shadow-lg transition duration-150 ease-in-out"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button"
|
|
data-bs-dismiss="modal"
|
|
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |