:art: added responsive row and column with wrap for ProfileCardList

frontend/src/components/ProfileCardList.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-section.profile-card-list.xs12.w-flex.column
-    article
+section.profile-card-list.xs12.w-flex
+    article.w-flex.xs-col.sm-row.sm-wrap
         ProfileCard.match-layout(
             :aspects='aspects'
             :card='card'
@@ -8,7 +8,10 @@ section.profile-card-list.xs12.w-flex.column
             :key='`${card.pid}-${i}`'
             v-for='(card, i) in cards'
         )
-        w-button.pa8.more-results(bg-color='primary' @click="loadMoreResults()")
+        w-button.pa8.more-results(
+            @click='loadMoreResults()'
+            bg-color='primary'
+        )
 </template>
 
 <script setup>
@@ -36,13 +39,27 @@ const props = defineProps({
     },
 })
 
-const loadMoreResults = () => { emit('loadMore') } // TODO update to scroll
+const loadMoreResults = () => {
+    emit('loadMore')
+} // TODO update to scroll
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
+
 .profile-card-list
     > header > .w-select >.primary
         margin-top: 0
-.more-results
-    margin-bottom: 2em
+
+@media (min-width: $tablet)
+    section.profile-card-list.xs12.w-flex > article
+        display: flex
+        flex-wrap: wrap
+        flex-direction: row
+
+@media (max-width: $tablet)
+    section.profile-card-list.xs12.w-flex > article
+        display: flex
+        flex-wrap: wrap
+        flex-direction: column
 </style>

frontend/src/entities/survey/survey.answer.validator.js

@@ -7,17 +7,8 @@ const answerValidator = {
         minDomainSegments: 2,
         tlds: { allow: domains },
     }),
-    // Comment out and uncomment below for more robust password testing
-    password: Joi.string().min(14).max(30),
-    // TODO: consider using a more robust library for password validation
-    // password: Joi.string()
-        // .min(14)
-        // .max(30)
-        // .pattern(
-            // new RegExp(
-                // '^(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])[a-zA-Z0-9!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?]{14,}$',
-            // ),
-        // ),
+
+    password: Joi.string().min(10).max(30).pattern(new RegExp('[a-zA-Z0-9]+')),
     // TODO: Change if going international (only works in usa)
     zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
     seeking: Joi.string(),
@@ -31,7 +22,11 @@ const answerValidator = {
     distance: Joi.string()
         .min(4)
         .max(15)
-        .pattern(new RegExp('^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$')),
+        .pattern(
+            new RegExp(
+                '^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$',
+            ),
+        ),
     blurb: Joi.string().max(200),
     value: Joi.string(),
     aspect: Joi.number(),

frontend/src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 main.view--home
-    article.w-flex.column.align-center
+    article.w-flex.sm-column.md-row.align-center
         template(v-if='isLoading')
             w-spinner(bounce)