Initialize GUI fixed
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { initializeAccount } from '../services/auth';
|
||||
import { User, Language } from '../types';
|
||||
import { Globe, ArrowRight, Check } from 'lucide-react';
|
||||
import { Globe, ArrowRight, Check, Calendar } from 'lucide-react';
|
||||
import { DatePicker } from './ui/DatePicker';
|
||||
import { t } from '../services/i18n';
|
||||
|
||||
interface InitializeAccountProps {
|
||||
@@ -16,7 +17,7 @@ const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, la
|
||||
const [birthDate, setBirthDate] = useState('');
|
||||
const [height, setHeight] = useState('');
|
||||
const [weight, setWeight] = useState('');
|
||||
const [gender, setGender] = useState<'MALE' | 'FEMALE' | 'OTHER' | ''>('');
|
||||
const [gender, setGender] = useState<'MALE' | 'FEMALE' | 'OTHER'>('MALE');
|
||||
|
||||
const handleInitialize = async () => {
|
||||
setIsSubmitting(true);
|
||||
@@ -91,16 +92,13 @@ const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, la
|
||||
|
||||
<div className="w-full mb-8">
|
||||
<div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
<div>
|
||||
<label htmlFor="birthDate" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('birth_date', language)}</label>
|
||||
<input
|
||||
id="birthDate"
|
||||
type="date"
|
||||
value={birthDate}
|
||||
onChange={(e) => setBirthDate(e.target.value)}
|
||||
className="w-full p-4 rounded-2xl bg-surface-container-high border border-outline-variant/30 text-on-surface focus:border-primary focus:outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
label={t('birth_date', language)}
|
||||
value={birthDate}
|
||||
onChange={(val) => setBirthDate(val)}
|
||||
maxDate={new Date()}
|
||||
testId="init-birth-date"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="height" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('height', language)}</label>
|
||||
@@ -114,7 +112,7 @@ const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, la
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="weight" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('my_weight', language).split('(')[0].trim()}</label>
|
||||
<label htmlFor="weight" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('bodyweight', language).split('(')[0].trim()}</label>
|
||||
<input
|
||||
id="weight"
|
||||
type="number"
|
||||
@@ -133,7 +131,6 @@ const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, la
|
||||
onChange={(e) => setGender(e.target.value as any)}
|
||||
className="w-full p-4 rounded-2xl bg-surface-container-high border border-outline-variant/30 text-on-surface focus:border-primary focus:outline-none transition-all appearance-none"
|
||||
>
|
||||
<option value="">{t('select_gender', language)}</option>
|
||||
<option value="MALE">{t('male', language)}</option>
|
||||
<option value="FEMALE">{t('female', language)}</option>
|
||||
<option value="OTHER">{t('other', language)}</option>
|
||||
|
||||
@@ -302,7 +302,7 @@ const Profile: React.FC<ProfileProps> = ({ user, onLogout, lang, onLanguageChang
|
||||
<h3 className="text-sm font-bold text-primary mb-4">{t('personal_data', lang)}</h3>
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-3 py-2">
|
||||
<label htmlFor="profileWeight" className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Scale size={10} /> {t('weight_kg', lang)}</label>
|
||||
<label htmlFor="profileWeight" className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Scale size={10} /> {t('bodyweight', lang)}</label>
|
||||
<input
|
||||
id="profileWeight"
|
||||
data-testid="profile-weight-input"
|
||||
|
||||
@@ -95,7 +95,7 @@ const IdleView: React.FC<IdleViewProps> = ({ tracker, lang }) => {
|
||||
<div className="w-full max-w-sm bg-surface-container rounded-2xl p-6 flex flex-col items-center gap-4 shadow-elevation-1">
|
||||
<label className="text-xs text-on-surface-variant font-bold tracking-wide flex items-center gap-2">
|
||||
<User size={14} />
|
||||
{t('my_weight', lang)}
|
||||
{t('bodyweight', lang)}
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
|
||||
@@ -470,9 +470,19 @@ export const DatePicker: React.FC<DatePickerProps> = ({
|
||||
if (textInputValue && validateDateInput(textInputValue)) {
|
||||
onChange(textInputValue);
|
||||
setTextInputValue('');
|
||||
setIsOpen(false);
|
||||
(e.target as HTMLInputElement).blur();
|
||||
} else if (!textInputValue) {
|
||||
setIsOpen(false);
|
||||
(e.target as HTMLInputElement).blur();
|
||||
}
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setIsOpen(false);
|
||||
setTextInputValue('');
|
||||
setTextInputError('');
|
||||
(e.target as HTMLInputElement).blur();
|
||||
}
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
|
||||
@@ -51,7 +51,7 @@ const translations = {
|
||||
// Tracker
|
||||
ready_title: 'Ready?',
|
||||
ready_subtitle: 'Start your workout and break records.',
|
||||
my_weight: 'My Weight (kg)',
|
||||
bodyweight: 'Bodyweight (kg)',
|
||||
change_in_profile: 'Change in profile',
|
||||
last_workout_today: 'Last workout: Today',
|
||||
days_off: 'Days off training:',
|
||||
@@ -275,7 +275,7 @@ const translations = {
|
||||
// Tracker
|
||||
ready_title: 'Готовы?',
|
||||
ready_subtitle: 'Начните тренировку и побейте рекорды.',
|
||||
my_weight: 'Мой вес (кг)',
|
||||
bodyweight: 'Вес тела (кг)',
|
||||
change_in_profile: 'Можно изменить в профиле',
|
||||
last_workout_today: 'Последняя тренировка: Сегодня',
|
||||
days_off: 'Дней без тренировок:',
|
||||
|
||||
Reference in New Issue
Block a user