@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Captcha/CaptchaBase.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+	import { onMounted, ref, watch } from 'vue'
+	import {
+		createCaptchaAudio,
+		createCaptchaImage,
+		getCaptchaAudioUrl,
+		getCaptchaImageUrl,
+	} from './captchaApi'
+	import type { CaptchaType, StateType } from './types'
+	import type { locales as defaultLocales } from './locales'
+
+	const props = defineProps<{
+		modelValue: CaptchaType
+		urlCreate: string
+		urlGetImage: string
+		urlGetAudio: string
+		locales: typeof defaultLocales
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'update:modelValue', modelValue: CaptchaType): void
+		(e: 'create-captcha:init'): void
+		(e: 'create-captcha:error', error: Error): void
+		(e: 'create-captcha:success', id: string | null): void
+	}>()
+
+	const type = ref<CaptchaType>(props.modelValue)
+	const id = ref<string | null>(null)
+	const url = ref<string | null>(null)
+	const audioElement = ref<HTMLAudioElement | null>(null)
+	const isPlaying = ref(false)
+	const isError = ref(false)
+	const errorMessage = ref<string | null>(null)
+	const state = ref<StateType>('idle')
+
+	onMounted(async () => {
+		await chooseType(props.modelValue)
+	})
+
+	watch(() => props.modelValue, async (newType) => {
+		if (type.value !== newType) {
+			type.value = newType
+			await chooseType(newType)
+		}
+	})
+
+	async function chooseType(selectedType: CaptchaType) {
+		updateType(selectedType)
+		resetError()
+
+		switch (selectedType) {
+		case 'image':
+			createImage()
+			break
+		case 'audio':
+			createAudio()
+			break
+		default:
+			break
+		}
+	}
+
+	function chooseImage() {
+		chooseType('image')
+	}
+
+	function chooseAudio() {
+		chooseType('audio')
+	}
+
+	function createImage() {
+		emitCreateInitEvent()
+		resetValues()
+
+		createCaptchaImage(
+			props.urlCreate,
+			(captchaId: string) => {
+				id.value = captchaId
+				url.value = getCaptchaImageUrl(props.urlGetImage, captchaId)
+				emitCreateSuccessEvent()
+				state.value = 'resolved'
+			},
+			onCreateCaptchaError,
+		)
+	}
+
+	function createAudio() {
+		emitCreateInitEvent()
+		resetValues()
+
+		createCaptchaAudio(
+			props.urlCreate,
+			(captchaId: string) => {
+				id.value = captchaId
+				url.value = getCaptchaAudioUrl(props.urlGetAudio, captchaId)
+
+				audioElement.value = new Audio(url.value)
+				audioElement.value.addEventListener('ended', () => {
+					isPlaying.value = false
+				})
+				audioElement.value.addEventListener('error', () => {
+					onCreateCaptchaError(new Error('Audio failed to load'))
+				})
+
+				emitCreateSuccessEvent()
+				state.value = 'resolved'
+			},
+			onCreateCaptchaError,
+		)
+	}
+
+	function resetValues() {
+		// Stop audio and clean up in a safe order
+		if (audioElement.value) {
+			try {
+				audioElement.value.pause()
+			}
+			catch {
+				// Ignore errors if audio element is already disposed
+			}
+			audioElement.value = null
+		}
+
+		url.value = null
+		id.value = null
+		state.value = 'pending'
+	}
+
+	function resetError() {
+		isError.value = false
+		errorMessage.value = null
+	}
+
+	function toggleAudio() {
+		if (!audioElement.value) return
+
+		if (isPlaying.value) {
+			audioElement.value.pause()
+			isPlaying.value = false
+		}
+		else {
+			audioElement.value.play()
+			isPlaying.value = true
+		}
+	}
+
+	function onCreateCaptchaError(error: Error) {
+		isError.value = true
+
+		try {
+			errorMessage.value = JSON.parse(error.message)
+		}
+		catch {
+			errorMessage.value = props.locales.defaultErrorMessage
+		}
+
+		emitCreateErrorEvent(error)
+		state.value = 'rejected'
+	}
+
+	function updateType(selectedType: CaptchaType) {
+		type.value = selectedType
+		emitTypeChangeEvent(selectedType)
+	}
+
+	function emitTypeChangeEvent(newType: CaptchaType) {
+		emit('update:modelValue', newType)
+	}
+
+	function emitCreateInitEvent() {
+		emit('create-captcha:init')
+	}
+
+	function emitCreateErrorEvent(error: Error) {
+		emit('create-captcha:error', error)
+	}
+
+	function emitCreateSuccessEvent() {
+		emit('create-captcha:success', id.value)
+	}
+</script>
+
+<template>
+	<div class="captcha">
+		<slot
+			v-if="type === 'image'"
+			name="image"
+			:choose-image="chooseImage"
+			:choose-audio="chooseAudio"
+			:url="url"
+			:is-error="isError"
+			:error-message="errorMessage"
+			:state="state"
+		/>
+
+		<slot
+			v-else-if="type === 'audio'"
+			name="audio"
+			:choose-image="chooseImage"
+			:choose-audio="chooseAudio"
+			:toggle-audio="toggleAudio"
+			:url="url"
+			:is-error="isError"
+			:error-message="errorMessage"
+			:is-playing="isPlaying"
+			:state="state"
+		/>
+
+		<slot
+			v-else
+			name="default"
+			:choose-image="chooseImage"
+			:choose-audio="chooseAudio"
+			:is-error="isError"
+			:error-message="errorMessage"
+			:state="state"
+		/>
+	</div>
+</template>

