100 lines
4.5 KiB
TypeScript
100 lines
4.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { initializeAccount } from '../services/auth';
|
|
import { User, Language } from '../types';
|
|
import { Globe, ArrowRight, Check } from 'lucide-react';
|
|
import { t } from '../services/i18n';
|
|
|
|
interface InitializeAccountProps {
|
|
onInitialized: (user: User) => void;
|
|
language: Language;
|
|
onLanguageChange: (lang: Language) => void;
|
|
}
|
|
|
|
const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, language, onLanguageChange }) => {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleInitialize = async () => {
|
|
setIsSubmitting(true);
|
|
setError('');
|
|
const res = await initializeAccount(language);
|
|
if (res.success && res.user) {
|
|
onInitialized(res.user);
|
|
} else {
|
|
setError(res.error || 'Failed to initialize account');
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const languages: { code: Language; label: string; desc: string }[] = [
|
|
{ code: 'en', label: 'English', desc: t('init_lang_en_desc', language) },
|
|
{ code: 'ru', label: 'Русский', desc: t('init_lang_ru_desc', language) },
|
|
];
|
|
|
|
return (
|
|
<div className="h-screen bg-surface flex flex-col items-center justify-center p-6 bg-surface">
|
|
<div className="w-full max-w-sm bg-surface-container p-8 rounded-[28px] shadow-elevation-2 flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-primary-container rounded-2xl flex items-center justify-center text-on-primary-container mb-6 shadow-elevation-1">
|
|
<Globe size={32} />
|
|
</div>
|
|
|
|
<h1 className="text-2xl font-normal text-on-surface mb-2 text-center">
|
|
{t('init_title', language)}
|
|
</h1>
|
|
<p className="text-sm text-on-surface-variant mb-8 text-center balance">
|
|
{t('init_desc', language)}
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="w-full text-error text-sm text-center bg-error-container/10 p-3 rounded-xl mb-6 border border-error/10">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full space-y-3 mb-8">
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => onLanguageChange(lang.code)}
|
|
className={`w-full p-4 rounded-2xl border-2 transition-all flex items-center justify-between group ${language === lang.code
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-outline-variant/30 hover:border-outline-variant hover:bg-surface-container-high'
|
|
}`}
|
|
>
|
|
<div className="text-left">
|
|
<div className={`font-medium ${language === lang.code ? 'text-primary' : 'text-on-surface'}`}>
|
|
{lang.label}
|
|
</div>
|
|
<div className="text-xs text-on-surface-variant">
|
|
{lang.desc}
|
|
</div>
|
|
</div>
|
|
{language === lang.code && (
|
|
<div className="w-6 h-6 bg-primary text-on-primary rounded-full flex items-center justify-center">
|
|
<Check size={14} strokeWidth={3} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleInitialize}
|
|
disabled={isSubmitting}
|
|
className="w-full py-4 bg-primary text-on-primary rounded-full font-medium text-lg shadow-elevation-1 flex items-center justify-center gap-2 hover:shadow-elevation-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isSubmitting ? (
|
|
<div className="w-6 h-6 border-2 border-on-primary/30 border-t-on-primary rounded-full animate-spin" />
|
|
) : (
|
|
<>
|
|
{t('init_start', language)} <ArrowRight size={20} />
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InitializeAccount;
|