@cnamts/synapse 1.0.27 → 1.1.1

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

@@ -3,6 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { fn } from '@storybook/test'
 import { ref, watch } from 'vue'
 import SyAlert from '../SyAlert/SyAlert.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps.ts'
 
 export default {
 	title: 'Composants/Formulaires/Captcha',
@@ -17,6 +18,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'urlGetImage': {
@@ -24,6 +26,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'urlGetAudio': {
@@ -31,11 +34,16 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'modelValue': {
 			description: 'La valeur du champs de captcha',
 			control: 'string',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
 		},
 		'type': {
 			description: 'Le type de captcha affiché.',
@@ -46,26 +54,31 @@ export default {
 			table: {
 				type: { summary: 'image | audio | choice' },
 				defaultValue: { summary: '"image"' },
+				category: 'props',
 			},
 		},
-		'errorMessage': {
-			description: 'Message d\'erreur personnalisé à afficher sous le champ de captcha.',
+		'tagTitle': {
+			description: 'Le tag du titre de la section.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },
+				defaultValue: { summary: 'h2' },
+				category: 'props',
 			},
 		},
-		'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.',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
 		},
 		'locale': {
 			description: 'La locale (langue) à utiliser pour la génération du captcha. Par défaut, la langue du navigateur est utilisée.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'locales': {
@@ -74,6 +87,7 @@ export default {
 			table: {
 				type: { summary: 'object' },
 				defaultValue: { summary: 'locales (importé depuis le fichier locales.ts)' },
+				category: 'props',
 			},
 		},
 		'update:modelValue': {
@@ -81,6 +95,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'events',
 			},
 		},
 		'update:type': {
@@ -88,6 +103,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'image | audio' },
+				category: 'events',
 			},
 		},
 		'imageError': {
@@ -95,6 +111,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
 			},
 		},
 		'audioError': {
@@ -102,6 +119,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
 			},
 		},
 		'creationError': {
@@ -109,16 +127,59 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
+			},
+		},
+		'isClearable': {
+			description: 'Indique si le champ de captcha est effaçable ou non.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		'captchaId': {
+			description: 'L\'identifiant du captcha en cours. Utile pour les tests et la validation.',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+				category: 'expose',
+			},
+		},
+		'clearValidation': {
+			description: 'Méthode exposée pour effacer la validation du captcha.',
+			control: false,
+			table: {
+				type: { summary: '() => void' },
+				category: 'expose',
+			},
+		},
+		'validateOnSubmit': {
+			description: 'Méthode exposée pour déclencher les règles de validation.',
+			control: false,
+			table: {
+				type: { summary: '() => Promise<boolean>' },
+				category: 'expose',
+			},
+		},
+		'reset': {
+			description: 'Méthode exposée pour réinitialiser le captcha.',
+			control: false,
+			table: {
+				type: { summary: '() => void' },
+				category: 'expose',
 			},
 		},
+		...getValidationDocumentation(),
 	},
-
 }
 
 type Story = StoryObj<typeof Captcha>
 
 export const Default: Story = {
 	args: {
+		'showSuccessMessages': true,
 		'onUpdate:modelValue': fn(),
 		'onUpdate:type': fn(),
 		'onImageError': fn(),
@@ -133,26 +194,52 @@ export const Default: Story = {
 				watch(() => args.modelValue, () => {
 					captchaValue.value = args.modelValue
 				})
+
+				// Vérification simulée : seules ces réponses correspondent à l'image.
 				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 Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
 				}
 
-				return { args, captchaValue, verifyCaptcha }
+				const customRules = [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string) => String(value || '').length >= 6,
+							message: 'Le captcha doit contenir au moins 6 caractères.',
+						},
+					},
+					{
+						type: 'custom',
+						options: {
+							validate: async () => {
+								try {
+									const r = await verifyCaptcha()
+									return r.response.data.message === 'Success'
+								}
+								catch {
+									return false
+								}
+							},
+							message: 'Le captcha est incorrect',
+							successMessage: 'Le captcha est correct',
+						},
+					},
+				]
+
+				return { args, captchaValue, customRules }
 			},
 			template: `
                 <VCard class="pa-8" max-width="600" min-width="300">
-                    <Captcha 
+                    <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"
+						:custom-rules="customRules"
                     />
                 </VCard>
             `,
@@ -164,15 +251,12 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
     <VCard class="pa-8" max-width="600">
-        <Captcha 
+        <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) => { ... }"
+			:custom-rules="customRules"
+			show-success-messages
 		/>
     </VCard>
 </template>
