@softdin/shared 0.1.3

package/src/components/auth/DataProcessingConsentCheckbox.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { authService } from '../../auth'
+import type { DataProcessingConsentPolicy } from '../../types/auth'
+
+const model = defineModel<boolean>({ default: false })
+
+const loading = ref(true)
+const showModal = ref(false)
+const error = ref<string | null>(null)
+const policy = ref<DataProcessingConsentPolicy | null>(null)
+
+onMounted(async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    policy.value = await authService.fetchDataProcessingConsentPolicy()
+  } catch {
+    error.value = 'No se pudo cargar el texto del consentimiento.'
+  } finally {
+    loading.value = false
+  }
+})
+
+function openModal(): void {
+  if (!policy.value) {
+    return
+  }
+  showModal.value = true
+}
+
+function closeModal(): void {
+  showModal.value = false
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape' && showModal.value) {
+    closeModal()
+  }
+}
+
+watch(showModal, (open) => {
+  if (open) {
+    document.addEventListener('keydown', onKeydown)
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.removeEventListener('keydown', onKeydown)
+    document.body.style.overflow = ''
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeydown)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <div class="consent-box">
+    <label class="consent-check">
+      <input
+        v-model="model"
+        type="checkbox"
+        class="consent-input"
+        required
+      />
+      <span class="consent-label">
+        Acepto el
+        <strong>Consentimiento de Tratamiento de Datos Personales</strong>
+        <template v-if="policy"> (v{{ policy.version }})</template>.
+        Sin esta aceptación no podrá ingresar. Solo se solicita una vez.
+      </span>
+    </label>
+
+    <button
+      type="button"
+      class="consent-toggle"
+      :disabled="loading || !policy"
+      @click="openModal"
+    >
+      Leer consentimiento
+    </button>
+
+    <p v-if="error" class="consent-error">{{ error }}</p>
+  </div>
+
+  <Teleport to="body">
+    <div
+      v-if="showModal && policy"
+      class="consent-backdrop"
+      @click.self="closeModal"
+    >
+      <section
+        class="consent-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="consent-modal-title"
+      >
+        <header class="consent-modal-header">
+          <div>
+            <p class="consent-modal-kicker">Política de privacidad</p>
+            <h2 id="consent-modal-title" class="consent-modal-title">
+              {{ policy.title }}
+            </h2>
+            <p class="consent-modal-version">Versión {{ policy.version }}</p>
+          </div>
+          <button
+            type="button"
+            class="consent-modal-close"
+            aria-label="Cerrar"
+            @click="closeModal"
+          >
+            ×
+          </button>
+        </header>
+
+        <div class="consent-modal-body">
+          <p class="consent-summary">{{ policy.summary }}</p>
+          <p
+            v-for="(paragraph, index) in policy.paragraphs"
+            :key="index"
+            class="consent-paragraph"
+          >
+            {{ paragraph }}
+          </p>
+        </div>
+
+        <footer class="consent-modal-footer">
+          <button type="button" class="consent-modal-confirm" @click="closeModal">
+            Cerrar
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.consent-box {
+  border-radius: 0.5rem;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.consent-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  cursor: pointer;
+}
+
+.consent-input {
+  margin-top: 0.2rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  accent-color: var(--color-brand-600, #16a34a);
+}
+
+.consent-label {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: #334155;
+}
+
+.consent-toggle {
+  align-self: flex-start;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-brand-700, #15803d);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.consent-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.consent-error {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #b91c1c;
+}
+
+.consent-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.55);
+}
+
+.consent-modal {
+  width: min(36rem, 100%);
+  max-height: min(85vh, 40rem);
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  background: #fff;
+  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
+}
+
+.consent-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem 1.25rem 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.consent-modal-kicker {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-brand-700, #15803d);
+}
+
+.consent-modal-title {
+  margin: 0.25rem 0 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.3;
+  color: #0f172a;
+}
+
+.consent-modal-version {
+  margin: 0.35rem 0 0;
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.consent-modal-close {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  color: #334155;
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.consent-modal-close:hover {
+  background: #e2e8f0;
+}
+
+.consent-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+.consent-summary,
+.consent-paragraph {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: #475569;
+}
+
+.consent-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.consent-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.875rem 1.25rem 1.25rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.consent-modal-confirm {
+  border: 0;
+  border-radius: 0.5rem;
+  background: var(--color-brand-600, #16a34a);
+  padding: 0.55rem 1.1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+}
+
+.consent-modal-confirm:hover {
+  background: var(--color-brand-700, #15803d);
+}
+</style>

package/src/components/auth/DataProcessingConsentForm.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { authService } from '../../auth'
+import type { DataProcessingConsentPolicy, User } from '../../types/auth'
+
+const emit = defineEmits<{
+  accepted: [user?: User]
+  rejected: [message: string]
+}>()
+
+const loading = ref(true)
+const submitting = ref(false)
+const error = ref<string | null>(null)
+const policy = ref<DataProcessingConsentPolicy | null>(null)
+
+onMounted(async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    policy.value = await authService.fetchDataProcessingConsent()
+  } catch {
+    error.value = 'No se pudo cargar el consentimiento de tratamiento de datos.'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function accept(): Promise<void> {
+  submitting.value = true
+  error.value = null
+
+  try {
+    const data = await authService.submitDataProcessingConsent(true)
+    if (!data.accepted) {
+      error.value = data.message || 'No se pudo registrar el consentimiento.'
+      return
+    }
+    emit('accepted', data.user)
+  } catch {
+    error.value = 'No se pudo registrar el consentimiento. Intente nuevamente.'
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function reject(): Promise<void> {
+  submitting.value = true
+  error.value = null
+
+  try {
+    const data = await authService.submitDataProcessingConsent(false)
+    emit('rejected', data.message || 'Debe aceptar el consentimiento para ingresar.')
+  } catch {
+    emit('rejected', 'Debe aceptar el consentimiento de tratamiento de datos personales para ingresar.')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div v-if="loading" class="rounded-lg bg-slate-50 px-4 py-6 text-center text-sm text-slate-500">
+      Cargando consentimiento…
+    </div>
+
+    <template v-else-if="policy">
+      <p class="text-sm leading-relaxed text-slate-600">
+        {{ policy.summary }}
+      </p>
+
+      <div
+        class="max-h-64 space-y-3 overflow-y-auto rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm leading-relaxed text-slate-700"
+      >
+        <p v-for="(paragraph, index) in policy.paragraphs" :key="index">
+          {{ paragraph }}
+        </p>
+      </div>
+
+      <p class="text-xs text-slate-400">Versión {{ policy.version }}</p>
+    </template>
+
+    <p
+      v-if="error"
+      class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
+      role="alert"
+    >
+      {{ error }}
+    </p>
+
+    <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+      <button
+        type="button"
+        class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+        :disabled="loading || submitting || !policy"
+        @click="reject"
+      >
+        No acepto
+      </button>
+      <button
+        type="button"
+        class="rounded-lg bg-[var(--color-brand-700,#166534)] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-[var(--color-brand-800,#14532d)] disabled:cursor-not-allowed disabled:opacity-60"
+        :disabled="loading || submitting || !policy"
+        @click="accept"
+      >
+        {{ submitting ? 'Procesando…' : 'Acepto' }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/forms/ErrorAlert.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    message: string
+    detail?: string | null
+  }>(),
+  {
+    detail: null,
+  },
+)
+
+const copied = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | null = null
+
+const copyText = computed(() => {
+  const parts = [props.message.trim()]
+  if (props.detail && props.detail.trim() !== '') {
+    parts.push(props.detail.trim())
+  }
+  return parts.join('\n\n')
+})
+
+async function copyContent(): Promise<void> {
+  const text = copyText.value
+  if (!text) {
+    return
+  }
+
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.setAttribute('readonly', '')
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+
+    copied.value = true
+    if (copiedTimer) {
+      clearTimeout(copiedTimer)
+    }
+    copiedTimer = setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch {
+    copied.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="softdin-error-alert" role="alert">
+    <div class="softdin-error-alert__body">
+      <p class="softdin-error-alert__message">{{ message }}</p>
+      <pre v-if="detail" class="softdin-error-alert__detail">{{ detail }}</pre>
+    </div>
+    <button
+      type="button"
+      class="softdin-error-alert__copy"
+      :class="{ 'is-copied': copied }"
+      :aria-label="copied ? 'Contenido copiado' : 'Copiar contenido del error'"
+      :title="copied ? 'Copiado' : 'Copiar'"
+      @click="copyContent"
+    >
+      <svg
+        v-if="copied"
+        class="softdin-error-alert__icon"
+        viewBox="0 0 20 20"
+        aria-hidden="true"
+      >
+        <path
+          fill="currentColor"
+          d="M8.3 14.7a1 1 0 0 1-.7-.3l-3-3a1 1 0 1 1 1.4-1.4l2.3 2.3 5.3-5.3a1 1 0 1 1 1.4 1.4l-6 6a1 1 0 0 1-.7.3Z"
+        />
+      </svg>
+      <svg
+        v-else
+        class="softdin-error-alert__icon"
+        viewBox="0 0 20 20"
+        aria-hidden="true"
+      >
+        <path
+          fill="currentColor"
+          d="M7 3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V3Zm2 2h4v8h1V3H9v2ZM5 7v10h6V7H5Z"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.softdin-error-alert {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.875rem;
+  border-radius: 0.5rem;
+  background: #fef2f2;
+  padding: 0.625rem 0.75rem;
+  color: #b91c1c;
+}
+
+.softdin-error-alert__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.softdin-error-alert__message {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.softdin-error-alert__detail {
+  margin: 0.75rem 0 0;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  background: #fff1f2;
+  border: 1px solid #fecaca;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  color: #7f1d1d;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 16rem;
+  overflow: auto;
+}
+
+.softdin-error-alert__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.375rem;
+  border: 1px solid #fecaca;
+  background: #fff;
+  padding: 0;
+  color: #b91c1c;
+  cursor: pointer;
+}
+
+.softdin-error-alert__copy:hover {
+  background: #fff1f2;
+}
+
+.softdin-error-alert__copy.is-copied {
+  border-color: #86efac;
+  color: #15803d;
+  background: #f0fdf4;
+}
+
+.softdin-error-alert__icon {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+}
+</style>

package/src/components/forms/FormCancelButton.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+    label?: string
+  }>(),
+  {
+    disabled: false,
+    label: 'Cancelar',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-cancel"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <svg class="softdin-form-cancel__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="10" cy="10" r="8" />
+      <path d="M6.5 6.5l7 7M13.5 6.5l-7 7" />
+    </svg>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.25rem;
+  border-radius: 9999px;
+  border: 1px solid #fbbf24;
+  background: #fffbeb;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #92400e;
+  cursor: pointer;
+  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+
+.softdin-form-cancel:hover:not(:disabled) {
+  background: #fef3c7;
+  box-shadow: 0 4px 10px rgba(146, 64, 14, 0.12);
+  transform: translateY(-2px);
+}
+
+.softdin-form-cancel:focus-visible {
+  outline: 2px solid #d97706;
+  outline-offset: 2px;
+}
+
+.softdin-form-cancel:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.softdin-form-cancel__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-cancel {
+    transition: none;
+  }
+
+  .softdin-form-cancel:hover:not(:disabled) {
+    transform: none;
+  }
+}
+</style>