package/src/components/Captcha/CaptchaBtn.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+
+	defineProps<{
+		prependIcon?: string
+	}>()
+
+</script>
+
+<template>
+	<button
+		class="captcha-btn text-primary"
+		type="button"
+	>
+		<SyIcon
+			v-if="prependIcon"
+			size="x-small"
+			:icon="prependIcon"
+			decorative
+		/>
+		<slot />
+	</button>
+</template>
+
+<style scoped lang="scss">
+	.captcha-btn {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px 8px;
+		font-weight: 700;
+		font-size: 0.875rem;
+	}
+</style>

package/src/components/Captcha/CaptchaForm.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+	import { ref, watch } from 'vue'
+	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
+	import type { locales as defaultLocales } from './locales'
+
+	interface Props {
+		label: string
+		modelValue?: string | null
+		state?: string | null
+		loading?: boolean
+		errors: string[] | undefined
+		success: boolean
+		locales: typeof defaultLocales
+	}
+
+	const props = defineProps<Props>()
+	const emit = defineEmits(['update:modelValue'])
+
+	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)
+	}
+</script>
+
+<template>
+	<VSheet>
+		<SyTextField
+			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"
+			:disabled="state === 'rejected'"
+			:label="label"
+			hide-details="auto"
+			:readonly="success"
+			:is-clearable="!success"
+			@update:model-value="emitChangeEvent"
+		/>
+	</VSheet>
+</template>
+<style lang="scss" scoped>
+:deep(.v-input__control:not(:has(.v-field--error))+.v-input__details) {
+	display: none;
+}
+</style>

package/src/components/Captcha/CaptchaImg.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+	import type { locales as defaultLocales } from './locales'
+
+	defineProps<{
+		state: string
+		src?: string | null
+		locales: typeof defaultLocales
+	}>()
+
+	defineEmits<{
+		(e: 'imageError'): void
+	}>()
+</script>
+
+<template>
+	<div>
+		<VSkeletonLoader
+			v-if="state === 'pending'"
+			:aria-label="locales.captchaImgLoading"
+			type="image"
+			height="64"
+			width="311"
+			tile
+		/>
+
+		<img
+			v-else
+			height="64"
+			width="311"
+			:alt="locales.captchaImgAlt"
+			:src="src as string"
+			@error="$emit('imageError')"
+		>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.v-skeleton-loader__image) {
+	height: 100%;
+}
+</style>

