@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Captcha/Captcha.stories.ts

@@ -0,0 +1,276 @@
+import Captcha from './Captcha.vue'
+import type { StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import { ref, watch } from 'vue'
+import SyAlert from '../SyAlert/SyAlert.vue'
+
+export default {
+	title: 'Composants/Formulaires/Captcha',
+	component: Captcha,
+	parameters: {
+		layout: 'centered',
+		controls: { exclude: ['onUpdate:modelValue', 'onUpdate:type', 'onImageError', 'onAudioError', 'onCreationError'] },
+	},
+	argTypes: {
+		'urlCreate': {
+			description: 'URL de création du captcha (retourne un JSON avec les URLs de l\'image et de l\'audio)',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'urlGetImage': {
+			description: 'URL de récupération de l\'image du captcha. <br> La chaîne `CAPTCHAID` sera remplacée par l\'ID du captcha.',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'urlGetAudio': {
+			description: 'URL de récupération de l\'audio du captcha. <br> La chaîne `CAPTCHAID` sera remplacée par l\'ID du captcha.',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'modelValue': {
+			description: 'La valeur du champs de captcha',
+			control: 'string',
+		},
+		'type': {
+			description: 'Le type de captcha affiché.',
+			options: ['image', 'audio', 'choice'],
+			control: {
+				type: 'select',
+			},
+			table: {
+				type: { summary: 'image | audio | choice' },
+				defaultValue: { summary: '"image"' },
+			},
+		},
+		'errorMessage': {
+			description: 'Message d\'erreur personnalisé à afficher sous le champ de captcha.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'tagTitle': {
+			description: 'Le tag du titre de la section.',
+		},
+		'helpDesk': {
+			description: 'Le numéro de téléphone du support pour garantir l\'accessibilité du parcours aux personnes en situation de handicap.',
+		},
+		'locales': {
+			description: 'Les locales à utiliser pour le composant. Voir le fichier locales.ts pour l\'exemple des clés disponibles.',
+			control: false,
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: 'locales (importé depuis le fichier locales.ts)' },
+			},
+		},
+		'update:modelValue': {
+			description: 'Événement émis lors de la mise à jour du champs de captcha.',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'update:type': {
+			description: 'Événement émis lors de la mise à jour du type de captcha (image ou audio).',
+			control: false,
+			table: {
+				type: { summary: 'image | audio' },
+			},
+		},
+		'imageError': {
+			description: 'Événement émis lorsqu\'il y a une erreur lors du chargement de l\'image du captcha.',
+			control: false,
+			table: {
+				type: { summary: 'void' },
+			},
+		},
+		'audioError': {
+			description: 'Événement émis lorsqu\'il y a une erreur lors du chargement de l\'audio du captcha.',
+			control: false,
+			table: {
+				type: { summary: 'void' },
+			},
+		},
+		'creationError': {
+			description: 'Événement émis lorsqu\'il y a une erreur lors de la création du captcha.',
+			control: false,
+			table: {
+				type: { summary: 'void' },
+			},
+		},
+	},
+
+}
+
+type Story = StoryObj<typeof Captcha>
+
+export const Default: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onUpdate:type': fn(),
+		'onImageError': fn(),
+		'onAudioError': fn(),
+		'onCreationError': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { Captcha },
+			setup() {
+				const captchaValue = ref(args.modelValue)
+				watch(() => args.modelValue, () => {
+					captchaValue.value = args.modelValue
+				})
+				const verifyCaptcha = () => {
+					if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+						return Promise.resolve({ response: { data: { message: 'Success' } } })
+					}
+					else {
+						return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+					}
+				}
+
+				return { args, captchaValue, verifyCaptcha }
+			},
+			template: `
+                <VCard class="pa-8" max-width="600" min-width="300">
+                    <Captcha 
+                        url-create="https://free.mockerapi.com/mock/0adac32b-e832-4553-aa7f-0011b7f35f0c"
+                        url-get-image="/captcha/captcha.png"
+                        url-get-audio="/captcha/captcha.mp3"
+						:service="verifyCaptcha"
+						v-bind="args"
+						v-model="captchaValue"
+                    />
+                </VCard>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <VCard class="pa-8" max-width="600">
+        <Captcha 
+			url-create="..."
+			url-get-image="..."
+			url-get-audio="/..."
+			service="(e) => {
+				// call the API to verify the captcha and return the response
+			}"
+			@validation:success="(e) => { ... }"
+			@validation:error="(e) => { ... }"
+		/>
+    </VCard>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { Captcha } from '@cnamts/Captcha'
+import { VCard } from 'vuetify/components'
+</script>
+                `,
+			},
+		],
+	},
+}
+
+export const Choice: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onUpdate:type': fn(),
+		'onImageError': fn(),
+		'onAudioError': fn(),
+		'onCreationError': fn(),
+		'type': 'choice',
+	},
+	render: (args) => {
+		return {
+			components: { Captcha },
+			setup() {
+				const captchaValue = ref(args.modelValue)
+				watch(() => args.modelValue, () => {
+					captchaValue.value = args.modelValue
+				})
+				const verifyCaptcha = () => {
+					if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+						return Promise.resolve({ response: { data: { message: 'Success' } } })
+					}
+					else {
+						return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+					}
+				}
+				return { args, captchaValue, verifyCaptcha }
+			},
+			template: `
+                <VCard class="pa-8" max-width="600" min-width="300">
+                    <Captcha
+                        url-create="https://free.mockerapi.com/mock/0adac32b-e832-4553-aa7f-0011b7f35f0c"
+                        url-get-image="/captcha/captcha.png"
+                        url-get-audio="/captcha/captcha.mp3"
+						v-bind="args"
+						:service="verifyCaptcha"
+						v-model="captchaValue"
+                    />
+                </VCard>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <VCard class="pa-8" max-width="600">
+        <Captcha 
+			url-create="..."
+			url-get-image="..."
+			url-get-audio="/..."
+			service="(e) => {
+				// call the API to verify the captcha and return the response
+			}"
+			@validation:success="(e) => { ... }"
+			@validation:error="(e) => { ... }"
+			type="choice"
+		/>
+    </VCard>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { Captcha } from '@cnamts/Captcha'
+import { VCard } from 'vuetify/components'
+</script>
+                `,
+			},
+		],
+	},
+}
+
+export const WarningDocProps: Story = {
+	render: (args) => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyAlert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false" class="mb-8">
+					<template #default>En raison de limitations techniques sur la documentation, le captcha ne peut pas être rafraîchi sur les exemples.
+					</template>
+				</SyAlert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Captcha/Captcha.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+	import { mdiCached, mdiImageOutline, mdiPause } from '@mdi/js'
+	import volumeUp from './icons/volumeUp.vue'
+	import { computed, ref, watch } from 'vue'
+	import CaptchaAlert from './CaptchaAlert.vue'
+	import CaptchaBase from './CaptchaBase.vue'
+	import CaptchaBtn from './CaptchaBtn.vue'
+	import CaptchaForm from './CaptchaForm.vue'
+	import CaptchaImg from './CaptchaImg.vue'
+	import CaptchaInformation from './CaptchaInformation.vue'
+	import { locales as defaultLocales } from './locales'
+	import { type CaptchaType, type StateType } from './types'
+
+	const props = withDefaults(defineProps<{
+		urlCreate: string
+		urlGetImage: string
+		urlGetAudio: string
+		modelValue?: string | undefined
+		errorMessage?: string
+		type?: CaptchaType
+		tagTitle?: string
+		helpDesk?: string | false
+		locales?: typeof defaultLocales
+	}>(), {
+		modelValue: undefined,
+		errorMessage: undefined,
+		type: 'image',
+		helpDesk: '3648',
+		tagTitle: 'h3',
+		locales: () => defaultLocales,
+	})
+
+	const emit = defineEmits<{
+		(e: 'update:modelValue', modelValue: string | null): void
+		(e: 'update:type', type: CaptchaType): void
+		(e: 'imageError'): void
+		(e: 'audioError'): void
+		(e: 'creationError'): void
+	}>()
+	const text = ref<string | null>(null)
+	const type = ref<CaptchaType>(props.type)
+	const id = ref<string | null>(null)
+	const state = ref<StateType>('idle')
+	const captchaValid = ref<boolean>(false)
+
+	watch(() => props.modelValue, (val) => {
+		text.value = val ?? null
+	}, { immediate: true })
+
+	watch(() => props.type, (val) => {
+		type.value = val
+	}, { immediate: true })
+
+	watch(text, (val) => {
+		if (val !== props.modelValue) {
+			emit('update:modelValue', val ?? '')
+		}
+	})
+
+	function createCaptchaInit() {
+		text.value = null
+	}
+
+	function createCaptchaSuccess(captchaId: string | null) {
+		id.value = captchaId
+	}
+
+	function emitChangeValueEvent(val: string) {
+		text.value = val
+	}
+
+	function emitChangeTypeEvent() {
+		emit('update:type', type.value)
+	}
+
+	function emitErrorEvent(err: Error) {
+		if (err.message === 'Audio failed to load') {
+			emit('audioError')
+		}
+		else {
+			emit('creationError')
+		}
+	}
+
+	const phoneHelpDesk = computed(() => {
+		return `<a href="tel:${props.helpDesk}">${props.helpDesk}</a>`
+	})
+
+</script>
+
+<template>
+	<div>
+		<CaptchaInformation
+			:type="type"
+			:locales
+		/>
+
+		<CaptchaBase
+			v-model="type"
+			:url-create="urlCreate"
+			:url-get-image="urlGetImage"
+			:url-get-audio="urlGetAudio"
+			:locales
+			@update:model-value="emitChangeTypeEvent"
+			@create-captcha:init="createCaptchaInit"
+			@create-captcha:success="createCaptchaSuccess"
+			@create-captcha:error="emitErrorEvent"
+		>
+			<!-- Image captcha -->
+			<template
+				#image="{
+					chooseImage,
+					chooseAudio,
+					url,
+					state: createCaptchaState,
+					isError,
+					errorMessage: err
+				}"
+			>
+				<CaptchaImg
+					v-if="!isError"
+					:src="url"
+					:state="createCaptchaState"
+					:locales
+					class="mt-4"
+					@image-error="emit('imageError')"
+				/>
+
+				<CaptchaAlert
+					v-else
+					:locales
+					class="mt-2"
+					@click="chooseImage"
+				>
+					{{ err }}
+				</CaptchaAlert>
+
+				<CaptchaForm
+					v-model="text"
+					:locales
+					:label="locales.image.textfieldLabel"
+					:state="createCaptchaState"
+					:errors="props.errorMessage ? [props.errorMessage] : []"
+					:loading="state === 'pending'"
+					:success="captchaValid"
+					@update:model-value="emitChangeValueEvent"
+				/>
+
+				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
+					<p class="label-options text-textSubdued">
+						{{ locales.hardToRead }}
+					</p>
+
+					<CaptchaBtn
+						data-test-id="captcha-image-new"
+						:prepend-icon="mdiCached"
+						@click="chooseImage"
+					>
+						{{ locales.image.new }}
+					</CaptchaBtn>
+
+					<CaptchaBtn
+						data-test-id="captcha-image-change"
+						@click="chooseAudio"
+					>
+						<volume-up
+							fill="#0C419A"
+							aria-hidden="true"
+							height="16"
+							width="16"
+						/>
+						{{ locales.image.change }}
+					</CaptchaBtn>
+
+					<p
+						v-if="props.helpDesk"
+						class="captcha-helpdesk text-textSubdued mb-2"
+						v-html="locales?.helpDesk(phoneHelpDesk)"
+					/>
+				</div>
+			</template>
+
+			<!-- Audio captcha -->
+			<template
+				#audio="{
+					chooseImage,
+					chooseAudio,
+					toggleAudio,
+					state: createCaptchaState,
+					isPlaying,
+					isError,
+					errorMessage: err
+				}"
+			>
+				<VBtn
+					v-if="!isError"
+					:loading="createCaptchaState === 'pending'"
+					class="captcha-audio mt-4 text-none"
+					:aria-label="createCaptchaState === 'pending' ? locales.audio.loading : undefined"
+					color="primary"
+					height="44"
+					block
+					@click="toggleAudio"
+				>
+					<span v-if="isPlaying">
+						<VIcon>{{ mdiPause }}</VIcon>
+						{{ locales.pause }}
+					</span>
+
+					<span v-else>
+						<volume-up
+							fill="#fff"
+							aria-hidden="true"
+							height="16"
+							width="16"
+						/>
+						{{ locales.play }}
+					</span>
+				</VBtn>
+
+				<CaptchaAlert
+					v-else
+					:locales
+					class="mt-2"
+					@click="chooseAudio"
+				>
+					{{ err }}
+				</CaptchaAlert>
+
+				<CaptchaForm
+					v-model="text"
+					:locales
+					:label="locales.audio.textfieldLabel"
+					:state="createCaptchaState"
+					:loading="state === 'pending'"
+					:errors="props.errorMessage ? [props.errorMessage] : []"
+					:success="captchaValid"
+					@update:model-value="emitChangeValueEvent"
+				/>
+				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
+					<p class="label-options text-textSubdued">
+						{{ locales.hardToRead }}
+					</p>
+
+					<CaptchaBtn
+						data-test-id="captcha-audio-new"
+						:prepend-icon="mdiCached"
+						@click="chooseAudio"
+					>
+						{{ locales.audio.new }}
+					</CaptchaBtn>
+					<CaptchaBtn
+						data-test-id="captcha-audio-change"
+						:prepend-icon="mdiImageOutline"
+						@click="chooseImage"
+					>
+						{{ locales.audio.change }}
+					</CaptchaBtn>
+					<p
+						v-if="props.helpDesk"
+						class="captcha-helpdesk text-textSubdued mb-2"
+						v-html="locales?.helpDesk(phoneHelpDesk)"
+					/>
+				</div>
+			</template>
+
+			<template
+				#default="{
+					chooseImage,
+					chooseAudio
+				}"
+			>
+				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
+					<p class="label-options text-textSubdued">
+						{{ locales.choiceCaptchaTitle }}
+					</p>
+					<CaptchaBtn
+						:prepend-icon="mdiImageOutline"
+						@click="chooseImage"
+					>
+						{{ locales.choiceCaptcha.image }}
+					</CaptchaBtn>
+					<CaptchaBtn
+						@click="chooseAudio"
+					>
+						<volume-up
+							fill="#0C419A"
+							aria-hidden="true"
+							height="16"
+							width="16"
+						/>
+						{{ locales.choiceCaptcha.audio }}
+					</CaptchaBtn>
+				</div>
+			</template>
+		</CaptchaBase>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/tokens';
+
+.label-options {
+	font-size: 0.875rem;
+	font-weight: 400;
+}
+
+.captcha-audio :deep(.v-btn__content) span {
+	display: flex;
+	align-items: center;
+	gap: tokens.$gap-2;
+	letter-spacing: 0%;
+}
+
+.captcha-helpdesk {
+	max-width: 300px;
+	font-size: 0.875rem;
+}
+
+.captcha-helpdesk :deep(a) {
+	color: rgb(var(--v-theme-primary));
+	font-weight: 700;
+}
+
+</style>

