oidc format tweaks

packages/frontend/src/components/MkSignin.input.vue

@@ -30,6 +30,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
+		
+
 		<!-- username入力 -->
 		<form class="_gaps_s" @submit.prevent="emit('usernameSubmitted', username)">
 			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username>
@@ -48,17 +50,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-device-usb" style="font-size: medium;"></i>{{ i18n.ts.signinWithPasskey }}
 			</MkButton>
 		</div>
+		
+		<!-- OIDC login -->
+		<div :class="$style.orHr">
+			<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
+		</div>
+		<div v-if="oidcLogin">
+			<MkButton type="button" large primary rounded style="margin: 0 auto;" @click="oidcPopup">
+				Sign in with {{ oidcName }}
+			</MkButton>
+		</div>
+		
 	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { toUnicode } from 'punycode.js';
 
 import { query, extractDomain } from '@@/js/url.js';
 import { host as configHost } from '@@/js/config.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
+import { misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 
@@ -77,12 +91,52 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'usernameSubmitted', v: string): void;
 	(ev: 'passkeyClick', v: MouseEvent): void;
+	(ev: 'oidcLogin', v: any): void;
 }>();
 
 const host = toUnicode(configHost);
 
 const username = ref('');
 
+const oidcName = ref('OpenID Connect');
+const oidcLogin = ref(false);
+
+let oidcUrl: string | undefined;
+
+misskeyApiGet('oidc/meta').then((resp: {
+	enabled: false
+} | {
+	enabled: true,
+	name: string,
+	url: string,
+}) => {
+	oidcLogin.value = resp.enabled;
+	if (resp.enabled) {
+		oidcName.value = resp.name;
+		oidcUrl = resp.url;
+	}
+});
+
+function oidcPopup() {
+	window.open(oidcUrl, undefined, 'popup');
+}
+
+function oidcEvent(event) {
+	const data = event.data;
+	if (typeof data === 'object' && 'type' in data && data.type === 'login-ok') {
+		const res = (data as { type: 'login-ok', data: unknown }).data;
+		emit('oidcLogin', res);
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('message', oidcEvent);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('message', oidcEvent);
+});
+
 //#region Open on remote
 function openRemote(options: OpenOnRemoteOptions, targetHost?: string): void {
 	switch (options.type) {

packages/frontend/src/components/MkSignin.vue

@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			@usernameSubmitted="onUsernameSubmitted"
 			@passkeyClick="onPasskeyLogin"
+			@oidcLogin="onOidcLogin"
 		/>
 
 		<!-- 2. パスワード入力 -->
@@ -56,11 +57,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@done="onPasskeyDone"
 			@useTotp="onUseTotp"
 		/>
+		
 	</Transition>
+	
 	<div v-if="waiting" :class="$style.waitingRoot">
 		<MkLoading/>
 	</div>
-	<MkButton v-if="oidcLogin" v-oidc type="button" large primary rounded style="margin: 0 auto;" @click="oidcPopup">Sign in with {{ oidcName }}</MkButton>
+	
 </div>
 </template>
 
@@ -106,46 +109,12 @@ const needCaptcha = ref(false);
 const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
 const password = ref('');
 
-const oidcName = ref('OpenID Connect');
-const oidcLogin = ref(false);
-
-let oidcUrl: string | undefined;
-
-misskeyApiGet('oidc/meta').then((resp: {
-	enabled: false
-} | {
-	enabled: true,
-	name: string,
-	url: string,
-}) => {
-	oidcLogin.value = resp.enabled;
-	if (resp.enabled) {
-		oidcName.value = resp.name;
-		oidcUrl = resp.url;
-	}
-});
-
-const vOidc = {
-	mounted: (el) => {
-		window.addEventListener('message', oidcEvent);
-	},
-	unmounted: (el) => {
-		window.removeEventListener('message', oidcEvent);
-	},
-};
-
-async function oidcPopup() {
-	window.open(oidcUrl, undefined, 'popup');
-}
-
-function oidcEvent(event) {
-	const data = event.data;
-	if (typeof data === 'object' && 'type' in data && data.type === 'login-ok') {
-		const res = (data as { type: 'login-ok', data: unknown }).data;
-		emit('login', res);
-		return onLoginSucceeded(res);
-	}
+//#region OIDC
+function onOidcLogin(res: any): void {
+	emit('login', res);
+	onLoginSucceeded(res);
 }
+//#endregion
 
 //#region Passkey Passwordless
 const credentialRequest = shallowRef<CredentialRequestOptions | null>(null);