@asd20/ui-next 2.23.5 → 2.24.0

package/src/helpers/publicFormDefinition.js

@@ -0,0 +1,236 @@
+export const SUPPORTED_PUBLIC_FORM_FIELD_TYPES = Object.freeze([
+  'text',
+  'email',
+  'tel',
+  'date',
+  'textarea',
+  'select',
+  'radio',
+  'checkbox',
+])
+
+const FIELD_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_]*$/
+const FORM_ID_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+const OPTION_VALUE_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const MAX_FIELDS = 50
+const MAX_OPTIONS = 100
+const MAX_TEXT_LENGTH = 10000
+
+function boundedText(value, label, maximum, required = false) {
+  if (value == null && !required) return ''
+  if (typeof value !== 'string') throw new Error(`${label} must be text.`)
+  const normalized = value.trim()
+  if (required && !normalized) throw new Error(`${label} is required.`)
+  if (normalized.length > maximum) throw new Error(`${label} is too long.`)
+  return normalized
+}
+
+function optionalLength(value, label) {
+  if (value == null) return undefined
+  if (!Number.isInteger(value) || value < 0 || value > MAX_TEXT_LENGTH) {
+    throw new Error(`${label} is invalid.`)
+  }
+  return value
+}
+
+function normalizeOptions(field) {
+  if (!['select', 'radio'].includes(field.type)) return undefined
+  if (
+    !Array.isArray(field.options) ||
+    !field.options.length ||
+    field.options.length > MAX_OPTIONS
+  ) {
+    throw new Error(`${field.label} must have approved choices.`)
+  }
+
+  const seen = new Set()
+  return field.options.map(option => {
+    const label = boundedText(option?.label, 'Option label', 200, true)
+    const value = boundedText(option?.value, 'Option value', 100, true)
+    if (!OPTION_VALUE_PATTERN.test(value))
+      throw new Error(`${field.label} has an invalid choice ID.`)
+    if (seen.has(value))
+      throw new Error(`${field.label} has duplicate choices.`)
+    seen.add(value)
+    return { label, value }
+  })
+}
+
+function normalizeField(field) {
+  if (!field || typeof field !== 'object' || Array.isArray(field)) {
+    throw new Error('The public form contains an invalid field.')
+  }
+
+  const name = boundedText(field.name, 'Field name', 64, true)
+  if (!FIELD_NAME_PATTERN.test(name))
+    throw new Error('The public form contains an invalid field name.')
+
+  const type = boundedText(field.type, 'Field type', 30, true)
+  if (!SUPPORTED_PUBLIC_FORM_FIELD_TYPES.includes(type)) {
+    throw new Error(
+      `The public form contains an unsupported field type: ${type}.`
+    )
+  }
+
+  const normalized = {
+    name,
+    type,
+    label: boundedText(field.label, 'Field label', 200, true),
+    helpText: boundedText(field.helpText, 'Field help text', 2000),
+    required: field.required === true,
+    minLength: optionalLength(field.minLength, 'Minimum length'),
+    maxLength: optionalLength(field.maxLength, 'Maximum length'),
+    autocomplete: boundedText(field.autocomplete, 'Autocomplete value', 100),
+    options: undefined,
+  }
+
+  if (
+    normalized.minLength != null &&
+    normalized.maxLength != null &&
+    normalized.minLength > normalized.maxLength
+  ) {
+    throw new Error(`${normalized.label} has invalid length limits.`)
+  }
+
+  normalized.options = normalizeOptions({
+    ...field,
+    type,
+    label: normalized.label,
+  })
+  return normalized
+}
+
+export function normalizePublicFormDefinition(definition) {
+  if (
+    !definition ||
+    typeof definition !== 'object' ||
+    Array.isArray(definition)
+  ) {
+    throw new Error('The public form definition is invalid.')
+  }
+  if (
+    !Array.isArray(definition.fields) ||
+    !definition.fields.length ||
+    definition.fields.length > MAX_FIELDS
+  ) {
+    throw new Error('The public form must contain approved fields.')
+  }
+
+  const fields = definition.fields.map(normalizeField)
+  const names = new Set(fields.map(field => field.name))
+  if (names.size !== fields.length)
+    throw new Error('The public form contains duplicate field names.')
+
+  const version = Number(definition.version)
+  if (!Number.isInteger(version) || version < 1)
+    throw new Error('The public form version is invalid.')
+
+  const fallbackContact = definition.fallbackContact
+  let normalizedFallback
+  if (fallbackContact != null) {
+    if (typeof fallbackContact !== 'object' || Array.isArray(fallbackContact)) {
+      throw new Error('The public form fallback contact is invalid.')
+    }
+    const email = boundedText(fallbackContact.email, 'Fallback email', 320)
+    const phone = boundedText(fallbackContact.phone, 'Fallback phone', 50)
+    if (email && !EMAIL_PATTERN.test(email))
+      throw new Error('The public form fallback email is invalid.')
+    normalizedFallback = { email, phone }
+  }
+
+  const id = boundedText(definition.id, 'Form ID', 100, true)
+  if (!FORM_ID_PATTERN.test(id)) throw new Error('The public form ID is invalid.')
+
+  return {
+    id,
+    version,
+    title: boundedText(definition.title, 'Form title', 200, true),
+    introduction: boundedText(
+      definition.introduction,
+      'Form introduction',
+      2000
+    ),
+    submitLabel: boundedText(definition.submitLabel, 'Submit label', 100, true),
+    successMessage: boundedText(
+      definition.successMessage,
+      'Success message',
+      1000,
+      true
+    ),
+    fallbackContact: normalizedFallback,
+    fields,
+  }
+}
+
+export function createPublicFormValues(definition) {
+  return Object.fromEntries(
+    definition.fields.map(field => [
+      field.name,
+      field.type === 'checkbox' ? false : '',
+    ])
+  )
+}
+
+function validDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false
+  const [year, month, day] = value.split('-').map(Number)
+  const date = new Date(Date.UTC(year, month - 1, day))
+  return (
+    date.getUTCFullYear() === year &&
+    date.getUTCMonth() === month - 1 &&
+    date.getUTCDate() === day
+  )
+}
+
+export function validatePublicFormValues(definition, sourceValues = {}) {
+  const errors = {}
+  const values = {}
+
+  for (const field of definition.fields) {
+    const rawValue = sourceValues[field.name]
+    const fieldErrors = []
+
+    if (field.type === 'checkbox') {
+      const value = rawValue === true
+      values[field.name] = value
+      if (field.required && !value)
+        fieldErrors.push(`${field.label} is required.`)
+    } else {
+      const hasInvalidType = rawValue != null && typeof rawValue !== 'string'
+      const value = typeof rawValue === 'string' ? rawValue.trim() : ''
+      values[field.name] = field.type === 'email' ? value.toLowerCase() : value
+
+      if (hasInvalidType) fieldErrors.push(`${field.label} must be text.`)
+      else if (field.required && !value)
+        fieldErrors.push(`${field.label} is required.`)
+      if (value && field.minLength != null && value.length < field.minLength) {
+        fieldErrors.push(
+          `${field.label} must be at least ${field.minLength} characters.`
+        )
+      }
+      if (value && field.maxLength != null && value.length > field.maxLength) {
+        fieldErrors.push(
+          `${field.label} must be ${field.maxLength} characters or fewer.`
+        )
+      }
+      if (value && field.type === 'email' && !EMAIL_PATTERN.test(value)) {
+        fieldErrors.push('Enter a valid email address.')
+      }
+      if (value && field.type === 'date' && !validDate(value)) {
+        fieldErrors.push(`Enter a valid ${field.label.toLowerCase()}.`)
+      }
+      if (value && ['select', 'radio'].includes(field.type)) {
+        const allowedValues = new Set(
+          (field.options || []).map(option => option.value)
+        )
+        if (!allowedValues.has(value))
+          fieldErrors.push(`Select a valid ${field.label.toLowerCase()}.`)
+      }
+    }
+
+    if (fieldErrors.length) errors[field.name] = fieldErrors
+  }
+
+  return { values, errors, valid: Object.keys(errors).length === 0 }
+}

