Actually fix rendering errors on signup failure

components/blocks/cards/SignUpCard/SignUpCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type Ref, ref } from 'vue'
+import { sentenceCase } from 'lib/helpers'
 import BaseInput from 'elements/inputs/BaseInput/BaseInput.vue'
 import HideShowPassword from 'elements/buttons/HideShowPassword/HideShowPassword.vue'
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
@@ -98,7 +99,10 @@ async function signup() {
     },
     {
       onError: (val: any) => {
-        errorText.value = `Error(s): ${val.error.title as string}`
+        const errors = Object.values(val.error?.errors) as string[][]
+        errorText.value = `Error(s): ${errors
+          .map((errorType) => errorType.map(sentenceCase))
+          .join(', ')}`
         showErrorsText.value = true
       },
       onOkay: () => {

lib/helpers.ts

@@ -32,7 +32,25 @@ export function isValidationProblemDetails(o: unknown): boolean {
   )
 }
 
+/**
+ * Takes a string and returns a sentence case version of it.
+ *
+ * **Note:** This function assumes that the string is camelCase or PascalCase.
+ *
+ * @param string The string to convert.
+ * @returns string
+ */
+export function sentenceCase(string: string): string {
+  let words = string.split(/(?=[A-Z])/)
+  words = words.map((word) => word.toLowerCase())
+
+  let sentence = words.join(' ')
+  sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1)
+  return sentence
+}
+
 export default {
   isProblemDetails,
   isValidationProblemDetails,
+  sentenceCase,
 }