mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 15:18:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

api settings linked browser and docs

Browse Source
This commit is contained in:
vabene1111
2025-06-06 14:50:29 +02:00
parent d1a69dac90
commit 23c4c2e543
2 changed files with 49 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
vue3/src/components/settings/ApiSettings.vue
View File

@@ -3,34 +3,50 @@
<p class="text-h6">{{ $t('API') }}</p>
<v-divider class="mb-3"></v-divider>
<v-alert color="error" variant="tonal">
The API is made for developers to interact with the application.
It is possible to break things using the API so be careful and create a backup first.
The API definition can and will change in the future, make sure to read the changelog to spot changes early
on.
</v-alert>
<v-row>
<database-link-col prepend-icon="fa-solid fa-terminal" :href="useDjangoUrls().getDjangoUrl('api')" :lg="6" :title="$t('API Browser')"></database-link-col>
<database-link-col prepend-icon="fa-solid fa-laptop-code" :href="useDjangoUrls().getDjangoUrl('/docs/api/')" :lg="6"
:title="$t('API Dokumentation')"></database-link-col>
</v-row>
Authentication works by proving the word <code>Bearer</code> followed by an API Token as a request Authorization
header as shown below. <br/>
<code>Authorization: Bearer TOKEN</code> -or-<br/>
<code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
Bearer TOKEN'</code>
<v-row>
<v-col>
<br/>
<br/>
You can have multiple tokens and each token can have its own scope. Currently there is <code>read</code>, <code>write</code>
and <code>bookmarklet</code>.
Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
it.
<v-alert color="error" variant="tonal">
The API is made for developers to interact with the application.
It is possible to break things using the API so be careful and create a backup first.
The API definition can and will change in the future, make sure to read the changelog to spot changes early
on.
</v-alert>
</v-col>
</v-row>
<v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
<v-row>
<v-col>
Authentication works by proving the word <code>Bearer</code> followed by an API Token as a request Authorization
header as shown below. <br/>
<code>Authorization: Bearer TOKEN</code> -or-<br/>
<code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
Bearer TOKEN'</code>
<br/>
<br/>
You can have multiple tokens and each token can have its own scope. Currently there is <code>read</code>, <code>write</code>
and <code>bookmarklet</code>.
Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
it.
<v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
</v-col>
</v-row>
<v-btn prepend-icon="$create" color="create" class="mt-2">{{ $t('New') }}
<model-edit-dialog model="AccessToken" @create="loadAccessTokens()" :close-after-create="false"></model-edit-dialog>
</v-btn>
<v-list class="mt-2" border>
<v-list-item v-for="at in accessTokenList" >
<v-list-item v-for="at in accessTokenList">
<v-list-item-title>{{ at.token }}</v-list-item-title>
<v-list-item-subtitle>Scope {{ at.scope }}
Expires {{ DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL) }}
@@ -57,6 +73,8 @@ import {AccessToken, ApiApi} from "@/openapi";
import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
import {DateTime} from "luxon";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import DatabaseLinkCol from "@/components/display/DatabaseLinkCol.vue";
import {useDjangoUrls} from "@/composables/useDjangoUrls.ts";
const accessTokenList = ref([] as AccessToken[])