mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 10:44:12 +00:00
7b68b19f11
## Summary Automated initial change, cleaned up manually. Please check the screenshot changes. Includes a11y updates to icon buttons. Doesn't hit the buttons in Desktop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
123 lines
3.4 KiB
Vue
123 lines
3.4 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
|
|
}"
|
|
variant="muted-textonly"
|
|
size="icon-sm"
|
|
@click="dialogService.showUpdatePasswordDialog()"
|
|
>
|
|
<i class="pi pi-pen-to-square" />
|
|
</Button>
|
|
</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" variant="secondary" @click="handleSignOut">
|
|
<i class="pi pi-sign-out" />
|
|
{{ $t('auth.signOut.signOut') }}
|
|
</Button>
|
|
<Button
|
|
v-if="!isApiKeyLogin"
|
|
class="w-fit"
|
|
variant="destructive-textonly"
|
|
@click="handleDeleteAccount"
|
|
>
|
|
{{ $t('auth.deleteAccount.deleteAccount') }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Section -->
|
|
<div v-else class="flex flex-col gap-4">
|
|
<p class="text-smoke-600">
|
|
{{ $t('auth.login.title') }}
|
|
</p>
|
|
|
|
<Button
|
|
class="w-52"
|
|
variant="primary"
|
|
:loading="loading"
|
|
@click="handleSignIn"
|
|
>
|
|
<i class="pi pi-user" />
|
|
{{ $t('auth.login.signInOrSignUp') }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Divider from 'primevue/divider'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
import TabPanel from 'primevue/tabpanel'
|
|
|
|
import UserAvatar from '@/components/common/UserAvatar.vue'
|
|
import Button from '@/components/ui/button/Button.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>
|