mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
b943c0fa75
## Summary Adds the [tailwind lint plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss) and fixes the currently fixable rules ([v4 is still in beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)). ## Changes - **What**: Enforces things like consistent class order, and eventually can prohibit extra classes that could be utilities instead - **Dependencies**: The plugin and its types ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
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-32"
|
|
severity="danger"
|
|
:label="$t('auth.deleteAccount.deleteAccount')"
|
|
icon="pi pi-trash"
|
|
@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>
|