nate/prayer-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add email verification status and resend button in About page

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 09:37:08 -05:00
1 parent 74ee458ba9
commit 7c47901563
3 files changed
+52 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/AboutPage.tsx
+49 -1
View File
@@ -8,7 +8,7 @@ interface AboutPageProps {
}
export default function AboutPage({ userEmail }: AboutPageProps) {
const { logout, deleteAccount } = useAuth();
const { logout, deleteAccount, sendVerificationEmail, user } = useAuth();
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [deleteStep, setDeleteStep] = useState(0); // 0=initial, 1=first confirm, 2=second confirm, 3=type DELETE, 4=type email
@@ -16,6 +16,8 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
const [deleteEmail, setDeleteEmail] = useState('');
const [deleteLoading, setDeleteLoading] = useState(false);
const [deleteError, setDeleteError] = useState('');
const [verificationMessage, setVerificationMessage] = useState('');
const [sendingVerification, setSendingVerification] = useState(false);
return (
<div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
@@ -57,6 +59,52 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
<p className="text-sm font-medium text-slate-400">Email</p>
<p className="text-white">{userEmail || 'Not set'}</p>
</div>
<div>
<p className="text-sm font-medium text-slate-400 mb-2">Verification Status</p>
{user?.emailVerified ? (
<div className="flex items-center gap-2 text-green-400">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="text-sm">Verified</span>
</div>
) : (
<div className="space-y-2">
<div className="flex items-center gap-2 text-yellow-400">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
<span className="text-sm">Not verified</span>
</div>
{verificationMessage && (
<div className={`px-3 py-2 rounded-lg text-sm ${
verificationMessage.includes('sent')
? 'bg-green-900 border border-green-700 text-green-200'
: 'bg-red-900 border border-red-700 text-red-200'
}`}>
{verificationMessage}
</div>
)}
<button
onClick={async () => {
setSendingVerification(true);
setVerificationMessage('');
try {
await sendVerificationEmail();
setVerificationMessage('✓ Verification email sent! Check your inbox.');
} catch (err: unknown) {
setVerificationMessage(err instanceof Error ? err.message : 'Failed to send email');
}
setSendingVerification(false);
}}
disabled={sendingVerification}
className="w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
>
{sendingVerification ? 'Sending...' : 'Resend Verification Email'}
</button>
</div>
)}
</div>
</div>
</div>