package/src/components/Captcha/CaptchaInformation.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+	import type { CaptchaType } from './types'
+	import type { locales as defaultLocales } from './locales'
+
+	interface Props {
+		type?: CaptchaType | string
+		tagTitle?: string
+		locales: typeof defaultLocales
+	}
+
+	withDefaults(defineProps<Props>(), {
+		type: undefined,
+		tagTitle: 'h3',
+	})
+</script>
+
+<template>
+	<div>
+		<div class="d-flex flex-row align-center">
+			<component
+				:is="tagTitle"
+				class="captcha-title text-textBase"
+			>
+				{{ locales.information.securityCheck }}
+			</component>
+		</div>
+
+		<div
+			v-if="type"
+		>
+			<div v-if="type === 'image'">
+				<p class="captcha-instructions text-textSubdued">
+					{{ locales.information.imageInstruction }}
+				</p>
+
+				<slot name="error" />
+			</div>
+
+			<div v-if="type === 'audio'">
+				<p class="captcha-instructions text-textSubdued">
+					{{ locales.information.audioInstruction }}
+				</p>
+
+				<slot name="error" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.captcha-title {
+		font-weight: 700;
+		font-size: 1.125rem;
+		line-height: 150%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.captcha-instructions {
+		font-size: 1rem;
+		line-height: 150%;
+		font-weight: 400;
+	}
+</style>

package/src/components/Captcha/captchaApi.ts

@@ -0,0 +1,111 @@
+const reGet = /CAPTCHAID/
+
+type SuccessCallback = (captchaId: string) => void
+type ErrorCallback = (error: Error) => void
+
+/**
+ * Création du captcha auprès d'OBS
+ * @param urlCreate - URL de création
+ * @param body - Corps de la requête (peut être un Document ou un BodyInit)
+ * @param cbsuccess - Fonction à appeler en cas de succès
+ * @param cberror - Fonction à appeler en cas d'erreur
+ */
+export function createCaptcha(
+	urlCreate: string,
+	body: string | null,
+	cbsuccess: SuccessCallback,
+	cberror: ErrorCallback,
+): void {
+	fetch(urlCreate, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: body,
+	})
+		.then(async (response) => {
+			if (response.ok) {
+				try {
+					const json = await response.json()
+					cbsuccess(json.id)
+				}
+				catch (err) {
+					cberror(err as Error)
+				}
+			}
+			else {
+				cberror(response.statusText ? new Error(response.statusText) : new Error('Erreur inconnue'))
+			}
+		})
+		.catch((error) => {
+			cberror(error)
+		})
+}
+
+/**
+ * Création d'un captcha image auprès d'OBS avec locale par défaut
+ * @param urlCreate - URL de création
+ * @param cbsuccess - Callback de succès
+ * @param cberror - Callback d'erreur
+ * @param locale - Locale (langue)
+ */
+export function createCaptchaImage(
+	urlCreate: string,
+	cbsuccess: SuccessCallback,
+	cberror: ErrorCallback,
+	locale: string = 'default',
+): void {
+	const body = JSON.stringify({
+		type: 'IMAGE',
+		locale,
+	})
+
+	createCaptcha(urlCreate, body, cbsuccess, cberror)
+}
+
+/**
+ * Création d'un captcha audio auprès d'OBS
+ * @param urlCreate - URL de création
+ * @param cbsuccess - Callback de succès
+ * @param cberror - Callback d'erreur
+ * @param locale - Locale (langue), "default" si non indiqué
+ */
+export function createCaptchaAudio(
+	urlCreate: string,
+	cbsuccess: SuccessCallback,
+	cberror: ErrorCallback,
+	locale: string = 'default',
+): void {
+	const body = JSON.stringify({
+		type: 'AUDIO',
+		locale,
+	})
+
+	createCaptcha(urlCreate, body, cbsuccess, cberror)
+}
+
+/**
+ * Génère l'URL de récupération de l'image du captcha
+ * @param urlGetImage - URL avec le placeholder CAPTCHAID
+ * @param captchaId - Identifiant du captcha
+ * @returns L'URL avec l'identifiant inséré
+ */
+export function getCaptchaImageUrl(
+	urlGetImage: string,
+	captchaId: string,
+): string {
+	return urlGetImage.replace(reGet, captchaId)
+}
+
+/**
+ * Génère l'URL de récupération de l'audio du captcha
+ * @param urlGetAudio - URL avec le placeholder CAPTCHAID
+ * @param captchaId - Identifiant du captcha
+ * @returns L'URL avec l'identifiant inséré
+ */
+export function getCaptchaAudioUrl(
+	urlGetAudio: string,
+	captchaId: string,
+): string {
+	return urlGetAudio.replace(reGet, captchaId)
+}

package/src/components/Captcha/icons/volumeUp.vue

@@ -0,0 +1,11 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		fill="#1f1f1f"
+	>
+		<path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z" />
+	</svg>
+</template>

package/src/components/Captcha/locales.ts

@@ -0,0 +1,35 @@
+export const locales = {
+	hardToRead: 'Vous n\'arrivez pas à lire ?',
+	image: {
+		new: 'Changer d’image',
+		change: 'Utiliser un captcha audio',
+		textfieldLabel: 'Caractères de l’image',
+	},
+	audio: {
+		new: 'Changer d’audio',
+		change: 'Utiliser un captcha image',
+		textfieldLabel: 'Caractères de l’audio',
+		loading: 'Chargement de l\'audio du captcha',
+	},
+	choiceCaptcha: {
+		image: 'captcha image',
+		audio: 'captcha audio',
+	},
+	helpDesk: (phoneNumber: string) => `Si vous êtes en incapacité de résoudre le captcha, contactez le support au ${phoneNumber}.`,
+	pause: 'Pause',
+	play: 'Lire l\'audio',
+	renew: 'Renouveler le captcha',
+	validate: 'Vérifier',
+	captchaImgLoading: 'Chargement de l\'image du captcha',
+	captchaImgAlt: 'Le captcha à saisir',
+	information: {
+		securityCheck: 'Vérification de sécurité',
+		btnAriaLabel: 'Ouvrir la bulle d’information',
+		tooltip: 'Nous nous assurons ainsi que vous êtes un être humain, et non un robot.',
+		imageInstruction: 'Saisissez les caractères affichés ci-dessous.',
+		audioInstruction: 'Saisissez le texte que vous entendez.',
+	},
+	defaultErrorMessage: 'Une erreur inconnue est survenue',
+	required: 'Le captcha est requis',
+	choiceCaptchaTitle: 'Choisissez le type de captcha de votre choix.',
+}

package/src/components/Captcha/readme.md

@@ -0,0 +1,5 @@
+https://gitlab.cnqd.cnamts.fr/captcha/capt_x
+http://pad-st.cnamts.fr/pad-ddst/fabricant/dait/captcha/fiche-resume.html
+http://pad-st.cnamts.fr/pad-ddst/fabricant/dait/captcha/demo/captcha.html
+https://gitlab.cnqd.cnamts.fr/captcha/captcha-vue-design-system
+https://gitlab.cnqd.cnamts.fr/captcha/captchavue