package/src/helpers/publicForms.js

@@ -0,0 +1,66 @@
+import axios from 'axios'
+
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
+const PUBLIC_FORMS_ROUTE = '/api/public-forms'
+const PUBLIC_FORM_ID_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+function normalizeFormId(formId) {
+  const normalized =
+    typeof formId === 'string' ? formId.trim().toLowerCase() : ''
+  if (!PUBLIC_FORM_ID_PATTERN.test(normalized)) {
+    throw new Error('The public form ID is invalid.')
+  }
+  return normalized
+}
+
+export function resolvePublicFormsEndpoint({
+  endpoint = null,
+  functionsEndpoint = null,
+  runtimeConfig = {},
+} = {}) {
+  const explicitEndpoint = resolveRuntimeConfigValue({
+    explicitValue: endpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['publicFormsEndpoint'],
+    envKeys: ['PUBLIC_FORMS_ENDPOINT'],
+  })
+  if (explicitEndpoint) return normalizeBaseUrl(explicitEndpoint)
+
+  const resolvedFunctionsEndpoint = resolveRuntimeConfigValue({
+    explicitValue: functionsEndpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['functionsEndpoint'],
+    envKeys: ['FUNCTIONS_ENDPOINT'],
+  })
+  const baseUrl = normalizeBaseUrl(resolvedFunctionsEndpoint)
+  return baseUrl ? `${baseUrl}${PUBLIC_FORMS_ROUTE}` : null
+}
+
+export function resolvePublicFormEndpoints(formId, options = {}) {
+  const normalizedFormId = normalizeFormId(formId)
+  const baseEndpoint = resolvePublicFormsEndpoint(options)
+  if (!baseEndpoint) return { schema: null, submissions: null }
+
+  const schema = `${baseEndpoint}/${normalizedFormId}`
+  return { schema, submissions: `${schema}/submissions` }
+}
+
+export async function fetchPublicFormDefinition(formId, options = {}) {
+  const { schema } = resolvePublicFormEndpoints(formId, options)
+  if (!schema) throw new Error('The public forms endpoint is not configured.')
+
+  const response = await axios.get(schema)
+  return response.data
+}
+
+export async function submitPublicForm(formId, submission, options = {}) {
+  const { submissions } = resolvePublicFormEndpoints(formId, options)
+  if (!submissions)
+    throw new Error('The public forms endpoint is not configured.')
+
+  const response = await axios.post(submissions, submission)
+  return response.data
+}
+
+export { normalizeFormId }