package/src/components/Captcha/CaptchaAlert.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+	import { mdiAlertCircleOutline, mdiAutorenew } from '@mdi/js'
+	import { useAttrs } from 'vue'
+	import type { locales as defaultLocales } from './locales'
+
+	defineProps<{
+		locales: typeof defaultLocales
+	}>()
+
+	const attrs = useAttrs()
+
+	const errorIcon = mdiAlertCircleOutline
+	const renewIcon = mdiAutorenew
+</script>
+
+<template>
+	<VSheet max-width="311">
+		<VAlert
+			color="error"
+			variant="text"
+			tile
+			v-bind="attrs"
+		>
+			<template #prepend>
+				<VIcon
+					color="error"
+					class="mr-2"
+				>
+					{{ errorIcon }}
+				</VIcon>
+			</template>
+
+			<span>
+				<slot />
+			</span>
+
+			<template #append>
+				<VBtn
+					color="primary"
+					min-width="48px"
+					min-height="36px"
+					variant="outlined"
+				>
+					<p class="d-sr-only">
+						{{ locales.renew }}
+					</p>
+					<VIcon>
+						{{ renewIcon }}
+					</VIcon>
+				</VBtn>
+			</template>
+		</VAlert>
+	</VSheet>
+</template>
+
+<style scoped lang="scss">
+:deep(.v-btn) {
+	padding: 0 !important;
+}
+</style>