{"version":3,"file":"ApiTokenManager-D_SwAuuK.js","sources":["../../../resources/js/Components/ConfirmationModal.vue","../../../resources/js/Pages/API/Partials/ApiTokenManager.vue"],"sourcesContent":["<script setup>\nimport Modal from './Modal.vue';\n\nconst emit = defineEmits(['close']);\n\ndefineProps({\n    show: {\n        type: Boolean,\n        default: false,\n    },\n    maxWidth: {\n        type: String,\n        default: '2xl',\n    },\n    closeable: {\n        type: Boolean,\n        default: true,\n    },\n});\n\nconst close = () => {\n    emit('close');\n};\n</script>\n\n<template>\n    <Modal\n        :show=\"show\"\n        :max-width=\"maxWidth\"\n        :closeable=\"closeable\"\n        @close=\"close\"\n    >\n        <div class=\"bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n            <div class=\"sm:flex sm:items-start\">\n                <div class=\"mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10\">\n                    <svg class=\"h-6 w-6 text-red-600 dark:text-red-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n                    </svg>\n                </div>\n\n                <div class=\"mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start\">\n                    <h3 class=\"text-lg font-medium text-gray-900 dark:text-gray-100\">\n                        <slot name=\"title\" ></slot>\n                    </h3>\n\n                    <div class=\"mt-4 text-sm text-gray-600 dark:text-gray-400\">\n                        <slot name=\"content\" ></slot>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end\">\n            <slot name=\"footer\" ></slot>\n        </div>\n    </Modal>\n</template>\n","<script setup>\nimport { ref } from 'vue';\nimport { useForm } from '@inertiajs/vue3';\nimport ActionMessage from '@/Components/ActionMessage.vue';\nimport ActionSection from '@/Components/ActionSection.vue';\nimport Checkbox from '@/Components/Checkbox.vue';\nimport ConfirmationModal from '@/Components/ConfirmationModal.vue';\nimport DangerButton from '@/Components/DangerButton.vue';\nimport DialogModal from '@/Components/DialogModal.vue';\nimport FormSection from '@/Components/FormSection.vue';\nimport InputError from '@/Components/InputError.vue';\nimport InputLabel from '@/Components/InputLabel.vue';\nimport PrimaryButton from '@/Components/PrimaryButton.vue';\nimport SecondaryButton from '@/Components/SecondaryButton.vue';\nimport SectionBorder from '@/Components/SectionBorder.vue';\nimport TextInput from '@/Components/TextInput.vue';\n\nconst props = defineProps({\n    tokens: Array,\n    availablePermissions: Array,\n    defaultPermissions: Array,\n});\n\nconst createApiTokenForm = useForm({\n    name: '',\n    permissions: props.defaultPermissions,\n});\n\nconst updateApiTokenForm = useForm({\n    permissions: [],\n});\n\nconst deleteApiTokenForm = useForm({});\n\nconst displayingToken = ref(false);\nconst managingPermissionsFor = ref(null);\nconst apiTokenBeingDeleted = ref(null);\n\nconst createApiToken = () => {\n    createApiTokenForm.post(route('api-tokens.store'), {\n        preserveScroll: true,\n        onSuccess: () => {\n            displayingToken.value = true;\n            createApiTokenForm.reset();\n        },\n    });\n};\n\nconst manageApiTokenPermissions = (token) => {\n    updateApiTokenForm.permissions = token.abilities;\n    managingPermissionsFor.value = token;\n};\n\nconst updateApiToken = () => {\n    updateApiTokenForm.put(route('api-tokens.update', managingPermissionsFor.value), {\n        preserveScroll: true,\n        preserveState: true,\n        onSuccess: () => (managingPermissionsFor.value = null),\n    });\n};\n\nconst confirmApiTokenDeletion = (token) => {\n    apiTokenBeingDeleted.value = token;\n};\n\nconst deleteApiToken = () => {\n    deleteApiTokenForm.delete(route('api-tokens.destroy', apiTokenBeingDeleted.value), {\n        preserveScroll: true,\n        preserveState: true,\n        onSuccess: () => (apiTokenBeingDeleted.value = null),\n    });\n};\n</script>\n\n<template>\n    <div>\n        <!-- Generate API Token -->\n        <FormSection @submitted=\"createApiToken\">\n            <template #title>\n                Create API Token\n            </template>\n\n            <template #description>\n                API tokens allow third-party services to authenticate with our application on your behalf.\n            </template>\n\n            <template #form>\n                <!-- Token Name -->\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <InputLabel for=\"name\" value=\"Name\" />\n                    <TextInput\n                        id=\"name\"\n                        v-model=\"createApiTokenForm.name\"\n                        type=\"text\"\n                        class=\"mt-1 block w-full\"\n                        autofocus\n                    />\n                    <InputError :message=\"createApiTokenForm.errors.name\" class=\"mt-2\" />\n                </div>\n\n                <!-- Token Permissions -->\n                <div v-if=\"availablePermissions.length > 0\" class=\"col-span-6\">\n                    <InputLabel for=\"permissions\" value=\"Permissions\" />\n\n                    <div class=\"mt-2 grid grid-cols-1 md:grid-cols-2 gap-4\">\n                        <div v-for=\"permission in availablePermissions\" :key=\"permission\">\n                            <label class=\"flex items-center\">\n                                <Checkbox v-model:checked=\"createApiTokenForm.permissions\" :value=\"permission\" />\n                                <span class=\"ms-2 text-sm text-gray-600 dark:text-gray-400\">{{ permission }}</span>\n                            </label>\n                        </div>\n                    </div>\n                </div>\n            </template>\n\n            <template #actions>\n                <ActionMessage :on=\"createApiTokenForm.recentlySuccessful\" class=\"me-3\">\n                    Created.\n                </ActionMessage>\n\n                <PrimaryButton :class=\"{ 'opacity-25': createApiTokenForm.processing }\" :disabled=\"createApiTokenForm.processing\">\n                    Create\n                </PrimaryButton>\n            </template>\n        </FormSection>\n\n        <div v-if=\"tokens.length > 0\">\n            <SectionBorder />\n\n            <!-- Manage API Tokens -->\n            <div class=\"mt-10 sm:mt-0\">\n                <ActionSection>\n                    <template #title>\n                        Manage API Tokens\n                    </template>\n\n                    <template #description>\n                        You may delete any of your existing tokens if they are no longer needed.\n                    </template>\n\n                    <!-- API Token List -->\n                    <template #content>\n                        <div class=\"space-y-6\">\n                            <div v-for=\"token in tokens\" :key=\"token.id\" class=\"flex items-center justify-between\">\n                                <div class=\"break-all dark:text-white\">\n                                    {{ token.name }}\n                                </div>\n\n                                <div class=\"flex items-center ms-2\">\n                                    <div v-if=\"token.last_used_ago\" class=\"text-sm text-gray-400\">\n                                        Last used {{ token.last_used_ago }}\n                                    </div>\n\n                                    <button\n                                        v-if=\"availablePermissions.length > 0\"\n                                        class=\"cursor-pointer ms-6 text-sm text-gray-400 underline\"\n                                        @click=\"manageApiTokenPermissions(token)\"\n                                    >\n                                        Permissions\n                                    </button>\n\n                                    <button class=\"cursor-pointer ms-6 text-sm text-red-500\" @click=\"confirmApiTokenDeletion(token)\">\n                                        Delete\n                                    </button>\n                                </div>\n                            </div>\n                        </div>\n                    </template>\n                </ActionSection>\n            </div>\n        </div>\n\n        <!-- Token Value Modal -->\n        <DialogModal :show=\"displayingToken\" @close=\"displayingToken = false\">\n            <template #title>\n                API Token\n            </template>\n\n            <template #content>\n                <div>\n                    Please copy your new API token. For your security, it won't be shown again.\n                </div>\n\n                <div v-if=\"$page.props.jetstream.flash.token\" class=\"mt-4 bg-gray-100 dark:bg-gray-900 px-4 py-2 rounded font-mono text-sm text-gray-500 break-all\">\n                    {{ $page.props.jetstream.flash.token }}\n                </div>\n            </template>\n\n            <template #footer>\n                <SecondaryButton @click=\"displayingToken = false\">\n                    Close\n                </SecondaryButton>\n            </template>\n        </DialogModal>\n\n        <!-- API Token Permissions Modal -->\n        <DialogModal :show=\"managingPermissionsFor != null\" @close=\"managingPermissionsFor = null\">\n            <template #title>\n                API Token Permissions\n            </template>\n\n            <template #content>\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div v-for=\"permission in availablePermissions\" :key=\"permission\">\n                        <label class=\"flex items-center\">\n                            <Checkbox v-model:checked=\"updateApiTokenForm.permissions\" :value=\"permission\" />\n                            <span class=\"ms-2 text-sm text-gray-600 dark:text-gray-400\">{{ permission }}</span>\n                        </label>\n                    </div>\n                </div>\n            </template>\n\n            <template #footer>\n                <SecondaryButton @click=\"managingPermissionsFor = null\">\n                    Cancel\n                </SecondaryButton>\n\n                <PrimaryButton\n                    class=\"ms-3\"\n                    :class=\"{ 'opacity-25': updateApiTokenForm.processing }\"\n                    :disabled=\"updateApiTokenForm.processing\"\n                    @click=\"updateApiToken\"\n                >\n                    Save\n                </PrimaryButton>\n            </template>\n        </DialogModal>\n\n        <!-- Delete Token Confirmation Modal -->\n        <ConfirmationModal :show=\"apiTokenBeingDeleted != null\" @close=\"apiTokenBeingDeleted = null\">\n            <template #title>\n                Delete API Token\n            </template>\n\n            <template #content>\n                Are you sure you would like to delete this API token?\n            </template>\n\n            <template #footer>\n                <SecondaryButton @click=\"apiTokenBeingDeleted = null\">\n                    Cancel\n                </SecondaryButton>\n\n                <DangerButton\n                    class=\"ms-3\"\n                    :class=\"{ 'opacity-25': deleteApiTokenForm.processing }\"\n                    :disabled=\"deleteApiTokenForm.processing\"\n                    @click=\"deleteApiToken\"\n                >\n                    Delete\n                </DangerButton>\n            </template>\n        </ConfirmationModal>\n    </div>\n</template>\n"],"names":["emit","__emit","close","createApiTokenForm","useForm","name","permissions","__props","defaultPermissions","updateApiTokenForm","deleteApiTokenForm","displayingToken","ref","managingPermissionsFor","apiTokenBeingDeleted","createApiToken","post","route","preserveScroll","onSuccess","value","reset","updateApiToken","put","preserveState","deleteApiToken","delete","token","abilities"],"mappings":"quCAGA,MAAMA,EAAOC,EAiBPC,EAAQ,KACVF,EAAK,QAAO,wlDCJhB,MAMMG,EAAqBC,EAAQ,CAC/BC,KAAM,GACNC,YARUC,EAQSC,qBAGjBC,EAAqBL,EAAQ,CAC/BE,YAAa,KAGXI,EAAqBN,EAAQ,IAE7BO,EAAkBC,GAAI,GACtBC,EAAyBD,EAAI,MAC7BE,EAAuBF,EAAI,MAE3BG,EAAiB,KACAZ,EAAAa,KAAKC,MAAM,oBAAqB,CAC/CC,gBAAgB,EAChBC,UAAW,KACPR,EAAgBS,OAAQ,EACxBjB,EAAmBkB,OAAO,GAEjC,EAQCC,EAAiB,KACnBb,EAAmBc,IAAIN,MAAM,oBAAqBJ,EAAuBO,OAAQ,CAC7EF,gBAAgB,EAChBM,eAAe,EACfL,UAAW,IAAON,EAAuBO,MAAQ,MACpD,EAOCK,EAAiB,KACnBf,EAAmBgB,OAAOT,MAAM,qBAAsBH,EAAqBM,OAAQ,CAC/EF,gBAAgB,EAChBM,eAAe,EACfL,UAAW,IAAOL,EAAqBM,MAAQ,MAClD,ouDAtB6B,CAACO,IAC/BlB,EAAmBH,YAAcqB,EAAMC,UACvCf,EAAuBO,MAAQO,CAAA,8GAWH,CAACA,IAC7Bb,EAAqBM,MAAQO,CAAA"}