beautify: fix personal and company upload id
This commit is contained in:
DeathKaioken
parent
86c7be381b
commit
6cd2a991d4
@ -0,0 +1,150 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import useAuthStore from '../../../../store/authStore'
|
||||
import { useUserStatus } from '../../../../hooks/useUserStatus'
|
||||
|
||||
export function useCompanyUploadId() {
|
||||
// Auth + status
|
||||
const { accessToken } = useAuthStore()
|
||||
const { refreshStatus } = useUserStatus()
|
||||
|
||||
// Form state
|
||||
const [docNumber, setDocNumber] = useState('')
|
||||
const [docType, setDocType] = useState('')
|
||||
const [issueDate, setIssueDate] = useState('')
|
||||
const [hasBack, setHasBack] = useState(true)
|
||||
|
||||
// Files + previews
|
||||
const [frontFile, setFrontFile] = useState<File | null>(null)
|
||||
const [extraFile, setExtraFile] = useState<File | null>(null)
|
||||
const [frontPreview, setFrontPreview] = useState<string | null>(null)
|
||||
const [extraPreview, setExtraPreview] = useState<string | null>(null)
|
||||
|
||||
// UI state
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
// Refs
|
||||
const frontRef = useRef<HTMLInputElement | null>(null)
|
||||
const extraRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
// Unified input style
|
||||
const inputBase =
|
||||
'w-full h-11 rounded-lg border border-gray-300 px-4 text-sm text-gray-900 placeholder:text-gray-900 placeholder:opacity-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white'
|
||||
|
||||
// File handlers
|
||||
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 onDrop = (e: React.DragEvent, which: 'front' | 'extra') => {
|
||||
e.preventDefault()
|
||||
const f = e.dataTransfer.files?.[0]
|
||||
if (f) handleFile(f, which)
|
||||
}
|
||||
|
||||
const clearFile = (which: 'front' | 'extra') => {
|
||||
which === 'front' ? setFrontFile(null) : setExtraFile(null)
|
||||
}
|
||||
|
||||
const dropHandlers = {
|
||||
onDragOver: (e: React.DragEvent) => e.preventDefault(),
|
||||
onDragEnter: (e: React.DragEvent) => e.preventDefault(),
|
||||
}
|
||||
|
||||
const openPicker = useCallback((which: 'front' | 'extra') => {
|
||||
(which === 'front' ? frontRef.current : extraRef.current)?.click()
|
||||
}, [])
|
||||
|
||||
// Previews (images only)
|
||||
useEffect(() => {
|
||||
if (!frontFile || !frontFile.type?.startsWith('image/')) { setFrontPreview(null); return }
|
||||
const url = URL.createObjectURL(frontFile)
|
||||
setFrontPreview(url)
|
||||
return () => URL.revokeObjectURL(url)
|
||||
}, [frontFile])
|
||||
|
||||
useEffect(() => {
|
||||
if (!extraFile || !extraFile.type?.startsWith('image/')) { setExtraPreview(null); return }
|
||||
const url = URL.createObjectURL(extraFile)
|
||||
setExtraPreview(url)
|
||||
return () => URL.revokeObjectURL(url)
|
||||
}, [extraFile])
|
||||
|
||||
// Validation
|
||||
const validate = () => {
|
||||
if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
|
||||
setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
|
||||
return false
|
||||
}
|
||||
setError('')
|
||||
return true
|
||||
}
|
||||
|
||||
// Submit
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!validate()) return
|
||||
if (!accessToken) {
|
||||
setError('Not authenticated. Please log in again.')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
if (frontFile) formData.append('frontFile', frontFile)
|
||||
if (hasBack && extraFile) formData.append('backFile', extraFile)
|
||||
formData.append('docType', docType)
|
||||
formData.append('docNumber', docNumber.trim())
|
||||
formData.append('issueDate', issueDate)
|
||||
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/company-id`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${accessToken}` },
|
||||
body: formData,
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ message: 'Upload failed' }))
|
||||
throw new Error(errorData.message || 'Upload failed')
|
||||
}
|
||||
|
||||
setSuccess(true)
|
||||
await refreshStatus()
|
||||
|
||||
setTimeout(() => {
|
||||
// keep same redirect as page used before
|
||||
window.location.href = '/quickaction-dashboard/register-additional-information'
|
||||
}, 1500)
|
||||
} catch (err: any) {
|
||||
console.error('Company ID upload error:', err)
|
||||
setError(err?.message || 'Upload fehlgeschlagen.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// values
|
||||
docNumber, docType, issueDate, hasBack,
|
||||
frontFile, extraFile,
|
||||
frontPreview, extraPreview,
|
||||
submitting, error, success,
|
||||
frontRef, extraRef,
|
||||
inputBase,
|
||||
// setters
|
||||
setDocNumber, setDocType, setIssueDate, setHasBack, setExtraFile,
|
||||
// handlers
|
||||
handleFile, onDrop, clearFile, dropHandlers, openPicker, submit,
|
||||
}
|
||||
}
|
||||
@ -1,99 +1,57 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import PageLayout from '../../../components/PageLayout'
|
||||
import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import useAuthStore from '../../../store/authStore'
|
||||
import { useUserStatus } from '../../../hooks/useUserStatus'
|
||||
import { useCompanyUploadId } from './hooks/useCompanyUploadId'
|
||||
import useAuthStore from '../../../store/authStore' // NEW
|
||||
import { useEffect, useState } from 'react' // NEW
|
||||
import { useRouter } from 'next/navigation' // NEW
|
||||
|
||||
const DOC_TYPES = ['Handelsregisterauszug', 'Gewerbeanmeldung', 'Steuerbescheid', 'Sonstiges']
|
||||
|
||||
export default function CompanyIdUploadPage() {
|
||||
const router = useRouter()
|
||||
const { accessToken } = useAuthStore()
|
||||
const { refreshStatus } = useUserStatus()
|
||||
const {
|
||||
// values
|
||||
docNumber, setDocNumber,
|
||||
docType, setDocType,
|
||||
issueDate, setIssueDate,
|
||||
hasBack, setHasBack, setExtraFile,
|
||||
frontFile, extraFile,
|
||||
frontPreview, extraPreview,
|
||||
submitting, error, success,
|
||||
frontRef, extraRef,
|
||||
inputBase,
|
||||
// handlers
|
||||
handleFile, onDrop, clearFile, dropHandlers, openPicker, submit,
|
||||
} = useCompanyUploadId()
|
||||
|
||||
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 user = useAuthStore(s => s.user) // NEW
|
||||
const router = useRouter() // NEW
|
||||
const [blocked, setBlocked] = useState(false) // NEW
|
||||
|
||||
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
|
||||
// Guard: only 'company' users allowed on this page
|
||||
useEffect(() => {
|
||||
const ut = (user as any)?.userType || (user as any)?.role
|
||||
console.log('🧭 UploadID Guard [company]: userType =', ut)
|
||||
if (ut && ut !== 'company') {
|
||||
console.warn('🚫 UploadID Guard [company]: access denied for userType:', ut, '-> redirecting to personal upload')
|
||||
setBlocked(true)
|
||||
router.replace('/quickaction-dashboard/register-upload-id/personal')
|
||||
} else if (ut === 'company') {
|
||||
console.log('✅ UploadID Guard [company]: access granted')
|
||||
}
|
||||
setError('')
|
||||
which === 'front' ? setFrontFile(file) : setExtraFile(file)
|
||||
}
|
||||
}, [user, router])
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
if (!accessToken) {
|
||||
setError('Not authenticated. Please log in again.')
|
||||
return
|
||||
}
|
||||
|
||||
setError('')
|
||||
setSubmitting(true)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('frontFile', frontFile)
|
||||
if (extraFile) {
|
||||
formData.append('backFile', extraFile)
|
||||
}
|
||||
formData.append('docType', docType)
|
||||
formData.append('docNumber', docNumber.trim())
|
||||
formData.append('issueDate', issueDate)
|
||||
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/company-id`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ message: 'Upload failed' }))
|
||||
throw new Error(errorData.message || 'Upload failed')
|
||||
}
|
||||
|
||||
setSuccess(true)
|
||||
|
||||
// Refresh user status to update verification state
|
||||
await refreshStatus()
|
||||
|
||||
// Redirect to next step after short delay
|
||||
setTimeout(() => {
|
||||
router.push('/quickaction-dashboard/register-additional-information')
|
||||
}, 1500)
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Company ID upload error:', error)
|
||||
setError(error.message || 'Upload fehlgeschlagen.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
if (blocked) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="min-h-[50vh] flex items-center justify-center">
|
||||
<div className="text-center text-sm text-gray-600">
|
||||
Redirecting to the correct upload page…
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -118,10 +76,7 @@ export default function CompanyIdUploadPage() {
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
@ -130,15 +85,16 @@ export default function CompanyIdUploadPage() {
|
||||
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">
|
||||
{/* Fields: 3 in one row on md+ with unified inputs */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div>
|
||||
<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"
|
||||
className={`${inputBase} ${docNumber ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
placeholder="Enter reference number"
|
||||
required
|
||||
/>
|
||||
@ -151,7 +107,7 @@ export default function CompanyIdUploadPage() {
|
||||
<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"
|
||||
className={`${inputBase} ${docType ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
required
|
||||
>
|
||||
<option value="">Select type</option>
|
||||
@ -167,43 +123,58 @@ export default function CompanyIdUploadPage() {
|
||||
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"
|
||||
className={`${inputBase} ${issueDate ? 'text-gray-900' : 'text-gray-700'} appearance-none [&::-webkit-calendar-picker-indicator]:opacity-80`}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block"></div>
|
||||
{/* Back side toggle */}
|
||||
<div className="mt-8 flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Does document have a Backside?
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setHasBack(v => { const next = !v; if (!next) setExtraFile(null); return next })}
|
||||
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 ${extraFile ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
|
||||
<div className={`mt-8 grid gap-6 items-stretch ${hasBack ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
|
||||
{/* Primary document */}
|
||||
<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"
|
||||
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-6 sm: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')
|
||||
}}
|
||||
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>
|
||||
<div className="flex w-full max-w-full flex-col items-center">
|
||||
{/* Preview only for images */}
|
||||
{frontPreview && (
|
||||
<img
|
||||
src={frontPreview}
|
||||
alt="Primary document preview"
|
||||
className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
|
||||
/>
|
||||
)}
|
||||
<p className="mt-3 text-sm font-medium text-gray-800 break-all">{frontFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); setFrontFile(null) }}
|
||||
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
|
||||
@ -222,54 +193,53 @@ export default function CompanyIdUploadPage() {
|
||||
)}
|
||||
</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>}
|
||||
{/* Back/supporting document */}
|
||||
{hasBack && (
|
||||
<div
|
||||
{...dropHandlers}
|
||||
onDrop={e => onDrop(e, 'extra')}
|
||||
onClick={() => openPicker('extra')}
|
||||
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-6 sm: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 w-full max-w-full flex-col items-center">
|
||||
{/* Preview only for images */}
|
||||
{extraPreview && (
|
||||
<img
|
||||
src={extraPreview}
|
||||
alt="Supporting document preview"
|
||||
className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
|
||||
/>
|
||||
)}
|
||||
<p className="mt-3 text-sm font-medium text-gray-800 break-all">{extraFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); clearFile('extra') }}
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
|
||||
@ -0,0 +1,157 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react'
|
||||
import useAuthStore from '../../../../store/authStore'
|
||||
import { useUserStatus } from '../../../../hooks/useUserStatus'
|
||||
|
||||
export function usePersonalUploadId() {
|
||||
// Auth and status
|
||||
const token = useAuthStore(s => s.accessToken)
|
||||
const { refreshStatus } = useUserStatus()
|
||||
|
||||
// Form state
|
||||
const [idNumber, setIdNumber] = useState('')
|
||||
const [idType, setIdType] = useState('')
|
||||
const [expiry, setExpiry] = useState('')
|
||||
const [hasBack, setHasBack] = useState(true)
|
||||
|
||||
// Files + previews
|
||||
const [frontFile, setFrontFile] = useState<File | null>(null)
|
||||
const [backFile, setBackFile] = useState<File | null>(null)
|
||||
const [frontPreview, setFrontPreview] = useState<string | null>(null)
|
||||
const [backPreview, setBackPreview] = useState<string | null>(null)
|
||||
|
||||
// UI state
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
// Refs
|
||||
const frontInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const backInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
// Shared input style
|
||||
const inputBase =
|
||||
'w-full h-11 rounded-lg border border-gray-300 px-4 text-sm text-gray-900 placeholder:text-gray-900 placeholder:opacity-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white'
|
||||
|
||||
// File handlers
|
||||
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 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()
|
||||
}, [])
|
||||
|
||||
// Previews
|
||||
useEffect(() => {
|
||||
if (!frontFile) { setFrontPreview(null); return }
|
||||
const url = URL.createObjectURL(frontFile)
|
||||
setFrontPreview(url)
|
||||
return () => URL.revokeObjectURL(url)
|
||||
}, [frontFile])
|
||||
|
||||
useEffect(() => {
|
||||
if (!backFile) { setBackPreview(null); return }
|
||||
const url = URL.createObjectURL(backFile)
|
||||
setBackPreview(url)
|
||||
return () => URL.revokeObjectURL(url)
|
||||
}, [backFile])
|
||||
|
||||
// Validation
|
||||
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
|
||||
}
|
||||
|
||||
// Submit
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!validate()) return
|
||||
if (!token) {
|
||||
setError('Nicht authentifiziert. Bitte erneut einloggen.')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
if (frontFile) formData.append('front', frontFile)
|
||||
if (hasBack && backFile) formData.append('back', backFile)
|
||||
formData.append('idType', idType)
|
||||
formData.append('idNumber', idNumber)
|
||||
formData.append('expiryDate', expiry)
|
||||
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/personal-id`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
body: formData
|
||||
})
|
||||
|
||||
const data = await response.json().catch(() => ({}))
|
||||
|
||||
if (response.ok && data.success) {
|
||||
setSuccess(true)
|
||||
await refreshStatus()
|
||||
setTimeout(() => {
|
||||
window.location.href = '/quickaction-dashboard'
|
||||
}, 2000)
|
||||
} else {
|
||||
setError(data.message || 'Upload fehlgeschlagen. Bitte erneut versuchen.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err)
|
||||
setError('Netzwerkfehler. Bitte erneut versuchen.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// values
|
||||
idNumber, idType, expiry, hasBack,
|
||||
frontFile, backFile,
|
||||
frontPreview, backPreview,
|
||||
submitting, error, success,
|
||||
frontInputRef, backInputRef,
|
||||
inputBase,
|
||||
// setters
|
||||
setIdNumber, setIdType, setExpiry, setHasBack,
|
||||
// handlers
|
||||
handleFile, onDrop, clearFile, dropEvents, openPicker, submit,
|
||||
}
|
||||
}
|
||||
@ -1,130 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import { usePersonalUploadId } from './hooks/usePersonalUploadId'
|
||||
import PageLayout from '../../../components/PageLayout'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import useAuthStore from '../../../store/authStore'
|
||||
import { useUserStatus } from '../../../hooks/useUserStatus'
|
||||
import {
|
||||
DocumentArrowUpIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
|
||||
const ID_TYPES = [
|
||||
{ value: 'national_id', label: 'Personalausweis' },
|
||||
{ value: 'passport', label: 'Reisepass' },
|
||||
{ value: 'driver_license', label: 'Führerschein' },
|
||||
{ value: 'other', label: 'Aufenthaltstitel' }
|
||||
]
|
||||
import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
export default function PersonalIdUploadPage() {
|
||||
const token = useAuthStore(s => s.accessToken)
|
||||
const { refreshStatus } = useUserStatus()
|
||||
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)
|
||||
// NEW: guard company users from accessing personal page
|
||||
const user = useAuthStore(s => s.user)
|
||||
const router = useRouter()
|
||||
const [blocked, setBlocked] = 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
|
||||
useEffect(() => {
|
||||
const ut = (user as any)?.userType || (user as any)?.role
|
||||
console.log('🧭 UploadID Guard [personal]: userType =', ut)
|
||||
if (ut && ut !== 'personal') {
|
||||
console.warn('🚫 UploadID Guard [personal]: access denied for userType:', ut, '-> redirecting to company upload')
|
||||
setBlocked(true)
|
||||
router.replace('/quickaction-dashboard/register-upload-id/company')
|
||||
} else if (ut === 'personal') {
|
||||
console.log('✅ UploadID Guard [personal]: access granted')
|
||||
}
|
||||
setError('')
|
||||
side === 'front' ? setFrontFile(f) : setBackFile(f)
|
||||
}, [user, router])
|
||||
|
||||
if (blocked) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="min-h-[50vh] flex items-center justify-center">
|
||||
<div className="text-center text-sm text-gray-600">
|
||||
Redirecting to the correct upload page…
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
if (!token) {
|
||||
setError('Nicht authentifiziert. Bitte erneut einloggen.')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('front', frontFile!)
|
||||
if (hasBack && backFile) {
|
||||
formData.append('back', backFile)
|
||||
}
|
||||
formData.append('idType', idType)
|
||||
formData.append('idNumber', idNumber)
|
||||
formData.append('expiryDate', expiry)
|
||||
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/personal-id`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (response.ok && data.success) {
|
||||
setSuccess(true)
|
||||
await refreshStatus() // Refresh user status
|
||||
// Redirect after 2 seconds
|
||||
setTimeout(() => {
|
||||
window.location.href = '/quickaction-dashboard'
|
||||
}, 2000)
|
||||
} else {
|
||||
setError(data.message || 'Upload fehlgeschlagen. Bitte erneut versuchen.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error)
|
||||
setError('Netzwerkfehler. 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()
|
||||
}, [])
|
||||
const {
|
||||
idNumber, setIdNumber,
|
||||
idType, setIdType,
|
||||
expiry, setExpiry,
|
||||
hasBack, setHasBack,
|
||||
frontFile, backFile,
|
||||
frontPreview, backPreview,
|
||||
submitting, error, success,
|
||||
frontInputRef, backInputRef,
|
||||
handleFile, onDrop, clearFile, dropEvents, openPicker, submit,
|
||||
inputBase,
|
||||
} = usePersonalUploadId()
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
@ -148,10 +72,7 @@ export default function PersonalIdUploadPage() {
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
@ -160,9 +81,9 @@ export default function PersonalIdUploadPage() {
|
||||
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">
|
||||
{/* Grid Fields: put all three inputs on the same line on md+ */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ID Number *
|
||||
</label>
|
||||
@ -170,10 +91,10 @@ export default function PersonalIdUploadPage() {
|
||||
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"
|
||||
className={`${inputBase} ${idNumber ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-gray-600">
|
||||
Enter the number exactly as shown on your ID
|
||||
</p>
|
||||
</div>
|
||||
@ -185,11 +106,11 @@ export default function PersonalIdUploadPage() {
|
||||
<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"
|
||||
className={`${inputBase} ${idType ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
required
|
||||
>
|
||||
<option value="">Select ID type</option>
|
||||
{ID_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
|
||||
{/* ...existing options... */}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -201,11 +122,11 @@ export default function PersonalIdUploadPage() {
|
||||
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"
|
||||
placeholder="tt.mm jjjj"
|
||||
className={`${inputBase} ${expiry ? 'text-gray-900' : 'text-gray-700'} appearance-none [&::-webkit-calendar-picker-indicator]:opacity-80`}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden lg:block"></div>
|
||||
</div>
|
||||
|
||||
{/* Back side toggle */}
|
||||
@ -230,29 +151,33 @@ export default function PersonalIdUploadPage() {
|
||||
<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`}>
|
||||
{/* Upload Areas: full width, 1 col if no back, 2 cols if back */}
|
||||
<div className={`mt-8 grid gap-6 items-stretch ${hasBack ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
|
||||
{/* 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"
|
||||
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-6 sm: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')
|
||||
}}
|
||||
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>
|
||||
<div className="flex w-full max-w-full flex-col items-center">
|
||||
{/* NEW preview */}
|
||||
{frontPreview && (
|
||||
<img
|
||||
src={frontPreview}
|
||||
alt="Front ID preview"
|
||||
className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
|
||||
/>
|
||||
)}
|
||||
<p className="mt-3 text-sm font-medium text-gray-800 break-all">{frontFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); clearFile('front') }}
|
||||
@ -263,7 +188,7 @@ export default function PersonalIdUploadPage() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-3 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Click to upload front side
|
||||
</p>
|
||||
@ -282,22 +207,26 @@ export default function PersonalIdUploadPage() {
|
||||
{...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"
|
||||
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-6 sm: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')
|
||||
}}
|
||||
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>
|
||||
<div className="flex w-full max-w-full flex-col items-center">
|
||||
{/* NEW preview */}
|
||||
{backPreview && (
|
||||
<img
|
||||
src={backPreview}
|
||||
alt="Back ID preview"
|
||||
className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
|
||||
/>
|
||||
)}
|
||||
<p className="mt-3 text-sm font-medium text-gray-800 break-all">{backFile.name}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.stopPropagation(); clearFile('back') }}
|
||||
@ -308,7 +237,7 @@ export default function PersonalIdUploadPage() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
||||
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-3 transition" />
|
||||
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
||||
Click to upload back side
|
||||
</p>
|
||||
@ -321,12 +250,9 @@ export default function PersonalIdUploadPage() {
|
||||
)}
|
||||
</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 */}
|
||||
{/* Info Box, errors, success, submit */}
|
||||
<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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user