Redesign signup "done" step to lead with recovery (1.3.15)
Reworked the final signup step so saving your login key is the hero,
not an afterthought:
- Celebration shrunk to a compact bar ("You're in! One quick thing…")
so it no longer steals focus from the safety step.
- "Save your login key" card is now the centerpiece with a loud amber
primary CTA (Reveal & save), a skater-native framing ("keys to your
board", "only way back in — no email, no password reset").
- Download button flips to a green "Saved ✓" state for clear feedback.
- "Skate now" is intentionally quieter and honest: reads "Skip for now,
skate" with a reassuring note until the key is saved, then becomes a
confident lime "Let's skate" once done. Never blocks the user.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy
parent
d8adf0746d
commit
3cc3b623cc
1 changed files with 73 additions and 49 deletions
|
|
@ -512,51 +512,48 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Done Step - Account created, gentle optional backup */}
|
||||
{/* Done Step — recovery FIRST. Saving your key is the hero action;
|
||||
skating is one tap away but never competes with the safety step. */}
|
||||
{step === 'done' && (
|
||||
<div className='py-4 space-y-4'>
|
||||
<Card className='bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/10 border-2 border-[#ccff00]/50'>
|
||||
<CardContent className='p-6 text-center space-y-3'>
|
||||
<div className='text-5xl mb-2'>🛹</div>
|
||||
<h3 className='text-xl font-black uppercase text-[#ccff00]'>
|
||||
You're all set!
|
||||
</h3>
|
||||
<p className='text-gray-300 text-sm'>
|
||||
Your account is ready. Go find some spots.
|
||||
</p>
|
||||
<CheckCircle className='h-10 w-10 mx-auto text-[#00ff00]' />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Optional backup — no pressure, no jargon */}
|
||||
<Card className='bg-amber-950/20 border-2 border-amber-500/30'>
|
||||
<CardContent className='p-5 space-y-3'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='p-2 rounded-lg bg-amber-500/20'>
|
||||
<Shield className='h-5 w-5 text-amber-400' />
|
||||
</div>
|
||||
<div className='py-2 space-y-4'>
|
||||
{/* Compact celebration — acknowledges success without stealing the
|
||||
spotlight from the one thing that actually matters right now. */}
|
||||
<div className='flex items-center gap-3 rounded-xl bg-[#00ff00]/10 border border-[#00ff00]/30 px-4 py-3'>
|
||||
<CheckCircle className='h-6 w-6 shrink-0 text-[#00ff00]' />
|
||||
<div>
|
||||
<h4 className='font-bold text-amber-400'>Save a backup (optional)</h4>
|
||||
<p className='text-xs text-gray-400'>So you never lose access to your account</p>
|
||||
<p className='font-black uppercase text-[#ccff00] leading-tight'>You're in! 🛹</p>
|
||||
<p className='text-xs text-gray-400'>One quick thing before you drop in…</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className='text-sm text-gray-300'>
|
||||
Your account lives on your device. Save a recovery code somewhere safe and
|
||||
you'll be able to log back in on any device. You can also do this later from Settings.
|
||||
|
||||
{/* THE KEY — framed like a skate metaphor: this is your session pass.
|
||||
Lose it, no bail-out. Saving it is the primary, loud action. */}
|
||||
<Card className='bg-gradient-to-br from-amber-950/40 to-black border-2 border-amber-500/50 shadow-[0_0_28px_rgba(245,158,11,0.18)]'>
|
||||
<CardContent className='p-5 space-y-3'>
|
||||
<div className='flex items-start gap-3'>
|
||||
<div className='mt-0.5 p-2 rounded-xl bg-amber-500/20 ring-1 ring-amber-500/40'>
|
||||
<Key className='h-5 w-5 text-amber-400' />
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<h4 className='font-black uppercase text-amber-300 leading-tight'>Save your login key</h4>
|
||||
<p className='text-xs text-amber-100/80 leading-snug mt-1'>
|
||||
This is the <span className='font-bold text-amber-200'>only</span> way back into your account —
|
||||
no email, no password reset. Save it now and you can log in on any device, anywhere you skate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!showNsec ? (
|
||||
<Button
|
||||
variant='outline'
|
||||
className='w-full border-amber-500/50 text-amber-400 hover:bg-amber-500/10'
|
||||
className='w-full rounded-full py-3 font-black uppercase bg-amber-500 text-black hover:bg-amber-400'
|
||||
onClick={() => setShowNsec(true)}
|
||||
>
|
||||
<Key className='h-4 w-4 mr-2' />
|
||||
Show my recovery code
|
||||
<Shield className='h-4 w-4 mr-2' />
|
||||
Reveal & save my key
|
||||
</Button>
|
||||
) : (
|
||||
<div className='space-y-2'>
|
||||
<div className='p-2 bg-black rounded border border-amber-500/20 font-mono text-xs break-all text-white'>
|
||||
<div className='p-3 bg-black rounded-lg border border-amber-500/30 font-mono text-xs break-all text-white'>
|
||||
{nsec}
|
||||
</div>
|
||||
<div className='grid grid-cols-2 gap-2'>
|
||||
|
|
@ -570,36 +567,63 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
|
|||
toast({ title: 'Copied!', description: 'Recovery code copied. Keep it somewhere safe.' });
|
||||
}}
|
||||
>
|
||||
<Key className='h-3.5 w-3.5 mr-1.5' />
|
||||
Copy
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
className='border-amber-500/40 text-amber-300 hover:bg-amber-500/10'
|
||||
className={cn(
|
||||
'font-bold',
|
||||
keySecured === 'downloaded'
|
||||
? 'bg-[#00ff00]/20 text-[#00ff00] border border-[#00ff00]/40 hover:bg-[#00ff00]/25'
|
||||
: 'bg-amber-500 text-black hover:bg-amber-400'
|
||||
)}
|
||||
onClick={downloadKey}
|
||||
>
|
||||
<Download className='h-3.5 w-3.5 mr-1.5' />
|
||||
{keySecured === 'downloaded' ? 'Saved ✓' : 'Download'}
|
||||
{keySecured === 'downloaded' ? (
|
||||
<><CheckCircle className='h-3.5 w-3.5 mr-1.5' /> Saved</>
|
||||
) : (
|
||||
<><Download className='h-3.5 w-3.5 mr-1.5' /> Download</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<p className='text-xs text-amber-300/80'>⚠️ Anyone with this code can access your account. Never share it.</p>
|
||||
<p className='flex items-start gap-1.5 text-[11px] text-amber-300/80 leading-snug'>
|
||||
<Shield className='h-3.5 w-3.5 shrink-0 mt-px' />
|
||||
Treat it like the keys to your board — anyone with this code controls your account. Never share it.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Skate now — clearly available, intentionally quieter than "save".
|
||||
Copy adapts: once saved, it's a confident go; if not, it's an
|
||||
honest "you can do this later" so we never trap the user. */}
|
||||
<div className='space-y-2'>
|
||||
<Button
|
||||
className='w-full rounded-full py-3 font-bold uppercase bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
|
||||
variant={keySecured === 'downloaded' ? 'default' : 'outline'}
|
||||
className={cn(
|
||||
'w-full rounded-full py-3 font-black uppercase',
|
||||
keySecured === 'downloaded'
|
||||
? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
|
||||
: 'border-white/20 text-white hover:bg-white/5'
|
||||
)}
|
||||
onClick={handleFinishComplete}
|
||||
>
|
||||
<LogIn className='h-4 w-4 mr-2' />
|
||||
Start Skating
|
||||
{keySecured === 'downloaded' ? "Let's skate" : 'Skip for now, skate'}
|
||||
</Button>
|
||||
{keySecured !== 'downloaded' && (
|
||||
<p className='text-center text-[11px] text-gray-500'>
|
||||
No stress — we'll remind you, and you can save it anytime from Settings.
|
||||
</p>
|
||||
)}
|
||||
<Link to='/signers' onClick={handleFinishComplete} className='block'>
|
||||
<button className='w-full text-xs text-gray-500 hover:text-gray-400 py-1'>
|
||||
Advanced: use a signer app instead
|
||||
</button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue