skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 9 Packages Wiki Activity Actions 1

Redesign signup "done" step to lead with recovery (1.3.15)

Browse source 
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 2026-09-09 11:30:06 +07:00
parent d8adf0746d
commit 3cc3b623cc
1 changed files with 73 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/components/auth/SignupDialog.tsx
View file

@ -512,51 +512,48 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</div> </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' && ( {step === 'done' && (
<div className='py-4 space-y-4'> <div className='py-2 space-y-4'>
<Card className='bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/10 border-2 border-[#ccff00]/50'> {/* Compact celebration — acknowledges success without stealing the
<CardContent className='p-6 text-center space-y-3'> spotlight from the one thing that actually matters right now. */}
<div className='text-5xl mb-2'>🛹</div> <div className='flex items-center gap-3 rounded-xl bg-[#00ff00]/10 border border-[#00ff00]/30 px-4 py-3'>
<h3 className='text-xl font-black uppercase text-[#ccff00]'> <CheckCircle className='h-6 w-6 shrink-0 text-[#00ff00]' />
You're all set! <div>
</h3> <p className='font-black uppercase text-[#ccff00] leading-tight'>You're in! 🛹</p>
<p className='text-gray-300 text-sm'> <p className='text-xs text-gray-400'>One quick thing before you drop in…</p>
Your account is ready. Go find some spots. </div>
</p> </div>
<CheckCircle className='h-10 w-10 mx-auto text-[#00ff00]' />
</CardContent>
</Card>
{/* Optional backup — no pressure, no jargon */} {/* THE KEY — framed like a skate metaphor: this is your session pass.
<Card className='bg-amber-950/20 border-2 border-amber-500/30'> 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'> <CardContent className='p-5 space-y-3'>
<div className='flex items-center gap-3'> <div className='flex items-start gap-3'>
<div className='p-2 rounded-lg bg-amber-500/20'> <div className='mt-0.5 p-2 rounded-xl bg-amber-500/20 ring-1 ring-amber-500/40'>
<Shield className='h-5 w-5 text-amber-400' /> <Key className='h-5 w-5 text-amber-400' />
</div> </div>
<div> <div className='flex-1'>
<h4 className='font-bold text-amber-400'>Save a backup (optional)</h4> <h4 className='font-black uppercase text-amber-300 leading-tight'>Save your login key</h4>
<p className='text-xs text-gray-400'>So you never lose access to your account</p> <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>
</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.
</p>
{!showNsec ? ( {!showNsec ? (
<Button <Button
variant='outline' className='w-full rounded-full py-3 font-black uppercase bg-amber-500 text-black hover:bg-amber-400'
className='w-full border-amber-500/50 text-amber-400 hover:bg-amber-500/10'
onClick={() => setShowNsec(true)} onClick={() => setShowNsec(true)}
> >
<Key className='h-4 w-4 mr-2' /> <Shield className='h-4 w-4 mr-2' />
Show my recovery code Reveal &amp; save my key
</Button> </Button>
) : ( ) : (
<div className='space-y-2'> <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} {nsec}
</div> </div>
<div className='grid grid-cols-2 gap-2'> <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.' }); toast({ title: 'Copied!', description: 'Recovery code copied. Keep it somewhere safe.' });
}} }}
> >
<Key className='h-3.5 w-3.5 mr-1.5' />
Copy Copy
</Button> </Button>
<Button <Button
variant='outline'
size='sm' 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} onClick={downloadKey}
> >
<Download className='h-3.5 w-3.5 mr-1.5' /> {keySecured === 'downloaded' ? (
{keySecured === 'downloaded' ? 'Saved ✓' : 'Download'} <><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> </Button>
</div> </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> </div>
)} )}
<Button
className='w-full rounded-full py-3 font-bold uppercase bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
onClick={handleFinishComplete}
>
<LogIn className='h-4 w-4 mr-2' />
Start Skating
</Button>
<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> </CardContent>
</Card> </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
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' />
{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>
</div>
</div> </div>
)} )}
</div> </div>