Default exercises are created in selected language. Initial GUI added

2025-12-18 22:16:39 +02:00
parent 78d4a10f33
commit abffb52af1
12 changed files with 332 additions and 117 deletions
--- a/src/components/InitializeAccount.tsx
+++ b/src/components/InitializeAccount.tsx
@@ -0,0 +1,99 @@
+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;