Vite + React
-
-
-
-
- Edit src/App.tsx and save to test Valentin
-
- Click on the Vite and React logos to learn more -
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/front/src/VerificationScene.tsx b/front/src/VerificationScene.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16fa9d4a649a9d7b255977c0f31858cd306549d4
--- /dev/null
+++ b/front/src/VerificationScene.tsx
@@ -0,0 +1,163 @@
+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+ Take a picture of the Capture the front side of your ID Card +
+
+ 
+
+ Is This Picture Correct ?
+
+
+
+
+
+ );
+ }
+
+ if (currentStep == StepType.takeFrontPic) {
+ stepContent = (
+ <>
+ Center your face
+
+ 
+
+ Is This Picture Correct ?
+
+
+
+
+
+ );
+ }
+
+ if (currentStep == StepType.result) {
+ stepContent = (
+
+
+
+
+
+ );
+}
diff --git a/front/src/components/BoxContainer.tsx b/front/src/components/BoxContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f104c6cfa0d4d34d9115f17fd8f2ad8fc10230ba
--- /dev/null
+++ b/front/src/components/BoxContainer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function BoxContainer({
+ children,
+ headerName,
+}: {
+ children?: React.ReactNode | React.ReactNode[];
+ headerName?: string;
+}) {
+ return (
+
+ {stepContent}
+
+
+
+ );
+}
diff --git a/front/src/components/DarkVideoWrapper.tsx b/front/src/components/DarkVideoWrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e2707d370b0c6d3541822b72c7f92354062aa4e5
--- /dev/null
+++ b/front/src/components/DarkVideoWrapper.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from "react";
+interface VideoWrapperProps {
+ width?: string | number;
+ height?: string | number;
+ className?: string;
+ handleNextStep: () => void; // Function to handle the next step
+ setImage: (imageDataUrl: string) => void; // Function to set the image data URL
+}
+
+const DarkVideoWrapper: React.FC
+
+
+ {headerName}
+
+ {children}
+
+
+ {" "}
+ {/* Hidden canvas */}
+
+
+
+ );
+};
+
+export default DarkVideoWrapper;
diff --git a/front/src/components/ResultContainer.tsx b/front/src/components/ResultContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01cd379faf9b55de1d88ad4ac781c799c43a3e37
--- /dev/null
+++ b/front/src/components/ResultContainer.tsx
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export default function ResultContainer({
+ sendImageToServer,
+ idCardPicture,
+}: {
+ sendImageToServer: (pic: string, setLoading: (n: boolean) => void) => void;
+ idCardPicture: string;
+}) {
+ const [loading, setLoading] = useState
+
+ {" "}
+ {/* Hidden canvas */}
+
+
+
+ );
+};
+
+export default VideoWrapper;
diff --git a/front/src/components/ui/button.tsx b/front/src/components/ui/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f27a837df7ffb965df11923d75ef6205cca70db
--- /dev/null
+++ b/front/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes