Add decryption from onboarding token

.gitignore

@@ -8,3 +8,4 @@ api/.env.local
 api/__debug_bin*
 ui/yarn.lock
 api/.env
+ui/.env.local

ui/package.json

@@ -15,9 +15,12 @@
     "@hookform/resolvers": "^3.5.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/jest-dom": "^6.4.6",
+    "@types/crypto-js": "^4.2.2",
     "@uug-ai/ui": "^1.0.36",
     "autoprefixer": "^10.4.19",
+    "base-64": "^1.0.0",
     "cookies-next": "^4.2.1",
+    "crypto-js": "^4.2.0",
     "next": "14",
     "next-auth": "^4.24.7",
     "next-router-mock": "^0.9.13",

ui/src/app/onboarding/components/FormComponent.tsx

@@ -1,11 +1,19 @@
-import React, { useEffect, useRef } from "react";
-import { useForm, SubmitHandler, FormProvider, useFormContext } from "react-hook-form";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  useForm,
+  SubmitHandler,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Box, Text, Input, Button, Logo } from "../../../components/ui";
 import { schema } from "./FormSchema";
 import { onSubmitAction } from "./FormSubmit";
 import { FormData } from "./Types";
+import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import * as CryptoJS from "crypto-js"; // AES encryption, symmetric
 
 interface FormFieldProps {
   name: keyof FormData;
@@ -15,27 +23,83 @@ interface FormFieldProps {
   type?: string;
 }
 
-const FormField: React.FC<FormFieldProps> = ({ name, label, description, placeholder, type = "text" }) => {
-  const { register, formState: { errors } } = useFormContext<FormData>();
+interface UserFingerprint {
+  Email: string;
+  FirstName: string;
+  LastName: string;
+  Id: number;
+  Expiration: number; // Unix timestamp, typically represented as a number
+  Creation: number; // Unix timestamp, typically represented as a number
+}
+
+const FormField: React.FC<FormFieldProps> = ({
+  name,
+  label,
+  description,
+  placeholder,
+  type = "text",
+}) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<FormData>();
   return (
     <Box className="mb-4">
       <Text as="label" weight="semibold" className="mb-1">
         {label}
       </Text>
-      <Input {...register(name)} type={type} placeholder={placeholder} className="bg-white" />
-      {errors[name] && <p>{(errors[name]?.message as string) || ''}</p>}
+      <Input
+        {...register(name)}
+        type={type}
+        placeholder={placeholder}
+        className="bg-white"
+      />
+      {errors[name] && <p>{(errors[name]?.message as string) || ""}</p>}
       {description && <p className="text-sm text-gray-500">{description}</p>}
     </Box>
   );
 };
 
-const FormComponent: React.FC<{ videoFile: Blob | null; onSubmit: SubmitHandler<FormData> }> = ({ videoFile, onSubmit }) => {
+const FormComponent: React.FC<{
+  videoFile: Blob | null;
+  onSubmit: SubmitHandler<FormData>;
+}> = ({ videoFile, onSubmit }) => {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+  console.log("token: ", token);
+
+  const [userData, setUserData] = useState<UserFingerprint | null>(null);
+  console.log("KEYYYYY", process.env.NEXT_PUBLIC_PRIVATE_KEY);
+  useEffect(() => {
+    if (token) {
+      try {
+        const base64Token = decodeURI(token);
+        const encryptedToken = atob(base64Token);
+        const bytes = CryptoJS.AES.decrypt(
+          encryptedToken,
+          process.env.NEXT_PUBLIC_PRIVATE_KEY || ""
+        );
+        const decryptedToken = bytes.toString(CryptoJS.enc.Base64);
+
+        const base64 = atob(decryptedToken);
+        console.log("DECRYPTEDTOKEN: ", base64);
+
+        // Parse the decrypted JSON data
+        const parsedData = JSON.parse(base64) as UserFingerprint;
+
+        setUserData(parsedData);
+      } catch (error) {
+        console.error("Failed to decrypt or parse token", error);
+      }
+    }
+  }, [token]);
+
   const methods = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
-      firstName: "",
-      lastName: "",
-      email: "",
+      firstName: userData?.FirstName || "",
+      lastName: userData?.LastName || "",
+      email: userData?.Email || "",
       phoneNumber: "",
       dateOfBirth: "",
       video: undefined,
@@ -71,11 +135,37 @@ const FormComponent: React.FC<{ videoFile: Blob | null; onSubmit: SubmitHandler<
             methods.handleSubmit(handleFormSubmit)(evt);
           }}
         >
-          <FormField name="firstName" label="First Name" placeholder="First Name" description="Your first name." />
-          <FormField name="lastName" label="Last Name" placeholder="Last Name" description="Your last name." />
-          <FormField name="email" label="Email" placeholder="E-Mail" description="Your email address." />
-          <FormField name="phoneNumber" label="Phone Number" placeholder="Phone Number" description="Your phone number." />
-          <FormField name="dateOfBirth" label="Date of Birth" type="date" placeholder="Date of Birth" description="Your date of birth." />
+          <FormField
+            name="firstName"
+            label="First Name"
+            placeholder="First Name"
+            description="Your first name."
+          />
+          <FormField
+            name="lastName"
+            label="Last Name"
+            placeholder="Last Name"
+            description="Your last name."
+          />
+          <FormField
+            name="email"
+            label="Email"
+            placeholder="E-Mail"
+            description="Your email address."
+          />
+          <FormField
+            name="phoneNumber"
+            label="Phone Number"
+            placeholder="Phone Number"
+            description="Your phone number."
+          />
+          <FormField
+            name="dateOfBirth"
+            label="Date of Birth"
+            type="date"
+            placeholder="Date of Birth"
+            description="Your date of birth."
+          />
           <Button type="submit" variant="solid" width="third">
             Register
           </Button>

ui/src/app/onboarding/page.tsx

@@ -1,10 +1,21 @@
 "use client";
 
 import React, { useState } from "react";
-import { Box, Row, Stack, Gradient, Text, Button, Socials, Icon, VideoCapture } from "../../components/ui";
+import {
+  Box,
+  Row,
+  Stack,
+  Gradient,
+  Text,
+  Button,
+  Socials,
+  Icon,
+  VideoCapture,
+} from "../../components/ui";
 import FormComponent from "./components/FormComponent";
 import { SubmitHandler } from "react-hook-form";
 import * as z from "zod";
+import { useRouter } from "next/navigation";
 
 const schema = z.object({
   firstName: z.string().min(1, "First Name is required"),
@@ -39,7 +50,7 @@ const Onboarding: React.FC = () => {
 
       console.log("Form data with video:", data);
 
-      setIsSubmitted(true); 
+      setIsSubmitted(true);
     } else {
       console.error("Video is required in onSubmit");
     }
@@ -75,7 +86,11 @@ interface FaceScanSectionProps {
   handleRecordingComplete: (recordedChunks: Blob[]) => void;
 }
 
-const FaceScanSection: React.FC<FaceScanSectionProps> = ({ isRecording, setIsRecording, handleRecordingComplete }) => (
+const FaceScanSection: React.FC<FaceScanSectionProps> = ({
+  isRecording,
+  setIsRecording,
+  handleRecordingComplete,
+}) => (
   <Stack className="w-2/3 flex items-center place-content-center">
     <Box className="w-96">
       <VideoCapture
@@ -107,8 +122,10 @@ const InfoSection = () => (
   <Stack className="p-14 items-center place-content-center">
     <Box className="p-10 shadow-md rounded-md bg-white text-xl w-full ">
       <Text as="a" weight="bold" className="shadow-inner bg-white" />
-      Hello, this is a registration form where you can register with a video of yourself! <br />
-      We will use this video to create biometrics, so you get access into the company and won't need to use a badge or card.
+      Hello, this is a registration form where you can register with a video of
+      yourself! <br />
+      We will use this video to create biometrics, so you get access into the
+      company and won't need to use a badge or card.
     </Box>
     <Row className="pt-14 space-x-10">
       <Box className="w-1/2">
@@ -117,7 +134,11 @@ const InfoSection = () => (
             About UUFT.Ai
           </Text>
           <Text as="a">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vero reiciendis quae porro, voluptates odit. Culpa ipsam beatae voluptas vitae est repudiandae, nulla atque, reiciendis labore, voluptatibus eum dolorem! Id inventore quidem ipsam impedit possimus?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Voluptatibus vero reiciendis quae porro, voluptates odit. Culpa
+            ipsam beatae voluptas vitae est repudiandae, nulla atque, reiciendis
+            labore, voluptatibus eum dolorem! Id inventore quidem ipsam impedit
+            possimus?
           </Text>
         </Stack>
       </Box>
@@ -127,7 +148,11 @@ const InfoSection = () => (
             About UUFT.Ai
           </Text>
           <Text as="a">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vero reiciendis quae porro, voluptates odit. Culpa ipsam beatae voluptas vitae est repudiandae, nulla atque, reiciendis labore, voluptatibus eum dolorem! Id inventore quidem ipsam impedit possimus?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Voluptatibus vero reiciendis quae porro, voluptates odit. Culpa
+            ipsam beatae voluptas vitae est repudiandae, nulla atque, reiciendis
+            labore, voluptatibus eum dolorem! Id inventore quidem ipsam impedit
+            possimus?
           </Text>
         </Stack>
       </Box>

ui/styles/tailwind.css

@@ -839,6 +839,10 @@ video {
   height: 100vh;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -891,6 +895,10 @@ video {
   width: 100%;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .min-w-1\/3 {
   min-width: 33.333333%;
 }
@@ -1602,6 +1610,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }