mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
[fix] Improve cloud waitlist view UX with signed-in user display (#6071)
## Summary - Display signed-in user email in waitlist view for better user clarity - Add switch accounts option for users on waitlist to change their account - Simplify claim invite view by removing avatar box and reorganizing layout ## Changes Made ### CloudWaitlistView.vue - Added display of signed-in user email - Added "Switch accounts" option with navigation to cloud-login - Improved visual hierarchy and styling for better readability ### CloudClaimInviteView.vue - Removed avatar box component to simplify UI - Moved "Switch accounts" link below user info section - Reorganized layout for better flow ## Test Plan - [ ] Verify waitlist view displays signed-in user email correctly - [ ] Test "Switch accounts" navigation works in both views - [ ] Confirm visual changes display properly in both light/dark themes - [ ] Ensure no regressions in cloud onboarding flow 🤖 Generated with [Claude Code](https://claude.ai/code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6071-fix-Improve-cloud-waitlist-view-UX-with-signed-in-user-display-28d6d73d365081618c19cfb56f4a12b6) by [Unito](https://www.unito.io) Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -34,14 +34,6 @@
|
||||
{{ t('cloudInvite_contactLink_suffix') }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="cursor-pointer text-blue-400 no-underline"
|
||||
@click="onSwitchAccounts"
|
||||
>
|
||||
{{ t('cloudInvite_switchAccounts') }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Signed in as -->
|
||||
<section class="mt-10">
|
||||
@@ -50,27 +42,23 @@
|
||||
</p>
|
||||
|
||||
<div class="mt-4 flex flex-col items-center justify-center gap-4">
|
||||
<!-- Avatar box -->
|
||||
<div
|
||||
class="relative grid h-28 w-28 place-items-center rounded-2xl border border-neutral-700 bg-neutral-800 shadow-inner"
|
||||
>
|
||||
<span class="text-5xl font-semibold select-none">{{
|
||||
userInitial
|
||||
}}</span>
|
||||
<!-- subtle ring to mimic screenshot gradient border -->
|
||||
<span
|
||||
class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-neutral-600/40 ring-inset"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
<div class="text-sm break-all">
|
||||
<div class="font-bold break-all">
|
||||
{{ userEmail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mt-4">
|
||||
<span
|
||||
class="cursor-pointer text-blue-400 no-underline"
|
||||
@click="onSwitchAccounts"
|
||||
>
|
||||
{{ t('cloudInvite_switchAccounts') }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
:label="
|
||||
|
||||
@@ -1,15 +1,39 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center p-8">
|
||||
<div class="w-full max-w-md text-center">
|
||||
<h1 class="font-abcrom hero-title font-black uppercase italic">
|
||||
<h1
|
||||
class="font-abcrom my-0 text-3xl font-black text-white uppercase italic"
|
||||
>
|
||||
{{ t('cloudWaitlist_titleLine1') }}<br />
|
||||
{{ t('cloudWaitlist_titleLine2') }}
|
||||
</h1>
|
||||
<div class="m-auto max-w-[320px] text-lg font-light">
|
||||
<p class="text-white">
|
||||
{{ t('cloudWaitlist_message') }}
|
||||
</p>
|
||||
<p class="mt-6 leading-relaxed text-neutral-300">
|
||||
{{ t('cloudWaitlist_message') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Signed in as -->
|
||||
<section class="mt-10">
|
||||
<p class="text-center text-sm">
|
||||
{{ t('cloudInvite_signedInAs') }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 flex flex-col items-center justify-center gap-4">
|
||||
<div class="text-left">
|
||||
<div class="font-bold break-all">
|
||||
{{ userEmail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mt-4">
|
||||
<span
|
||||
class="cursor-pointer text-blue-400 no-underline"
|
||||
@click="onSwitchAccounts"
|
||||
>
|
||||
{{ t('cloudInvite_switchAccounts') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,10 +41,20 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { getUserCloudStatus } from '@/api/auth'
|
||||
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { userEmail } = useFirebaseAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const onSwitchAccounts = () => {
|
||||
void router.push({
|
||||
name: 'cloud-login'
|
||||
})
|
||||
}
|
||||
|
||||
// Check if user is whitelisted on mount
|
||||
onMounted(async () => {
|
||||
|
||||
Reference in New Issue
Block a user