@@ -183,6 +267,36 @@ export const Default: Story = {
 				code: `<script setup lang="ts">
 import { Captcha } from '@cnamts/Captcha'
 import { VCard } from 'vuetify/components'
+
+const verifyCaptcha = () => {
+	// Appelle l'API pour vérifier le captcha et retourne la réponse
+}
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value) => String(value || '').length >= 6,
+			message: 'Le captcha doit contenir au moins 6 caractères.',
+		},
+	},
+	{
+		type: 'custom',
+		options: {
+			validate: async () => {
+				try {
+					const r = await verifyCaptcha()
+					return r.response.data.message === 'Success'
+				}
+				catch {
+					return false
+				}
+			},
+			message: 'Le captcha est incorrect',
+			successMessage: 'Le captcha est correct',
+		},
+	},
+]
 </script>
                 `,
 			},
@@ -207,15 +321,8 @@ export const Choice: Story = {
 				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 }
+
+				return { args, captchaValue }
 			},
 			template: `
                 <VCard class="pa-8" max-width="600" min-width="300">
@@ -224,7 +331,6 @@ export const Choice: Story = {
                         url-get-image="/captcha/captcha.png"
                         url-get-audio="/captcha/captcha.mp3"
 						v-bind="args"
-						:service="verifyCaptcha"
 						v-model="captchaValue"
                     />
                 </VCard>
@@ -241,9 +347,6 @@ export const Choice: Story = {
 			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"

package/src/components/Captcha/Captcha.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { mdiCached, mdiImageOutline, mdiPause } from '@mdi/js'
-	import { ref, watch } from 'vue'
+	import { computed, ref, toRef, watch } from 'vue'
 	import CaptchaAlert from './CaptchaAlert.vue'
 	import CaptchaBase from './CaptchaBase.vue'
 	import CaptchaBtn from './CaptchaBtn.vue'
@@ -10,28 +10,20 @@
 	import CaptchaInformation from './CaptchaInformation.vue'
 	import volumeUp from './icons/volumeUp.vue'
 	import { locales as defaultLocales } from './locales'
-	import { type CaptchaType, type StateType } from './types'
+	import { type CaptchaProps, type CaptchaType, type StateType } from './types'
+	import { useCaptchaValidation } from './useCaptchaValidation'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { validationPropsDefaults } from '@/composables/unifyValidation/useValidation.ts'
 
-	const props = withDefaults(defineProps<{
-		urlCreate: string
-		urlGetImage: string
-		urlGetAudio: string
-		modelValue?: string | undefined
-		errorMessage?: string
-		type?: CaptchaType
-		tagTitle?: string
-		helpDesk?: string | false
-		locale?: string
-		locales?: typeof defaultLocales
-	}>(), {
+	const props = withDefaults(defineProps<CaptchaProps>(), {
 		modelValue: undefined,
-		errorMessage: undefined,
 		type: 'image',
 		helpDesk: '3648',
 		tagTitle: 'h3',
+		isClearable: false,
 		locale: navigator.language,
 		locales: () => defaultLocales,
+		...validationPropsDefaults,
 	})
 
 	const emit = defineEmits<{
@@ -41,19 +33,19 @@
 		(e: 'audioError'): void
 		(e: 'creationError'): void
 	}>()
-	const text = ref<string | null>(null)
+	const text = ref<string | null>(props.modelValue ?? 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 })
+		clearValidation()
+	})
 
 	watch(text, (val) => {
 		if (val !== props.modelValue) {
@@ -61,12 +53,21 @@
 		}
 	})
 
+	let firstLoading = true
 	function createCaptchaInit() {
+		if (firstLoading) {
+			return
+		}
 		text.value = null
 	}
 
 	function createCaptchaSuccess(captchaId: string | null) {
 		id.value = captchaId
+		if (firstLoading) {
+			firstLoading = false
+			return
+		}
+		clearValidation()
 	}
 
 	function emitChangeValueEvent(val: string) {
@@ -74,6 +75,7 @@
 	}
 
 	function emitChangeTypeEvent() {
+		clearValidation()
 		emit('update:type', type.value)
 	}
 
@@ -86,6 +88,54 @@
 		}
 	}
 
+	const focused = ref(false)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useCaptchaValidation({
+		modelValue: text,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: computed(() => type.value === 'image' ? props.locales.image.textfieldLabel : props.locales.audio.textfieldLabel),
+		rules: toRef(props, 'rules'),
+		customRules: toRef(props, 'customRules'),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+		locales: toRef(props, 'locales'),
+	})
+
+	function onFocus() {
+		focused.value = true
+	}
+
+	function onBlur() {
+		focused.value = false
+	}
+
+	function reset() {
+		text.value = null
+		state.value = 'idle'
+		clearValidation()
+	}
+
+	defineExpose({
+		validateOnSubmit: validate,
+		clearValidation,
+		reset,
+		captchaId: id,
+	})
+
 </script>
 
 <template>
@@ -141,10 +191,20 @@
 					:locales
 					:label="locales.image.textfieldLabel"
 					:state="createCaptchaState"
-					:errors="props.errorMessage ? [props.errorMessage] : []"
 					:loading="state === 'pending'"
-					:success="captchaValid"
+					:error-messages="errors"
+					:warning-messages="warnings"
+					:success-messages="successes"
+					:has-error="hasError"
+					:has-warning="hasWarning"
+					:has-success="hasSuccess"
+					:show-success-messages="props.showSuccessMessages"
+					:required="props.required"
+					:max-errors="props.maxErrors"
+					:is-clearable="props.isClearable"
 					@update:model-value="emitChangeValueEvent"
+					@focus="onFocus"
+					@blur="onBlur"
 				/>
 
 				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
@@ -233,12 +293,22 @@
 				<CaptchaForm
 					v-model="text"
 					:locales
-					:label="locales.audio.textfieldLabel"
+					:label="locales.image.textfieldLabel"
 					:state="createCaptchaState"
 					:loading="state === 'pending'"
-					:errors="props.errorMessage ? [props.errorMessage] : []"
-					:success="captchaValid"
+					:error-messages="errors"
+					:warning-messages="warnings"
+					:success-messages="successes"
+					:has-error="hasError"
+					:has-warning="hasWarning"
+					:has-success="hasSuccess"
+					:show-success-messages="props.showSuccessMessages"
+					:required="props.required"
+					:max-errors="props.maxErrors"
+					:is-clearable="props.isClearable"
 					@update:model-value="emitChangeValueEvent"
+					@focus="onFocus"
+					@blur="onBlur"
 				/>
 				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
 					<p class="label-options text-textSubdued">
@@ -282,9 +352,7 @@
 					>
 						{{ locales.choiceCaptcha.image }}
 					</CaptchaBtn>
-					<CaptchaBtn
-						@click="chooseAudio"
-					>
+					<CaptchaBtn @click="chooseAudio">
 						<volume-up
 							fill="#0C419A"
 							aria-hidden="true"
@@ -311,5 +379,4 @@
 	gap: var(--v-gap-2);
 	letter-spacing: 0%;
 }
-
 </style>

package/src/components/Captcha/CaptchaForm.vue

@@ -8,23 +8,53 @@
 		modelValue?: string | null
 		state?: string | null
 		loading?: boolean
-		errors: string[] | undefined
-		success: boolean
 		locales: typeof defaultLocales
+		success?: boolean // This prop is used to determine if the captcha validation was successful, and to set the input to readonly if true
+		errorMessages?: string[]
+		warningMessages?: string[]
+		successMessages?: string[]
+		hasError?: boolean
+		hasWarning?: boolean
+		hasSuccess?: boolean
+		showSuccessMessages?: boolean
+		required?: boolean
+		maxErrors?: number
+		isClearable?: boolean
 	}
 
-	const props = defineProps<Props>()
-	const emit = defineEmits(['update:modelValue'])
+	const props = withDefaults(defineProps<Props>(), {
+		modelValue: null,
+		state: null,
+		loading: false,
+		errorMessages: undefined,
+		warningMessages: undefined,
+		successMessages: undefined,
+		hasError: false,
+		hasWarning: false,
+		hasSuccess: false,
+		showSuccessMessages: false,
+		required: false,
+		maxErrors: undefined,
+	})
+	const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
 
 	const text = ref<string | null>(props.modelValue ?? null)
 
 	watch(() => props.modelValue, (newVal) => {
 		text.value = newVal ?? null
-	}, { immediate: true })
+	})
 
 	function emitChangeEvent() {
 		emit('update:modelValue', text.value)
 	}
+
+	function emitFocusEvent() {
+		emit('focus')
+	}
+
+	function emitBlurEvent() {
+		emit('blur')
+	}
 </script>
 
 <template>
@@ -33,26 +63,25 @@
 			v-model="text"
 			class="mt-4"
 			variant="outlined"
-			:error-messages="props.errors"
-			:custom-rules="[
-				{
-					type: 'required',
-					options: { message: locales.required },
-				}
-			]"
-			:show-success-messages="false"
-			:has-success="success"
+			:error-messages="props.errorMessages ?? []"
+			:warning-messages="props.warningMessages ?? []"
+			:success-messages="props.successMessages ?? []"
+			:has-error="props.hasError"
+			:has-warning="props.hasWarning"
+			:has-success="props.hasSuccess"
+			disable-error-handling
+			:show-success-messages="props.showSuccessMessages"
+			:required="props.required"
+			:max-errors="props.maxErrors"
 			:disabled="state === 'rejected'"
 			:label="label"
-			hide-details="auto"
-			:readonly="success"
-			:is-clearable="!success"
+			:hide-details="!props.hasError && !props.hasWarning && !props.hasSuccess"
+			:readonly="props.success"
+			:is-clearable="props.isClearable && !props.success"
+			:aria-required="required"
 			@update:model-value="emitChangeEvent"
+			@focus="emitFocusEvent"
+			@blur="emitBlurEvent"
 		/>
 	</VSheet>
 </template>
-<style lang="scss" scoped>
-:deep(.v-input__control:not(:has(.v-field--error))+.v-input__details) {
-	display: none;
-}
-</style>