Add confirmation for delete auth methods

src/components/IrdomAuthButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { AuthMethodLink, AuthMethodName } from '@/models';
-
 import apiClient from '@/api/';
 
 export interface AuthButton {
@@ -15,10 +14,15 @@ export interface AuthButton {
 interface Props {
 	button: AuthButton;
 	unlink?: boolean;
+	location?: 'login' | 'auth-edit';
 }
-const props = withDefaults(defineProps<Props>(), { unlink: false });
+const props = withDefaults(defineProps<Props>(), {
+	unlink: false,
+	location: 'login',
+});
 
 const authUrl = ref<string | null>(null);
+const dialogVisible = ref(false);
 
 onMounted(async () => {
 	const { data } = await apiClient.GET(`/auth/${props.button.link}/auth_url`);
@@ -29,16 +33,31 @@ onMounted(async () => {
 
 async function clickHandler() {
 	if (props.unlink) {
-		await apiClient.DELETE(`/auth/${props.button.link}`);
-		location.reload(); // TODO: придумать нормальное решение
+		dialogVisible.value = true;
 	} else if (authUrl.value) {
 		window.open(authUrl.value, '_self');
 	}
 }
+
+async function confirmUnlink() {
+	await apiClient.DELETE(`/auth/${props.button.link}`);
+	location.reload(); // TODO: придумать нормальное решение
+}
+
+function cancelUnlink() {
+	dialogVisible.value = false;
+}
 </script>
 
 <template>
-	<v-btn type="button" :color="button.color" @click="clickHandler">
+	<v-btn
+		type="button"
+		:color="button.color"
+		:variant="props.location === 'login' ? 'flat' : 'elevated'"
+		:size="props.location === 'login' ? 'large' : 'default'"
+		:class="props.location === 'login' ? 'oauth-button' : 'auth-edit-button'"
+		@click="clickHandler"
+	>
 		<template #prepend>
 			<svg width="24" height="24" class="icon">
 				<use :xlink:href="button.icon" />
@@ -47,4 +66,32 @@ async function clickHandler() {
 
 		{{ button.name }}
 	</v-btn>
+
+	<!-- Модальное окно для подтверждения отвязки -->
+	<v-dialog v-model="dialogVisible" max-width="400">
+		<v-card>
+			<v-card-title class="headline">Вы точно хотите отвязать аккаунт?</v-card-title>
+			<v-card-actions>
+				<v-spacer />
+				<v-btn color="red" @click="cancelUnlink">Не отвязывать</v-btn>
+				<v-btn @click="confirmUnlink">Отвязать</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
 </template>
+
+<style scoped>
+.oauth-button {
+	min-width: 250px;
+	width: 40%;
+	border-radius: 4px !important;
+	overflow: hidden;
+}
+
+.auth-edit-button {
+	min-width: auto;
+	width: auto;
+	border-radius: 4px !important;
+	overflow: hidden;
+}
+</style>

src/views/auth/AuthView.vue

@@ -58,16 +58,14 @@ toolbar.setup({ title: 'Вход в профиль' });
 			class="loginform"
 			@success="switchState(Step.Login)"
 		/>
-
 		<div class="oauth-button-list">
 			<IrdomAuthButton
 				v-for="i in showButtonsCnt"
 				:key="authButtons[i - 1].name"
 				type="button"
 				:button="authButtons[i - 1]"
-				variant="flat"
-				size="large"
-				class="oauth-button"
+				:unlink="false"
+				location="login"
 			/>
 			<v-btn
 				v-if="showMoreButton"
@@ -81,7 +79,6 @@ toolbar.setup({ title: 'Вход в профиль' });
 				Другие сервисы
 			</v-btn>
 		</div>
-
 		<div>
 			<div v-if="registerStep == Step.Login" class="link-text-register">
 				Еще нет профиля?

src/views/profile/ProfileEditAuthView.vue

@@ -32,7 +32,12 @@ const canUnlinked = computed(() =>
 		<section v-if="profileStore.authMethods?.length !== 8" class="section">
 			<h2>Привязать аккаунт</h2>
 			<div class="buttons">
-				<IrdomAuthButton v-for="button of canLinked" :key="button.method" :button="button" />
+				<IrdomAuthButton
+					v-for="button of canLinked"
+					:key="button.method"
+					:button="button"
+					location="auth-edit"
+				/>
 			</div>
 		</section>
 
@@ -43,8 +48,9 @@ const canUnlinked = computed(() =>
 					v-for="button of canUnlinked"
 					:key="button.method"
 					:button="button"
+					location="auth-edit"
 					:disabled="profileStore.authMethods.length === 1"
-					unlink
+					:unlink="true"
 				/>
 			</div>
 		</section>