This commit is contained in:
Tero Halla-aho
parent
c0ae6cc9a0
commit
3bf1b67256
1 changed files with 75 additions and 70 deletions
101
app/me/page.tsx
101
app/me/page.tsx
|
|
@ -157,35 +157,24 @@ export default function ProfilePage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="panel" style={{ maxWidth: 640, margin: '40px auto' }}>
|
||||
<h1>{t('myProfileTitle')}</h1>
|
||||
{message ? <p style={{ color: 'green' }}>{message}</p> : null}
|
||||
<main style={{ maxWidth: 1040, margin: '32px auto', display: 'grid', gap: 18 }}>
|
||||
<header className="panel" style={{ display: 'grid', gap: 12, padding: 18 }}>
|
||||
<div>
|
||||
<h1 style={{ margin: 0 }}>{t('myProfileTitle')}</h1>
|
||||
{message ? <p style={{ color: 'green', margin: '6px 0 0' }}>{message}</p> : null}
|
||||
</div>
|
||||
{user ? (
|
||||
<>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>{t('profileEmail')}:</strong> {user.email}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profileName')}:</strong> {user.name ?? '—'}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profilePhone')}:</strong> {user.phone ?? '—'}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profileRole')}:</strong> {user.role}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profileStatus')}:</strong> {user.status}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profileEmailVerified')}:</strong> {user.emailVerifiedAt ? t('yes') : t('no')}
|
||||
</li>
|
||||
<li>
|
||||
<strong>{t('profileApproved')}:</strong> {user.approvedAt ? t('yes') : t('no')}
|
||||
</li>
|
||||
</ul>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'grid', gap: 6, gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
|
||||
<div><strong>{t('profileEmail')}:</strong> {user.email}</div>
|
||||
<div><strong>{t('profileName')}:</strong> {user.name ?? '—'}</div>
|
||||
<div><strong>{t('profilePhone')}:</strong> {user.phone ?? '—'}</div>
|
||||
<div><strong>{t('profileRole')}:</strong> {user.role}</div>
|
||||
<div><strong>{t('profileStatus')}:</strong> {user.status}</div>
|
||||
<div><strong>{t('profileEmailVerified')}:</strong> {user.emailVerifiedAt ? t('yes') : t('no')}</div>
|
||||
<div><strong>{t('profileApproved')}:</strong> {user.approvedAt ? t('yes') : t('no')}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<a className="button secondary" href="/listings/mine">
|
||||
{t('navMyListings')}
|
||||
</a>
|
||||
|
|
@ -193,7 +182,18 @@ export default function ProfilePage() {
|
|||
{t('navNewListing')}
|
||||
</a>
|
||||
</div>
|
||||
<form onSubmit={onSave} style={{ marginTop: 20, display: 'grid', gap: 10, maxWidth: 420 }}>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: 'red', margin: 0 }}>{error ?? t('notLoggedIn')}</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{user ? (
|
||||
<>
|
||||
<section className="panel" style={{ padding: 18, display: 'grid', gap: 12 }}>
|
||||
<h2 style={{ margin: 0 }}>{t('myProfileTitle')}</h2>
|
||||
<form onSubmit={onSave} style={{ display: 'grid', gap: 12 }}>
|
||||
<div style={{ display: 'grid', gap: 10, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', maxWidth: 760 }}>
|
||||
<label>
|
||||
{t('profileName')}
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} />
|
||||
|
|
@ -206,18 +206,25 @@ export default function ProfilePage() {
|
|||
{t('passwordLabel')} ({t('passwordHint')})
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} />
|
||||
</label>
|
||||
<p style={{ fontSize: 12, color: '#666' }}>{t('emailLocked')}</p>
|
||||
<button className="button" type="submit" disabled={saving}>
|
||||
</div>
|
||||
<p style={{ fontSize: 12, color: '#666', margin: 0 }}>{t('emailLocked')}</p>
|
||||
<div>
|
||||
<button className="button" type="submit" disabled={saving} style={{ minWidth: 160 }}>
|
||||
{saving ? t('saving') : t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<section style={{ marginTop: 30 }}>
|
||||
<h2 style={{ marginBottom: 6 }}>{t('billingSettingsTitle')}</h2>
|
||||
<p style={{ color: '#444', marginBottom: 12 }}>{t('billingSettingsLead')}</p>
|
||||
{billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
|
||||
{billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
|
||||
<form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
|
||||
<label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
|
||||
</section>
|
||||
|
||||
<section className="panel" style={{ padding: 18, display: 'grid', gap: 12 }}>
|
||||
<div>
|
||||
<h2 style={{ margin: 0 }}>{t('billingSettingsTitle')}</h2>
|
||||
<p style={{ color: '#444', margin: '6px 0 0' }}>{t('billingSettingsLead')}</p>
|
||||
</div>
|
||||
{billingMessage ? <p style={{ color: 'green', margin: 0 }}>{billingMessage}</p> : null}
|
||||
{billingError ? <p style={{ color: 'red', margin: 0 }}>{billingError}</p> : null}
|
||||
<form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
|
||||
<label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
|
||||
<div className="amenity-option-meta" style={{ fontWeight: 600 }}>
|
||||
<span className="amenity-name">{t('billingEnableLabel')}</span>
|
||||
</div>
|
||||
|
|
@ -230,7 +237,7 @@ export default function ProfilePage() {
|
|||
</label>
|
||||
{billingEnabled ? (
|
||||
<>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
<div style={{ display: 'grid', gap: 10, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', maxWidth: 760 }}>
|
||||
<label>
|
||||
{t('billingAccountNameLabel')}
|
||||
<input value={billingAccountName} onChange={(e) => setBillingAccountName(e.target.value)} placeholder="Example Oy" />
|
||||
|
|
@ -239,7 +246,7 @@ export default function ProfilePage() {
|
|||
{t('billingIbanLabel')}
|
||||
<input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
|
||||
</label>
|
||||
<label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
|
||||
<label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
|
||||
<div className="amenity-option-meta" style={{ fontWeight: 600 }}>
|
||||
<span className="amenity-name">{t('billingIncludeVat')}</span>
|
||||
</div>
|
||||
|
|
@ -251,7 +258,7 @@ export default function ProfilePage() {
|
|||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ border: '1px solid #eee', padding: 12, borderRadius: 6 }}>
|
||||
<div style={{ border: '1px solid rgba(148,163,184,0.3)', padding: 12, borderRadius: 8, background: 'rgba(255,255,255,0.02)' }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>{t('billingListingsTitle')}</strong>
|
||||
<div style={{ color: '#555', fontSize: 13 }}>{t('billingListingsLead')}</div>
|
||||
|
|
@ -270,11 +277,11 @@ export default function ProfilePage() {
|
|||
? 'yes'
|
||||
: 'no';
|
||||
return (
|
||||
<div key={listing.id} style={{ border: '1px solid #f0f0f0', padding: 10, borderRadius: 4 }}>
|
||||
<div style={{ fontWeight: 600, marginBottom: 6 }}>
|
||||
<div key={listing.id} style={{ border: '1px solid #f0f0f0', padding: 10, borderRadius: 6, display: 'grid', gap: 8 }}>
|
||||
<div style={{ fontWeight: 600 }}>
|
||||
{listing.title} ({listing.slug})
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
<div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
|
||||
<label>
|
||||
{t('billingAccountNameLabel')}
|
||||
<input
|
||||
|
|
@ -331,19 +338,17 @@ export default function ProfilePage() {
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: '#666' }}>{t('billingDisabledHint')}</p>
|
||||
<p style={{ color: '#666', margin: 0 }}>{t('billingDisabledHint')}</p>
|
||||
)}
|
||||
<div>
|
||||
<button className="button" type="submit" disabled={billingSaving}>
|
||||
<button className="button" type="submit" disabled={billingSaving} style={{ minWidth: 160 }}>
|
||||
{billingSaving ? t('saving') : t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: 'red' }}>{error ?? t('notLoggedIn')}</p>
|
||||
)}
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue