mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 09:00:05 +00:00
8822f186e0
Adjusts style of "Delete Account" button. **Before**: <img width="731" height="925" alt="Screenshot from 2025-10-18 04-22-24" src="https://github.com/user-attachments/assets/497de4ca-9359-41d8-b944-0d69835f43b1" /> **After**: <img width="731" height="925" alt="Screenshot from 2025-10-18 04-22-14" src="https://github.com/user-attachments/assets/f42a21fb-7d4d-43f5-b27b-1f85e4470dbd" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6126-style-adjust-appearance-of-delete-account-component-to-be-text-rather-than-button-2906d73d365081eab48ece171fa4fd8a) by [Unito](https://www.unito.io)
124 lines
3.3 KiB
Vue
124 lines
3.3 KiB
Vue
<template>
|
|
<TabPanel value="User" class="user-settings-container h-full">
|
|
<div class="flex h-full flex-col">
|
|
<h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
|
|
<Divider class="mb-3" />
|
|
|
|
<!-- Normal User Panel -->
|
|
<div v-if="isLoggedIn" class="flex flex-col gap-2">
|
|
<UserAvatar
|
|
v-if="userPhotoUrl"
|
|
:photo-url="userPhotoUrl"
|
|
shape="circle"
|
|
size="large"
|
|
/>
|
|
|
|
<div class="flex flex-col gap-0.5">
|
|
<h3 class="font-medium">
|
|
{{ $t('userSettings.name') }}
|
|
</h3>
|
|
<div class="text-muted">
|
|
{{ userDisplayName || $t('userSettings.notSet') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-0.5">
|
|
<h3 class="font-medium">
|
|
{{ $t('userSettings.email') }}
|
|
</h3>
|
|
<span class="text-muted">
|
|
{{ userEmail }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-0.5">
|
|
<h3 class="font-medium">
|
|
{{ $t('userSettings.provider') }}
|
|
</h3>
|
|
<div class="flex items-center gap-1 text-muted">
|
|
<i :class="providerIcon" />
|
|
{{ providerName }}
|
|
<Button
|
|
v-if="isEmailProvider"
|
|
v-tooltip="{
|
|
value: $t('userSettings.updatePassword'),
|
|
showDelay: 300
|
|
}"
|
|
icon="pi pi-pen-to-square"
|
|
severity="secondary"
|
|
text
|
|
@click="dialogService.showUpdatePasswordDialog()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ProgressSpinner
|
|
v-if="loading"
|
|
class="mt-4 h-8 w-8"
|
|
style="--pc-spinner-color: #000"
|
|
/>
|
|
<div v-else class="mt-4 flex flex-col gap-2">
|
|
<Button
|
|
class="w-32"
|
|
severity="secondary"
|
|
:label="$t('auth.signOut.signOut')"
|
|
icon="pi pi-sign-out"
|
|
@click="handleSignOut"
|
|
/>
|
|
<Button
|
|
v-if="!isApiKeyLogin"
|
|
class="w-fit"
|
|
variant="text"
|
|
severity="danger"
|
|
:label="$t('auth.deleteAccount.deleteAccount')"
|
|
@click="handleDeleteAccount"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Section -->
|
|
<div v-else class="flex flex-col gap-4">
|
|
<p class="text-gray-600">
|
|
{{ $t('auth.login.title') }}
|
|
</p>
|
|
|
|
<Button
|
|
class="w-52"
|
|
severity="primary"
|
|
:loading="loading"
|
|
:label="$t('auth.login.signInOrSignUp')"
|
|
icon="pi pi-user"
|
|
@click="handleSignIn"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import Divider from 'primevue/divider'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
import TabPanel from 'primevue/tabpanel'
|
|
|
|
import UserAvatar from '@/components/common/UserAvatar.vue'
|
|
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
|
import { useDialogService } from '@/services/dialogService'
|
|
|
|
const dialogService = useDialogService()
|
|
const {
|
|
loading,
|
|
isLoggedIn,
|
|
isApiKeyLogin,
|
|
isEmailProvider,
|
|
userDisplayName,
|
|
userEmail,
|
|
userPhotoUrl,
|
|
providerName,
|
|
providerIcon,
|
|
handleSignOut,
|
|
handleSignIn,
|
|
handleDeleteAccount
|
|
} = useCurrentUser()
|
|
</script>
|