feat: Webhook (#8457)

* feat: introduce webhook

* wip

* wip

* wip

* Update CHANGELOG.md

5 files changed, 231 insertions, 1 deletions

diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 3eb74425b0..b74e9bd684 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -80,7 +80,7 @@ export default defineComponent({
 			margin-right: 0.75em;
 			flex-shrink: 0;
 			text-align: center;
-			opacity: 0.8;
+			color: var(--fgTransparentWeak);
 
 			&:empty {
 				display: none;
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 42e40c5acb..44c3be62fe 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -149,6 +149,11 @@ const menuDef = computed(() => [{
 		to: '/settings/api',
 		active: page.value === 'api',
 	}, {
+		icon: 'fas fa-bolt',
+		text: 'Webhook',
+		to: '/settings/webhook',
+		active: page.value === 'webhook',
+	}, {
 		icon: 'fas fa-ellipsis-h',
 		text: i18n.ts.other,
 		to: '/settings/other',
@@ -192,6 +197,9 @@ const component = computed(() => {
 		case 'security': return defineAsyncComponent(() => import('./security.vue'));
 		case '2fa': return defineAsyncComponent(() => import('./2fa.vue'));
 		case 'api': return defineAsyncComponent(() => import('./api.vue'));
+		case 'webhook': return defineAsyncComponent(() => import('./webhook.vue'));
+		case 'webhook/new': return defineAsyncComponent(() => import('./webhook.new.vue'));
+		case 'webhook/edit': return defineAsyncComponent(() => import('./webhook.edit.vue'));
 		case 'apps': return defineAsyncComponent(() => import('./apps.vue'));
 		case 'other': return defineAsyncComponent(() => import('./other.vue'));
 		case 'general': return defineAsyncComponent(() => import('./general.vue'));
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
new file mode 100644
index 0000000000..bb3a25407e
--- /dev/null
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -0,0 +1,89 @@
+<template>
+<div class="_formRoot">
+	<FormInput v-model="name" class="_formBlock">
+		<template #label>Name</template>
+	</FormInput>
+
+	<FormInput v-model="url" type="url" class="_formBlock">
+		<template #label>URL</template>
+	</FormInput>
+
+	<FormInput v-model="secret" class="_formBlock">
+		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #label>Secret</template>
+	</FormInput>
+
+	<FormSection>
+		<template #label>Events</template>
+
+		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
+		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
+		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
+		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
+		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
+		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
+		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
+	</FormSection>
+
+	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
+
+	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton primary inline @click="save"><i class="fas fa-check"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+
+const webhook = await os.api('i/webhooks/show', {
+	webhookId: new URLSearchParams(window.location.search).get('id')
+});
+
+let name = $ref(webhook.name);
+let url = $ref(webhook.url);
+let secret = $ref(webhook.secret);
+let active = $ref(webhook.active);
+
+let event_follow = $ref(webhook.on.includes('follow'));
+let event_followed = $ref(webhook.on.includes('followed'));
+let event_note = $ref(webhook.on.includes('note'));
+let event_reply = $ref(webhook.on.includes('reply'));
+let event_renote = $ref(webhook.on.includes('renote'));
+let event_reaction = $ref(webhook.on.includes('reaction'));
+let event_mention = $ref(webhook.on.includes('mention'));
+
+async function save(): Promise<void> {
+	const events = [];
+	if (event_follow) events.push('follow');
+	if (event_followed) events.push('followed');
+	if (event_note) events.push('note');
+	if (event_reply) events.push('reply');
+	if (event_renote) events.push('renote');
+	if (event_reaction) events.push('reaction');
+	if (event_mention) events.push('mention');
+
+	os.apiWithDialog('i/webhooks/update', {
+		name,
+		url,
+		secret,
+		on: events,
+		active,
+	});
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: 'Edit webhook',
+		icon: 'fas fa-bolt',
+		bg: 'var(--bg)',
+	},
+});
+</script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
new file mode 100644
index 0000000000..9bb492c49e
--- /dev/null
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -0,0 +1,81 @@
+<template>
+<div class="_formRoot">
+	<FormInput v-model="name" class="_formBlock">
+		<template #label>Name</template>
+	</FormInput>
+
+	<FormInput v-model="url" type="url" class="_formBlock">
+		<template #label>URL</template>
+	</FormInput>
+
+	<FormInput v-model="secret" class="_formBlock">
+		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #label>Secret</template>
+	</FormInput>
+
+	<FormSection>
+		<template #label>Events</template>
+
+		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
+		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
+		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
+		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
+		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
+		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
+		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
+	</FormSection>
+
+	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton primary inline @click="create"><i class="fas fa-check"></i> {{ i18n.ts.create }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+
+let name = $ref('');
+let url = $ref('');
+let secret = $ref('');
+
+let event_follow = $ref(true);
+let event_followed = $ref(true);
+let event_note = $ref(true);
+let event_reply = $ref(true);
+let event_renote = $ref(true);
+let event_reaction = $ref(true);
+let event_mention = $ref(true);
+
+async function create(): Promise<void> {
+	const events = [];
+	if (event_follow) events.push('follow');
+	if (event_followed) events.push('followed');
+	if (event_note) events.push('note');
+	if (event_reply) events.push('reply');
+	if (event_renote) events.push('renote');
+	if (event_reaction) events.push('reaction');
+	if (event_mention) events.push('mention');
+
+	os.apiWithDialog('i/webhooks/create', {
+		name,
+		url,
+		secret,
+		on: events,
+	});
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: 'Create new webhook',
+		icon: 'fas fa-bolt',
+		bg: 'var(--bg)',
+	},
+});
+</script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
new file mode 100644
index 0000000000..c9af8b6766
--- /dev/null
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -0,0 +1,52 @@
+<template>
+<div class="_formRoot">
+	<FormSection>
+		<FormLink :to="`/settings/webhook/new`">
+			Create webhook
+		</FormLink>
+	</FormSection>
+	
+	<FormSection>
+		<MkPagination :pagination="pagination">
+			<template v-slot="{items}">
+				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit?id=${webhook.id}`" class="_formBlock">
+					<template #icon>
+						<i v-if="webhook.active === false" class="fas fa-circle-pause"></i>
+						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
+						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="fas fa-check" :style="{ color: 'var(--success)' }"></i>
+						<i v-else class="fas fa-triangle-exclamation" :style="{ color: 'var(--error)' }"></i>
+					</template>
+					{{ webhook.name || webhook.url }}
+					<template #suffix>
+						<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
+					</template>
+				</FormLink>
+			</template>
+		</MkPagination>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import FormSection from '@/components/form/section.vue';
+import FormLink from '@/components/form/link.vue';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+
+const pagination = {
+	endpoint: 'i/webhooks/list' as const,
+	limit: 10,
+};
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: 'Webhook',
+		icon: 'fas fa-bolt',
+		bg: 'var(--bg)',
+	},
+});
+</script>