FM / delete-account

/opt/canhelp/apps/web/src/app/delete-account/

/opt/canhelp/apps/web/src/app/delete-account

Name	Size	Mode	Actions
page.tsx	5387	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/app/delete-account/page.tsx (5387B)

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useLocale } from '@/context/locale'
import { useSession } from '@/lib/auth'
import { createSupportTicket } from '@/lib/api'

export default function DeleteAccountPage() {
  const { t } = useLocale()
  const { data: session } = useSession()

const [reason, setReason] = useState('')
  const [confirmed, setConfirmed] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [done, setDone] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!confirmed || submitting) return
    setSubmitting(true)
    setError(null)
    try {
      await createSupportTicket({
        type: 'delete_account',
        subject: 'Account deletion request',
        body: reason.trim() || 'No reason provided.',
      })
      setDone(true)
    } catch (err: any) {
      setError(err?.message ?? 'Error')
    } finally {
      setSubmitting(false)
    }
  }

return (
    <main className="py-12 px-4 sm:px-6">
      <div className="max-w-lg mx-auto bg-white rounded-2xl shadow-sm border border-gray-100 px-6 sm:px-10 py-10">
        <div className="mb-6">
          <Link href="/" className="text-sm text-green-600 hover:underline">
            ← {t('nav.home')}
          </Link>
        </div>

<h1 className="text-2xl font-extrabold text-gray-900 mb-2">{t('delete_account.title')}</h1>
        <p className="text-sm text-gray-500 mb-8">{t('delete_account.subtitle')}</p>

{done ? (
          <div className="rounded-xl bg-green-50 border border-green-200 p-6 text-center">
            <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h2 className="text-base font-semibold text-green-800 mb-1">{t('delete_account.success_title')}</h2>
            <p className="text-sm text-green-700">{t('delete_account.success_body')}</p>
          </div>
        ) : !session?.user ? (
          <div className="rounded-xl bg-amber-50 border border-amber-200 p-6 text-center">
            <p className="text-sm text-amber-800 mb-4">{t('delete_account.login_required')}</p>
            <Link
              href="/login"
              className="inline-flex items-center gap-2 px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-xl transition"
            >
              {t('delete_account.login_btn')}
            </Link>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Warning */}
            <div className="flex gap-3 rounded-xl bg-red-50 border border-red-200 p-4">
              <svg className="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
              </svg>
              <p className="text-sm text-red-700">{t('delete_account.warning')}</p>
            </div>

{/* Account info */}
            <div className="rounded-xl bg-gray-50 border border-gray-200 px-4 py-3 text-sm text-gray-700">
              <span className="font-medium">{session.user.email}</span>
            </div>

{/* Reason */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                {t('delete_account.reason_label')}
              </label>
              <textarea
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder={t('delete_account.reason_placeholder')}
                rows={4}
                maxLength={2000}
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 resize-none"
              />
            </div>

{/* Confirm checkbox */}
            <label className="flex items-start gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={confirmed}
                onChange={(e) => setConfirmed(e.target.checked)}
                className="mt-0.5 w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500 shrink-0"
              />
              <span className="text-sm text-gray-700">{t('delete_account.confirm_label')}</span>
            </label>

{error && (
              <p className="text-sm text-red-600">{error}</p>
            )}

<button
              type="submit"
              disabled={!confirmed || submitting}
              className="w-full py-3 rounded-xl bg-red-600 hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed text-white font-semibold text-sm transition"
            >
              {submitting ? t('delete_account.submitting') : t('delete_account.submit')}
            </button>
          </form>
        )}
      </div>
    </main>
  )
}

cmd: