[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:
Jin Yi
2025-10-17 08:11:13 +09:00
committed by GitHub
parent d31df54f57
commit 31eb9ea640
2 changed files with 49 additions and 27 deletions

View File

@@ -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="

View File

@@ -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 () => {