108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { fn } from '@storybook/test';
|
|
import { within, userEvent } from '@storybook/test';
|
|
import { TwoFactorSetup } from './TwoFactorSetup';
|
|
|
|
/**
|
|
* TwoFactorSetup - Configuration 2FA
|
|
*
|
|
* Assistant multi-étapes pour configurer l'authentification
|
|
* à deux facteurs avec QR code et codes de backup.
|
|
*/
|
|
const meta: Meta<typeof TwoFactorSetup> = {
|
|
title: 'Components/Features/Settings/Security/TwoFactorSetup',
|
|
component: TwoFactorSetup,
|
|
parameters: {
|
|
layout: 'padded',
|
|
docs: {
|
|
description: {
|
|
component: 'Assistant de configuration 2FA en 3 étapes: choix de méthode, scan QR code, codes de backup.',
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
args: {
|
|
onBack: fn(),
|
|
onComplete: fn(),
|
|
},
|
|
argTypes: {
|
|
onBack: {
|
|
description: 'Callback appelé quand l\'utilisateur revient en arrière',
|
|
action: 'onBack',
|
|
},
|
|
onComplete: {
|
|
description: 'Callback appelé quand la configuration est terminée',
|
|
action: 'onComplete',
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="max-w-2xl mx-auto p-4 bg-kodo-background min-h-screen">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
/**
|
|
* Étape 1 - Choix de la méthode d'authentification.
|
|
*/
|
|
export const Step1_ChooseMethod: Story = {
|
|
name: 'Étape 1: Choix de méthode',
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Première étape: choisir entre Authenticator App (TOTP) ou SMS.',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Étape 2 - Scan du QR code et vérification.
|
|
*/
|
|
export const Step2_QRCode: Story = {
|
|
name: 'Étape 2: QR Code',
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
// Cliquer sur "Authenticator App" pour passer à l'étape 2
|
|
const totpOption = canvas.getByText(/authenticator app/i);
|
|
await userEvent.click(totpOption);
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Deuxième étape: scanner le QR code et entrer le code de vérification.',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Étape 3 - Affichage des codes de backup.
|
|
*/
|
|
export const Step3_BackupCodes: Story = {
|
|
name: 'Étape 3: Codes de backup',
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
// Naviguer vers l'étape 3 (simulation)
|
|
// Note: Cela nécessite que l'API mock retourne des données valides
|
|
const totpOption = canvas.getByText(/authenticator app/i);
|
|
await userEvent.click(totpOption);
|
|
|
|
// Attendre le QR code et entrer un code
|
|
// Cette simulation est limitée sans mocks complets
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Troisième étape: sauvegarder les codes de backup avec options copier/télécharger.',
|
|
},
|
|
},
|
|
},
|
|
};
|