b89136161c
Signup and onboarding are the first impression, so tighten both.
Signup (SignupDialog):
- Add a Choose -> Profile -> Save key step indicator.
- Make backup a confirmation, not a skip: an "I've saved my recovery code"
checkbox enables "Let's skate" (downloading the key also sets it); the old
co-equal "Skip for now" is now a quiet link.
- Fix copy that contradicted step 3 ("nothing to remember") and warn that a
signer may ask to approve the profile publish.
- Platform-aware signer nudge instead of implying a recommendation.
LoginArea: drop the dead SignupMethodDialog/MnemonicSignupDialog wiring (never
opened) and rename the misleading nsecSignupDialogOpen state.
Onboarding: add a "Where do you skate?" first step (Use my location caches the
fix so the map opens on the skater's area) and remove the dead disabled
"Log in first" button.
95 lines
No EOL
3.4 KiB
TypeScript
95 lines
No EOL
3.4 KiB
TypeScript
// NOTE: This file is stable and usually should not be modified.
|
|
// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
|
|
|
|
import { useState } from 'react';
|
|
import { User, UserPlus } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button.tsx';
|
|
import LoginDialog from './LoginDialog';
|
|
import SignupDialog from './SignupDialog';
|
|
import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
|
|
import { AccountSwitcher } from './AccountSwitcher';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface LoginAreaProps {
|
|
className?: string;
|
|
/** Compact mode for mobile headers - smaller buttons without text */
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function LoginArea({ className, compact }: LoginAreaProps) {
|
|
const { currentUser } = useLoggedInAccounts();
|
|
const [loginDialogOpen, setLoginDialogOpen] = useState(false);
|
|
const [signupDialogOpen, setSignupDialogOpen] = useState(false);
|
|
|
|
const handleLogin = () => {
|
|
setLoginDialogOpen(false);
|
|
setSignupDialogOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("inline-flex items-center justify-center", className)}>
|
|
{currentUser ? (
|
|
<AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
|
|
) : compact ? (
|
|
// Compact mode for mobile headers - icon only
|
|
<div className="flex gap-1 justify-center">
|
|
<Button
|
|
onClick={() => setSignupDialogOpen(true)}
|
|
size="icon"
|
|
className='h-9 w-9 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
|
|
title="Sign Up"
|
|
>
|
|
<UserPlus className='w-4 h-4' />
|
|
</Button>
|
|
<Button
|
|
onClick={() => setLoginDialogOpen(true)}
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-9 w-9 rounded-full border border-gray-600 hover:border-[#ff0040]"
|
|
title="Log In"
|
|
>
|
|
<User className='w-4 h-4' />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
// Default full-size buttons
|
|
<div className="flex gap-3 justify-center w-full">
|
|
<Button
|
|
onClick={() => setSignupDialogOpen(true)}
|
|
className='flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold transition-all flex-1 sm:flex-none'
|
|
>
|
|
<UserPlus className='w-4 h-4' />
|
|
<span>Sign Up</span>
|
|
</Button>
|
|
<Button
|
|
onClick={() => setLoginDialogOpen(true)}
|
|
variant="outline"
|
|
className="flex items-center gap-2 px-5 py-2.5 rounded-full font-medium transition-all border-2 border-gray-600 hover:border-[#ff0040] flex-1 sm:flex-none"
|
|
>
|
|
<User className='w-4 h-4' />
|
|
<span className='truncate'>Log In</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<LoginDialog
|
|
isOpen={loginDialogOpen}
|
|
onClose={() => setLoginDialogOpen(false)}
|
|
onLogin={handleLogin}
|
|
onSignup={() => setSignupDialogOpen(true)}
|
|
/>
|
|
|
|
{/* One signup entry point. The old "Recovery Phrase vs Secret Key" method
|
|
chooser was dead code (never opened) and pure jargon for a newcomer —
|
|
SignupDialog owns the whole flow now. */}
|
|
<SignupDialog
|
|
isOpen={signupDialogOpen}
|
|
onClose={() => setSignupDialogOpen(false)}
|
|
onUseAmber={() => {
|
|
setSignupDialogOpen(false);
|
|
setLoginDialogOpen(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
} |