package/src/helpers/sendAccessibilityIssue.js

@@ -1,71 +1,64 @@
 import axios from 'axios'
 
-import { resolveRuntimeConfigValue } from './runtimeConfig'
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
+const ACCESSIBILITY_ISSUE_ROUTE = '/api/accessibility/issues'
 
 function issueIsValid(issue) {
-  return !!issue.firstName && !!issue.lastName && !!issue.email && !!issue.issue
+  return Boolean(
+    issue &&
+      String(issue.firstName || '').trim() &&
+      String(issue.lastName || '').trim() &&
+      String(issue.email || '').trim() &&
+      String(issue.issue || '').trim()
+  )
 }
 
-export default async function sendAccessibilityIssue(
-  issue,
-  endpoint,
-  apiKey,
-  authCode,
-  options = {}
-) {
-  if (!issueIsValid(issue)) {
-    throw new Error('The issue object is incomplete or invalid.')
-  }
+export function resolveAccessibilityIssueEndpoint({
+  endpoint = null,
+  runtimeConfig = {},
+} = {}) {
+  const explicitEndpoint = resolveRuntimeConfigValue({
+    explicitValue: endpoint,
+    runtimeConfig,
+    runtimeConfigKeys: ['accessibilityIssueEndpoint'],
+    envKeys: ['ACCESSIBILITY_ISSUE_ENDPOINT'],
+  })
+  if (explicitEndpoint) return String(explicitEndpoint).trim()
 
-  const resolvedOptions =
-    options && typeof options === 'object' && !Array.isArray(options)
-      ? options
-      : {
-          categoryId: options,
-        }
-  const categoryId = resolveRuntimeConfigValue({
-    explicitValue: resolvedOptions.categoryId,
-    runtimeConfig: resolvedOptions.runtimeConfig,
-    runtimeConfigKeys: ['happyFoxCategoryId'],
-    envKeys: ['HAPPYFOX_CATEGORY_ID'],
+  const functionsEndpoint = resolveRuntimeConfigValue({
+    runtimeConfig,
+    runtimeConfigKeys: ['functionsEndpoint'],
+    envKeys: ['FUNCTIONS_ENDPOINT'],
   })
-  if (!categoryId) {
-    throw new Error('happyFoxCategoryId is required to send an accessibility issue.')
+  const baseUrl = normalizeBaseUrl(functionsEndpoint)
+
+  return baseUrl ? `${baseUrl}${ACCESSIBILITY_ISSUE_ROUTE}` : null
+}
+
+export default async function sendAccessibilityIssue(issue, endpoint) {
+  if (!issueIsValid(issue)) {
+    throw new Error('The issue object is incomplete or invalid.')
   }
 
-  const payload = {
-    name: `${issue.firstName} ${issue.lastName}`,
-    email: issue.email,
-    phone: issue.phone || '',
-    subject: 'Accessibility Issue Reported via External ASD20 Website',
-    html: `
-      <p><strong>Issue Details:</strong></p>
-      <p>${issue.issue}</p>
-      <p><strong>Mailing Address:</strong> ${issue.address || 'Not provided'}</p>
-      <p><strong>Organization:</strong> ${issue.organization || 'Not provided'}</p>
-    `,
-    category: Number(categoryId),
+  if (!endpoint) {
+    throw new Error('The accessibility issue endpoint is not configured.')
   }
 
   try {
-    const response = await axios.post(endpoint, payload, {
-      headers: {
-        Authorization: `Basic ${btoa(`${apiKey}:${authCode}`)}`,
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      }
-    })
-
+    const response = await axios.post(endpoint, issue)
     return response.data
   } catch (error) {
     if (error.response) {
-      throw new Error(
-        `HappyFox error ${error.response.status}: ${JSON.stringify(
+      const submissionError = new Error(
+        `Accessibility submission error ${error.response.status}: ${JSON.stringify(
           error.response.data
         )}`
       )
-    } else {
-      throw new Error(`Request error: ${error.message}`)
+      submissionError.response = error.response
+      throw submissionError
     }
+
+    throw new Error(`Accessibility submission request error: ${error.message}`)
   }
 }