Spaces:
Sleeping
Sleeping
File size: 4,586 Bytes
9a9d08c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
import { useState } from "react";
import BoxContainer from "./components/BoxContainer";
import VideoWrapper from "@/components/VideoWrapper.tsx";
import ResultContainer from "@/components/ResultContainer.tsx";
import DarkVideoWrapper from "@/components/DarkVideoWrapper.tsx";
enum StepType {
takeId,
verifyId,
takeFrontPic,
verifyProfile,
result,
}
const stepsArray: StepType[] = [
StepType.takeId,
StepType.verifyId,
StepType.takeFrontPic,
StepType.verifyProfile,
StepType.result,
];
export default function VerificationScene() {
const [currentStep, setCurrentStep] = useState<StepType>(StepType.takeId);
const [idCardPicture, setIdCardPicture] = useState<string>();
const [profilePicture, setProfilePicture] = useState<string>();
const handleNextStep = () => {
if (currentStep == StepType.result) return;
setCurrentStep((currentStep + 1) % stepsArray.length);
};
const handlePrevStep = () => {
if (currentStep == StepType.takeId) return;
setCurrentStep((currentStep - 1) % stepsArray.length);
};
const sendImageToServer = async (
imageDataUrl: string,
setLoading: (n: boolean) => void,
) => {
try {
const response = await fetch("YOUR_BACKEND_URL/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ image: imageDataUrl }),
});
if (!response.ok) {
throw new Error("Erreur lors de l'envoi de l'image");
}
const data = await response.json();
console.log("Image envoyée avec succès:", data);
setLoading(true);
} catch (error) {
console.error("Erreur:", error);
setLoading(false);
}
};
let stepContent = undefined;
if (currentStep == StepType.takeId) {
stepContent = (
<>
<h1 className="text-black text-2xl mt-20 text-center px-28">
Take a picture of the Capture the front side of your ID Card
</h1>
<VideoWrapper
handleNextStep={handleNextStep}
setImage={setIdCardPicture}
className="shadow-lg mt-20"
height="250px"
width="400px"
/>
</>
);
}
if (currentStep == StepType.verifyId) {
stepContent = (
<>
<div className="overflow-hidden w-2/3 h-2/4 mt-10">
<img src={idCardPicture} alt="captured" />
</div>
<h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
<div className="mt-32 space-x-20">
<button
onClick={handlePrevStep}
className="bg-red-600 transition text-white rounded-2xl text-xl hover:bg-red-800 w-40 h-16"
>
No
</button>
<button
onClick={handleNextStep}
className="bg-blue-600 transition text-white rounded-2xl text-xl hover:bg-gray-800 w-40 h-16"
>
Yes
</button>
</div>
</>
);
}
if (currentStep == StepType.takeFrontPic) {
stepContent = (
<>
<h1 className="mt-5 font-bold text-lg">Center your face</h1>
<DarkVideoWrapper
setImage={setProfilePicture}
className="mt-20 w-2/4 h-3/5 overflow-hidden"
handleNextStep={handleNextStep}
/>
</>
);
}
if (currentStep == StepType.verifyProfile) {
stepContent = (
<>
<div className="overflow-hidden w-2/3 h-2/4 mt-10">
<img src={profilePicture} alt="captured" />
</div>
<h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
<div className="mt-32 space-x-20">
<button
onClick={handlePrevStep}
className="bg-red-600 transition text-white rounded-2xl text-xl hover:bg-red-800 w-40 h-16"
>
No
</button>
<button
onClick={handleNextStep}
className="bg-blue-600 transition text-white rounded-2xl text-xl hover:bg-gray-800 w-40 h-16"
>
Yes (Submit)
</button>
</div>
</>
);
}
if (currentStep == StepType.result) {
stepContent = (
<ResultContainer
sendImageToServer={sendImageToServer}
idCardPicture={idCardPicture ?? ""}
/>
);
}
return (
<>
<div className="bg-gray-100">
<BoxContainer headerName="Identity Verification Required">
<div className="h-full w-full flex flex-col items-center overflow-hidden">
{stepContent}
</div>
</BoxContainer>
</div>
</>
);
}
|