@asd20/ui-next 2.23.5 → 2.24.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.24.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.6...ui-next-v2.24.0) (2026-09-16)
+
+
+### Features
+
+* add generic public form components ([12e7f88](https://github.com/academydistrict20/asd20-ui-next/commit/12e7f8812980744c46786b9effefe4cc15b5420a))
+
+## [2.23.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.5...ui-next-v2.23.6) (2026-09-16)
+
+
+### Bug Fixes
+
+* restore/harden accessibility issue form ([d7ef90c](https://github.com/academydistrict20/asd20-ui-next/commit/d7ef90c76f1675e53528374cf226d05d38af1929))
+
 ## [2.23.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.4...ui-next-v2.23.5) (2026-09-11)
 
 

package/components.js

@@ -50,6 +50,7 @@ export { default as Asd20Modal } from './src/components/molecules/Asd20Modal/ind
 export { default as Asd20Notification } from './src/components/molecules/Asd20Notification/index.vue'
 export { default as Asd20Picker } from './src/components/molecules/Asd20Picker/index.vue'
 export { default as Asd20Progress } from './src/components/molecules/Asd20Progress/index.vue'
+export { default as Asd20PublicFormField } from './src/components/molecules/Asd20PublicFormField/index.vue'
 export { default as Asd20SearchField } from './src/components/molecules/Asd20SearchField/index.vue'
 export { default as Asd20Share } from './src/components/molecules/Asd20Share/index.vue'
 export { default as Asd20SliderInput } from './src/components/molecules/Asd20SliderInput/index.vue'
@@ -93,6 +94,7 @@ export { default as Asd20PageHeader } from './src/components/organisms/Asd20Page
 export { default as Asd20PeopleList } from './src/components/organisms/Asd20PeopleList/index.vue'
 export { default as Asd20PersonModal } from './src/components/organisms/Asd20PersonModal/index.vue'
 export { default as Asd20PrimaryHeader } from './src/components/organisms/Asd20PrimaryHeader/index.vue'
+export { default as Asd20PublicFormModal } from './src/components/organisms/Asd20PublicFormModal/index.vue'
 export { default as Asd20QuicklinksMenu } from './src/components/organisms/Asd20QuicklinksMenu/index.vue'
 export { default as Asd20SchoolHomepageHeader } from './src/components/organisms/Asd20SchoolHomepageHeader/index.vue'
 export { default as Asd20SchoolHomepageVideoHeader } from './src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue'

package/helpers.js

@@ -36,6 +36,13 @@ export { default as organizationItemsByCategory } from './src/helpers/organizati
 export { default as organizationSubtitle } from './src/helpers/organizationSubtitle.js'
 export { default as organizationTitle } from './src/helpers/organizationTitle.js'
 export { default as preventWidows } from './src/helpers/prevent-widows.js'
+export {
+  fetchPublicFormDefinition,
+  normalizeFormId,
+  resolvePublicFormEndpoints,
+  resolvePublicFormsEndpoint,
+  submitPublicForm,
+} from './src/helpers/publicForms.js'
 export { default as queryAiSite } from './src/helpers/queryAiSite.js'
 export { default as queryDepartments } from './src/helpers/queryDepartments.js'
 export { default as queryEvents } from './src/helpers/queryEvents.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.23.5",
+  "version": "2.24.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20PublicFormField/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="asd20-public-form-field">
+    <asd20-text-area-input
+      v-if="field.type === 'textarea'"
+      :id="inputId"
+      :model-value="modelValue"
+      :label="displayLabel"
+      :required="field.required"
+      :minlength="field.minLength"
+      :maxlength="field.maxLength"
+      :autocomplete="field.autocomplete || undefined"
+      :aria-describedby="describedBy"
+      :aria-invalid="hasErrors ? 'true' : undefined"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+
+    <asd20-text-input
+      v-else-if="textInputTypes.includes(field.type)"
+      :id="inputId"
+      :model-value="modelValue"
+      :label="displayLabel"
+      :type="field.type"
+      :required="field.required"
+      :minlength="field.minLength"
+      :maxlength="field.maxLength"
+      :autocomplete="field.autocomplete || undefined"
+      :aria-describedby="describedBy"
+      :aria-invalid="hasErrors ? 'true' : undefined"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+
+    <div
+      v-else-if="field.type === 'select'"
+      class="asd20-public-form-field__select"
+    >
+      <label :for="inputId">{{ displayLabel }}</label>
+      <select
+        :id="inputId"
+        :value="modelValue"
+        :required="field.required"
+        :aria-describedby="describedBy"
+        :aria-invalid="hasErrors ? 'true' : undefined"
+        @change="$emit('update:modelValue', $event.target.value)"
+      >
+        <option value="">
+          Please select
+        </option>
+        <option
+          v-for="option in field.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+
+    <fieldset
+      v-else-if="field.type === 'radio'"
+      class="asd20-public-form-field__choices"
+      :aria-describedby="describedBy"
+      :aria-invalid="hasErrors ? 'true' : undefined"
+    >
+      <legend>{{ displayLabel }}</legend>
+      <label
+        v-for="option in field.options"
+        :key="option.value"
+        :for="`${inputId}-${option.value}`"
+      >
+        <input
+          :id="`${inputId}-${option.value}`"
+          :name="inputId"
+          type="radio"
+          :value="option.value"
+          :checked="modelValue === option.value"
+          :required="field.required"
+          @change="$emit('update:modelValue', option.value)"
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </fieldset>
+
+    <asd20-checkbox
+      v-else-if="field.type === 'checkbox'"
+      :id="inputId"
+      :model-value="modelValue === true"
+      :label="displayLabel"
+      checkbox
+      :required="field.required || undefined"
+      :aria-describedby="describedBy"
+      :aria-invalid="hasErrors ? 'true' : undefined"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+
+    <p
+      v-if="field.helpText"
+      :id="helpId"
+      class="asd20-public-form-field__help"
+    >
+      {{ field.helpText }}
+    </p>
+    <ul
+      v-if="hasErrors"
+      :id="errorId"
+      class="asd20-public-form-field__errors"
+    >
+      <li
+        v-for="error in errors"
+        :key="error"
+      >
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Asd20Checkbox from '../../atoms/Asd20Checkbox'
+import Asd20TextAreaInput from '../Asd20TextAreaInput'
+import Asd20TextInput from '../Asd20TextInput'
+
+export default {
+  name: 'Asd20PublicFormField',
+  components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
+  props: {
+    field: { type: Object, required: true },
+    modelValue: { type: [String, Boolean], default: '' },
+    errors: { type: Array, default: () => [] },
+    inputId: { type: String, required: true },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      textInputTypes: ['text', 'email', 'tel', 'date'],
+    }
+  },
+  computed: {
+    displayLabel() {
+      return this.field.required
+        ? `${this.field.label} (required)`
+        : this.field.label
+    },
+    helpId() {
+      return `${this.inputId}-help`
+    },
+    errorId() {
+      return `${this.inputId}-error`
+    },
+    hasErrors() {
+      return this.errors.length > 0
+    },
+    describedBy() {
+      return (
+        [
+          this.field.helpText ? this.helpId : '',
+          this.hasErrors ? this.errorId : '',
+        ]
+          .filter(Boolean)
+          .join(' ') || undefined
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../../design/component-stack' as *;
+
+.asd20-public-form-field {
+  margin-bottom: space(0.5);
+
+  &__select label,
+  legend {
+    color: var(--website-card__reverse-background-color);
+    display: block;
+    margin-bottom: space(0.125);
+  }
+
+  select {
+    background: white;
+    border: 2px solid var(--color__accent);
+    border-radius: var(--website-shape__radius-s);
+    box-sizing: border-box;
+    color: var(--website-card__reverse-background-color);
+    font: inherit;
+    padding: space(0.25);
+    width: 100%;
+  }
+
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__choices label {
+    align-items: center;
+    display: flex;
+    gap: space(0.25);
+    margin: space(0.125) 0;
+  }
+
+  &__help,
+  &__errors {
+    color: var(--website-card__reverse-background-color);
+    font-size: 0.75rem;
+    margin: space(0.125) 0 0;
+  }
+
+  &__errors {
+    color: asd20-swatch('emergency', -1);
+    padding-left: space(1);
+  }
+}
+</style>

package/src/components/organisms/Asd20AccessibilityIssueModal/index.vue

@@ -11,6 +11,8 @@
       <div
         v-if="submissionSuccess"
         class="submission-success"
+        role="status"
+        aria-live="polite"
       >
         <p style="text-align: center; font-weight: bold; font-size: 1.1rem;">
           Thank you! Your issue has been submitted.
@@ -60,6 +62,7 @@
           id="issue"
           v-model="form.issue"
           label="Describe the Issue"
+          maxlength="2000"
           help-text="<ul style='margin: 0 0 0.5rem 1rem; font-size: 0.75rem !important;'>
               <li>Specify the exact URL, program, service, or digital asset you had a problem with.</li>
               <li>Provide as much detail as possible, including the nature of the accessibility barrier, the date and time it occurred, any assistive technology you were using, or the nature of the program or service being denied.</li>
@@ -69,18 +72,55 @@
           :validator="validateIssue"
           @validated="validationErrors.issue = $event"
         />
-        <asd20-button
-          label="Submit Issue"
-          :disabled="!isValid || sending"
-          horizontal
-          centered
-          bordered
-          @click="sendAccessibilityIssue"
-        />
-        <asd20-spinner
-          v-if="sending"
-          size="sm"
-        />
+        <div
+          class="asd20-accessibility-issue-modal__honeypot"
+          aria-hidden="true"
+        >
+          <label for="accessibility-website">Website</label>
+          <input
+            id="accessibility-website"
+            v-model="form.website"
+            type="text"
+            name="website"
+            tabindex="-1"
+            autocomplete="off"
+          >
+        </div>
+        <div
+          class="asd20-accessibility-issue-modal__submit"
+          aria-live="polite"
+        >
+          <Recaptcha
+            v-if="!sending"
+            sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+            :load-recaptcha-script="true"
+            size="invisible"
+            @verify="captchaVerified"
+            @error="captchaFailed"
+          >
+            <asd20-button
+              label="Submit Issue"
+              :disabled="!isValid || sending"
+              horizontal
+              centered
+              bordered
+              @click="validateBeforeSend"
+            />
+          </Recaptcha>
+          <asd20-spinner
+            v-else
+            size="sm"
+          />
+        </div>
+        <div
+          v-if="feedbackMessage"
+          ref="feedback"
+          class="asd20-accessibility-issue-modal__feedback"
+          :role="feedbackRole"
+          tabindex="-1"
+        >
+          {{ feedbackMessage }}
+        </div>
       </template>
     </Asd20Viewport>
   </asd20-modal>
@@ -93,8 +133,10 @@ import Asd20TextAreaInput from '../../molecules/Asd20TextAreaInput'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20Spinner from '../../atoms/Asd20Spinner'
 import Asd20Button from '../../atoms/Asd20Button'
-
-// import sendAccessibilityIssue from '../../../helpers/sendAccessibilityIssue.js'
+import Recaptcha from '../../utils/Recaptcha'
+import sendAccessibilityIssue, {
+  resolveAccessibilityIssueEndpoint,
+} from '../../../helpers/sendAccessibilityIssue.js'
 
 export default {
   name: 'Asd20AccessibilityIssueModal',
@@ -105,6 +147,7 @@ export default {
     Asd20Viewport,
     Asd20Spinner,
     Asd20Button,
+    Recaptcha,
   },
   props: {
     open: { type: Boolean, default: false },
@@ -113,6 +156,8 @@ export default {
     return {
       sending: false,
       submissionSuccess: false,
+      feedbackMessage: '',
+      feedbackRole: 'alert',
       form: {
         firstName: '',
         lastName: '',
@@ -121,6 +166,7 @@ export default {
         address: '',
         organization: '',
         issue: '',
+        website: '',
       },
       validationErrors: {
         firstName: [],
@@ -135,13 +181,20 @@ export default {
       return Object.values(this.validationErrors).every(e => e.length === 0)
     },
   },
+  watch: {
+    open(value) {
+      if (value) {
+        this.submissionSuccess = false
+        this.feedbackMessage = ''
+      }
+    },
+  },
   methods: {
     validateEmailAddress({ value, validationErrors }) {
       const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       if (!pattern.test(value)) {
         validationErrors.push('A valid email address is required')
       }
-      console.log('Email validation errors:', validationErrors)
       return validationErrors
     },
     validateIssue({ value, validationErrors }) {
@@ -155,25 +208,116 @@ export default {
       }
       return validationErrors
     },
-    async sendAccessibilityIssue() {
-      if (!this.isValid) return
+    resolveRuntimeConfig() {
+      return (
+        this.$config ||
+        this.$?.appContext?.config?.globalProperties?.$config ||
+        {}
+      )
+    },
+    getFormValidationMessages() {
+      const messages = []
+      const emailPattern =
+        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+
+      if (!String(this.form.firstName || '').trim())
+        messages.push('First name is required.')
+      if (!String(this.form.lastName || '').trim())
+        messages.push('Last name is required.')
+      if (!emailPattern.test(String(this.form.email || '').trim()))
+        messages.push('Enter a valid email address.')
+
+      const issue = String(this.form.issue || '').trim()
+      if (!issue) messages.push('Describe the accessibility issue.')
+      else if (issue.length > 2000)
+        messages.push('The issue description must be 2,000 characters or fewer.')
+
+      return messages
+    },
+    validateBeforeSend(event) {
+      const messages = this.getFormValidationMessages()
+      if (!messages.length) return
+
+      event?.preventDefault?.()
+      this.showFeedback(messages.join(' '))
+    },
+    captchaVerified(token) {
+      if (token) this.sendAccessibilityIssue(token)
+    },
+    captchaFailed() {
+      this.showFeedback(
+        'The verification service could not start. Please try again or use the email and phone options on this page.'
+      )
+    },
+    showFeedback(message, role = 'alert') {
+      this.feedbackMessage = message
+      this.feedbackRole = role
+      this.$nextTick(() => this.$refs.feedback?.focus?.())
+    },
+    getServerFailureMessage(error) {
+      const status = Number(error?.response?.status || 0)
+      const serverMessage = error?.response?.data?.error
+
+      if (status === 400 && serverMessage) return serverMessage
+      if (status === 403)
+        return 'The verification was not accepted. Please try again.'
+      if (status === 429)
+        return 'Too many reports were submitted recently. Please wait and try again, or use the email and phone options on this page.'
+
+      return 'Something went wrong while submitting the form. Please try again later or use the email and phone options on this page.'
+    },
+    async sendAccessibilityIssue(captchaToken = '') {
+      const validationMessages = this.getFormValidationMessages()
+      if (validationMessages.length) {
+        this.showFeedback(validationMessages.join(' '))
+        return
+      }
+
+      const endpoint = resolveAccessibilityIssueEndpoint({
+        runtimeConfig: this.resolveRuntimeConfig(),
+      })
+      const submissionClient =
+        this.$sendAccessibilityIssue ||
+        (endpoint
+          ? async issue => await sendAccessibilityIssue(issue, endpoint)
+          : null)
+
+      if (!submissionClient) {
+        console.error('Accessibility issue endpoint is not configured.')
+        this.showFeedback(
+          'Issue reporting is not configured for this environment. Please use the email and phone options on this page.'
+        )
+        return
+      }
+
       this.sending = true
+      this.feedbackMessage = ''
 
       try {
-        // console.log('Sending accessibility issue:', this.form)
-        await this.$sendAccessibilityIssue(this.form)
+        await submissionClient({
+          ...this.form,
+          captchaToken,
+        })
         this.submissionSuccess = true
 
         // Wait 2 seconds, then close the modal
         setTimeout(() => {
           this.submissionSuccess = false
+          this.form = {
+            firstName: '',
+            lastName: '',
+            email: '',
+            phone: '',
+            address: '',
+            organization: '',
+            issue: '',
+            website: '',
+          }
           this.$emit('dismiss')
         }, 2000)
       } catch (e) {
         console.error('Accessibility issue submission failed:', e.message || e)
-        alert(
-          'Something went wrong while submitting the form. Please try again later.'
-        )
+        this.showFeedback(this.getServerFailureMessage(e))
       } finally {
         this.sending = false
       }
@@ -193,6 +337,27 @@ export default {
     font-family: Arial, sans-serif;
     font-size: 1rem;
   }
+
+  &__submit {
+    display: flex;
+    justify-content: center;
+    min-height: 3rem;
+  }
+
+  &__feedback {
+    font-weight: 600;
+    margin: space(0.5) 0;
+    text-align: center;
+  }
+
+  &__honeypot {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
 }
 
 @media (min-width: 1024px) {