Add import profile step in login

src/front/Components/Layouts/Login/StepEmail/index.tsx

@@ -4,7 +4,7 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 //import Image from "next/image";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant, EButtonstyletype } from "@Front/Components/DesignSystem/Button";
 //import franceConnectLogo from "../france-connect.svg";
 // import { useRouter } from "next/router";
 // import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
@@ -20,10 +20,11 @@ import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
 	validationErrors: ValidationError[];
+	onImportProfile?: () => void;
 };
 
 export default function StepEmail(props: IProps) {
-	const { onSubmit, validationErrors } = props;
+	const { onSubmit, validationErrors, onImportProfile } = props;
 	const [isErrorModalOpen, setIsErrorModalOpen] = useState(0);
 
 	/* const router = useRouter();
@@ -111,6 +112,20 @@ export default function StepEmail(props: IProps) {
 						<Button type="submit">Se connecter</Button>
 					</Form>
 				</div>
+				{onImportProfile && (
+					<div className={classes["section"]}>
+						<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
+							Options avancées :
+						</Typography>
+						<Button 
+							variant={EButtonVariant.SECONDARY} 
+							styletype={EButtonstyletype.TEXT}
+							onClick={onImportProfile}
+						>
+							Importer un profil depuis un fichier
+						</Button>
+					</div>
+				)}
 			</div>
 			<Confirm
 				isOpen={isErrorModalOpen === 1}

src/front/Components/Layouts/Login/index.tsx

@@ -21,6 +21,7 @@ import UserStore from "@Front/Stores/UserStore";
 
 import AuthModal from "src/sdk/AuthModal";
 import CustomerService from "src/common/Api/LeCoffreApi/sdk/CustomerService";
+import StepImportProfile from "./StepImportProfile";
 
 export enum LoginStep {
 	EMAIL,
@@ -28,6 +29,7 @@ export enum LoginStep {
 	PASSWORD,
 	NEW_PASSWORD,
 	PASSWORD_FORGOTTEN,
+	IMPORT_PROFILE,
 }
 
 export default function Login() {
@@ -43,6 +45,7 @@ export default function Login() {
 	const [partialPhoneNumber, setPartialPhoneNumber] = useState<string>("");
 	const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
 	const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	// const openErrorModal = useCallback(() => {
 	// 	setIsErrorModalOpen(true);
@@ -241,10 +244,55 @@ export default function Login() {
 		}
 	}, [email, totpCodeUid]);
 
+	const onImportProfileSubmit = useCallback(async (profileData: any) => {
+		try {
+			setIsLoading(true);
+			setValidationErrors([]);
+			
+			// Call API to validate and import profile
+			// Note: You'll need to implement this method in your Auth service
+			// const response = await Auth.getInstance().importProfile(profileData);
+			
+			// For now, we'll simulate a successful import
+			// In a real implementation, you would:
+			// 1. Send the profile data to your backend
+			// 2. Validate the profile on the server
+			// 3. Return authentication tokens
+			// 4. Connect the user
+			
+			// Simulate API call
+			await new Promise(resolve => setTimeout(resolve, 1000));
+			
+			// For demo purposes, we'll just redirect to the dashboard
+			// In reality, you'd use the response from the API
+			// CustomerStore.instance.connect(response.accessToken, response.refreshToken);
+			
+			// Redirect to dashboard
+			router.push(Module.getInstance().get().modules.pages.Folder.pages.Select.props.path);
+		} catch (error: any) {
+			setValidationErrors([
+				{
+					property: "import",
+					constraints: {
+						[error.http_status || "500"]: error.message || "Erreur lors de l'import du profil",
+					},
+				},
+			]);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [router]);
+
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={backgroundImage}>
 			<div className={classes["root"]}>
-				{step === LoginStep.EMAIL && <StepEmail onSubmit={onEmailFormSubmit} validationErrors={validationErrors} />}
+				{step === LoginStep.EMAIL && (
+					<StepEmail 
+						onSubmit={onEmailFormSubmit} 
+						validationErrors={validationErrors}
+						onImportProfile={() => setStep(LoginStep.IMPORT_PROFILE)}
+					/>
+				)}
 				{step === LoginStep.TOTP && (
 					<StepTotp
 						onSubmit={onSmsCodeSubmit}
@@ -281,6 +329,13 @@ export default function Login() {
 						});
 					}}
 				/>}
+				{step === LoginStep.IMPORT_PROFILE && (
+					<StepImportProfile 
+						onSubmit={onImportProfileSubmit} 
+						onBack={() => setStep(LoginStep.EMAIL)}
+						validationErrors={validationErrors}
+					/>
+				)}
 			</div>
 			{/* <Confirm
 				isOpen={isErrorModalOpen}