feature: add personal & company register upload id page
This commit is contained in:
DeathKaioken
parent
66ea6ad002
commit
b14c72cb8d
@ -0,0 +1,270 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef } from 'react'
|
||||
import PageLayout from '../../../components/PageLayout'
|
||||
import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
const DOC_TYPES = ['Handelsregisterauszug', 'Gewerbeanmeldung', 'Steuerbescheid', 'Sonstiges']
|
||||
|
||||
export default function CompanyIdUploadPage() {
|
||||
const [docNumber, setDocNumber] = useState('')
|
||||
const [docType, setDocType] = useState('')
|
||||
const [issueDate, setIssueDate] = useState('')
|
||||
const [frontFile, setFrontFile] = useState<File | null>(null)
|
||||
const [extraFile, setExtraFile] = useState<File | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
const frontRef = useRef<HTMLInputElement | null>(null)
|
||||
const extraRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
const handleFile = (file: File, which: 'front' | 'extra') => {
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
setError('Datei größer als 10 MB.')
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
which === 'front' ? setFrontFile(file) : setExtraFile(file)
|
||||
}
|
||||
|
||||
const dropHandlers = {
|
||||
onDragOver: (e: React.DragEvent) => e.preventDefault(),
|
||||
onDragEnter: (e: React.DragEvent) => e.preventDefault()
|
||||
}
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
|
||||
setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
setSubmitting(true)
|
||||
try {
|
||||
// TODO: API upload
|
||||
await new Promise(r => setTimeout(r, 1200))
|
||||
setSuccess(true)
|
||||
} catch {
|
||||
setError('Upload fehlgeschlagen.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 w-full px-5 lg:px-10 py-10">
|
||||
{/* Background (same as personal) */}
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
|
||||
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
|
||||
<defs>
|
||||
<pattern id="company-id-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#company-id-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||
</svg>
|
||||
<div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
|
||||
<div
|
||||
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
||||
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="relative max-w-7xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10 overflow-hidden"
|
||||
>
|
||||
<div className="px-6 py-8 sm:px-12 lg:px-16">
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">
|
||||
Company Document Verification
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 mb-8">
|
||||
Upload a valid company registration or compliance document
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Document Number *
|
||||
</label>
|
||||
<input
|
||||
value={docNumber}
|
||||
onChange={e => setDocNumber(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Enter reference number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Document Type *
|
||||
</label>
|
||||
<select
|
||||
value={docType}
|
||||
onChange={e => setDocType(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
required
|
||||
>
|
||||
<option value="">Select type</option>
|
||||
{DOC_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Issue Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={issueDate}
|
||||
onChange={e => setIssueDate(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block"></div>
|
||||
</div>
|
||||
|
||||
{/* Upload Areas */}
|
||||
<div className={`mt-8 grid gap-6 ${extraFile ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
|
||||
<div
|
||||
{...dropHandlers}
|
||||
onDrop={e => {
|
||||
e.preventDefault()
|
||||
const f = e.dataTransfer.files?.[0]
|
||||
if (f) handleFile(f, 'front')
|
||||
}}
|
||||
onClick={() => frontRef.current?.click()}
|
||||
className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
||||
>
|
||||
<input
|
||||
ref={frontRef}
|
||||
type="file"
|
||||
accept="image/*,application/pdf"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
if (f) handleFile(f, 'front')
|
||||
}}
|
||||
/>
|
||||
{frontFile ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
||||
<p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); setFrontFile(null) }}
|
||||
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" /> Remove
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Upload primary document *
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
PNG, JPG, PDF up to 10MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
{...dropHandlers}
|
||||
onDrop={e => {
|
||||
e.preventDefault()
|
||||
const f = e.dataTransfer.files?.[0]
|
||||
if (f) handleFile(f, 'extra')
|
||||
}}
|
||||
onClick={() => extraRef.current?.click()}
|
||||
className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
||||
>
|
||||
<input
|
||||
ref={extraRef}
|
||||
type="file"
|
||||
accept="image/*,application/pdf"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
if (f) handleFile(f, 'extra')
|
||||
}}
|
||||
/>
|
||||
{extraFile ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
||||
<p className="text-sm font-medium text-gray-800">{extraFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); setExtraFile(null) }}
|
||||
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" /> Remove
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Optional supporting file
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
(Invoice, license, certificate…)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{extraFile && <div className="hidden lg:flex flex-col justify-center rounded-lg border-2 border-dashed border-transparent px-4 py-10 text-center text-xs text-gray-400">
|
||||
<span className="font-medium text-gray-500">Extra space for clarity</span>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="mt-8 rounded-lg bg-indigo-50/60 border border-indigo-100 px-5 py-5">
|
||||
<p className="text-sm font-semibold text-indigo-900 mb-3">
|
||||
Guidelines:
|
||||
</p>
|
||||
<ul className="text-sm text-indigo-800 space-y-1 list-disc pl-5">
|
||||
<li>Document must be valid & readable</li>
|
||||
<li>Complete page (no cropping)</li>
|
||||
<li>Good lighting (no glare)</li>
|
||||
<li>PDF or clear image</li>
|
||||
<li>Supplementary evidence speeds review</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||
Dokumente erfolgreich hochgeladen.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{submitting ? 'Uploading…' : success ? 'Saved' : 'Upload & Continue'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,325 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import PageLayout from '../../../components/PageLayout'
|
||||
import {
|
||||
DocumentArrowUpIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
|
||||
const ID_TYPES = ['Personalausweis', 'Reisepass', 'Führerschein', 'Aufenthaltstitel']
|
||||
|
||||
export default function PersonalIdUploadPage() {
|
||||
const [idNumber, setIdNumber] = useState('')
|
||||
const [idType, setIdType] = useState('')
|
||||
const [expiry, setExpiry] = useState('')
|
||||
const [hasBack, setHasBack] = useState(true)
|
||||
const [frontFile, setFrontFile] = useState<File | null>(null)
|
||||
const [backFile, setBackFile] = useState<File | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
const frontInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const backInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
const handleFile = (f: File, side: 'front' | 'back') => {
|
||||
if (f.size > 10 * 1024 * 1024) {
|
||||
setError('Datei größer als 10 MB.')
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
side === 'front' ? setFrontFile(f) : setBackFile(f)
|
||||
}
|
||||
|
||||
const onDrop = (e: React.DragEvent, side: 'front' | 'back') => {
|
||||
e.preventDefault()
|
||||
const f = e.dataTransfer.files?.[0]
|
||||
if (f) handleFile(f, side)
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
if (!idNumber.trim() || !idType || !expiry) {
|
||||
setError('Bitte alle Pflichtfelder ausfüllen.')
|
||||
return false
|
||||
}
|
||||
if (!frontFile) {
|
||||
setError('Vorderseite hochladen.')
|
||||
return false
|
||||
}
|
||||
if (hasBack && !backFile) {
|
||||
setError('Rückseite hochladen oder Schalter deaktivieren.')
|
||||
return false
|
||||
}
|
||||
setError('')
|
||||
return true
|
||||
}
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!validate()) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
// TODO: Upload logic (multipart/form-data)
|
||||
await new Promise(r => setTimeout(r, 1200))
|
||||
setSuccess(true)
|
||||
} catch {
|
||||
setError('Upload fehlgeschlagen. Bitte erneut versuchen.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const clearFile = (side: 'front' | 'back') => {
|
||||
side === 'front' ? setFrontFile(null) : setBackFile(null)
|
||||
}
|
||||
|
||||
const dropEvents = {
|
||||
onDragOver: (e: React.DragEvent) => e.preventDefault(),
|
||||
onDragEnter: (e: React.DragEvent) => e.preventDefault()
|
||||
}
|
||||
|
||||
const openPicker = useCallback((side: 'front' | 'back') => {
|
||||
(side === 'front' ? frontInputRef.current : backInputRef.current)?.click()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 w-full px-5 lg:px-10 py-10">
|
||||
{/* Background */}
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
|
||||
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
|
||||
<defs>
|
||||
<pattern id="personal-id-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#personal-id-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||
</svg>
|
||||
<div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
|
||||
<div
|
||||
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
||||
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="relative max-w-7xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10 overflow-hidden"
|
||||
>
|
||||
<div className="px-6 py-8 sm:px-12 lg:px-16">
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">
|
||||
Personal Identity Verification
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 mb-8">
|
||||
Please upload clear photos of both sides of your government‑issued ID
|
||||
</p>
|
||||
|
||||
{/* Grid Fields */}
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ID Number *
|
||||
</label>
|
||||
<input
|
||||
value={idNumber}
|
||||
onChange={e => setIdNumber(e.target.value)}
|
||||
placeholder="Enter your ID number"
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Enter the number exactly as shown on your ID
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ID Type *
|
||||
</label>
|
||||
<select
|
||||
value={idType}
|
||||
onChange={e => setIdType(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
required
|
||||
>
|
||||
<option value="">Select ID type</option>
|
||||
{ID_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Expiry Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={expiry}
|
||||
onChange={e => setExpiry(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden lg:block"></div>
|
||||
</div>
|
||||
|
||||
{/* Back side toggle */}
|
||||
<div className="mt-8 flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Does ID have a Backside?
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setHasBack(v => !v)}
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
|
||||
hasBack ? 'bg-indigo-600' : 'bg-gray-300'
|
||||
}`}
|
||||
aria-pressed={hasBack}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ${
|
||||
hasBack ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-sm text-gray-700">{hasBack ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
|
||||
{/* Upload Areas */}
|
||||
<div className={`mt-8 grid gap-6 ${hasBack ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
|
||||
{/* Front */}
|
||||
<div
|
||||
{...dropEvents}
|
||||
onDrop={e => onDrop(e, 'front')}
|
||||
onClick={() => openPicker('front')}
|
||||
className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
||||
>
|
||||
<input
|
||||
ref={frontInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
if (f) handleFile(f, 'front')
|
||||
}}
|
||||
/>
|
||||
{frontFile ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
||||
<p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); clearFile('front') }}
|
||||
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" /> Remove
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Click to upload front side
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
or drag and drop
|
||||
<br />
|
||||
PNG, JPG, JPEG up to 10MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Back */}
|
||||
{hasBack && (
|
||||
<div
|
||||
{...dropEvents}
|
||||
onDrop={e => onDrop(e, 'back')}
|
||||
onClick={() => openPicker('back')}
|
||||
className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
||||
>
|
||||
<input
|
||||
ref={backInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
if (f) handleFile(f, 'back')
|
||||
}}
|
||||
/>
|
||||
{backFile ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
||||
<p className="text-sm font-medium text-gray-800">{backFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); clearFile('back') }}
|
||||
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" /> Remove
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Click to upload back side
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
or drag and drop
|
||||
<br />
|
||||
PNG, JPG, JPEG up to 10MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasBack && <div className="hidden lg:flex flex-col justify-center rounded-lg border-2 border-dashed border-transparent px-4 py-10 text-center text-xs text-gray-400">
|
||||
<span className="font-medium text-gray-500">Extra space for clarity</span>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="mt-8 rounded-lg bg-indigo-50/60 border border-indigo-100 px-5 py-5">
|
||||
<p className="text-sm font-semibold text-indigo-900 mb-3">
|
||||
Please ensure your ID documents:
|
||||
</p>
|
||||
<ul className="text-sm text-indigo-800 space-y-1 list-disc pl-5">
|
||||
<li>Are clearly visible and readable</li>
|
||||
<li>Show all four corners</li>
|
||||
<li>Are not expired</li>
|
||||
<li>Have good lighting (no shadows or glare)</li>
|
||||
<li>{hasBack ? 'Both front and back sides are uploaded' : 'Front side is uploaded'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||
Upload erfolgreich gespeichert.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{submitting ? 'Uploading…' : success ? 'Saved' : 'Upload & Continue'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user