440 lines
22 KiB
TypeScript
440 lines
22 KiB
TypeScript
/**
|
|
* Settings Page — User-level settings with tabs.
|
|
* Route: /settings
|
|
*/
|
|
|
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { useLanguage } from '../providers/language/LanguageContext';
|
|
import { useCurrentUser, useUser } from '../hooks/useUsers';
|
|
import { setUserDataCache, getUserDataCache } from '../utils/userCache';
|
|
import { FormGeneratorForm } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
|
|
import type { AttributeDefinition } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
|
|
import { useApiRequest } from '../hooks/useApi';
|
|
import styles from './Settings.module.css';
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
type SettingsTab = 'profile' | 'appearance' | 'voice' | 'privacy';
|
|
|
|
const _TABS: { key: SettingsTab; label: string }[] = [
|
|
{ key: 'profile', label: 'Profil' },
|
|
{ key: 'appearance', label: 'Darstellung' },
|
|
{ key: 'voice', label: 'Stimme & Sprache' },
|
|
{ key: 'privacy', label: 'Datenschutz' },
|
|
];
|
|
|
|
// =============================================================================
|
|
// PROFILE EDIT MODAL
|
|
// =============================================================================
|
|
|
|
interface ProfileEditModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
userData: any;
|
|
onSave: (data: any) => Promise<void>;
|
|
}
|
|
|
|
const ProfileEditModal: React.FC<ProfileEditModalProps> = ({ isOpen, onClose, userData, onSave }) => {
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const profileAttributes: AttributeDefinition[] = [
|
|
{ name: 'fullName', type: 'string', label: 'Vollstaendiger Name', description: 'Ihr vollstaendiger Name', required: false, placeholder: 'Max Mustermann' },
|
|
{ name: 'email', type: 'email', label: 'E-Mail-Adresse', description: 'Ihre E-Mail-Adresse fuer Benachrichtigungen', required: true, placeholder: 'name@example.com' },
|
|
{ name: 'language', type: 'select', label: 'Sprache', description: 'Anzeigesprache der Anwendung', required: true, options: [{ value: 'de', label: 'Deutsch' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }] },
|
|
];
|
|
|
|
const handleSubmit = async (formData: any) => {
|
|
setIsSaving(true);
|
|
setError(null);
|
|
try {
|
|
await onSave(formData);
|
|
onClose();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Speichern des Profils');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className={styles.modalOverlay} onClick={onClose}>
|
|
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
|
|
<div className={styles.modalHeader}>
|
|
<h2>Profil bearbeiten</h2>
|
|
<button className={styles.closeButton} onClick={onClose}>×</button>
|
|
</div>
|
|
<div className={styles.modalBody}>
|
|
{error && <div className={styles.errorMessage}>{error}</div>}
|
|
<FormGeneratorForm attributes={profileAttributes} data={userData} mode="edit" onSubmit={handleSubmit} onCancel={onClose} submitButtonText={isSaving ? 'Speichern...' : 'Speichern'} cancelButtonText="Abbrechen" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// =============================================================================
|
|
// VOICE SETTINGS TAB
|
|
// =============================================================================
|
|
|
|
interface VoiceMapEntry { language: string; voiceName: string; }
|
|
|
|
const VoiceSettingsTab: React.FC = () => {
|
|
const { request } = useApiRequest();
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
|
|
const [sttLanguage, setSttLanguage] = useState('de-DE');
|
|
const [languages, setLanguages] = useState<any[]>([]);
|
|
const [voiceMap, setVoiceMap] = useState<VoiceMapEntry[]>([]);
|
|
|
|
const [addLanguage, setAddLanguage] = useState('de-DE');
|
|
const [addVoices, setAddVoices] = useState<any[]>([]);
|
|
const [addVoiceName, setAddVoiceName] = useState('');
|
|
const [loadingVoices, setLoadingVoices] = useState(false);
|
|
|
|
const _loadSettings = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [prefsData, languagesData] = await Promise.all([
|
|
request({ url: '/api/local/voice-preferences', method: 'get' }),
|
|
request({ url: '/api/local/voice/languages', method: 'get' }),
|
|
]);
|
|
|
|
const langList = (languagesData as any)?.languages || [];
|
|
setLanguages(langList);
|
|
|
|
const prefs = prefsData as any;
|
|
setSttLanguage(prefs?.sttLanguage || 'de-DE');
|
|
|
|
const map: Record<string, any> = prefs?.ttsVoiceMap || {};
|
|
const entries: VoiceMapEntry[] = Object.entries(map).map(([lang, cfg]) => ({
|
|
language: lang,
|
|
voiceName: typeof cfg === 'string' ? cfg : (cfg as any)?.voiceName || '',
|
|
}));
|
|
setVoiceMap(entries);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Laden der Voice-Einstellungen');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [request]);
|
|
|
|
useEffect(() => { _loadSettings(); }, [_loadSettings]);
|
|
|
|
const _loadVoicesForLanguage = useCallback(async (lang: string) => {
|
|
setLoadingVoices(true);
|
|
try {
|
|
const result = await request({ url: '/api/local/voice/voices', method: 'get', params: { language: lang } });
|
|
setAddVoices((result as any)?.voices || []);
|
|
setAddVoiceName('');
|
|
} catch { setAddVoices([]); }
|
|
finally { setLoadingVoices(false); }
|
|
}, [request]);
|
|
|
|
useEffect(() => { _loadVoicesForLanguage(addLanguage); }, [addLanguage, _loadVoicesForLanguage]);
|
|
|
|
const _handleAddEntry = useCallback(() => {
|
|
if (!addLanguage) return;
|
|
const exists = voiceMap.some(e => e.language === addLanguage);
|
|
if (exists) {
|
|
setVoiceMap(prev => prev.map(e => e.language === addLanguage ? { ...e, voiceName: addVoiceName } : e));
|
|
} else {
|
|
setVoiceMap(prev => [...prev, { language: addLanguage, voiceName: addVoiceName }]);
|
|
}
|
|
setAddVoiceName('');
|
|
}, [addLanguage, addVoiceName, voiceMap]);
|
|
|
|
const _handleRemoveEntry = useCallback((lang: string) => {
|
|
setVoiceMap(prev => prev.filter(e => e.language !== lang));
|
|
}, []);
|
|
|
|
const _handleSave = useCallback(async () => {
|
|
setSaving(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
try {
|
|
const mapObj: Record<string, any> = {};
|
|
voiceMap.forEach(e => { mapObj[e.language] = { voiceName: e.voiceName || '' }; });
|
|
await request({
|
|
url: '/api/local/voice-preferences',
|
|
method: 'put',
|
|
data: { sttLanguage, ttsLanguage: sttLanguage, ttsVoiceMap: mapObj },
|
|
});
|
|
setSuccess('Einstellungen gespeichert');
|
|
setTimeout(() => setSuccess(null), 3000);
|
|
await _loadSettings();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Speichern');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [request, voiceMap, sttLanguage, _loadSettings]);
|
|
|
|
const _handleTestVoice = useCallback(async (lang: string, voice: string) => {
|
|
setTesting(lang);
|
|
try {
|
|
const result: any = await request({
|
|
url: '/api/local/voice/test',
|
|
method: 'post',
|
|
data: { language: lang, voiceId: voice || undefined, text: `Hallo, das ist ein Stimmtest in ${lang}.` },
|
|
});
|
|
if (result?.success && result?.audio) {
|
|
const audio = new Audio(`data:audio/mp3;base64,${result.audio}`);
|
|
audio.play();
|
|
}
|
|
} catch { setError('Stimmtest fehlgeschlagen'); }
|
|
finally { setTesting(null); }
|
|
}, [request]);
|
|
|
|
const _getLanguageName = useCallback((code: string) => {
|
|
const found = languages.find((l: any) => (l.code || l) === code);
|
|
return found?.name || found?.code || code;
|
|
}, [languages]);
|
|
|
|
const _defaultLangs = [
|
|
{ code: 'de-DE', name: 'Deutsch' }, { code: 'en-US', name: 'English (US)' },
|
|
{ code: 'fr-FR', name: 'Francais' }, { code: 'it-IT', name: 'Italiano' },
|
|
{ code: 'es-ES', name: 'Espanol' },
|
|
];
|
|
const _displayLanguages = languages.length > 0 ? languages : _defaultLangs;
|
|
|
|
if (loading) return <div style={{ padding: '1rem', color: '#888' }}>Einstellungen werden geladen...</div>;
|
|
|
|
return (
|
|
<>
|
|
{error && <div className={styles.errorMessage}>{error}</div>}
|
|
{success && <div style={{ background: '#f0fdf4', border: '1px solid #bbf7d0', color: '#16a34a', padding: '0.75rem 1rem', borderRadius: 6, marginBottom: '1rem', fontSize: '0.875rem' }}>{success}</div>}
|
|
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>STT-Sprache (Spracheingabe)</h2>
|
|
<div className={styles.settingRow}>
|
|
<div className={styles.settingInfo}>
|
|
<label className={styles.settingLabel}>Sprache fuer Spracherkennung</label>
|
|
<p className={styles.settingDescription}>Wird fuer die Sprache-zu-Text-Erkennung verwendet.</p>
|
|
</div>
|
|
<div className={styles.settingControl}>
|
|
<select className={styles.select} value={sttLanguage} onChange={e => setSttLanguage(e.target.value)}>
|
|
{_displayLanguages.map((lang: any) => (
|
|
<option key={lang.code || lang} value={lang.code || lang}>{lang.name || lang.code || lang}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>TTS-Stimmen (Sprachausgabe)</h2>
|
|
<p className={styles.settingDescription} style={{ marginBottom: '1rem' }}>
|
|
Die Sprache wird automatisch erkannt. Hier kann pro Sprache eine bevorzugte Stimme festgelegt werden.
|
|
</p>
|
|
|
|
{voiceMap.length === 0 ? (
|
|
<div style={{ padding: '0.75rem', background: 'var(--surface-color, #f9fafb)', borderRadius: 8, fontSize: '0.85rem', color: '#888' }}>
|
|
Keine Stimmen konfiguriert. Die Standardstimme wird fuer alle Sprachen verwendet.
|
|
</div>
|
|
) : (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
|
|
<thead><tr style={{ borderBottom: '1px solid var(--border-color, #e0e0e0)' }}><th style={{ textAlign: 'left', padding: '0.5rem' }}>Sprache</th><th style={{ textAlign: 'left', padding: '0.5rem' }}>Stimme</th><th /><th /></tr></thead>
|
|
<tbody>
|
|
{voiceMap.map(entry => (
|
|
<tr key={entry.language} style={{ borderBottom: '1px solid var(--border-color, #eee)' }}>
|
|
<td style={{ padding: '0.5rem' }}>{_getLanguageName(entry.language)}</td>
|
|
<td style={{ padding: '0.5rem' }}>{entry.voiceName || 'Standard'}</td>
|
|
<td style={{ padding: '0.5rem' }}>
|
|
<button className={styles.button} style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }} onClick={() => _handleTestVoice(entry.language, entry.voiceName)} disabled={testing === entry.language}>
|
|
{testing === entry.language ? '...' : 'Test'}
|
|
</button>
|
|
</td>
|
|
<td style={{ padding: '0.5rem' }}>
|
|
<button className={styles.button} style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', color: '#dc2626' }} onClick={() => _handleRemoveEntry(entry.language)}>Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
|
|
<div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
|
|
<div>
|
|
<label className={styles.settingLabel} style={{ fontSize: '0.8rem' }}>Sprache</label>
|
|
<select className={styles.select} value={addLanguage} onChange={e => setAddLanguage(e.target.value)}>
|
|
{_displayLanguages.map((lang: any) => (
|
|
<option key={lang.code || lang} value={lang.code || lang}>{lang.name || lang.code || lang}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className={styles.settingLabel} style={{ fontSize: '0.8rem' }}>Stimme</label>
|
|
<select className={styles.select} value={addVoiceName} onChange={e => setAddVoiceName(e.target.value)} disabled={loadingVoices}>
|
|
<option value="">Standard</option>
|
|
{addVoices.map((v: any) => (
|
|
<option key={v.name || v} value={v.name || v}>{v.displayName || v.name || v}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button className={styles.button} onClick={_handleAddEntry} style={{ padding: '0.5rem 1rem' }}>Zuweisen</button>
|
|
<button className={styles.button} onClick={() => _handleTestVoice(addLanguage, addVoiceName)} disabled={testing !== null} style={{ padding: '0.5rem 1rem' }}>
|
|
{testing === addLanguage ? '...' : 'Testen'}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<button className={styles.button} onClick={_handleSave} disabled={saving} style={{ background: 'var(--primary-color, #2563eb)', color: '#fff', border: 'none', padding: '0.625rem 1.5rem', fontWeight: 600, borderRadius: 6 }}>
|
|
{saving ? 'Speichern...' : 'Einstellungen speichern'}
|
|
</button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// =============================================================================
|
|
// SETTINGS PAGE
|
|
// =============================================================================
|
|
|
|
export const SettingsPage: React.FC = () => {
|
|
const { currentLanguage, setLanguage } = useLanguage();
|
|
const { user: currentUser, refetch: refetchUser } = useCurrentUser();
|
|
const { updateUser } = useUser();
|
|
|
|
const [activeTab, setActiveTab] = useState<SettingsTab>('profile');
|
|
const [theme, setTheme] = useState<'light' | 'dark'>(() => (localStorage.getItem('theme') as 'light' | 'dark') || 'light');
|
|
const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
|
|
const [isSavingLanguage, setIsSavingLanguage] = useState(false);
|
|
const [languageError, setLanguageError] = useState<string | null>(null);
|
|
|
|
const handleThemeChange = (newTheme: 'light' | 'dark') => {
|
|
setTheme(newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
if (newTheme === 'dark') { document.documentElement.classList.add('dark-theme'); document.documentElement.classList.remove('light-theme'); }
|
|
else { document.documentElement.classList.add('light-theme'); document.documentElement.classList.remove('dark-theme'); }
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
};
|
|
|
|
const handleLanguageChange = useCallback(async (newLanguage: 'de' | 'en' | 'fr') => {
|
|
if (!currentUser?.id || !currentUser?.username) return;
|
|
setIsSavingLanguage(true);
|
|
setLanguageError(null);
|
|
try {
|
|
await updateUser(currentUser.id, { id: currentUser.id, username: currentUser.username, email: currentUser.email, fullName: currentUser.fullName, language: newLanguage, enabled: currentUser.enabled ?? true, authenticationAuthority: currentUser.authenticationAuthority || 'local' });
|
|
const cachedUser = getUserDataCache();
|
|
if (cachedUser) setUserDataCache({ ...cachedUser, language: newLanguage });
|
|
setLanguage(newLanguage);
|
|
window.dispatchEvent(new CustomEvent('userInfoUpdated'));
|
|
} catch { setLanguageError('Sprache konnte nicht gespeichert werden'); }
|
|
finally { setIsSavingLanguage(false); }
|
|
}, [currentUser, updateUser, setLanguage]);
|
|
|
|
const handleProfileSave = useCallback(async (formData: any) => {
|
|
if (!currentUser?.id || !currentUser?.username) throw new Error('Nicht angemeldet');
|
|
const newLanguage = formData.language || currentUser.language || 'de';
|
|
const updatedUser = await updateUser(currentUser.id, { id: currentUser.id, username: currentUser.username, email: formData.email || currentUser.email, fullName: formData.fullName || currentUser.fullName, language: newLanguage, enabled: currentUser.enabled ?? true, authenticationAuthority: currentUser.authenticationAuthority || 'local' });
|
|
const cachedUser = getUserDataCache();
|
|
if (cachedUser) setUserDataCache({ ...cachedUser, fullName: updatedUser.fullName || cachedUser.fullName, email: updatedUser.email || cachedUser.email, language: newLanguage });
|
|
if (newLanguage !== currentLanguage) setLanguage(newLanguage as 'de' | 'en' | 'fr');
|
|
if (refetchUser) await refetchUser();
|
|
window.dispatchEvent(new CustomEvent('userInfoUpdated'));
|
|
}, [currentUser, updateUser, refetchUser, currentLanguage, setLanguage]);
|
|
|
|
return (
|
|
<div className={styles.settings}>
|
|
<header className={styles.header}>
|
|
<h1>Einstellungen</h1>
|
|
<p className={styles.subtitle}>Persoenliche Einstellungen und Praeferenzen</p>
|
|
</header>
|
|
|
|
<nav style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-color, #e0e0e0)', marginBottom: '1.5rem' }}>
|
|
{_TABS.map(tab => (
|
|
<button key={tab.key} onClick={() => setActiveTab(tab.key)} style={{
|
|
padding: '10px 20px', border: 'none', borderBottom: activeTab === tab.key ? '2px solid var(--primary-color, #2563eb)' : '2px solid transparent',
|
|
background: 'none', cursor: 'pointer', fontSize: 14, fontWeight: activeTab === tab.key ? 600 : 400,
|
|
color: activeTab === tab.key ? 'var(--primary-color, #2563eb)' : 'var(--text-secondary, #888)',
|
|
}}>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<main className={styles.content}>
|
|
{activeTab === 'profile' && (
|
|
<>
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>Konto</h2>
|
|
<div className={styles.settingRow}>
|
|
<div className={styles.settingInfo}>
|
|
<label className={styles.settingLabel}>Profil bearbeiten</label>
|
|
<p className={styles.settingDescription}>Aendern Sie Ihren Namen und Ihre E-Mail-Adresse.</p>
|
|
</div>
|
|
<div className={styles.settingControl}>
|
|
<button className={styles.button} onClick={async () => { await refetchUser(); setIsProfileModalOpen(true); }}>Profil oeffnen</button>
|
|
</div>
|
|
</div>
|
|
{currentUser && (
|
|
<div className={styles.userInfoCard}>
|
|
<div className={styles.userInfoRow}><span className={styles.userInfoLabel}>Benutzername</span><span className={styles.userInfoValue}>{currentUser.username}</span></div>
|
|
<div className={styles.userInfoRow}><span className={styles.userInfoLabel}>Name</span><span className={styles.userInfoValue}>{currentUser.fullName || '-'}</span></div>
|
|
<div className={styles.userInfoRow}><span className={styles.userInfoLabel}>E-Mail</span><span className={styles.userInfoValue}>{currentUser.email || '-'}</span></div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>Ueber</h2>
|
|
<div className={styles.infoCard}>
|
|
<div className={styles.infoRow}><span className={styles.infoLabel}>Version</span><span className={styles.infoValue}>2.0.0</span></div>
|
|
<div className={styles.infoRow}><span className={styles.infoLabel}>Build</span><span className={styles.infoValue}>2026.03.23</span></div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'appearance' && (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>Darstellung</h2>
|
|
<div className={styles.settingRow}>
|
|
<div className={styles.settingInfo}><label className={styles.settingLabel}>Theme</label><p className={styles.settingDescription}>Waehlen Sie zwischen hellem und dunklem Design.</p></div>
|
|
<div className={styles.settingControl}>
|
|
<div className={styles.themeToggle}>
|
|
<button className={`${styles.themeButton} ${theme === 'light' ? styles.active : ''}`} onClick={() => handleThemeChange('light')}>Hell</button>
|
|
<button className={`${styles.themeButton} ${theme === 'dark' ? styles.active : ''}`} onClick={() => handleThemeChange('dark')}>Dunkel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.settingRow}>
|
|
<div className={styles.settingInfo}><label className={styles.settingLabel}>Anzeigesprache</label><p className={styles.settingDescription}>Waehlen Sie die Sprache der Benutzeroberflaeche.{languageError && <span className={styles.errorText}> {languageError}</span>}</p></div>
|
|
<div className={styles.settingControl}>
|
|
<select className={styles.select} value={currentLanguage} onChange={(e) => handleLanguageChange(e.target.value as 'de' | 'en' | 'fr')} disabled={isSavingLanguage}>
|
|
<option value="de">Deutsch</option><option value="en">English</option><option value="fr">Français</option>
|
|
</select>
|
|
{isSavingLanguage && <span className={styles.savingIndicator}>Speichern...</span>}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{activeTab === 'voice' && <VoiceSettingsTab />}
|
|
|
|
{activeTab === 'privacy' && (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>Datenschutz</h2>
|
|
<div className={styles.settingRow}>
|
|
<div className={styles.settingInfo}><label className={styles.settingLabel}>GDPR / Privacy</label><p className={styles.settingDescription}>Datenexport, Portabilitaet und Kontoloeschung.</p></div>
|
|
<div className={styles.settingControl}><Link className={`${styles.button} ${styles.linkButton}`} to="/gdpr">GDPR oeffnen</Link></div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</main>
|
|
|
|
<ProfileEditModal isOpen={isProfileModalOpen} onClose={() => setIsProfileModalOpen(false)} userData={currentUser} onSave={handleProfileSave} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SettingsPage;
|