settings page update
This commit is contained in:
@@ -1,43 +1,80 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { updateUserProfile } from '../lib/api'
|
||||
import { deleteUser as deleteUserApi } from '../lib/api'
|
||||
import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto'
|
||||
import BottomNav from '../components/BottomNav'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user, userId, signOut, loading } = useAuth()
|
||||
const [passcodeEnabled, setPasscodeEnabled] = useState(false)
|
||||
const [faceIdEnabled, setFaceIdEnabled] = useState(false)
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>('light')
|
||||
const [saving, setSaving] = useState(false)
|
||||
// const [passcodeEnabled, setPasscodeEnabled] = useState(false) // Passcode lock — disabled for now
|
||||
// const [faceIdEnabled, setFaceIdEnabled] = useState(false) // Face ID — disabled for now
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>(() => {
|
||||
return (localStorage.getItem('gj-theme') as 'light' | 'dark') || 'light'
|
||||
})
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
|
||||
// Clear Data confirmation modal state
|
||||
const [showClearModal, setShowClearModal] = useState(false)
|
||||
const [confirmEmail, setConfirmEmail] = useState('')
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const displayName = user?.displayName || 'User'
|
||||
const photoURL = user?.photoURL || ''
|
||||
|
||||
const handleThemeChange = async (newTheme: 'light' | 'dark') => {
|
||||
if (!userId || !user) return
|
||||
// Apply theme to DOM
|
||||
const applyTheme = useCallback((t: 'light' | 'dark') => {
|
||||
document.documentElement.setAttribute('data-theme', t)
|
||||
localStorage.setItem('gj-theme', t)
|
||||
}, [])
|
||||
|
||||
setSaving(true)
|
||||
// Apply saved theme on mount
|
||||
useEffect(() => {
|
||||
applyTheme(theme)
|
||||
}, [theme, applyTheme])
|
||||
|
||||
const handleThemeChange = (newTheme: 'light' | 'dark') => {
|
||||
setTheme(newTheme)
|
||||
applyTheme(newTheme)
|
||||
setMessage({ type: 'success', text: `Switched to ${newTheme === 'light' ? 'Light' : 'Dark'} theme` })
|
||||
setTimeout(() => setMessage(null), 2000)
|
||||
}
|
||||
|
||||
const handleClearData = () => {
|
||||
setConfirmEmail('')
|
||||
setShowClearModal(true)
|
||||
}
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!user || !userId) return
|
||||
|
||||
const userEmail = user.email || ''
|
||||
if (confirmEmail.trim().toLowerCase() !== userEmail.toLowerCase()) {
|
||||
setMessage({ type: 'error', text: 'Email does not match. Please try again.' })
|
||||
return
|
||||
}
|
||||
|
||||
setDeleting(true)
|
||||
setMessage(null)
|
||||
|
||||
try {
|
||||
const token = await user.getIdToken()
|
||||
await updateUserProfile(userId, { theme: newTheme }, token)
|
||||
setTheme(newTheme)
|
||||
setMessage({ type: 'success', text: 'Theme updated successfully!' })
|
||||
setTimeout(() => setMessage(null), 2000)
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to update theme'
|
||||
setMessage({ type: 'error', text: errorMessage })
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearData = () => {
|
||||
if (window.confirm('Are you sure you want to clear all local data? This action cannot be undone.')) {
|
||||
// TODO: Implement clear local data
|
||||
console.log('Clearing local data...')
|
||||
// Delete user and all entries from backend
|
||||
await deleteUserApi(userId, token)
|
||||
|
||||
// Clear all local crypto data
|
||||
clearDeviceKey()
|
||||
await clearEncryptedSecretKey()
|
||||
localStorage.removeItem('gj-kdf-salt')
|
||||
localStorage.removeItem('gj-theme')
|
||||
|
||||
setShowClearModal(false)
|
||||
|
||||
// Sign out (clears auth state)
|
||||
await signOut()
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to delete account'
|
||||
setMessage({ type: 'error', text: errorMessage })
|
||||
setDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,17 +108,13 @@ export default function SettingsPage() {
|
||||
{/* Profile Section */}
|
||||
<div className="settings-profile">
|
||||
<div className="settings-avatar">
|
||||
{photoURL ? (
|
||||
<img src={photoURL} alt={displayName} className="settings-avatar-img" />
|
||||
) : (
|
||||
<div className="settings-avatar-placeholder">
|
||||
{displayName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem', background: 'linear-gradient(135deg, #86efac 0%, #22c55e 100%)' }}>
|
||||
🍀
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-profile-info">
|
||||
<h2 className="settings-profile-name">{displayName}</h2>
|
||||
<span className="settings-profile-badge">PRO MEMBER</span>
|
||||
{/* <span className="settings-profile-badge">PRO MEMBER</span> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,7 +122,8 @@ export default function SettingsPage() {
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">PRIVACY & SECURITY</h3>
|
||||
<div className="settings-card">
|
||||
<div className="settings-item">
|
||||
{/* Passcode Lock — disabled for now, toggle is non-functional */}
|
||||
<div className="settings-item" style={{ opacity: 0.5 }}>
|
||||
<div className="settings-item-icon settings-item-icon-green">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||
@@ -98,18 +132,21 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
<div className="settings-item-content">
|
||||
<h4 className="settings-item-title">Passcode Lock</h4>
|
||||
<p className="settings-item-subtitle">Secure your entries</p>
|
||||
<p className="settings-item-subtitle">Coming soon</p>
|
||||
</div>
|
||||
<label className="settings-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passcodeEnabled}
|
||||
onChange={(e) => setPasscodeEnabled(e.target.checked)}
|
||||
checked={false}
|
||||
disabled
|
||||
readOnly
|
||||
/>
|
||||
<span className="settings-toggle-slider"></span>
|
||||
<span className="settings-toggle-slider" style={{ cursor: 'not-allowed' }}></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Face ID — commented out for future use */}
|
||||
{/*
|
||||
<div className="settings-divider"></div>
|
||||
|
||||
<div className="settings-item">
|
||||
@@ -136,6 +173,7 @@ export default function SettingsPage() {
|
||||
<span className="settings-toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -143,6 +181,8 @@ export default function SettingsPage() {
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">DATA & LOOK</h3>
|
||||
<div className="settings-card">
|
||||
{/* Export Journal — commented out for future use */}
|
||||
{/*
|
||||
<button type="button" className="settings-item settings-item-button">
|
||||
<div className="settings-item-icon settings-item-icon-orange">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
@@ -161,6 +201,7 @@ export default function SettingsPage() {
|
||||
</button>
|
||||
|
||||
<div className="settings-divider"></div>
|
||||
*/}
|
||||
|
||||
<div className="settings-item">
|
||||
<div className="settings-item-icon settings-item-icon-blue">
|
||||
@@ -174,24 +215,20 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
<div className="settings-item-content">
|
||||
<h4 className="settings-item-title">Theme</h4>
|
||||
<p className="settings-item-subtitle">Currently: {theme === 'light' ? 'Warm Beige' : 'Dark'}</p>
|
||||
<p className="settings-item-subtitle">Currently: {theme === 'light' ? 'Light' : 'Dark'}</p>
|
||||
</div>
|
||||
<div className="settings-theme-colors">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleThemeChange('light')}
|
||||
className="settings-theme-dot settings-theme-dot-beige"
|
||||
style={{ opacity: theme === 'light' ? 1 : 0.5 }}
|
||||
className={`settings-theme-dot settings-theme-dot-beige${theme === 'light' ? ' settings-theme-dot-active' : ''}`}
|
||||
title="Light theme"
|
||||
disabled={saving}
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleThemeChange('dark')}
|
||||
className="settings-theme-dot settings-theme-dot-dark"
|
||||
style={{ opacity: theme === 'dark' ? 1 : 0.5 }}
|
||||
className={`settings-theme-dot settings-theme-dot-dark${theme === 'dark' ? ' settings-theme-dot-active' : ''}`}
|
||||
title="Dark theme"
|
||||
disabled={saving}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,8 +250,8 @@ export default function SettingsPage() {
|
||||
)}
|
||||
|
||||
{/* Clear Data */}
|
||||
<button type="button" className="settings-clear-btn" onClick={handleClearData} disabled>
|
||||
<span>Clear Local Data</span>
|
||||
<button type="button" className="settings-clear-btn" onClick={handleClearData}>
|
||||
<span>Clear All Data</span>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
@@ -230,6 +267,49 @@ export default function SettingsPage() {
|
||||
<p className="settings-version">VERSION 1.0.2</p>
|
||||
</main>
|
||||
|
||||
{/* Clear Data Confirmation Modal */}
|
||||
{showClearModal && (
|
||||
<div className="confirm-modal-overlay" onClick={() => !deleting && setShowClearModal(false)}>
|
||||
<div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="confirm-modal-icon">⚠️</div>
|
||||
<h3 className="confirm-modal-title">Delete All Data?</h3>
|
||||
<p className="confirm-modal-desc">
|
||||
This will permanently delete your account, all journal entries, and local encryption keys. This action <strong>cannot be undone</strong>.
|
||||
</p>
|
||||
<p className="confirm-modal-label">
|
||||
Type your email to confirm:
|
||||
</p>
|
||||
<input
|
||||
type="email"
|
||||
className="confirm-modal-input"
|
||||
placeholder={user?.email || 'your@email.com'}
|
||||
value={confirmEmail}
|
||||
onChange={(e) => setConfirmEmail(e.target.value)}
|
||||
disabled={deleting}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="confirm-modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="confirm-modal-cancel"
|
||||
onClick={() => setShowClearModal(false)}
|
||||
disabled={deleting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="confirm-modal-delete"
|
||||
onClick={handleConfirmDelete}
|
||||
disabled={deleting || !confirmEmail.trim()}
|
||||
>
|
||||
{deleting ? 'Deleting…' : 'Delete Everything'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user