@asd20/ui-next 2.23.4 → 2.23.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.23.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.4...ui-next-v2.23.5) (2026-09-11)
+
+
+### Bug Fixes
+
+* explain directory email validation errors ([#1](https://github.com/academydistrict20/asd20-ui-next/issues/1)) ([070c408](https://github.com/academydistrict20/asd20-ui-next/commit/070c40854c1ec4f8790abfc4077da9c0aa7b44e6))
+
 ## [2.23.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.3...ui-next-v2.23.4) (2026-09-10)
 
 

package/package.json

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

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

@@ -12,6 +12,7 @@
       <asd20-text-input
         id="senderName"
         v-model="emailMessage.senderName"
+        :validator="validateSenderName"
         label="Your Full Name"
         required
         @validated="validationErrors.senderName = $event"
@@ -28,6 +29,7 @@
       <asd20-text-input
         id="subject"
         v-model="emailMessage.subject"
+        :validator="validateSubject"
         label="Subject"
         maxlength="200"
         required
@@ -36,8 +38,10 @@
       <asd20-text-area-input
         id="messageBody"
         v-model="emailMessage.messageBody"
+        :validator="validateMessageBody"
         label="Message"
         maxlength="8000"
+        help-text="Please enter at least 5 characters."
         required
         @validated="validationErrors.messageBody = $event"
       />
@@ -46,18 +50,18 @@
         aria-live="polite"
       >
         <Recaptcha
-          v-if="!sending && !sendSucceeded && !sendRejected"
+          v-if="!sending && !sendSucceeded"
           sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
           :load-recaptcha-script="true"
           size="invisible"
           @verify="captchaVerified"
         >
           <asd20-button
-            :disabled="!isValid"
             label="Send"
             horizontal
             centered
             bordered
+            @click="validateBeforeSend"
           />
         </Recaptcha>
         <asd20-spinner
@@ -73,6 +77,40 @@
         </p>
       </div>
     </Asd20Viewport>
+
+    <asd20-modal
+      :open="feedbackModalOpen"
+      :title="feedbackTitle"
+      icon="alert"
+      dismissable
+      windowed
+      class="asd20-compose-email-modal__feedback-modal"
+      @dismiss="dismissFeedbackModal"
+    >
+      <div
+        class="asd20-compose-email-modal__feedback"
+        role="alert"
+      >
+        <p>{{ feedbackIntroduction }}</p>
+        <ul v-if="feedbackMessages.length">
+          <li
+            v-for="message in feedbackMessages"
+            :key="message"
+          >
+            {{ message }}
+          </li>
+        </ul>
+      </div>
+      <template #footer>
+        <asd20-button
+          label="Return to form"
+          horizontal
+          centered
+          bordered
+          @click="dismissFeedbackModal"
+        />
+      </template>
+    </asd20-modal>
   </asd20-modal>
 </template>
 
@@ -111,7 +149,10 @@ export default {
     composing: false,
     sending: false,
     sendSucceeded: false,
-    sendRejected: false,
+    feedbackModalOpen: false,
+    feedbackTitle: '',
+    feedbackIntroduction: '',
+    feedbackMessages: [],
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -124,16 +165,11 @@ export default {
       return 'Send an Email'
     },
     sendStatusMessage() {
-      return this.sendRejected
-        ? "Your message couldn't be sent via this form."
-        : 'Your message was sent.'
+      return 'Your message was sent.'
     },
     isValid() {
       return (
-        Boolean(this.emailMessage.senderName) &&
-        Boolean(this.emailMessage.senderEmail) &&
-        Boolean(this.emailMessage.subject) &&
-        Boolean(this.emailMessage.messageBody) &&
+        this.getFormValidationMessages().length === 0 &&
         this.validationErrors.senderName.length === 0 &&
         this.validationErrors.senderEmail.length === 0 &&
         this.validationErrors.subject.length === 0 &&
@@ -176,10 +212,57 @@ export default {
       const pattern =
         /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       const regex = RegExp(pattern)
-      if (!regex.test(value))
+      if (!regex.test(String(value || '').trim()))
         validationErrors.push('A valid email address is required')
       return validationErrors
     },
+    validateSenderName({ value, validationErrors }) {
+      if (!String(value || '').trim())
+        validationErrors.push('Your full name is required.')
+      return validationErrors
+    },
+    validateSubject({ value, validationErrors }) {
+      if (!String(value || '').trim())
+        validationErrors.push('A subject is required.')
+      return validationErrors
+    },
+    validateMessageBody({ value, validationErrors }) {
+      const message = String(value || '').trim()
+      if (message && message.length < 5)
+        validationErrors.push('The message must be at least 5 characters.')
+      return validationErrors
+    },
+    getFormValidationMessages() {
+      const messages = []
+      const senderName = String(this.emailMessage.senderName || '').trim()
+      const senderEmail = String(this.emailMessage.senderEmail || '').trim()
+      const subject = String(this.emailMessage.subject || '').trim()
+      const messageBody = String(this.emailMessage.messageBody || '').trim()
+      const emailPattern =
+        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+
+      if (!senderName) messages.push('Your full name is required.')
+      if (!senderEmail) messages.push('Your email address is required.')
+      else if (!emailPattern.test(senderEmail))
+        messages.push('Enter a valid email address.')
+      if (!subject) messages.push('A subject is required.')
+      if (!messageBody) messages.push('A message is required.')
+      else if (messageBody.length < 5)
+        messages.push('The message must be at least 5 characters.')
+
+      return messages
+    },
+    validateBeforeSend(event) {
+      const messages = this.getFormValidationMessages()
+      if (!messages.length) return
+
+      event?.preventDefault?.()
+      this.showFeedback(
+        'Please check your message',
+        'Correct the following fields before sending:',
+        messages
+      )
+    },
     composeEmail() {
       if (!this.recipientId) return
       this.emailMessage = {
@@ -198,7 +281,16 @@ export default {
     resetSendState() {
       this.sending = false
       this.sendSucceeded = false
-      this.sendRejected = false
+      this.dismissFeedbackModal()
+    },
+    dismissFeedbackModal() {
+      this.feedbackModalOpen = false
+    },
+    showFeedback(title, introduction, messages = []) {
+      this.feedbackTitle = title
+      this.feedbackIntroduction = introduction
+      this.feedbackMessages = messages
+      this.feedbackModalOpen = true
     },
     waitForSuccessMessage() {
       return new Promise(resolve => {
@@ -237,8 +329,64 @@ export default {
         this.getSendEmailResponseData(error)?.code === 'moderation_rejected'
       )
     },
+    getServerValidationMessages(error) {
+      if (this.getSendEmailErrorStatus(error) !== 400) return []
+
+      const errorMessage = this.getSendEmailResponseData(error)?.error
+      const messages = {
+        'senderName is required.': 'Your full name is required.',
+        'senderEmail must be a valid email address.':
+          'Enter a valid email address.',
+        'messageBody is required.': 'A message is required.',
+        'messageBody is too short.':
+          'The message must be at least 5 characters.',
+        'messageBody is too long.':
+          'The message must be 8,000 characters or fewer.',
+        'Recipient was not found or does not have a public email address.':
+          'The selected recipient is no longer available for public email.',
+      }
+
+      return [
+        messages[errorMessage] ||
+          'Some information was not accepted. Review each field and try again.',
+      ]
+    },
+    showSendFailure(error) {
+      const validationMessages = this.getServerValidationMessages(error)
+      if (validationMessages.length) {
+        this.showFeedback(
+          'Please check your message',
+          'Correct the following fields before sending:',
+          validationMessages
+        )
+        return
+      }
+
+      if (this.isModerationRejection(error)) {
+        this.showFeedback(
+          'Message not sent',
+          "Your message couldn't be sent through this form.",
+          []
+        )
+        return
+      }
+
+      this.showFeedback(
+        'Email not sent',
+        this.getSendEmailFailureMessage(error),
+        []
+      )
+    },
     async sendEmail(captchaToken = '') {
-      if (!this.isValid) return
+      const validationMessages = this.getFormValidationMessages()
+      if (validationMessages.length) {
+        this.showFeedback(
+          'Please check your message',
+          'Correct the following fields before sending:',
+          validationMessages
+        )
+        return
+      }
 
       const endpoint = this.resolveSendEmailEndpoint()
       const sendEmailClient =
@@ -247,8 +395,10 @@ export default {
 
       if (!sendEmailClient) {
         console.error('Send email endpoint is not configured.')
-        alert(
-          'Email sending is not configured for this environment. Please try again later.'
+        this.showFeedback(
+          'Email not sent',
+          'Email sending is not configured for this environment. Please try again later.',
+          []
         )
         return
       }
@@ -269,14 +419,7 @@ export default {
       } catch (error) {
         this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
-        if (this.isModerationRejection(error)) {
-          this.sending = false
-          this.sendRejected = true
-          await this.waitForSuccessMessage()
-          this.$emit('dismiss')
-          return
-        }
-        alert(this.getSendEmailFailureMessage(error))
+        this.showSendFailure(error)
       } finally {
         this.sending = false
       }
@@ -305,6 +448,22 @@ export default {
     margin: 0;
     text-align: center;
   }
+
+  &__feedback {
+    padding: space(1);
+
+    p {
+      margin-top: 0;
+    }
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  &__feedback-modal :deep(.asd20-modal__footer) {
+    padding: space(0.5);
+  }
 }
 
 @media (min-width: 1024px) {

package/src/components/utils/Recaptcha.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="asd20-recaptcha"
-    @click.capture="handleClick"
+    @click="handleClick"
   >
     <slot />
     <div