mirror of
https://github.com/misskey-dev/misskey.git
synced 2025-04-04 14:03:27 +09:00
112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<MkStickyContainer>
|
|
<template #header><MkPageHeader/></template>
|
|
<MkSpacer :contentMax="800">
|
|
<div v-if="$i && !loading">
|
|
<div v-if="name">{{ i18n.tsx._auth.shareAccess({ name }) }}</div>
|
|
<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
|
|
<div :class="$style.buttons">
|
|
<MkButton @click="onCancel">{{ i18n.ts.cancel }}</MkButton>
|
|
<MkButton primary @click="onAccept">{{ i18n.ts.accept }}</MkButton>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="$i && loading">
|
|
<div>{{ i18n.ts._auth.callback }}</div>
|
|
<MkLoading class="loading"/>
|
|
<div style="display: none">
|
|
<form ref="postBindingForm" method="post" :action="actionUrl" autocomplete="off">
|
|
<input v-for="(value, key) in actionContext" :key="key" :name="key" :value="value" type="hidden"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p :class="$style.loginMessage">{{ i18n.ts._auth.pleaseLogin }}</p>
|
|
<MkSignin @login="onLogin"/>
|
|
</div>
|
|
</MkSpacer>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, nextTick } from 'vue';
|
|
import MkSignin from '@/components/MkSignin.vue';
|
|
import MkButton from '@/components/MkButton.vue';
|
|
import { $i, login } from '@/account.js';
|
|
import { i18n } from '@/i18n.js';
|
|
import * as os from '@/os.js';
|
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|
|
|
const transactionIdMeta = document.querySelector<HTMLMetaElement>('meta[name="misskey:sso:transaction-id"]');
|
|
if (transactionIdMeta) {
|
|
transactionIdMeta.remove();
|
|
}
|
|
const name = document.querySelector<HTMLMetaElement>('meta[name="misskey:sso:service-name"]')?.content;
|
|
const kind = document.querySelector<HTMLMetaElement>('meta[name="misskey:sso:kind"]')?.content;
|
|
|
|
const loading = ref(false);
|
|
const postBindingForm = ref<HTMLFormElement | null>(null);
|
|
const actionUrl = ref<string | undefined>(undefined);
|
|
const actionContext = ref<Record<string, string> | null>(null);
|
|
|
|
function onLogin(res): void {
|
|
login(res.i);
|
|
}
|
|
|
|
function onCancel(): void {
|
|
if (history.length > 1) history.back();
|
|
else location.href = '/';
|
|
}
|
|
|
|
function onAccept(): void {
|
|
loading.value = true;
|
|
os.promiseDialog(authorize());
|
|
}
|
|
|
|
async function authorize(): Promise<void> {
|
|
const res = await fetch(`/sso/${kind}/authorize`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
transaction_id: transactionIdMeta?.content,
|
|
login_token: $i!.token,
|
|
}),
|
|
});
|
|
const json = await res.json();
|
|
if (json.binding === 'post') {
|
|
actionUrl.value = json.action;
|
|
actionContext.value = json.context;
|
|
nextTick(() => {
|
|
postBindingForm.value?.submit();
|
|
});
|
|
} else {
|
|
location.href = json.action;
|
|
}
|
|
}
|
|
|
|
definePageMetadata(() => ({
|
|
title: 'Single Sign-On',
|
|
icon: 'ti ti-apps',
|
|
}));
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.buttons {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.loginMessage {
|
|
text-align: center;
|
|
margin: 8px 0 24px;
|
|
}
|
|
</style>
|