@asd20/ui-next 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.6.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.5.0...ui-next-v2.6.0) (2026-05-04)
+
+
+### Features
+
+* add rate limit to emails and associated messaging ([66e4099](https://github.com/academydistrict20/asd20-ui-next/commit/66e40994ac924a9dad184227beae4dded0dbf2d9))
+
 # [2.5.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.4.3...ui-next-v2.5.0) (2026-05-04)
 
 

package/package.json

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

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

@@ -32,24 +32,37 @@
         required
         @validated="validationErrors.messageBody = $event"
       />
-      <Recaptcha
-        sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
-        :load-recaptcha-script="true"
-        size="invisible"
-        @verify="captchaVerified"
+      <div
+        class="asd20-compose-email-modal__submit"
+        aria-live="polite"
       >
-        <asd20-button
-          :disabled="!isValid || sending"
-          label="Send"
-          horizontal
-          centered
-          bordered
+        <Recaptcha
+          v-if="!sending && !sendSucceeded"
+          sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+          :load-recaptcha-script="true"
+          size="invisible"
+          @verify="captchaVerified"
+        >
+          <asd20-button
+            :disabled="!isValid"
+            label="Send"
+            horizontal
+            centered
+            bordered
+          />
+        </Recaptcha>
+        <asd20-spinner
+          v-else-if="sending"
+          size="sm"
         />
-      </Recaptcha>
-      <asd20-spinner
-        v-if="sending"
-        size="sm"
-      />
+        <p
+          v-else
+          class="asd20-compose-email-modal__success"
+          role="status"
+        >
+          Your message was sent.
+        </p>
+      </div>
     </Asd20Viewport>
   </asd20-modal>
 </template>
@@ -87,6 +100,7 @@ export default {
     },
     composing: false,
     sending: false,
+    sendSucceeded: false,
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -102,6 +116,11 @@ export default {
       )
     },
   },
+  watch: {
+    open(value) {
+      if (value) this.resetSendState()
+    },
+  },
   methods: {
     resolveRuntimeConfig() {
       const runtimeConfig =
@@ -129,7 +148,8 @@ export default {
       )
     },
     validateEmailAddress({ value, validationErrors }) {
-      const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+      const pattern =
+        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       const regex = RegExp(pattern)
       if (!regex.test(value))
         validationErrors.push('A valid email address is required')
@@ -149,15 +169,36 @@ export default {
     captchaVerified(response) {
       if (response) this.sendEmail(response)
     },
+    resetSendState() {
+      this.sending = false
+      this.sendSucceeded = false
+    },
+    waitForSuccessMessage() {
+      return new Promise(resolve => {
+        setTimeout(resolve, 1200)
+      })
+    },
+    getSendEmailErrorStatus(error) {
+      if (error?.response?.status) return Number(error.response.status)
+      if (error?.status) return Number(error.status)
+
+      const statusMatch = String(error?.message || '').match(/\b(\d{3})\b/)
+      return statusMatch ? Number(statusMatch[1]) : null
+    },
+    getSendEmailFailureMessage(error) {
+      if (this.getSendEmailErrorStatus(error) === 429) {
+        return 'We could not send your message right now. Please wait and try again later.'
+      }
+
+      return 'Something went wrong while sending your email. Please try again later.'
+    },
     async sendEmail(captchaToken = '') {
       if (!this.isValid) return
 
       const endpoint = this.resolveSendEmailEndpoint()
       const sendEmailClient =
         this.$sendEmail ||
-        (endpoint
-          ? async (message) => await sendEmail(message, endpoint)
-          : null)
+        (endpoint ? async message => await sendEmail(message, endpoint) : null)
 
       if (!sendEmailClient) {
         console.error('Send email endpoint is not configured.')
@@ -168,6 +209,7 @@ export default {
       }
 
       this.sending = true
+      this.sendSucceeded = false
       try {
         await sendEmailClient(
           Object.assign({}, this.emailMessage, {
@@ -175,12 +217,14 @@ export default {
             captchaToken,
           })
         )
+        this.sending = false
+        this.sendSucceeded = true
+        await this.waitForSuccessMessage()
         this.$emit('dismiss')
       } catch (error) {
+        this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
-        alert(
-          'Something went wrong while sending your email. Please try again later.'
-        )
+        alert(this.getSendEmailFailureMessage(error))
       } finally {
         this.sending = false
       }
@@ -196,6 +240,19 @@ export default {
   & :deep(.asd20-modal__content .asd20-viewport) {
     padding: space(1);
   }
+
+  &__submit {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 3rem;
+  }
+
+  &__success {
+    font-weight: 600;
+    margin: 0;
+    text-align: center;
+  }
 }
 
 @media (min-width: 1024px) {

package/src/helpers/sendEmail.js

@@ -9,7 +9,7 @@ function emailMessageIsValid(emailMessage) {
   )
 }
 
-export default async function(emailMessage, endpoint) {
+export default async function (emailMessage, endpoint) {
   // Check to see if the parameters is valid
   if (!emailMessageIsValid(emailMessage))
     throw new Error(
@@ -20,13 +20,15 @@ export default async function(emailMessage, endpoint) {
     await axios.post(endpoint, emailMessage)
   } catch (error) {
     if (error.response) {
-      throw new Error(
+      const sendError = new Error(
         `A ${
           error.response.status
         } error occurred while attempting to send email: ${JSON.stringify(
           error.response.data
         )}`
       )
+      sendError.response = error.response
+      throw sendError
     } else {
       // Something happened in setting up the request and triggered an Error
       throw new Error(